JSFiddle - React, Tailwind, and code Playground

by andrewarnier

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>

CSS

svg {
	background-color: white;
}

.countries {
  stroke: white;
  stroke-width: 0.25px;
  fill: grey;
}

.land {
  fill: #222;
}

.county-boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.state-boundary {
  fill: none;
  stroke: #fff;
}

JavaScript

var width = 545,
    height = 480;

var projection = d3.geo.mercator()
    .center([0, 5 ])
    .rotate([160, 0])
	.scale((width/640)*100)
	.translate([width / 2, height / 2]);

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

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

var g = svg.append("g");

// load and display the World
d3.json("https://gist.githubusercontent.com/d3noob/5189284/raw/598d1ebe0c251cd506c8395c60ab1d08520922a7/world-110m2.json", function(error, topology) {
    g.selectAll("path")
      .data(topojson.feature(topology, topology.objects.countries)
          .features)
    .enter()
      .append("path")
			.attr("class", "countries")
      .attr("d", path)
});

  
/*svg.append("rect")
	.attr("x", 2.5* width / 5)
	.attr("y", 2.6 *height / 5)
	.attr("width", 200)
	.attr("height", 140)
	.attr("fill", "white");*/

 var scope = {};
    scope.movies = [{
      title: "The Godfather",
      year: 1972,
      length: 175,
      budget: 6000000,
      rating: 9.1
    }, {
      title: "The Shawshank Redemption",
      year: 1994,
      length: 142,
      budget: 25000000,
      rating: 9.1
    }, {
      title: "The Lord of the Rings 3",
      year: 2003,
      length: 251,
      budget: 94000000,
      rating: 9
    }];
    scope.columns = [{
      head: 'Movie title',
      cl: 'title',
      html: function(d) {
        return d.title;
      }
    }, {
      head: 'Year',
      cl: 'center',
      html: function(d) {
        return d.year;
      }
    }, {
      head: 'Length',
      cl: 'center',
      html: function(d) {
        return d.length;
      }
    }, {
      head: 'Budget',
      cl: 'num',
      html: function(d) {
        return d.budget;
      }
    }, {
      head: 'Rating',
      cl: 'num',
      html: function(d) {
        return d.rating;
      }
    }];
 var table = svg.append("foreignObject")
 .attr("x",  width / 5)
	.attr("y", 4.0 *height / 5)
      .attr("width", 480)
     ...