score:8
Accepted answer
I had a look at your problem. The problem seems to be with the map. I ran into the same problems as you have, although I had no issue creating a map from the older (pre 2008) files on the site you linked to. Mapshaper (mapshaper.org) had no problem plotting both graphs, so the problem seems to be with d3 and this specific map. I have no time to look into the reason for this.
Simplifying the map using mapshaper (which is something you might want to do anyway) seems to result in a map that can be correctly drawn:
ogr2ogr -f GeoJSON map_tmp.json spd_beats_wgs84.kmz
mapshaper -p 0.5 --repair -o map.json map_tmp.json
I can then draw the map using the following code:
var width = 800;
var height = 500;
var vis = d3.select("#vis").append("svg")
.attr("width", width).attr("height", height);
d3.json("map.json", function(map) {
var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
var path = d3.geo.path().projection(projection);
var bounds = path.bounds(map);
var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
(bounds[1][1] - bounds[0][1]) / height);
var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
(height - scale * (bounds[1][1] + bounds[0][1])) / 2];
projection.scale(scale).translate(transl);
vis.selectAll("path").data(map.features).enter().append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
});
Resulting in:
Source: stackoverflow.com
Related Query
- D3 - Large GeoJSON File does not show draw map properly using projections
- d3 map - After using blur filter, zoom does not work properly
- Importing local json file using d3.json does not work
- Why does D3.js not display my geoJSON file ?
- Rendering GeoJson file in D3 v4 is not scaling properly
- TopoJSON map not rendering properly using D3
- D3 line chart does not show tool tip and data points properly
- Using d3 to map geojson distribution data with projections
- D3.js horizontal line chart does not show tool tip properly
- D3.js svg does not draw Map
- GeoJson element rendered using D3 not scaling correctly on Leaflet map
- Map of Massachusetts does not show counties in it in d3
- NVD3 stacked bar chart does not show x-axis properly
- Displaying map using d3.js and geojson
- IE11 does not accept SVG height and width when using D3
- Renderer2 does not render SVG element while using d3 js - Angular 4
- Geojson map not showing up
- Curved geojson polygon edges on map projections
- D3js not projecting longitude/latitude points properly onto topojson map
- Venue/Indoor Map using D3.js and Geojson
- How to change point size using geojson file in D3
- D3 not rendering map data in JSON file
- How to fetch data from json file to draw a dynamic graph by using d3.js
- D3 Typescript error when using d3.mouse: 'this' implicitly has type 'any' because it does not have a type annotation
- d3 line does not draw
- d3 .tsv file does not work
- d3 does not support cross-domain request even though after using SimpleHTTPServer
- Text appended to path does not show
- Pie chart not updating properly when using brush in series chart
- Displaying a JSON file as a map using D3js v4
More Query from same tag
- Converting shapefiles and geoJson to TopoJson and/or using geo2topo
- How to update data elements within a transition without deleting a re-creating everything?
- D3js: How to load CSV data and convert it into nvd3.js object?
- I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error
- d3 enumerating from the middle of a list?
- d3 transform-origin with two needles in a clock
- Spread D3.js legend on two columns
- Multi Line graph tooltip in d3 giving error
- Color overlapped portions of multi line chart
- merging arraying in d3.js
- Scale/zoom D3 layer on Leaflet map to layer bounds
- jQuery: event delegation between different parents
- Is it possible to use D3.tree() with a dataset that includes parents instead of children?
- D3 Line with JSON Data, Not Rendering
- How do I access the x- and y-scale of the d3 plot in nvd3?
- How to divide a D3 selection into groups by using the selection.filter method in a loop
- d3 Cumulative Line Chart
- What does d3.select(this) return?
- Stepline Chart with D3.js with individual lines
- d3.js 4.2 first element in selection not binding
- Why does d3 say some nodes are missing after applying link force?
- d3.js custom tick values
- Why is my angular-nvd3 multiChat chart not rendering here?
- Additional tooltip text using tipsy and d3.js
- Viewbox of the map SVG is smaller than of a circle marker to display
- Custom Colors for networkD3 sankeyGraph()
- Flip d3js svg line
- Append to svg group on drag drop
- Why is .delay() not iterating properly?
- d.label is reading undefined on D3 Line chart