Use basis interpolation on path from topojson features
A Pen by Riccardo Scalco on CodePen.
<div class="wrap"> | |
<div id="box"> | |
</div> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> |
var width = 800, | |
height = 800; | |
var svg = d3.select("#box").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var f = "http://eidogram.com/projects/viias/itx.json"; | |
d3.json(f, function(error, it) { | |
var projection = d3.geo.albers() | |
.center([0, 41.8]) | |
.rotate([347, 0]) | |
.parallels([35, 45]) | |
.scale(4000) | |
.translate([width / 2, height / 2]); | |
var it = topojson.feature(it, it.objects.sub); | |
var countryDraw = d3.svg.line() | |
.x(function(d){ return d[0]}) | |
.y(function(d){return d[1]}) | |
.interpolate("basis"); | |
// hint: http://bl.ocks.org/emeeks/d994dbdc9a7b21ab9692 | |
var roundedCountries = []; | |
for (x in it.features) { | |
for (y in it.features[x].geometry.coordinates) { | |
if (it.features[x].geometry.coordinates[y].length > 1) { | |
roundedCountries.push( | |
it.features[x].geometry.coordinates[y].map( | |
function(d) {return projection(d)} | |
) | |
) | |
} | |
else { | |
roundedCountries.push( | |
it.features[x].geometry.coordinates[y][0].map( | |
function(d) {return projection(d)} | |
) | |
) | |
} | |
} | |
} | |
svg.selectAll("path") | |
.data(roundedCountries) | |
.enter() | |
.append("path") | |
.attr("class", "border_map") | |
.attr("d", countryDraw); | |
}); | |
html, body { | |
background-color: #3e3e3e; | |
height: 100%; | |
overflow: hidden; | |
} | |
.wrap { | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.border_map { | |
fill: #ab3e41; | |
stroke: #3e3e3e; | |
stroke-width: 1px; | |
shape-rendering: auto; | |
/*shape-rendering: crispEdges;*/ | |
} |
Use basis interpolation on path from topojson features
A Pen by Riccardo Scalco on CodePen.