<title>ninjaPixel.js Treemap</title>
background: rgba(100, 100, 100, 0.7);
/* Creates a small triangle extender for the tip */
color: rgba(100, 100, 100, 0.7);
/* Style northward tooltips differently */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
<h3>Top Selling Albums</h3>
<p>Data from <a href="https://en.wikipedia.org/wiki/List_of_best-selling_albums">wikipedia</a>.</p>
<script src="ninjaPixel.bundle.js" charset="utf-8"></script>
var fontSize = function(d) {
var size = 1.6 * d.dx / d.name.length;
var chart = new ninjaPixel.Treemap();
chart.transitionDuration(800)
.transitionEase('linear')
.itemFill(function(d, i){
var parentColor = function(d){
return parentColor(d.parent);
.itemTextLabelColor('white')
.itemTextLabelColor('white')
.mouseOverItemOpacity(0.8)
.mouseOverItemStroke('white')
.itemTextOffsetTop(function(d, i) {
.itemFontSize(function(d, i) {
return fontSize(d) + 'px';
.nodeText(function(d, i) {
text = d.children ? null : d.name;
var toolTip = chart.toolTip();
toolTip.html(function(d){return d.Artist + '<br/>'+d.name + '<br/><i>'+d.Genre+' - ' + d.size +'m albums</i>'})
var rawData = [{"Artist":"Shania Twain","Genre":"Country","size":39,"name":"Come On Over"},
{"Artist":"Metallica","Genre":"Hard Rock","size":30,"name":"Metallica"},
{"Artist":"Nirvana","Genre":"Hard Rock","size":30,"name":"Nevermind"},
{"Artist":"Pink Floyd","Genre":"Hard Rock","size":30,"name":"The Wall"},
{"Artist":"Guns N' Roses","Genre":"Hard Rock","size":30,"name":"Appetite for Destruction"},
{"Artist":"Led Zeppelin","Genre":"Hard Rock","size":37,"name":"Led Zeppelin IV"},
{"Artist":"AC/DC","Genre":"Hard Rock","size":40,"name":"Back in Black"},
{"Artist":"Meat Loaf","Genre":"Hard Rock","size":43,"name":"Bat Out of Hell"},
{"Artist":"Pink Floyd","Genre":"Hard Rock","size":45,"name":"The Dark Side of the Moon"},
{"Artist":"Adele","Genre":"Pop","size":30,"name":"21"},
{"Artist":"Madonna","Genre":"Pop","size":30,"name":"The Immaculate Collection"},
{"Artist":"Michael Jackson","Genre":"Pop","size":30,"name":"Bad"},
{"Artist":"Michael Jackson","Genre":"Pop","size":30,"name":"Dangerous"},
{"Artist":"Celine Dion","Genre":"Pop","size":31,"name":"Let's Talk About Love"},
{"Artist":"Celine Dion","Genre":"Pop","size":32,"name":"Falling into You"},
{"Artist":"Mariah Carey","Genre":"Pop","size":32,"name":"Music Box"},
{"Artist":"Various artists","Genre":"Pop","size":32,"name":"Dirty Dancing"},
{"Artist":"Bee Gees / Various artists","Genre":"Pop","size":40,"name":"Saturday Night Fever"},
{"Artist":"Michael Jackson","Genre":"Pop","size":51,"name":"Thriller"},
{"Artist":"Whitney Houston","Genre":"R&B","size":25,"name":"Whitney Houston"},
{"Artist":"Whitney Houston / Various artists","Genre":"R&B","size":44,"name":"The Bodyguard"},
{"Artist":"The Beatles","Genre":"Rock","size":30,"name":"Abbey Road"},
{"Artist":"Bruce Springsteen","Genre":"Rock","size":30,"name":"Born in the U.S.A."},
{"Artist":"Dire Straits","Genre":"Rock","size":30,"name":"Brothers in Arms"},
{"Artist":"Santana","Genre":"Rock","size":30,"name":"Supernatural"},
{"Artist":"The Beatles","Genre":"Rock","size":31,"name":"1"},
{"Artist":"The Beatles","Genre":"Rock","size":32,"name":"Sgt. Pepper's Lonely Hearts Club Band"},
{"Artist":"Eagles","Genre":"Rock","size":32,"name":"Hotel California"},
{"Artist":"Alanis Morissette","Genre":"Rock","size":33,"name":"Jagged Little Pill"},
{"Artist":"Fleetwood Mac","Genre":"Rock","size":40,"name":"Rumours"},
{"Artist":"Eagles","Genre":"Rock","size":42,"name":"Their Greatest Hits (1971–1975)"},
{"Artist":"James Horner","Genre":"Soundtrack","size":30,"name":"Titanic: Music from the Motion Picture"}];
rawData.map(function(d) {
return (typeof d !== "undefined") ? d !== null : false
var color = d3.scale.ordinal()
.range(d3.range(genres.length).map(d3.scale.linear()
.domain([0, genres.length - 1])
.range(['#e08214', '#8073ac'])
.interpolate(d3.interpolateLab)));
genres.forEach(function(d) {
var thisGenre = rawData.filter(function(e) {
thisGenre.forEach(function(f) {
f.itemColor = color(f.Genre);
chart.plot(d3.select("#chart")