spatial region

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.

R image

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://d3js.org/d3.v3.min.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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js