D3.js is a small, open-source JavaScript visualization library for manipulating HTML and SVG documents based on data

learn more… | top users | synonyms

2
votes
1answer
213 views

Showing link for every city at different zoom levels using Leaflet?

I have a Leaflet map that I am using to render a map of the U.S. The map will have specific zoom levels. For example, when the map first loads it will show major U.S. cities. Then if you zoom in it ...
4
votes
1answer
2k views

Texture overlay in d3 map

D3 map can be drawn and colored as shown in this example : http://techslides.com/demos/d3/d3-world-map-zoom-points.html. I need to overlay a texture or image within the boundary of a given country. Is ...
5
votes
4answers
1k views

Methods to Convert .SVG File to GeoJSON

Question How do I convert an SVG file to GeoJSON format? Desired Outcome: I want to make a choropleth map using something like D3.js, or any of the other libraries out there. Challenge: I have an ...
0
votes
0answers
16 views

Not able to draw line in Kendo Map using d3.js

I am using Kendo Map and d3.js in my project,I am able to show the markers and able to draw the lines between them,I am having a requirement like I should be able to draw a line anywhere in the ...
14
votes
3answers
653 views

How to improve cartographic visualization of overlapping polygons?

I need some advice about how to improve the visualization of cartographic information. User can select different species and the webmapping app shows its geographical distribution (polygonal degree ...
1
vote
0answers
16 views

D3 problem on placing a circle on area

I am using d3. I normally constructed d3.svg.area().interpolate("basis") then I want to put a circle on outline of the area. But, because of interpolate("basis"). The outline is not at exact place. ...
0
votes
0answers
22 views

A problem with d3 linearGradient in Firefox

I run into a problem with d3 linearGradient in firefox. It is not displayed. But, same code runs well in chrome. here is the relevant code: svg.append("linearGradient") ...
2
votes
3answers
2k views

How to determine intersection between geojson feature and given coordinates?

I'm overlaying a leaflet map with features of geojson, fetched with d3 and added as SVG elements to the DOM. My geojson contains too many features to render at once, so my goal is to add to the map ...
5
votes
1answer
35 views

Attempting to map GeoJson file producing issues

I've been trying to get this to work for some time now. The end goal is to produce a map I can show using d3.js, however d3 is butchering the map and producing an undesirable image. The code is as ...
4
votes
1answer
105 views

D3: center a map feature using correct latitude and longitude, without rotation?

The following is a map of Chicago which I've created in D3.js, and the JS code to render it. I had a very hard time centering Chicago within my viewfinder (the white box). After much trial and ...
2
votes
0answers
38 views

How to remove projection in terminal from .shp file with valid .prj available

I have .prj, .shp, .sbn, .sbx, .shx, .dbf files where the content of the .prj file is the following: ...
1
vote
0answers
51 views

Draw d3 svg circles on openlayers 3 maps

I am new to openlayers and d3. I tried following example [http://openlayers.org/en/master/examples/d3.html] I see we need to add d3 features on a canvas and project it on an openlayers Vector layer. ...
1
vote
0answers
60 views

Plot a bubble chart in d3.js by giving an local geojson file as an input

This is the content in my geojson file { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "profit": 326, "npa": 174.000000 } }, { "type": ...
1
vote
1answer
176 views

D3 - Loading data from JSON doesn't work

I'm starting to learn D3 and it seems like a powerful framework. I'm trying load the data from json. I can see data but nothing happen after loading data into D3 library. There are no error messages ...
1
vote
0answers
34 views

getting started designing satellite projection raster

How do I get started designing a map with a satellite projection like this:http://bl.ocks.org/joyrexus/6619251. So far using d3 I've created a map of North Africa w/ topojson and tiles from Mapbox but ...
1
vote
0answers
45 views

d3.js Projection for Washington DC area

I'm making a small thematic map of the Washington DC area using d3.js. Everything I've tried "tilts" the square of DC. Is there a d3 projection that will put DC at the right angle? ...
3
votes
1answer
334 views

D3 missing zoom Choropleth + Raster

Following this example and Choropleth from Mike's site I am trying to get: image + vector + choropleth = my map As you can see I lost the zoom capability on the vector layer. I have been trying ...
5
votes
0answers
265 views

Any Examples of D3.brush() used with Leaflet?

I have a leaflet map that I have placed an SVG "on top of" using the leaflet overlay pane. I want to add a D3 brush to the overlay pane that will then update a separate chart. I've looked around for ...
4
votes
1answer
2k views

display a choropleth map using D3 and Leaflet

I am trying to get a leaflet map to display a choropleth map using d3. I have written this code using samples I have found however the map just displays as the black fill, not the color classes I ...
8
votes
1answer
516 views

demers cartogram

How do you make a demers cartogram from a shapefile/topojson/geojson? I have tried scapetoad and indiemapper and i can not duplicate what you find on the links below. ...
0
votes
1answer
158 views

GRIB data interpolation

I've been wrangling around in GFS grid based data (GRIB - mostly 0.5 degree resolution). I'm interested in plotting these by converting to geojson with ogr2ogr (which is quite easy). However, is there ...
1
vote
0answers
159 views

OpenLayer 2 and D3.js:Set the rigtht size of the SVG overlay

I am following an example of D3.js used in conjunction with OpenLayers 2 to display GeoJSON on a map. http://bl.ocks.org/mbertrand/raw/5218300/quakes.html In this example, the author set the bounds ...
0
votes
1answer
22 views

Finding contiguous geographical units

On a map with territorial units, I wish to be able to compare a property of one territorial unit with those surrounding it. How can I find the contiguous territorial units of a specific one ?
2
votes
1answer
30 views

Map with style (color, border) depending on property value

Using Leaflet combined with D3, I'm trying to apply a style (e.g. colorize or draw a border) to units that share a same property value. Further explanations Context: townships in France are grouped ...
1
vote
1answer
602 views

GeoJson and D3.js multipolygon

I have this geometric shape file, so no map of a city. I store the two Shapefiles in a GIS database as a geometric form. Now, I want to visualize the geojson data. I created the GeoJson data ...
3
votes
1answer
205 views

Simplifying TopoJSON causes leak of Natural Earth in d3

I'm working with topoJSON and D3 to display Natural Earth data on a globe. Obviously, we need to simplify our geometries while still keeping borders consistent. We've created a script as based on ...
0
votes
0answers
115 views

Presenting specified country only based on latitude and longitude data passing by d3 user?

I am using d3/topojson and I'd like to color (or present) only two countries where two users are located.(The location of a user is represented by latitude and longitude.) I am modifying code from ...
5
votes
3answers
4k views

Convert GML to GeoJSON

I have downloaded a GML file from Statistics Canada and would like to convert it into GeoJSON to use parts of it in a D3 visualization on the web. However, I did not find a converter that would do ...
3
votes
1answer
260 views

D3 javascript and GeoJSON: lines in Stockholm map very strange

All the code and shapefiles that I'm using are available in this GitHub repo. I'm trying to draw a map of Stockholm with D3. The shapefile looks ok in QGIS: However, drawing the GeoJSON produces ...
1
vote
1answer
652 views

Multiple GeoJSON Layers

I have a leaflet map of the US and I would like to toggle between zip codes and county shapes. There seems to be no tutorials on how to achieve this in the documentation or an other forums I have ...
1
vote
0answers
79 views

Matching d3.js geo projection with pyproj Proj4

I am having trouble figuring out the correct notation for Proj4 projections with pyproj. I got the following projection in d3.js and I want to match it with pyproj on my backend to send a background ...
1
vote
1answer
164 views

ogr2ogr problem mapping shapefile to geojson ETRS89 / Poland CS92

I'm trying to convert official boundaries of administrative regions of Poland from official governmental site (codgik.gov.pl). I want to use those data because they are official ones, and set contains ...
7
votes
1answer
319 views

Moving a shape around the earth while maintaining the proper projection

What is the transformation needed to be taken on every data point of a shape to rotate that shape around the globe. I'm trying to figure out the math behind this kind of transformation so I can ...
1
vote
1answer
588 views

Firefox and D3: Zoom + Pan bug

I have a simple code here some map with zoom+pan effect. It work fine on Opera, Chrome even IE. But Firefox do not show it.- If you open "Inspector" panel, you'll see has same values (translation, ...
3
votes
1answer
2k views

D3 adding topojson - no data visible

Yesterday I asked what would be the best method of creating an overlay in a web map that would allow for some interactivity. Create interactive map with no server Thanks to a variety of people who ...
1
vote
1answer
120 views

Good projections for Middle East and North Africa in D3?

I'm a data visualizer who's mostly worked with US data, and I'm familiar with AlbersUSA project. However, I'm going to be doing a series of graphics on the Middle East. Any suggestions or interesting ...
1
vote
0answers
102 views

Rectangular bounding box curved in D3.js

I am trying to project polygons to a map with a static background image using D3.js. The polygons looked slightly off in relation to the background so I drew the bounding box of the image, and sure ...
3
votes
0answers
312 views

Align vector and raster layers with D3

I have a geocoded raster image that I want to use as the background to a vector map with D3.js. The screenshot shows the layers in QGIS (grey is raster). Here's the markup for the map: <div ...
0
votes
2answers
366 views

Converting area of a polygon from steradians to square kilometers using D3.js?

How can I find the area of a polygon in square km using D3.js? I'm not even really sure whether to use d3.geo.path.area or d3.geo.area. Here is my code (JSFiddle): var d = { "type":"Feature", ...
0
votes
0answers
63 views

CartoDB example for Airport routes?

I am a developer and I wanted to make a website where I can draw route from on Airport location to another airport location. But the route should be using D3.js or carto db. I am new in this ...
0
votes
2answers
164 views

Responsive d3 choropleth showing commuter flows between counties?

I would like to create a responsive choropleth using d3. When one clicks on a county, the choropleth updates to reflect commuter flows between that county and all others. Example input data looks like ...
3
votes
0answers
76 views

Finding centroids for icosahedral gnomonic projection?

I've been trying to create an icosahedral gnomonic projection, like this example by Jason Davies or this one (the Fisher projection). The method that I initially used was using the centroid of each ...
1
vote
0answers
101 views

JSON Layer does not show when .setview Changes

I've set a Mapbox map with a geoJSON layer overlaying it. The problem is that with the default set values, the json layer shows up just fine. However, If I change the .setView too much, the json layer ...
2
votes
1answer
313 views

How to nest GeoJSON features based on their geometry in javascript?

I have a GeoJson object with polygon features. Some of them have same geometry. They look like this: squareData = { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": ...
1
vote
1answer
163 views

Add multiple strokes to Leaflet geojson feature path

Wondering if it's possible to add multiple strokes to a polygon or line feature (the same thing could apply to multiple fills for polygons too). The leaflet documentation on the L.Path style options ...
3
votes
0answers
29 views

Creating a distance overlay that is computed by the distance of points/lines and recalculated on zooming

I created a fictional map and visualized it with d3. Now I would like to show a scale/rule so that the user can see which distance (kilometers,meters) he is currently using. I was thinking about ...
2
votes
1answer
3k views

D3.js cannot render my geoJSON file

I've been trying to draw maps using the d3.js library in a manner similar to that below. <script> //Width and height var w = 500; var h = 300; //Define path ...
4
votes
1answer
365 views

d3 + Leaflet apply class value from geojson data

I have a geojson file that I'l able to draw just fine with D3 + Leaflet. I'm having trouble applying a class to the svg objects with a value from the geojson file. Each feature in the geojson file has ...
2
votes
2answers
4k views

How do you open shapefiles with ogr2ogr [closed]

I'm following along the D3 tutorial, and on this line: ogr2ogr \ -f GeoJSON \ -where "adm0_a3 IN ('GBR', 'IRL')" \ subunits.json \ ne_10m_admin_0_map_subunits.shp run into the following ...
0
votes
0answers
74 views

Topojson Rendering Problem

This block has a topojson file that's being rendered such that each polygon fills the world: http://bl.ocks.org/emeeks/6bc43691f631a4097d05 It includes the geojson file that it was derived from, ...