The first problem is that your GeoJSON file isn’t in degrees [longitude°, latitude°], otherwise known as EPSG:4326 or WGS 84. To convert your GeoJSON file to WGS 84, you first need to create a projection file, say
albers.prj so that you can tell OGR what the source projection is.
+proj=aea +lat_1=52 +lat_2=64 +lat_0=0 +lon_0=105 +x_0=18500000 +y_0=0 +ellps=krass +units=m +towgs84=28,-130,-95,0,0,0,0 +no_defs
Then, “unproject” the GeoJSON file by converting it to WGS 84:
ogr2ogr -f GeoJSON -s_srs albers.prj -t_srs EPSG:4326 map_rus_wgs84_geo.json map_rus_geo.json
Now you can convert to TopoJSON in WGS 84, rather than projected coordinates. I’ve also taken the liberty of doing some simplification:
topojson -o map_rus_wgs84_topo.json -s 1e-7 -- russia=map_rus_wgs84_geo.json
The second problem is that your projection definition in D3 is incorrect. The d3.geo.albers projection has a default rotate and center that’s designed for a U.S.-centered map, so in addition to defining the center you’ll also need to override the default rotation. In fact, the +lon_0 (central meridian) projection parameter maps to the projection’s rotation, not the projection’s center. Giving:
var projection = d3.geo.albers() .rotate([-105, 0]) .center([-10, 65]) .parallels([52, 64]) .scale(700) .translate([width / 2, height / 2]);
(I fudged with the center parameter to put Russia at the center of the viewport. You can compute this automatically if you prefer.) You should now see something like this:
It’s also possible to work with projected (Cartesian) coordinates in TopoJSON, and then define a d3.geo.path with a null (identity) projection, but I’ll leave that for a separate question.
- Map with d3.js and TopoJSON, Albers Siberia projection
- Put markers to a map generated with topoJSON and d3.js
- Let's make a TopoJSON map and view it with D3.js
- issue with d3 projection albers producing checkered map
- Draw a map with d3 and topojson
- Visualising a custom map with QGIS and D3.js is harmed by the projection
- d3.js Map (<svg>) Auto Fit into Parent Container and Resize with Window
- Circle clip and projection with D3 orthographic
- Looking for a world map with a specific projection in d3js
- D3.js: Set fitExtent or fitSize (or center and scale programmatically) for map with multiple geoJSON files
- D3 : map with topojson doesn't render properly
- Draw a map with D3.js: How to get the right scale() and translate()?
- Plotting topojson file with d3.js (NYC boroughs and census tracts)
- Map zooming with D3 and Datamaps
- d3 world map with country click and zoom almost working not quite
- topojson / D3 / Map with longitude + latitude
- My cities are being plotted with the wrong projection (quite small and to the left). Using d3.geo.albersUSA()
- How to draw D3 Map with United States, Canada, Mexico and Puerto Rico
- d3js v5 + Topojson v3 Map with border rendering
- Can d3 voronoi map work well with any other projection besides geoAlbers?
- D3.js Map with Albers Projection: How to rotate it?
- d3.js onclick and touch works erratically on topojson map
- D3JS TopoJSON map of Australia: projection accurate but no country rendered
- How to scale and centre all items in a layered topojson map to fit in D3 version 4?
- D3 Geo albers USA map showing Puerto Rico and Virginia incorrectly
- Displaying place (city) data with D3 and TopoJson
- Reconstructing D3 Animated Choropleth with a new Map and Data
- How to implement mouse wheel zoom in D3 like Google Map with overlay and Ctrl + Scroll event?
- How to get map to show longitude and latitude accurately with d3
- How can I scale my map to fit my svg size with d3 and geojson path data
More Query from same tag
- Resizing D3 Area Chart
- Smooth scrolling brush with scaleband like string labels
- can´t run d3js example for ionic 2
- D3 line graph with arbitrarily many lines (and a specific data format)
- correct way to tell if my selection caught any existing elements
- Simple D3.js text selection
- how to show axis in chart using jquery?
- D3 append different elements, keep common index
- d3.js - calculating width of a previously drawn element
- D3.js chart with labels on both sides
- How to make D3 Streamgraph vertically
- D3 Queue Only Produces Error
- Collapsible tree diagram v4 and Internet Explorer
- Text alignment with unknown length
- Why does D3 not render TopoJSON correctly?
- Multiple classes assigned via D3's .attr are not in the serialized (serializeToString) string
- How can I append string to y-axis data with tick and d3.format?
- How to display data when using Rickshaw.Graph.Ajax
- Tooltip customization in c3js for dual axis
- D3 graph continues to display even after navigating away from the template that rendered it
- Put D3 map over google maps
- How to draw the triangle symbol?
- How to fix SVG path masking problem when too many parts of path are cut off when a mask is applied
- Uncaught TypeError: Cannot read property 'dispatchEvent' of null
- Using toDataUrl on a canvas result in SecurityError in IE
- How add a link to each shape in d3 radar chart?
- Canvas circle are not clickable
- Highlight pie chart on hover d3js