Zooniverse Spotifriday

guilty.json

{
 "name": "guilty_pleasures",
 "children": [
  {
   "name": "zoonistaff",
   "children": [
    {
     "name": "alex",
     "children": [
      {"selector": "Alex", "name": "I Think We’re Alone Now", "size": 680},
      {"selector": "Alex", "name": "Call On Me", "size": 701},
      {"selector": "Alex", "name": "Sweet Dreams My LA Ex", "size": 592},
      {"selector": "Alex", "name": "Sk8er Boi", "size": 726},
      {"selector": "Alex", "name": "The Bad Touch", "size": 754}
     ]
    },
    {
     "name": "brooke",
     "children": [
      {"selector": "Brooke", "name": "Telephone", "size": 783},
      {"selector": "Brooke", "name": "The Real Slim Shady", "size": 781},
      {"selector": "Brooke", "name": "Gold Digger", "size": 788},
      {"selector": "Brooke", "name": "Viva La Vida", "size": 808},
      {"selector": "Brooke", "name": "Sobbin' Women", "size": 345}
     ]
    },
    {
     "name": "cam",
     "children": [
      {"selector": "Cam", "name": "Roar", "size": 834},
      {"selector": "Cam", "name": "Kryptonite", "size": 781},
      {"selector": "Cam", "name": "Butterfly", "size": 744},
      {"selector": "Cam", "name": "It Wasn't Me", "size": 767},
      {"selector": "Cam", "name": "No Scrubs", "size": 767}
     ]
    },
    {
     "name": "chris",
     "children": [
      {"selector": "Chris", "name": "The Fox (What Does The Fox Say?)", "size": 782},
      {"selector": "Chris", "name": "Piano Man", "size": 765},
      {"selector": "Chris", "name": "Champagne Supernova", "size": 737},
      {"selector": "Chris", "name": "I Am A Cider Drinker (Paloma Blanca)", "size": 541},
      {"selector": "Chris", "name": "Keep on Loving You", "size": 720}
     ]
    },
    {
     "name": "ed",
     "children": [
      {"selector": "Ed", "name": "Hard In Da Paint", "size": 699},
      {"selector": "Ed", "name": "P.I.M.P.", "size": 746},
      {"selector": "Ed", "name": "crushcrushcrush", "size": 738},
      {"selector": "Ed", "name": "Hurt (Prod. Suicideyear)", "size": 622}
     ]
    },
    {
     "name": "freya",
     "children": [
      {"selector": "Freya", "name": "(I Just) Died in Your Arms", "size": 732},
      {"selector": "Freya", "name": "Beautiful Soul", "size": 620},
      {"selector": "Freya", "name": "Savin' Me", "size": 721},
      {"selector": "Freya", "name": "No Predjudice", "size": 621},
      {"selector": "Freya", "name": "Groove is in the Heart", "size": 715}
     ]
    },
    {
     "name": "grant",
     "children": [
      {"selector": "Grant", "name": "2 Hearts", "size": 613},
      {"selector": "Grant", "name": "When the Lights Go Out", "size": 631},
      {"selector": "Grant", "name": "Like A Prayer", "size": 726},
      {"selector": "Grant", "name": "Steam", "size": 530},
      {"selector": "Grant", "name": "Dumb", "size": 382}
     ]
    },
    {
     "name": "jen",
     "children": [
      {"selector": "Jen", "name": "How to Save a Life", "size": 801},
      {"selector": "Jen", "name": "Don't Stop Believin'", "size": 814},
      {"selector": "Jen", "name": "Will You Be There (Theme from Free Willy)", "size": 596},
      {"selector": "Jen", "name": "Come Sail Away", "size": 684},
      {"selector": "Jen", "name": "Rhythm Of Love", "size": 720}
     ]
    },
    {
     "name": "jim",
     "children": [
      {"selector": "Jim", "name": "Ramble On", "size": 729},
      {"selector": "Jim", "name": "Closer To The Heart", "size": 459},
      {"selector": "Jim", "name": "Night Fever", "size": 720},
      {"selector": "Jim", "name": "He's On The Phone", "size": 595},
      {"selector": "Jim", "name": "Heart Of The Sunrise", "size": 477}
     ]
    },
    {
     "name": "josh",
     "children": [
      {"selector": "Josh", "name": "Like Toy Soldiers", "size": 760},
      {"selector": "Josh", "name": "Everytime", "size": 726},
      {"selector": "Josh", "name": "All I Ever Wanted", "size": 712},
      {"selector": "Josh", "name": "These Words", "size": 711}
     ]
    },
    {
     "name": "kelly",
     "children": [
      {"selector": "Kelly", "name": "Kickstart My Heart", "size": 733},
      {"selector": "Kelly", "name": "Unskinny Bop", "size": 656},
      {"selector": "Kelly", "name": "Rock DJ", "size": 695}
     ]
    },
    {
     "name": "kyle",
     "children": [
      {"selector": "Kyle", "name": "Fighter", "size": 733},
      {"selector": "Kyle", "name": "Ist Deine Liebe Echt", "size": 501},
      {"selector": "Kyle", "name": "Me Lost Cookie At the Disco", "size": 517},
      {"selector": "Kyle", "name": "Angel Of Harlem", "size": 656},
      {"selector": "Kyle", "name": "Story of My Life", "size": 557}
     ]
    },
    {
     "name": "marten",
     "children": [
      {"selector": "Marten", "name": "Laying Pipe", "size": 436},
      {"selector": "Marten", "name": "Il Pulcino Pio", "size": 567}
     ]
    },
    {
     "name": "sarah",
     "children": [
      {"selector": "Sarah", "name": "All Around The World [ Feat. Collagen Girl ]", "size": 655},
      {"selector": "Sarah", "name": "Better Off Alone", "size": 518},
      {"selector": "Sarah", "name": "Dragostea Din Tei", "size": 708},
      {"selector": "Sarah", "name": "Ya Soshla S Uma", "size": 597},
      {"selector": "Sarah", "name": "Mr. Saxobeat", "size": 775}
     ]
    },
    {
     "name": "simone",
     "children": [
      {"selector": "Simone", "name": "Wind Of Change", "size": 753},
      {"selector": "Simone", "name": "I Will Always Love You", "size": 772},
      {"selector": "Simone", "name": "18 And Life", "size": 731},
      {"selector": "Simone", "name": "My Favourite Game", "size": 725}
     ]
    }
   ]
  }
 ]
}

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}

#tooltip {
  position: absolute;
  width: 220px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#tooltip.hidden {
  display: none;
}

#tooltip p {
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 20px;
}

</style>
<form>
  <label><input type="radio" name="mode" value="size" checked> No. of Spotify plays</label>
  <label><input type="radio" name="mode" value="count"> Equally sized</label>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 40, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var color = d3.scale.category20();

var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return Math.pow(10.,d.size/100.); });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");

var mousemove = function(d) {
  var xPosition = d3.event.pageX + 5;
  var yPosition = d3.event.pageY + 5;

  d3.select("#tooltip")
    .style("left", xPosition + "px")
    .style("top", yPosition + "px");
  d3.select("#tooltip #heading")
    .text(d["selector"]);
  d3.select("#tooltip #song")
    .text(d["name"]);
  d3.select("#tooltip #plays")
    .text(numberWithCommas(Math.floor(Math.pow(10.,d.size/100.))) + " Spotify plays");
  d3.select("#tooltip").classed("hidden", false);
};

var mouseout = function() {
  d3.select("#tooltip").classed("hidden", true);
};

d3.json("guilty.json", function(error, root) {
  if (error) throw error;

  var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? color(d.name) : null; })
      .on("mousemove", mousemove)
      .on("mouseout", mouseout)
      .text(function(d) { return d.children ? null : d.name; });

  d3.selectAll("input").on("change", function change() {
    var value = this.value === "count"
        ? function() { return 1; }
        : function(d) { return Math.pow(10.,d.size/100.); };

    node
        .data(treemap.value(value).nodes)
      .transition()
        .duration(1500)
        .call(position);
  });
});

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 2) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 2) + "px"; });
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

</script>

<div id="tooltip" class="hidden">
  <p><strong id="heading"></strong></p>
  <p><i><span id="song"></span></i></p>
  <p><span id="plays"></span></p>
</div>