Offensive Odors 2

Click on any package to zoom in or out. See also this static circle packing example.

forked from renecnielsen's block: Zoomable Circle Packing

<!DOCTYPE html>
<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