treemap color scale

_.md

[ Launch: treemap color scale ] ce8a46fc87f990a40c6c by enjalot
[ Launch: reddit comments treemap ] 93994c1a2dc7099340e2 by ptvans
[ Launch: reddit comments ] 6604854 by enjalot

comments.json

[{"kind": "Listing", "data": {"modhash": "cmjawpn2y305492f1d3fe3212ca21dae39eb8f538689cafd3a", "children": [{"kind": "t3", "data": {"domain": "imgur.com", "banned_by": null, "media_embed": {}, "subreddit": "pics", "selftext_html": null, "selftext": "", "likes": null, "secure_media": null, "saved": false, "id": "1mlvag", "secure_media_embed": {}, "clicked": false, "stickied": false, "author": "DizzleDe", "media": null, "score": 1533, "approved_by": null, "over_18": false, "hidden": false, "thumbnail": "http://c.thumbs.redditmedia.com/DgNR2wx7ejsNV9p8.jpg", "subreddit_id": "t5_2qh0u", "edited": false, "link_flair_css_class": null, "author_flair_css_class": null, "downs": 883, "is_self": false, "permalink": "/r/pics/comments/1mlvag/art_on_a_steel_beam_under_a_bridge/", "name": "t3_1mlvag", "created": 1379489987.0, "url": "http://imgur.com/hHzSk4a", "author_flair_text": null, "title": "Art on a steel beam under a bridge.", "created_utc": 1379461187.0, "link_flair_text": null, "ups": 2416, "num_comments": 18, "num_reports": null, "distinguished": null}}], "after": null, "before": null}}, {"kind": "Listing", "data": {"modhash": "cmjawpn2y305492f1d3fe3212ca21dae39eb8f538689cafd3a", "children": [{"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": {"kind": "Listing", "data": {"modhash": "cmjawpn2y305492f1d3fe3212ca21dae39eb8f538689cafd3a", "children": [{"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": {"kind": "Listing", "data": {"modhash": "cmjawpn2y305492f1d3fe3212ca21dae39eb8f538689cafd3a", "children": [{"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": {"kind": "Listing", "data": {"modhash": "cmjawpn2y305492f1d3fe3212ca21dae39eb8f538689cafd3a", "children": [{"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccal4se", "gilded": 0, "author": "RomeoJulietSierra", "parent_id": "t1_ccal00z", "approved_by": null, "body": "I like your version best.  ", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>I like your version best.  </p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccal4se", "created": 1379507992.0, "author_flair_text": null, "created_utc": 1379479192.0, "distinguished": null, "num_reports": null, "ups": 1}}], "after": null, "before": null}}, "id": "ccal00z", "gilded": 0, "author": "thelloydxmas", "parent_id": "t1_ccajl5s", "approved_by": null, "body": "Me too. I was ready to drop \"that's neither steel nor a beam, but who's counting...\"", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>Me too. I was ready to drop "that's neither steel nor a beam, but who's counting..."</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccal00z", "created": 1379507494.0, "author_flair_text": null, "created_utc": 1379478694.0, "distinguished": null, "num_reports": null, "ups": 1}}], "after": null, "before": null}}, "id": "ccajl5s", "gilded": 0, "author": "CaptainJackAubrey", "parent_id": "t1_ccagou3", "approved_by": null, "body": "EIEIO Dag nabit.\n\nI was all jazzed up about making a Schrute \"false. that is concrete\" comment.\n\nSigh.", "edited": false, "author_flair_css_class": null, "downs": 2, "body_html": "<div class=\"md\"><p>EIEIO Dag nabit.</p>\n\n<p>I was all jazzed up about making a Schrute "false. that is concrete" comment.</p>\n\n<p>Sigh.</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccajl5s", "created": 1379502619.0, "author_flair_text": null, "created_utc": 1379473819.0, "distinguished": null, "num_reports": null, "ups": 9}}], "after": null, "before": null}}, "id": "ccagou3", "gilded": 0, "author": "MajorLazy", "parent_id": "t3_1mlvag", "approved_by": null, "body": "It's a concrete column.  But we get the idea.", "edited": false, "author_flair_css_class": null, "downs": 11, "body_html": "<div class=\"md\"><p>It's a concrete column.  But we get the idea.</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccagou3", "created": 1379493475.0, "author_flair_text": null, "created_utc": 1379464675.0, "distinguished": null, "num_reports": null, "ups": 90}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccal3sr", "gilded": 0, "author": "IHv2RtrnSumVdeotapes", "parent_id": "t3_1mlvag", "approved_by": null, "body": "thats where i drew some blood.", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>thats where i drew some blood.</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccal3sr", "created": 1379507887.0, "author_flair_text": null, "created_utc": 1379479087.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": {"kind": "Listing", "data": {"modhash": "cmjawpn2y305492f1d3fe3212ca21dae39eb8f538689cafd3a", "children": [{"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccalk4w", "gilded": 0, "author": "GeekyAine", "parent_id": "t1_ccal45u", "approved_by": null, "body": "Live every week like it's Shark Week!! (I mean, there are so many more reposts out there that aren't mutha fuckin sharks. So between reddiquette and the fact that OP didn't claim it was made by his autistic step-son's best friend with inoperable brain cancer - maybe we can let this one slide?)", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>Live every week like it's Shark Week!! (I mean, there are so many more reposts out there that aren't mutha fuckin sharks. So between reddiquette and the fact that OP didn't claim it was made by his autistic step-son's best friend with inoperable brain cancer - maybe we can let this one slide?)</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccalk4w", "created": 1379509764.0, "author_flair_text": null, "created_utc": 1379480964.0, "distinguished": null, "num_reports": null, "ups": 1}}], "after": null, "before": null}}, "id": "ccal45u", "gilded": 0, "author": "ubsr1024", "parent_id": "t3_1mlvag", "approved_by": null, "body": "**REPOS-** ah fuck it, why even bother anymore?", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p><strong>REPOS-</strong> ah fuck it, why even bother anymore?</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccal45u", "created": 1379507924.0, "author_flair_text": null, "created_utc": 1379479124.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccal763", "gilded": 0, "author": "Snickerbars", "parent_id": "t3_1mlvag", "approved_by": null, "body": "I'd feel bad tagging or having to repaint it, I hope this was commissioned. ", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>I'd feel bad tagging or having to repaint it, I hope this was commissioned. </p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccal763", "created": 1379508256.0, "author_flair_text": null, "created_utc": 1379479456.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccahy56", "gilded": 0, "author": "stormtide311", "parent_id": "t3_1mlvag", "approved_by": null, "body": "not sure, but I'd google it.\n\nI believe its work by Totem2 or Mr.totem . I could swear he did this for one of his pieces some time in mid-2002.", "edited": false, "author_flair_css_class": null, "downs": 1, "body_html": "<div class=\"md\"><p>not sure, but I'd google it.</p>\n\n<p>I believe its work by Totem2 or Mr.totem . I could swear he did this for one of his pieces some time in mid-2002.</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccahy56", "created": 1379497536.0, "author_flair_text": null, "created_utc": 1379468736.0, "distinguished": null, "num_reports": null, "ups": 3}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccakn3l", "gilded": 0, "author": "thewizzard1", "parent_id": "t3_1mlvag", "approved_by": null, "body": "Is this in Oahu, Hawaii?", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>Is this in Oahu, Hawaii?</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccakn3l", "created": 1379506102.0, "author_flair_text": null, "created_utc": 1379477302.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccakuck", "gilded": 0, "author": "s3rr00", "parent_id": "t3_1mlvag", "approved_by": null, "body": "Is this in Leverkusen, Germany?\n", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>Is this in Leverkusen, Germany?</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccakuck", "created": 1379506878.0, "author_flair_text": null, "created_utc": 1379478078.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccakzn6", "gilded": 0, "author": "nootrino", "parent_id": "t3_1mlvag", "approved_by": null, "body": "Portal!", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>Portal!</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccakzn6", "created": 1379507453.0, "author_flair_text": null, "created_utc": 1379478653.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccal6o3", "gilded": 0, "author": "EyeHamKnotYew", "parent_id": "t3_1mlvag", "approved_by": null, "body": "Outside Philly?", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>Outside Philly?</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccal6o3", "created": 1379508198.0, "author_flair_text": null, "created_utc": 1379479398.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccali1d", "gilded": 0, "author": "VassilZaitsev", "parent_id": "t3_1mlvag", "approved_by": null, "body": "For anyone wondering, I'm pretty sure I've seen this on the bike path heading out from Lac Leamy, in Gatineau Qc.", "edited": false, "author_flair_css_class": null, "downs": 0, "body_html": "<div class=\"md\"><p>For anyone wondering, I'm pretty sure I've seen this on the bike path heading out from Lac Leamy, in Gatineau Qc.</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": true, "name": "t1_ccali1d", "created": 1379509508.0, "author_flair_text": null, "created_utc": 1379480708.0, "distinguished": null, "num_reports": null, "ups": 1}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccajak4", "gilded": 0, "author": "jesbaker", "parent_id": "t3_1mlvag", "approved_by": null, "body": "GAHHHHHHHD this again. At least it didn't say graffiti done right or some other retarded title but seriously stop it. ", "edited": false, "author_flair_css_class": null, "downs": 8, "body_html": "<div class=\"md\"><p>GAHHHHHHHD this again. At least it didn't say graffiti done right or some other retarded title but seriously stop it. </p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccajak4", "created": 1379501678.0, "author_flair_text": null, "created_utc": 1379472878.0, "distinguished": null, "num_reports": null, "ups": 8}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccajs1z", "gilded": 0, "author": "janewoodroof", "parent_id": "t3_1mlvag", "approved_by": null, "body": "Wow. That's really good! ", "edited": false, "author_flair_css_class": null, "downs": 1, "body_html": "<div class=\"md\"><p>Wow. That's really good! </p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccajs1z", "created": 1379503224.0, "author_flair_text": null, "created_utc": 1379474424.0, "distinguished": null, "num_reports": null, "ups": 2}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccaki0c", "gilded": 0, "author": "krulltheking", "parent_id": "t3_1mlvag", "approved_by": null, "body": "[made some ,*ahem*, adjustments](http://i.imgur.com/pNBfVUN.jpg)", "edited": false, "author_flair_css_class": null, "downs": 3, "body_html": "<div class=\"md\"><p><a href=\"http://i.imgur.com/pNBfVUN.jpg\">made some ,<em>ahem</em>, adjustments</a></p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccaki0c", "created": 1379505599.0, "author_flair_text": null, "created_utc": 1379476799.0, "distinguished": null, "num_reports": null, "ups": 2}}, {"kind": "t1", "data": {"subreddit_id": "t5_2qh0u", "banned_by": null, "subreddit": "pics", "likes": null, "replies": "", "id": "ccagia5", "gilded": 0, "author": "RalphiesBoogers", "parent_id": "t3_1mlvag", "approved_by": null, "body": "/r/SharkleJerk is leaking again", "edited": false, "author_flair_css_class": null, "downs": 8, "body_html": "<div class=\"md\"><p><a href=\"/r/SharkleJerk\">/r/SharkleJerk</a> is leaking again</p>\n</div>", "link_id": "t3_1mlvag", "score_hidden": false, "name": "t1_ccagia5", "created": 1379492878.0, "author_flair_text": null, "created_utc": 1379464078.0, "distinguished": null, "num_reports": null, "ups": 5}}], "after": null, "before": null}}]

config.json

{"description":"treemap color scale","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"comments.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/QROKi6T.png","controls":{"dimension":"ups"},"ajax-caching":true}

inlet.js

/* OPEN YOUR CONSOLE (always while developing) */
console.log(tributary.comments);
/*
FROM: 
 http://www.reddit.com/r/pics/comments/1mlvag/art_on_a_steel_beam_under_a_bridge.json
regular url: 
 http://www.reddit.com/r/pics/comments/1mlvag/art_on_a_steel_beam_under_a_bridge
*/
d3.select("#display").style("background-color","#fff")



//let's make a treemap and expandable tree
var comments = tributary.comments[1].data;
var dim = "ups";
dim = tributary.control({name: "dimension", options: ["ups", "downs"]})
var color = d3.scale.category20c();
var qcolor = d3.scale.quantize()
	.domain([1,9])
	.range(["#D0D4E4","#A9B2CD","#8590B2","#636F96"]);


var treemap = d3.layout.treemap()
.size([800,500])
.sort(function(a,b) { return a.data[dim] - b.data[dim] })
.value(function(d) { return d.data[dim] })
.children(function(d) { return d.children })

var nodes = treemap.nodes(comments)

var svg = d3.select("svg");
var gs = svg.selectAll("g.cell")
.data(nodes)
.enter()
.append("g").classed("cell",true);
gs.append("rect")
.attr({
  x: function(d) { return 70 + d.x },
  y: function(d) { return 70 + d.y },
  width: function(d) { return d.dx -2 },
  height: function(d) { return d.dy -2},
  title: function(d) { if(d.data) return d.data.body + " ups: " + d.data.ups + " downs: " + d.data.downs }
})
.style({
  opacity: function(d) { return !!d.parent},
  fill: function(d) { if(d.parent) return qcolor(d.data.ups) }
})
.on("click", function(d) {
  var dis = d3.select(this);
  dis.classed("active", !dis.classed("active"))
})

var nested = d3.nest()
.key(function(d) { return d.data.id})
.rollup(function(d) { return d.data.ups })
.map(comments)
//console.log("nested", nested)

style.css

svg {
	stroke-width: 0px; 
  	background-color: white;
}


rect {
	/*stroke: #D0D4E4;*/
  	stroke: #fff;
	stroke-width: 2px;
  	opacity: 0.95;
}

rect:hover {
	opacity:1;
  	stroke: #46527B;
  	z-index: 1000;
  stroke-width: 2px;
}

rect:active {
	opacity: 1.0;
  stroke: #23345E;
  /*stroke: #5890FF;*/
  stroke-width: 4px;
}

rect.active {
	opacity: 1.0;
	stroke: #23345E;
  stroke-width: 4px;
}