D3 Examples - spatial region

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="https://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>
    