Topojson map with rounded borders.

index.html

<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>

script.js

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);
      
});

style.css

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;*/
}

Topojson map with rounded borders..markdown

Topojson map with rounded borders.

Use basis interpolation on path from topojson features

A Pen by Riccardo Scalco on CodePen.

License.