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
12 views

Which D3 microlibraries are required to load TopoJSON/GeoJSON files and translate into path definitions?

D3 v4 is modular, based on around 30 "microlibraries", intended to allow discrete functions to be broken out and used on their own. I'm trying to assemble a minimal set of D3 microlibraries to do the ...
1
vote
1answer
23 views

DC.js - barChart not filtered on click of geoChoroplethChart

I have a choropleth map of counties, and a bar chart showing population of each county on the map. When I click on the bar chart the map is filtered and redrawn to show the selected bar, but when I ...
2
votes
1answer
240 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 ...
0
votes
0answers
32 views

TopoJSON rendering issues using D3

I have rendered the world map using world-110m topojson. I directly used the code provided by Jakob on D3 mapping tutorial - http://www.digital-geography.com/d3-js-mapping-tutorial-1-set-initial-...
1
vote
1answer
200 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 ...
0
votes
0answers
22 views

SVG layer using d3 on ol3 map creates problem

when I created a svg layer using d3 on ol3 map, I saw that the svg layer intersected with zoom-in control. Then as I click for zoomin-in, it doesn't function. What do you advice? regards
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 ...
0
votes
0answers
38 views

Using ordnance survey data to make a D3 map?

I would like to display a map of the UK Westminster Parliamentary Constituencies in D3 with a width of 980px. I have downloaded and extracted the ordnance survey ESRI shapefiles from here: https://...
0
votes
0answers
17 views

Zone map by interpolation of point data using d3js

Is it possible to generate a DEM (elevation model) or any zone map by interpolation of point data using d3js? Where can I find an example?
15
votes
3answers
691 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
2answers
60 views

D3 can't render GeoJson file (Simple structure in Montreal, Canada) created in QGIS

I am attempting to render SVG and attach it to a div with id="map". I can do this successfully with GeoJson which I acquired from this tutorial: http://maptimeboston.github.io/d3-maptime/#/1 Excerpt: ...
1
vote
0answers
18 views

Can we combine SVG Overlay with MarkerCluster v3?

I have searched here and there on how to prevent the overlapping circle (svg) layer created from json file. Poor me, no luck till now. Since I doesn't know how to prevent the overlapping circle I ...
7
votes
4answers
2k 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
36 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 map....
1
vote
0answers
21 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
36 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
61 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
268 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 error,...
2
votes
0answers
49 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: PROJCS["S-JTSK_Krovak_East_North",GEOGCS["GCS_S_JTSK",DATUM["D_S_JTSK",SPHEROID["Bessel_1841",...
1
vote
0answers
130 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
88 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
234 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
37 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
75 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? https://github....
3
votes
1answer
373 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
320 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
601 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. http://graphics.latimes.com/2012-...
0
votes
1answer
201 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
209 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
26 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
33 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
761 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
216 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
140 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 ...
6
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
340 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
1k 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
91 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
211 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
344 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
655 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
137 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
114 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
352 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 class="...
0
votes
2answers
408 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
67 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
193 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 ...