This diagram features data from Chicago's food inspections dating from 2010, specifically three violations (19, 20 and 41) that refer to odor or trash maintenance. The size of the nodes reflect how often the smelly words appear in the violation comments.
forked from renecnielsen's block: Zoomable Circle Packing
xxxxxxxxxx
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--root {
stroke: #777;
stroke-width: 2px;
}
.node--leaf {
fill: white;
}
.text {
font: 11px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = 10,
outerDiameter = 960,
innerDiameter = outerDiameter - margin - margin;
var x = d3.scale.linear()
.range([0, innerDiameter]);
var y = d3.scale.linear()
.range([0, innerDiameter]);
var pack = d3.layout.pack()
.padding(2)
.size([innerDiameter, innerDiameter])
.value(function(d) { return d.size; })
var svg = d3.select("body").append("svg")
.attr("width", outerDiameter)
.attr("height", outerDiameter)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
d3.csv("offensive-odors-data.csv", function(error, data) {
var nested_data = d3.nest()
.key(function(d) {return d.place})
.key(function(d) {return d.adjective})
.key(function(d) {return d.adjective2})
.key(function(d) {return d.adjective3})
.entries(data);
console.log("nested", nested_data);
//puts array that d3.nest creates inside a root object that acts as a top-level parent
var packableOdorLocs = {id: "All odor locations", values: nested_data};
var depthScale = d3.scale.category20b();
var packChart = d3.layout.pack();
packChart.size([500, 500])
.children(function(d) {
return d.values;
})
.value(function (d) {
return 1;
});
//creates a container to manipulate elements inside
var svg = d3.select("body").append("svg")
.attr("width", 900)
.attr("height", 550);
var svg = d3.select("svg")
var circles = svg.selectAll("circle")
.data(packChart(packableOdorLocs))
var circlesEnter = circles.enter().append("g")
circlesEnter.append("circle")
.attr("r", function(d) {return d.r;})
.attr("cx", function(d) {return d.x;})
.attr("cy", function(d) {return d.y;})
.style("fill", function(d) {return depthScale(d.depth);})
.style("stroke", "white")
.style("stroke", "2px")
circlesEnter.append("text")
.text(function(d) {return d.place;})
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("fill", "white")
.attr("font-family", "Courier")
.attr("font-size", "6px")
.attr("text-anchor", "middle")
.attr("dy", "-0.48552em")
circlesEnter.append("text")
.text(function(d) {return d.adjective;})
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("fill", "white")
.attr("font-family", "Helvetica")
.attr("font-size", "6px")
.attr("text-anchor", "middle")
.attr("dy", "0.77112em")
circlesEnter.append("text")
.text(function(d) {return d.adjective2;})
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("fill", "white")
.attr("font-family", "Helvetica")
.attr("font-size", "6px")
.attr("text-anchor", "middle")
.attr("dy", "1.8815328em")
})
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js