pathouse/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Medium Tags Bubble Chart

Another bubble chart in D3.js once again thanks to this example

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  text {
   font: 10px sans-serif;
  }
</style>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var mediumsProducts = [{"MEDIUMS":"painting","PRODUCT COUNT":12026},
                      {"MEDIUMS":"photography","PRODUCT COUNT":2521},
                      {"MEDIUMS":"print","PRODUCT COUNT":1023},
                      {"MEDIUMS":"mixed media","PRODUCT COUNT":2659},
                      {"MEDIUMS":"sculpture","PRODUCT COUNT":1719},
                      {"MEDIUMS":"digital media","PRODUCT COUNT":727},
                      {"MEDIUMS":"drawing","PRODUCT COUNT":1170},
                      {"MEDIUMS":"textiles","PRODUCT COUNT":173},
                      {"MEDIUMS":"jewelry","PRODUCT COUNT":129},
                      {"MEDIUMS":"installation","PRODUCT COUNT":88},
                      {"MEDIUMS":"furniture","PRODUCT COUNT":45},
                      {"MEDIUMS":"video","PRODUCT COUNT":19},
                      {"MEDIUMS":"books","PRODUCT COUNT":6},
                      {"MEDIUMS":"ceramics","PRODUCT COUNT":80},
                      {"MEDIUMS":"performance","PRODUCT COUNT":5}];

function interpret(arr) {
  var results = [];
  for(var i = 0; i < arr.length; i++){
    results.push({tagName: arr[i]["MEDIUMS"],color: i, value: arr[i]["PRODUCT COUNT"]});
  }
  return {children: results};
}

var diameter = 960,
    format = d3.format(",d"),
    color = d3.scale.category20();

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .attr("class", "bubble");

var node = svg.selectAll(".node")
    .data(bubble.nodes(interpret(mediumsProducts))
    .filter(function(d) { return !d.children; }))
  .enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

node.append("title")
    .text(function(d) { return d.tagName + ": " + format(d.value); });

node.append("circle")
    .attr("r", function(d) { return d.r; })
    .style("fill", function(d) { return color(d.color); });

node.append("text")
    .attr("dy", ".3em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.tagName.substring(0, d.r / 3); });

d3.select(self.frameElement).style("height", diameter + "px");
</script>
</body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	text {
	font: 10px sans-serif;
	}
	</style>
	<link rel="stylesheet" type="text/css" href="stylesheet.css">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var mediumsProducts = [{"MEDIUMS":"painting","PRODUCT COUNT":12026},
	{"MEDIUMS":"photography","PRODUCT COUNT":2521},
	{"MEDIUMS":"print","PRODUCT COUNT":1023},
	{"MEDIUMS":"mixed media","PRODUCT COUNT":2659},
	{"MEDIUMS":"sculpture","PRODUCT COUNT":1719},
	{"MEDIUMS":"digital media","PRODUCT COUNT":727},
	{"MEDIUMS":"drawing","PRODUCT COUNT":1170},
	{"MEDIUMS":"textiles","PRODUCT COUNT":173},
	{"MEDIUMS":"jewelry","PRODUCT COUNT":129},
	{"MEDIUMS":"installation","PRODUCT COUNT":88},
	{"MEDIUMS":"furniture","PRODUCT COUNT":45},
	{"MEDIUMS":"video","PRODUCT COUNT":19},
	{"MEDIUMS":"books","PRODUCT COUNT":6},
	{"MEDIUMS":"ceramics","PRODUCT COUNT":80},
	{"MEDIUMS":"performance","PRODUCT COUNT":5}];

	function interpret(arr) {
	var results = [];
	for(var i = 0; i < arr.length; i++){
	results.push({tagName: arr[i]["MEDIUMS"],color: i, value: arr[i]["PRODUCT COUNT"]});
	}
	return {children: results};
	}

	var diameter = 960,
	format = d3.format(",d"),
	color = d3.scale.category20();

	var bubble = d3.layout.pack()
	.sort(null)
	.size([diameter, diameter])
	.padding(1.5);

	var svg = d3.select("body").append("svg")
	.attr("width", diameter)
	.attr("height", diameter)
	.attr("class", "bubble");

	var node = svg.selectAll(".node")
	.data(bubble.nodes(interpret(mediumsProducts))
	.filter(function(d) { return !d.children; }))
	.enter().append("g")
	.attr("class", "node")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	node.append("title")
	.text(function(d) { return d.tagName + ": " + format(d.value); });

	node.append("circle")
	.attr("r", function(d) { return d.r; })
	.style("fill", function(d) { return color(d.color); });

	node.append("text")
	.attr("dy", ".3em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.tagName.substring(0, d.r / 3); });

	d3.select(self.frameElement).style("height", diameter + "px");
	</script>
	</body>