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

learn more… | top users | synonyms

15
votes
3answers
683 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 ...
12
votes
3answers
6k views

D3 for maps---at what stage to bring in data to the geo?

I'd like to map a world choropleth for display with D3, a la: http://bl.ocks.org/mbostock/4206573 http://bl.ocks.org/jasondavies/4188334 I have a dataset I'd like to display that's keyed to ISO-...
12
votes
3answers
9k views

How to create a GeoJSON that works with D3?

I'm simply trying to convert a .shp file to a geoJSON format using: ogr2ogr -f geoJSON output.json input.shp After executing the command nothing seems to be wrong. Here's an excerpt from the output....
11
votes
1answer
14k views

How can I render latitude-longitude coordinates on a map with D3?

I am trying to overlay dots of arbitrary sets of longitude-latitude coordinates on top of a United States map. So far I have found the D3 cartography example, but when I try to place dots on X,Y ...
8
votes
1answer
585 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-...
7
votes
3answers
908 views

Should I use a discrete or continuous scale for coloring a chloropleth?

I am making a choropleth for an upcoming local race using D3. There are two candidates running for an election. For any given polygon on my map, if the red candidate has more votes, the color should ...
7
votes
1answer
338 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 ...
6
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 ...
6
votes
2answers
6k views

d3.geo.path() to draw a path from GIS coordinates

Trying to take GIS data of the zip codes of the Bronx and turn it into a map using d3.js. But I am having trouble rendering. Could you show me proper use of d3.geo.path() ? [ [ -73.84463693999993, 40....
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 ...
5
votes
3answers
960 views

Adding Properties to GeoJSON File

I have a GeoJSON file of the country of Haiti with the administrative boundaries for communes (i.e. counties). Here is the file: https://rawgit.com/mattbowlby/bf5243ab097e50eb8864/raw/...
5
votes
1answer
51 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 ...
5
votes
0answers
307 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
475 views

D3 to match this QGIS projection?

I have a map of Finland in QGIS, which says CRS = ETRS89 / ETRS-TM35 (Authority ID = EPSG:3047). I'm trying to show the map with D3, and can't quite match the borders/projection. The black one is ...
4
votes
2answers
2k views

How to load big geo-data file into web application

I am building a web app where I show details in map. I load data using geojson file (190 mb). I was looking in different possibilities to show the data, here there are: Leaflet GeoJSon: it should ...
4
votes
3answers
1k views

How to properly convert landmass NaturalEarth data into GeoJSON?

100% Newbie. I've been following Mike's d3 Map Tutorial and I've come up against a challenge. I guess my question essentially boils down to: how does one generate the proper GeoJSON/TopoJSON files ...
4
votes
2answers
312 views

“Hello World” introduction for ubuntuGIS?

Is the GIS equivalent of "Hello world!" = "You are here?" I installed ubuntuGIS recently, but I'm a little overwhelmed navigating the network of many packages to begin accomplishing simple things. I'...
4
votes
1answer
198 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,...
4
votes
1answer
380 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 ...
4
votes
2answers
875 views

Populating D3 Graph with Cartodb

I have been looking at D3 and following along with their basic tutorials. In the documentation you can use json files to create graphs, however I am confused on how to make the connection from my ...
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 ...
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 ...
3
votes
1answer
2k views

Either GeoJson to TopoJson conversion problem, or projection-issue with D3.js

My 'handcrafted' cartogram (How to create contiguous area cartograms in QGIS or R?) is ready to embed in code - I want to present it online with D3.js. Therefore I produced a topoJSON file of it - ...
3
votes
1answer
313 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 ...
3
votes
1answer
3k views

Conversion from Shapefile to TopoJSON format results in incorrect map when rendered using d3js

I am trying to build a map of Canada showing FSA boundaries using d3js. I got shape data from Statistics Canada [http://www12.statcan.gc.ca/census-recensement/2011/geo/bound-limit/bound-limit-2011-eng....
3
votes
1answer
367 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 ...
3
votes
2answers
765 views

how we create line between two cordinates on polymap?

I am working on d3 and polymaps, I plot map and create circle on the given latitude and longitude which retrieves from the JSON file but now I want to connect those circles with line. I tried to do it ...
3
votes
1answer
795 views

SVG control not visible on top of Leaflet.js

I'm using Leaflet 0.7.1 and want to draw a radial menu (like openstreetmap's iD editor) on top using d3. Some examples I found use Leaflet's overlayPane to append the svg element to: var svgContainer=...
3
votes
1answer
421 views

Converting from shp to geojson fails

I'm following Mike Bostock's tutorial, let's make a map, but for a map of Mexico. I want to display state boundaries. I was able to get the map of Mexico from Natural Earth Data's world maps. My ...
3
votes
1answer
150 views

Troubleshooting with Tiger for d3 — is this the wrong projection? Why's it look like this?

UPDATE: Solved, sort of … I downloaded the file afresh and tried feeding it through ogr2ogr and topojson again … and wouldn't you know … after a while it worked. I think I was possibly not setting an ...
3
votes
1answer
207 views

CartoD3 chart not displaying - CartoDB

I have tornados table with columns damage,date,month . I used the following code to create a barchart . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/...
3
votes
1answer
213 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 ...
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 ...
3
votes
0answers
344 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="...
3
votes
0answers
81 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 ...
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 ...
2
votes
1answer
540 views

Issue with using TopoJSON server API to return TopoJSON object with properties

I am creating a node application and using TopoJSON server API reference (see the link below) to convert a GeoJSON object to a TopoJSON object. TopoJSON server API reference I used these three lines ...
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 ...
2
votes
1answer
136 views

How to render iD editor-style streetmaps?

Is there a simple way to render OSM data (let's start with just streets and names for a single metro area) client side as nodes and edges like the new iD editor? I'm comfortable with d3 but am ...
2
votes
0answers
44 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",...
2
votes
1answer
32 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 ...
2
votes
0answers
110 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
358 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": "urn:...
2
votes
1answer
231 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 ...
2
votes
0answers
238 views

Filtering a Topojson on server-side. Which part of topology I need?

I have a big Topojson which I want to avoid loading it at page load. Instead I would like to parse on server-side at user request, sending back chunks of this original Topojson to be ploted. So I ...
2
votes
0answers
887 views

Topography: How to convert raster into vector layers?

(nb:This project is part of the #Wikipedia #wikimaps project) 1. Question: How to create vector topographic maps from raster image ? How to convert raster topographic image into closed vector ...
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 ...
1
vote
1answer
934 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
1answer
302 views

Is there a standard projection for Sub-Saharan Africa?

With the help of d3.js, TopoJSON, and data from Glottolog I have made this map of Bantu languages that exist in Sub-Saharan Africa. I've used the standard Mercator projection so far. I know that ...