I am attempting to integrate a map into a website using D3 and topoJSON that resembles the following:
https://i.sstatic.net/1brVx.png
However, when I create the map with D3/topoJSON, it shows up small and inverted.
https://i.sstatic.net/LgQBd.png
Even after exploring various solutions (like Center a map in d3 given a geoJSON object), adjusting the projection does not seem to have any effect on the generated map regardless of changing the scale, adding a translate, or rotating it.
I obtained the shapefile from here: and converted it to topoJSON using mapshaper.
Any suggestions?
A demo can be accessed here: http://jsfiddle.net/r10qhpca/
var margin = {top: 60, right: 40, bottom: 125, left: 100},
containerWidth = $('.events-section1-graph').width(),
containerHeight = $('#events .section1').height();
var width = containerWidth - margin.left - margin.right,
height = containerHeight - margin.top - margin.bottom;
var xScale = d3.scale.linear()
.range( [0, width] ),
yScale = d3.scale.linear()
.range( [height, 0] );
var path = d3.geo.path()
.projection(projection);
var projection = d3.geo.mercator()
.scale(5000000)
.translate([width / 2, height / 2])
.rotate([0, 0, 180]);
var svg = d3.select('.events-section1-graph')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
queue().defer(d3.json, 'js/continent.json')
.await(ready);
function ready(err, world) {
if (err) console.warn("Error", err);
var tj = topojson.feature(world, world.objects.continent);
var continent = svg.selectAll('.continent-path')
.data(tj.features)
.enter()
.append('path')
.attr('class', 'continent-path')
.attr('d', path);