Skip to content

Instantly share code, notes, and snippets.

@biovisualize
Forked from RichMorin/MBTI_3.json
Last active December 14, 2015 17:49
Show Gist options
  • Save biovisualize/5125315 to your computer and use it in GitHub Desktop.
Save biovisualize/5125315 to your computer and use it in GitHub Desktop.
<!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: 3px;
}
</style>
<form>
<label><input type="radio" name="mode" value="M" checked >Male</label>
<label><input type="radio" name="mode" value="F" >Female</label>
<label><input type="radio" name="mode" value="T" >Total</label>
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>
<script>
// Script adapted from http://bl.ocks.org/mbostock/4063582
// by Rich Morin, rdm@cfcl.com
//
// Myers-Briggs Type Index (MBTI) frequency statistics from:
// http://www.theanconas.com/MBTI/mfstats.htm
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.category10();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.value(function(d) { return d.sizes[0]; })
.padding(10);
var color = d3.scale.ordinal().domain(treemap.nodes).range(colorbrewer.YlGn[9]);
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 input = "MBTI_3.json";
var ndx_tbl = { "M": 0, "F": 1, "T": 2 };
d3.json(input, function(error, root) {
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; })
.text(function(d) { return d.children ? null : d.name; });
d3.selectAll("input").on("change", function change() {
var val_i = ndx_tbl[this.value];
var val_f = function(d) { return d.sizes[val_i]; };
node
.data(treemap.value(val_f).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 - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
</script>
{ "title": "MBTI_3.json",
"name": "MBTI",
"children": [
{
"name": "E",
"children": [
{
"name": "EN",
"children": [
{
"name": "ENF",
"children": [
{ "name": "ENFJ", "sizes": [ 1.6, 3.3, 2.5 ] },
{ "name": "ENFP", "sizes": [ 6.4, 9.7, 8.1 ] }
]
},
{
"name": "ENT",
"children": [
{ "name": "ENTJ", "sizes": [ 2.7, 0.9, 1.8 ] },
{ "name": "ENTP", "sizes": [ 4.0, 2.4, 3.2 ] }
]
}
]
},
{
"name": "ES",
"children": [
{
"name": "ESF",
"children": [
{ "name": "ESFJ", "sizes": [ 7.5, 16.9, 12.3 ] },
{ "name": "ESFP", "sizes": [ 6.9, 10.1, 8.5 ] }
]
},
{
"name": "EST",
"children": [
{ "name": "ESTJ", "sizes": [ 11.2, 6.3, 8.7 ] },
{ "name": "ESTP", "sizes": [ 5.6, 3.0, 4.3 ] }
]
}
]
}
]
},
{
"name": "I",
"children": [
{
"name": "IN",
"children": [
{
"name": "INF",
"children": [
{ "name": "INFJ", "sizes": [ 1.3, 1.6, 1.5 ] },
{ "name": "INFP", "sizes": [ 4.1, 4.6, 4.4 ] }
]
},
{
"name": "INT",
"children": [
{ "name": "INTJ", "sizes": [ 3.3, 0.8, 2.1 ] },
{ "name": "INTP", "sizes": [ 4.8, 1.8, 3.3 ] }
]
}
]
},
{
"name": "IS",
"children": [
{
"name": "ISF",
"children": [
{ "name": "ISFJ", "sizes": [ 8.1, 19.4, 13.8 ] },
{ "name": "ISFP", "sizes": [ 7.6, 9.9, 8.8 ] }
]
},
{
"name": "IST",
"children": [
{ "name": "ISTJ", "sizes": [ 16.4, 6.9, 11.6 ] },
{ "name": "ISTP", "sizes": [ 8.5, 2.4, 5.4 ] }
]
}
]
}
]
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment