pathouse/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Artwork Subject Tags

Simple D3.js bubble chart of some Artsicle product tags based on 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 subjectsProducts = [{"subject":"still life","value":1243},
                    {"subject":"minimal","value":1417},
                    {"subject":"abstract","value":6808},
                    {"subject":"geometric","value":1800},
                    {"subject":"landscape","value":4592},
                    {"subject":"figurative","value":4002},
                    {"subject":"nature","value":3849},
                    {"subject":"surrealist","value":1546},
                    {"subject":"realist","value":1563},
                    {"subject":"pop","value":1201},
                    {"subject":"conceptual","value":2958},
                    {"subject":"portrait","value":2049},
                    {"subject":"urban","value":1989},
                    {"subject":"documentary","value":379},
                    {"subject":"illustration","value":1295},
                    {"subject":"folk","value":392},
                    {"subject":"craftsman","value":114},
                    {"subject":"architecture","value":122}];

function interpret(arr) {
  var results = [];
  for(var i = 0; i < arr.length; i++){
    results.push({tagName: arr[i]["subject"],color: i, value: arr[i]["value"]});
  }
  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(subjectsProducts))
    .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 subjectsProducts = [{"subject":"still life","value":1243},
	{"subject":"minimal","value":1417},
	{"subject":"abstract","value":6808},
	{"subject":"geometric","value":1800},
	{"subject":"landscape","value":4592},
	{"subject":"figurative","value":4002},
	{"subject":"nature","value":3849},
	{"subject":"surrealist","value":1546},
	{"subject":"realist","value":1563},
	{"subject":"pop","value":1201},
	{"subject":"conceptual","value":2958},
	{"subject":"portrait","value":2049},
	{"subject":"urban","value":1989},
	{"subject":"documentary","value":379},
	{"subject":"illustration","value":1295},
	{"subject":"folk","value":392},
	{"subject":"craftsman","value":114},
	{"subject":"architecture","value":122}];

	function interpret(arr) {
	var results = [];
	for(var i = 0; i < arr.length; i++){
	results.push({tagName: arr[i]["subject"],color: i, value: arr[i]["value"]});
	}
	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(subjectsProducts))
	.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>