spatial region

README.md

I have created simple dataset which consists of 4 types of data such as data1,data2,data3,data4 for various years. I used the punchccard chart over hear to represent the data for the respective years.And size of each bubble varies with value associated to it.

Channels used: Identity channel (spatial region)
Marks : bubbles.

d3.punchcard.js

function punchcard(){
	var $el = d3.select("body");
	var maxRadius = 20;
	var minRadius = 5;
	var margin = {top: 40, right: 200, bottom: 40, left: 20};
	var width = 500;
	var height = 200;
	var color = "green";
	var data = [];
	var object = {};
	var formatTick = d3.format("0000");
	var svg, x, xAxis, allValues, xScale, colorScale;
	var rowHeight = (maxRadius*2)+2;
	var useGlobalScale = true;

	object.render = function(){
		x = d3.scale.linear()
			.range([0, width]);

		xAxis = d3.svg.axis()
			.scale(x)
			.orient("bottom");

		xAxis.ticks(data[0].values.length)
				.tickFormat(formatTick);

		svg = $el.append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.bottom)
			.style("margin-left", margin.left + "px")
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		var domain = d3.extent(allValues, function(d){return d['key'];});
		var valDomain = d3.extent(allValues, function(d){return d['value'];});
		x.domain(domain);

		xScale = d3.scale.linear()
			.domain(domain)
			.range([0, width]);

		colorScale = d3.scale.linear()
      .domain(d3.extent(allValues, function(d){return d['value'];}))
      .range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);

		svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + (height - margin.bottom) + ")")
		.call(xAxis);

		function mouseover(p) {
			var g = d3.select(this).node().parentNode;
			d3.select(g).selectAll("circle").style("display","none");
			d3.select(g).selectAll("text.value").style("display","block");
		}

		function mouseout(p) {
			var g = d3.select(this).node().parentNode;
			d3.select(g).selectAll("circle").style("display","block");
			d3.select(g).selectAll("text.value").style("display","none");
		}

		for (var j = 0; j < data.length; j++) {
			var g = svg.append("g");

			var circles = g.selectAll("circle")
				.data(data[j]['values'])
				.enter()
				.append("circle");

			var text = g.selectAll("text")
				.data(data[j]['values'])
				.enter()
				.append("text");

			var rDomain = useGlobalScale? valDomain : [0, d3.max(data[j]['values'], function(d) { return d['value']; })];
			var rScale = d3.scale.linear()
				.domain(rDomain)
				.range([minRadius, maxRadius]);

			circles
				.attr("cx", function(d, i) { return xScale(d['key']); })
				.attr("cy", (height - margin.bottom - rowHeight*2) - (j*rowHeight)+rowHeight)
				.attr("r", function(d) { return rScale(d['value']); })
				.style("fill", function(d) { return colorScale(d['value']) });

			text
				.attr("y",(height - margin.bottom - rowHeight*2) - (j*rowHeight)+(rowHeight+5))
				.attr("x",function(d, i) { return xScale(d['key'])-5; })
				.attr("class","value")
				.text(function(d){ return d['value']; })
				.style("fill", function(d) { return colorScale(d['value']) })
				.style("display","none");

			g.append("text")
				.attr("y", (height - margin.bottom - rowHeight*2) - (j*rowHeight)+(rowHeight+5))
				.attr("x",width+rowHeight)
				.attr("class","label")
				.text(data[j]['key'])
				.style("fill", function(d) { return color })
				.on("mouseover", mouseover)
				.on("mouseout", mouseout);
		};

		return object;
	};

  object.data = function(value){
    if (!arguments.length) return data;
    data = value;
    allValues = [];
		data.forEach(function(d){
			allValues = allValues.concat(d.values);
		});
    return object;
  };

  object.minRadius = function(value){
  	if (!arguments.length) return minRadius;
  	minRadius = value;
  	return object;
  };

  object.maxRadius = function(value){
  	if (!arguments.length) return maxRadius;
  	maxRadius = value;
  	rowHeight = (maxRadius*2)+2;
  	return object;
  };

  object.$el = function(value){
    if (!arguments.length) return $el;
    $el = value;
    return object;
  };

  object.width = function(value){
    if (!arguments.length) return width;
    width = value;
    return object;
  };

  object.height = function(value){
    if (!arguments.length) return height;
    height = value;
    return object;
  };

  object.color = function(value){
    if (!arguments.length) return color;
    color = value;
    return object;
  };

 	object.useGlobalScale = function(value){
    if (!arguments.length) return useGlobalScale;
    useGlobalScale = value;
    return object;
  };
  return object;
};

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- <script src="../d3.v3.js"></script> -->
<script src="d3.punchcard.js"></script>
<style type="text/css">
svg {
  font: 10px sans-serif;
}
.axis path,.axis line {
	fill: none;
	stroke: #b6b6b6;
	shape-rendering: crispEdges;
}
.tick text{
	fill: #999;
}
g.journal.active{
	cursor:pointer;
}
text.label{
	font-size:12px;font-weight:bold;cursor:pointer;
}
text.value{
	font-size:12px;font-weight:bold;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">

var data = [
{
	key: "data-1",
	values: [
						{key: "2004", value: 8},
						{key: "2005", value: 4},
						{key: "2006", value: 10},
						{key: "2007", value: 11},
						{key: "2008", value: 6},
						{key: "2009", value: 10},
						{key: "2010", value: 16}
					]
},
{
	key: "data-2",
	values: [
						{key: "2004", value: 2},
						{key: "2005", value: 4},
						{key: "2006", value: 10},
						{key: "2007", value: 7},
						{key: "2008", value: 20},
						{key: "2009", value: 6},
						{key: "2010", value: 18}
					]
},
{
	key: "data-3",
	values: [
						{key: "2004", value: 1},
						{key: "2005", value: 2},
						{key: "2006", value: 3},
						{key: "2007", value: 4},
						{key: "2008", value: 6},
						{key: "2009", value: 10},
						{key: "2010", value: 4}
					]
},
{
	key: "data-4",
	values: [
						{key: "2004", value: 1},
						{key: "2005", value: 2},
						{key: "2006", value: 3},
						{key: "2007", value: 4},
						{key: "2008", value: 6},
						{key: "2009", value: 10},
						{key: "2010", value: 4}
					]
}
];

var punchcard = punchcard()
									.$el(d3.select("#chart"))
									.data(data)
									.render();


</script>

</body>
</html>