xxxxxxxxxx<style>svg { font: 10px sans-serif;}</style><body> <h1 align="center">Available Food 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.FIELD3); return parseInt(d.FIELD3);}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