<!doctype html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>
<style>
g#labels {
display: none;
border: 1px solid;
}
.legend {
position: relative;
top: -5px;
background: peru;
float: left;
font-weight: bold;
font-size: 15px;
line-height: 3px;
height: 36px;
}
.toolbar-right {
display: none !important;
}
.legend ul li {
float: left;
margin-left: 40px;
}
</style>
<div id="viz"></div>
<div class="legend">
<ul>
<li> 1= ROCK </li>
<li> 2= METAL</li>
<li>3= ALTERNATIVE PUNK</li>
<li>4=> OTHERS</li>
<li>Play button / options-></li>
</ul>
</div>
<script>
var sample_data = [
{"Income Range": 1, "name":"Argentina", "value": 9},
{"Income Range": 1, "name":"Australia", "value": 18},
{"Income Range": 1, "name":"Austria", "value": 15},
{"Income Range": 1, "name":"Belgium", "value": 17},
{"Income Range": 1, "name":"Brazil", "value": 78},
{"Income Range": 1, "name":"Canada", "value": 99},
{"Income Range": 1, "name":"Chile", "value": 9},
{"Income Range": 1, "name":"Czech Republic", "value": 23},
{"Income Range": 1, "name":"Denmark", "value": 21},
{"Income Range": 1, "name":"Finland", "value": 18},
{"Income Range": 1, "name":"France", "value": 65},
{"Income Range": 1, "name":"Germany", "value": 57},
{"Income Range": 1, "name":"Hungary", "value": 11},
{"Income Range": 1, "name":"India", "value": 23},
{"Income Range": 1, "name":"Ireland", "value": 7},
{"Income Range": 1, "name":"Italy", "value": 18},
{"Income Range": 1, "name":"Netherlands", "value": 18},
{"Income Range": 1, "name":"Norway", "value": 17},
{"Income Range": 1, "name":"Poland", "value": 22},
{"Income Range": 1, "name":"Portugal", "value": 30},
{"Income Range": 1, "name":"Spain", "value": 21},
{"Income Range": 1, "name":"Sweden", "value": 10},
{"Income Range": 1, "name":"United Kingdom", "value": 36},
{"Income Range": 1, "name":"USA", "value": 152},
{"Income Range": 2, "name":"Argentina", "value": 6},
{"Income Range": 2, "name":"Australia", "value": 7},
{"Income Range": 2, "name":"Austria", "value": 7},
{"Income Range": 2, "name":"Belgium", "value": 1},
{"Income Range": 2, "name":"Brazil", "value": 15},
{"Income Range": 2, "name":"Canada", "value": 40},
{"Income Range": 2, "name":"Chile", "value": 3},
{"Income Range": 2, "name":"Czech Republic", "value": 6},
{"Income Range": 2, "name":"Denmark", "value": 6},
{"Income Range": 2, "name":"Finland", "value": 2},
{"Income Range": 2, "name":"France", "value": 18},
{"Income Range": 2, "name":"Germany", "value": 25},
{"Income Range": 2, "name":"Hungary", "value": 5},
{"Income Range": 2, "name":"India", "value": 8},
{"Income Range": 2, "name":"Ireland", "value": 3},
{"Income Range": 2, "name":"Italy", "value": 1},
{"Income Range": 2, "name":"Netherlands", "value": 2},
{"Income Range": 2, "name":"Norway", "value": 0},
{"Income Range": 2, "name":"Poland", "value": 0},
{"Income Range": 2, "name":"Portugal", "value": 11},
{"Income Range": 2, "name":"Spain", "value": 3},
{"Income Range": 2, "name":"Sweden", "value": 7},
{"Income Range": 2, "name":"United Kingdom", "value": 20},
{"Income Range": 2, "name":"USA", "value": 63},
{"Income Range": 3, "name":"Argentina", "value": 9},
{"Income Range": 3, "name":"Australia", "value": 0},
{"Income Range": 3, "name":"Austria", "value": 0},
{"Income Range": 3, "name":"Belgium", "value": 11},
{"Income Range": 3, "name":"Brazil", "value": 7},
{"Income Range": 3, "name":"Canada", "value": 36},
{"Income Range": 3, "name":"Chile", "value": 2},
{"Income Range": 3, "name":"Czech Republic", "value": 9},
{"Income Range": 3, "name":"Denmark", "value": 4},
{"Income Range": 3, "name":"Finland", "value": 2},
{"Income Range": 3, "name":"France", "value": 35},
{"Income Range": 3, "name":"Germany", "value": 14},
{"Income Range": 3, "name":"Hungary", "value": 3},
{"Income Range": 3, "name":"India", "value": 11},
{"Income Range": 3, "name":"Ireland", "value": 4},
{"Income Range": 3, "name":"Italy", "value": 11},
{"Income Range": 3, "name":"Netherlands", "value": 5},
{"Income Range": 3, "name":"Norway", "value": 6},
{"Income Range": 3, "name":"Poland", "value": 7},
{"Income Range": 3, "name":"Portugal", "value": 5},
{"Income Range": 3, "name":"Spain", "value": 2},
{"Income Range": 3, "name":"Sweden", "value": 6},
{"Income Range": 3, "name":"United Kingdom", "value": 9},
{"Income Range": 3, "name":"USA", "value": 52},
{"Income Range": 4, "name":"Argentina", "value": 13},
{"Income Range": 4, "name":"Australia", "value": 5},
{"Income Range": 4, "name":"Austria", "value": 16},
{"Income Range": 4, "name":"Belgium", "value": 2},
{"Income Range": 4, "name":"Brazil", "value": 83},
{"Income Range": 4, "name":"Canada", "value": 113},
{"Income Range": 4, "name":"Chile", "value": 24},
{"Income Range": 4, "name":"Czech Republic", "value": 36},
{"Income Range": 4, "name":"Denmark", "value": 7},
{"Income Range": 4, "name":"Finland", "value": 16},
{"Income Range": 4, "name":"France", "value": 70},
{"Income Range": 4, "name":"Germany", "value": 46},
{"Income Range": 4, "name":"Hungary", "value": 19},
{"Income Range": 4, "name":"India", "value": 28},
{"Income Range": 4, "name":"Ireland", "value": 16},
{"Income Range": 4, "name":"Italy", "value": 8},
{"Income Range": 4, "name":"Netherlands", "value": 13},
{"Income Range": 4, "name":"Norway", "value": 12},
{"Income Range": 4, "name":"Poland", "value": 9},
{"Income Range": 4, "name":"Portugal", "value": 26},
{"Income Range": 4, "name":"Spain", "value": 6},
{"Income Range": 4, "name":"Sweden", "value": 15},
{"Income Range": 4, "name":"United Kingdom", "value": 46},
{"Income Range": 4, "name":"USA", "value": 211}
]
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.type("tree_map")
.id("name")
.size("value")
.time({"value": "Income Range", "solo": 2})
.draw()
alert("Click on the play button below to play the Visualization; else click on Individual boxes to view the appropriate treeMaps based on the legend below");
</script>
// Code goes here
/* Styles go here */