Old school D3 from simpler times

All examples By author By category About

zzhang115

Full window Github gist

DVFinal

<!DOCTYPE html>
<style>
svg {
  font: 10px sans-serif;
}
</style>
<body>
    <h1 align="center">Available Feed For All Countries in 2013</h1>

<svg width="1200" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
var fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.3); },
    color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
    format = d3.format(",d");
var treemap = d3.treemap()
    .tile(d3.treemapResquarify)
    .size([width - 180, height - 0])
    .round(true)
    .paddingInner(1);
function feed(d) {
  console.log("DDD:", d.FIELD2);
  return parseInt(d.FIELD2);
}
d3.json("./convertcsv.json", function(data) {
  var map = d3.hierarchy(data)
      .eachBefore(function(d) { 
        console.log("d:", d.data.FIELD1);
        d.data.id = d.data.FIELD1;
        console.log("d:", d.data.id);
      })
      .sum(feed)
      .sort(function(a, b) {
        return b.height - a.height || b.value - a.value; 
      });
  treemap(map);
  var g = svg.selectAll("g")
    .data(map.leaves())
    .enter().append("g")
      .attr("transform", function(d) { return "translate(" + (d.x0 + 180) + "," + (d.y0 + 0) + ")"; });
  g.append("rect")
      .attr("id", function(d) { return d.data.id; })
      .attr("width", function(d) { 
        return d.x1  - d.x0; 
      })
      .attr("height", function(d) { return d.y1 - d.y0; })
      .attr("fill", function(d) { return color(d.data.id); });
  g.append("clipPath")
      .attr("id", function(d) { return "clip-" + d.data.id; })
    .append("use")
      .attr("xlink:href", function(d) { return "#" + d.data.id; });
  g.append("text")
      .attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
    .selectAll("tspan")
      .data(function(d) { return d.data.FIELD1.split(/(?=[A-Z][^A-Z])/g); })
    .enter().append("tspan")
      .attr("x", 5)
      .attr("y", function(d, i) { return 15 + i * 10; })
      .text(function(d) { return d; });
  g.append("title")
      .text(function(d) { return d.data.id + "\n" + format(d.value) + "k tonnes"; });
});
</script>
</body>

https://d3js.org/d3.v4.min.js