njvack/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<style>
	text { font: 10px sans-serif; }
	</style>
	</head>
	<body>
		<script src="http://d3js.org/d3.v3.min.js"></script>

		<script>

	function childrify(h) {
		var childs = []
		d3.entries(h).forEach(function(e) {
			childs.push({"packageName": null, "className":e.key, "value": e.value.budget_dollars, "thing": e});
		});
		return childs;
	}

		var diameter = 960;

		var color = d3.scale.category10();

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


		var root = {
			"name": "flare",
			"children": null
		}


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

		d3.json("studies.json", function(err, studies) {
			root.children = childrify(studies)
			var dataz = bubble.nodes(root);
			console.log(dataz);

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

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

			node.append("text")
				.attr("dy", "0.3em")
				.style("text-anchor", "middle")
				.text(function(d) { return d.className });

			node.append("text")
				.attr("dy", "1.8em")
				.style("text-anchor", "middle")
				.text(function(d) { return d.thing.value.scanned_n+"/"+d.thing.value.planned_n });
		});

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

	</body>
</html>

## studies.json
{
	"MIDUS2": {
		"budget_dollars": 1000000,
		"people": ["Richie D", "Stacey S", "Luke H", "Lauren H"],
		"planned_n": 200,
		"scanned_n": 2,
		"funding": "midus",
		"group": "bi"
		},
	"NCCAM3": {
		"budget_dollars": 2000000,
		"people": ["Richie D", "David B", "David P", "Melissa R", "X", "Y", "Z"],
		"planned_n": 160,
		"scanned_n": 0,
		"funding": "pending",
		"group": "cihm"
	},
	"self_other": {
		"budget_dollars": 50000,
		"people": ["Richie D", "Drew F", "Nate V", "Abigail F"],
		"planned_n": 40,
		"scanned_n": 40,
		"funding": "templeton",
		"group": "cihm"
	},
	"savor_ema": {
		"budget_dollars": 50000,
		"people": ["Richie D", "Aaron H", "Nate V", "Eric W", "Kaitlyn M"],
		"planned_n": 40,
		"scanned_n": 40,
		"funding": "templeton",
		"group": "lan"
	},
	"asthma3": {
		"budget_dollars": 100000,
		"people": ["Richie D", "Melissa R"],
		"planned_n": 30,
		"scanned_n": 0,
		"funding": "pending",
		"group": "cihm"
	},
	"veterans": {
		"budget_dollars": 200000,
		"people": ["Richie D", "Jack N", "Andrea H", "Dan G", "Joe W"],
		"planned_n": 45,
		"scanned_n": 20,
		"funding": "NIH 49823982.23489",
		"group": "cihm"
	},
	"gates": {
		"budget_dollars": 1000000,
		"people": ["Richie D", "Reza F", "David P", "Daniel L", "Rick S", "Lisa F"],
		"planned_n": 100,
		"scanned_n": 0,
		"funding": "gates",
		"group": "cihm"
	}
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<style>
	text { font: 10px sans-serif; }
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	function childrify(h) {
	var childs = []
	d3.entries(h).forEach(function(e) {
	childs.push({"packageName": null, "className":e.key, "value": e.value.budget_dollars, "thing": e});
	});
	return childs;
	}

	var diameter = 960;

	var color = d3.scale.category10();

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


	var root = {
	"name": "flare",
	"children": null
	}



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

	d3.json("studies.json", function(err, studies) {
	root.children = childrify(studies)
	var dataz = bubble.nodes(root);
	console.log(dataz);

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

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

	node.append("text")
	.attr("dy", "0.3em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.className });

	node.append("text")
	.attr("dy", "1.8em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.thing.value.scanned_n+"/"+d.thing.value.planned_n });
	});

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

	</body>
	</html>
	{
	"MIDUS2": {
	"budget_dollars": 1000000,
	"people": ["Richie D", "Stacey S", "Luke H", "Lauren H"],
	"planned_n": 200,
	"scanned_n": 2,
	"funding": "midus",
	"group": "bi"
	},
	"NCCAM3": {
	"budget_dollars": 2000000,
	"people": ["Richie D", "David B", "David P", "Melissa R", "X", "Y", "Z"],
	"planned_n": 160,
	"scanned_n": 0,
	"funding": "pending",
	"group": "cihm"
	},
	"self_other": {
	"budget_dollars": 50000,
	"people": ["Richie D", "Drew F", "Nate V", "Abigail F"],
	"planned_n": 40,
	"scanned_n": 40,
	"funding": "templeton",
	"group": "cihm"
	},
	"savor_ema": {
	"budget_dollars": 50000,
	"people": ["Richie D", "Aaron H", "Nate V", "Eric W", "Kaitlyn M"],
	"planned_n": 40,
	"scanned_n": 40,
	"funding": "templeton",
	"group": "lan"
	},
	"asthma3": {
	"budget_dollars": 100000,
	"people": ["Richie D", "Melissa R"],
	"planned_n": 30,
	"scanned_n": 0,
	"funding": "pending",
	"group": "cihm"
	},
	"veterans": {
	"budget_dollars": 200000,
	"people": ["Richie D", "Jack N", "Andrea H", "Dan G", "Joe W"],
	"planned_n": 45,
	"scanned_n": 20,
	"funding": "NIH 49823982.23489",
	"group": "cihm"
	},
	"gates": {
	"budget_dollars": 1000000,
	"people": ["Richie D", "Reza F", "David P", "Daniel L", "Rick S", "Lisa F"],
	"planned_n": 100,
	"scanned_n": 0,
	"funding": "gates",
	"group": "cihm"
	}
	}