JSFiddle - React, Tailwind, and code Playground

HTML

<head>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <!-- <svg width="960" height="600"></svg> -->
</head>

JavaScript

var width = 960,
        height = 500;

    var projection = d3.geoMercator()
        .scale(4000)
        .center([2.8, 41.9])
        .translate([width/2, height/2]);

    var path = d3.geoPath()
        .projection(projection);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);


    d3.json("https://raw.githubusercontent.com/patarol/d3_sketch/master/data/mad.json", function(error, mad) {
      if (error) throw error;

      svg.append("g")
        .attr("class", "barrios")
        .selectAll("path")
        .data(topojson.feature(mad, mad.objects.barrios).features)
        .enter().append("path")
        .attr("d", path);

      svg.append("path")
        .attr("class", "barrios-borders")
        .attr("d", path(topojson.mesh(mad, mad.objects.barrios, function(a, b) {
          return a !== b;
        })));
    });