xxxxxxxxxx<head> <title>County Treemap</title></head><meta charset="utf-8"><style>svg { height: 500px; width: 1000px;}</style><body><div id="viz"><svg></svg></div></body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script> <script>d3.csv("treemapTest.csv", cleanCensus);function cleanCensus(data){ packableData = nesting(data); treemap(packableData);}function nesting(data) { nestedData = d3.nest() .key(function (d) { return d.Actor; }) .key(function (d) { return d.Title }) .entries(data); return packableData = {id: "root", key: "root", values: nestedData}} function treemap(data) { var color = d3.scale.linear() .domain([0, 10000000]) .range([ "green"]); treemap = d3.layout.treemap(); treemap .size([940,500]) .children(function(d) {return d["values"]}) .padding(function (d) {return d["values"] ? 2 : 1}) .value(function(d) {return d.leafData ? d.leafData : 1}) treemapData = treemap(data); var chartG = d3.select("svg") .append("g") .attr("class", "dendrogram") .attr("transform", "translate(0,0)"); chartG.selectAll("rect") .data(treemapData) .enter() .append("rect") .attr("x", function (d) {return d.x}) .attr("y", function (d) {return d.y}) .attr("height", function (d) {return d.dy}) .attr("width", function (d) {return d.dx}) .style("fill", function (d) {return console.log(d.Gross);color(d.Gross);}) .style("fill-opacity", function (d) {return d.leafColor ? 1 : .1}) .style("stroke", function (d) {return d.leafColor ? d3.rgb(d.leafColor).darker() : "black"}) chartG.selectAll("text") .data(treemapData) .enter() .append("text") .attr("x", function (d) {return d.x}) .attr("y", function (d) {return d.y + 15}) .text(function (d) {return d.Title})}</script> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js