Click on any package to zoom in or out. See also this static circle packing example.
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 color = d3.scale.linear()
.domain([-1, 5])
.range(["#e1f4fd", "#00aeef"])
.interpolate(d3.interpolateHcl);
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([10,11,12,13]);
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);
//create class element to append text to
// var nodes = d3.selectAll(".node")
// .data(packChart(packableOdorLocs))
// .enter()
// .append("g")
// .attr("class", "node")
// .attr("transform", function(d) { return "translate(" + 100 + "," + 100 + ")"; });
// nodes.append("text")
// .text(function(d) { return d; })
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;})
// .text(function(d) {return d.adjective;})
// .text(function(d) {return d.adjective2;})
// // .text(function(d) {return d.adjective3;})
.attr("x", function(d) {return d.x;})
.attr("y", function(d) {return d.y;})
.attr("fill", "white")
.attr("font-family", "Helvetica")
.attr("font-size", "8px")
.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", "8px")
.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", "8px")
.attr("text-anchor", "middle")
.attr("dy", "1.8815328em")
})
// d3.json("flare.json", function(error, root) {
// var focus = root,
// nodes = pack.nodes(root);
// svg.append("g").selectAll("circle")
// .data(nodes)
// .enter().append("circle")
// .attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
// .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
// .attr("r", function(d) { return d.r; })
// .style("fill", function(d) { return d.children ? color(d.depth) : null; })
// .on("click", function(d) { return zoom(focus == d ? root : d); });
// svg.append("g").selectAll("text")
// .data(nodes)
// .enter().append("text")
// .attr("class", "label")
// .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
// .style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
// .style("display", function(d) { return d.parent === root ? null : "none"; })
// .text(function(d) { return d.name; });
// d3.select(window)
// .on("click", function() { zoom(root); });
// function zoom(d, i) {
// var focus0 = focus;
// focus = d;
// var k = innerDiameter / d.r / 2;
// x.domain([d.x - d.r, d.x + d.r]);
// y.domain([d.y - d.r, d.y + d.r]);
// d3.event.stopPropagation();
// var transition = d3.selectAll("text,circle").transition()
// .duration(d3.event.altKey ? 7500 : 750)
// .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
// transition.filter("circle")
// .attr("r", function(d) { return k * d.r; });
// transition.filter("text")
// .filter(function(d) { return d.parent === focus || d.parent === focus0; })
// .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
// .each("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
// .each("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
// }
// });
// d3.select(self.frameElement).style("height", outerDiameter + "px");
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js