Skip to content

Instantly share code, notes, and snippets.

@vpletzke

vpletzke/.block

Last active April 19, 2017 21:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vpletzke/c5716da6a021005e7167a9504c6849b2 to your computer and use it in GitHub Desktop.
Save vpletzke/c5716da6a021005e7167a9504c6849b2 to your computer and use it in GitHub Desktop.
Download ZIP
Bi-Level Partition with Labels
Raw
.block
license: mit
Raw
flare.json
{
"name": "UNC-CH Student Data",
"description": "UNC-CH Student Data",
"children": [
{
"name": "Race", "description": "Race",
"children": [
{"name": "American Indian or Alaskan Native", "description": "American Indian or Alaskan Native",
"children": [{"name":"American Indian or Alaskan Native", "description": "American Indian or Alaskan Native", "size":129}]
},
{"name": "Asian", "description": "Asian",
"children": [{"name":"Asian", "description": "Asian", "size":3759}]
},
{"name": "Black or African-American", "description": "Black or African-American",
"children": [{"name":"Black or African-American", "description": "Black or African-American", "size":2342}]
},
{"name": "Hispanic", "description": "Hispanic",
"children": [{"name":"Hispanic", "description": "Hispanic", "size":2145}]
},
{"name": "Native Hawaiian or Pacific Islander", "description": "Native Hawaiian or Pacific Islander",
"children": [{"name":"Native Hawaiian or Pacific Islander", "description": "Native Hawaiian or Pacific Islander", "size":43}]
},
{"name": "Race/Ethnicity Unknown", "description": "Race/Ethnicity Unknown",
"children": [{"name":"Race/Ethnicity Unknown", "description": "Race/Ethnicity Unknown", "size":1184}]
},
{"name": "Two or More Races", "description": "Two or More Races",
"children": [{"name":"Two or More Races", "description": "Two or More Races", "size":1610}]
},
{"name": "White", "description": "White",
"children": [{"name":"White", "description": "White", "size":18257}]
}
]
},
{
"name": "Gender",
"description": "Gender",
"children": [
{"name": "Female", "description": "Female",
"children": [{"name": "Female", "description": "Female", "size": 16827}]
},
{"name": "Male",
"description": "Male",
"children": [{"name": "Male", "description": "Male", "size": 12642}]
}
]
},
{
"name": "Age",
"description": "Age",
"children": [
{"name": "Under 25", "description": "Under 25",
"children": [{"name":"Under 25", "description": "Under 25", "size":20873}]
},
{"name": "25 and Over", "description": "25 and Over",
"children": [{"name":"25 and Over", "description": "25 and Over", "size":8595}]
}
]
},
{
"name": "Attendance", "description": "Attendance",
"children": [
{"name": "Full-Time", "description": "Full-Time",
"children": [{"name":"Full-Time", "description": "Full-Time", "size":25084}]
},
{"name": "Part-Time", "description": "Part-Time",
"children": [{"name":"Part-Time", "description": "Part-Time", "size":4385}]
}
]
},
{
"name": "Residency", "description": "Residency",
"children": [
{"name": "In-State", "description": "In-State",
"children": [{"name":"In-State", "description": "In-State", "size":21232}]
},
{"name": "Out-of-State", "description": "Out-of-State",
"children": [{"name":"Out-of-State", "description": "Out-of-State", "size":8237}]
}
]
},
{
"name": "Enrollment", "description": "Enrollment",
"children": [
{"name": "Undergraduate", "description": "Undergraduate",
"children": [{"name":"Undergraduate", "description": "Undergraduate", "size":18523}]
},
{"name": "Graduate", "description": "Graduate",
"children": [{"name":"Graduate", "description": "Graduate", "size":8427}]
},
{"name": "Professional", "description": "Professional",
"children": [{"name":"Professional", "description": "Professional", "size":2519}]
}
]
},
{
"name": "Citizenship", "description": "Citizenship",
"children": [
{"name": "US Citizen", "description": "US Citizen",
"children": [{"name":"US Citizen", "description": "US Citizen", "size":27114}]
},
{"name": "Resident Alien", "description": "Resident Alien",
"children": [{"name":"Resident Alien", "description": "Resident Alien", "size":763}]
},
{"name": "Nonresident Alien", "description": "Nonresident Alien",
"children": [{"name":"Nonresident Alien", "description": "Nonresident Alien", "size":1592}]
}
]
},
{
"name": "Proximity", "description": "Proximity",
"children": [
{"name": "On-Campus", "description": "On-Campus",
"children": [{"name":"On-Campus", "description": "On-Campus", "size":27100}]
},
{"name": "Off-Campus", "description": "Off-Campus",
"children": [{"name":"Off-Campus", "description": "Off-Campus", "size":2369}]
}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
circle,
path {
cursor: pointer;
}
circle {
fill: none;
pointer-events: all;
}
#tooltip { background-color: white;
padding: 3px 5px;
border: 1px solid black;
text-align: center;}
html {
font-family: sans-serif;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 350, right: 480, bottom: 350, left: 480},
radius = Math.min(margin.top, margin.right, margin.bottom, margin.left) - 10;
function filter_min_arc_size_text(d, i) {return (d.dx*d.depth*radius/3)>14};
var hue = d3.scale.category10();
var luminance = d3.scale.sqrt()
.domain([0, 1e6])
.clamp(true)
.range([90, 20]);
var svg = d3.select("body").append("svg")
.attr("width", margin.left + margin.right)
.attr("height", margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var partition = d3.layout.partition()
.sort(function(a, b) { return d3.ascending(a.name, b.name); })
.size([2 * Math.PI, radius]);
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx - .01 / (d.depth + .5); })
.innerRadius(function(d) { return radius / 3 * d.depth; })
.outerRadius(function(d) { return radius / 3 * (d.depth + 1) - 1; });
//Tooltip description
var tooltip = d3.select("body")
.append("div")
.attr("id", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("opacity", 0);
function format_number(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function format_description(d) {
var description = d.description;
return /* '<b>' + d.name + '</b></br>'+*/ d.description + '<br> (' + format_number(d.value) + ')';
}
function computeTextRotation(d) {
var angle=(d.x +d.dx/2)*180/Math.PI - 90;
return angle;
}
function mouseOverArc(d) {
d3.select(this).attr("stroke","black")
tooltip.html(format_description(d));
return tooltip.transition()
.duration(50)
.style("opacity", 0.9);
}
function mouseOutArc(){
d3.select(this).attr("stroke","")
return tooltip.style("opacity", 0);
}
function mouseMoveArc (d) {
return tooltip
.style("top", (d3.event.pageY-10)+"px")
.style("left", (d3.event.pageX+10)+"px");
}
var root_ = null;
d3.json("flare.json", function(error, root) {
if (error) return console.warn(error);
// Compute the initial layout on the entire tree to sum sizes.
// Also compute the full name and fill color for each node,
// and stash the children so they can be restored as we descend.
partition
.value(function(d) { return d.size; })
.nodes(root)
.forEach(function(d) {
d._children = d.children;
d.sum = d.value;
d.key = key(d);
d.fill = fill(d);
});
// Now redefine the value function to use the previously-computed sum.
partition
.children(function(d, depth) { return depth < 2 ? d._children : null; })
.value(function(d) { return d.sum; });
var center = svg.append("circle")
.attr("r", radius / 3)
.on("click", zoomOut);
center.append("title")
.text("zoom out");
var partitioned_data=partition.nodes(root).slice(1)
var path = svg.selectAll("path")
.data(partitioned_data)
.enter().append("path")
.attr("d", arc)
.style("fill", function(d) { return d.fill; })
.each(function(d) { this._current = updateArc(d); })
.on("click", zoomIn)
.on("mouseover", mouseOverArc)
.on("mousemove", mouseMoveArc)
.on("mouseout", mouseOutArc);
var texts = svg.selectAll("text")
.data(partitioned_data)
.enter().append("text")
.filter(filter_min_arc_size_text)
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return radius / 3 * d.depth; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d,i) {return d.name})
function zoomIn(p) {
if (p.depth > 1) p = p.parent;
if (!p.children) return;
zoom(p, p);
}
function zoomOut(p) {
if (!p.parent) return;
zoom(p.parent, p);
}
// Zoom to the specified new root.
function zoom(root, p) {
if (document.documentElement.__transition__) return;
// Rescale outside angles to match the new layout.
var enterArc,
exitArc,
outsideAngle = d3.scale.linear().domain([0, 2 * Math.PI]);
function insideArc(d) {
return p.key > d.key
? {depth: d.depth - 1, x: 0, dx: 0} : p.key < d.key
? {depth: d.depth - 1, x: 2 * Math.PI, dx: 0}
: {depth: 0, x: 0, dx: 2 * Math.PI};
}
function outsideArc(d) {
return {depth: d.depth + 1, x: outsideAngle(d.x), dx: outsideAngle(d.x + d.dx) - outsideAngle(d.x)};
}
center.datum(root);
// When zooming in, arcs enter from the outside and exit to the inside.
// Entering outside arcs start from the old layout.
if (root === p) enterArc = outsideArc, exitArc = insideArc, outsideAngle.range([p.x, p.x + p.dx]);
var new_data=partition.nodes(root).slice(1)
path = path.data(new_data, function(d) { return d.key; });
// When zooming out, arcs enter from the inside and exit to the outside.
// Exiting outside arcs transition to the new layout.
if (root !== p) enterArc = insideArc, exitArc = outsideArc, outsideAngle.range([p.x, p.x + p.dx]);
d3.transition().duration(d3.event.altKey ? 7500 : 750).each(function() {
path.exit().transition()
.style("fill-opacity", function(d) { return d.depth === 1 + (root === p) ? 1 : 0; })
.attrTween("d", function(d) { return arcTween.call(this, exitArc(d)); })
.remove();
path.enter().append("path")
.style("fill-opacity", function(d) { return d.depth === 2 - (root === p) ? 1 : 0; })
.style("fill", function(d) { return d.fill; })
.on("click", zoomIn)
.on("mouseover", mouseOverArc)
.on("mousemove", mouseMoveArc)
.on("mouseout", mouseOutArc)
.each(function(d) { this._current = enterArc(d); });
path.transition()
.style("fill-opacity", 1)
.attrTween("d", function(d) { return arcTween.call(this, updateArc(d)); });
});
texts = texts.data(new_data, function(d) { return d.key; })
texts.exit()
.remove()
texts.enter()
.append("text")
texts.style("opacity", 0)
.attr("transform", function(d) { return "rotate(" + computeTextRotation(d) + ")"; })
.attr("x", function(d) { return radius / 3 * d.depth; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.filter(filter_min_arc_size_text)
.text(function(d,i) {return d.name})
.transition().delay(750).style("opacity", 1)
}
});
function key(d) {
var k = [], p = d;
while (p.depth) k.push(p.name), p = p.parent;
return k.reverse().join(".");
}
function fill(d) {
var p = d;
while (p.depth > 1) p = p.parent;
var c = d3.lab(hue(p.name));
c.l = luminance(d.sum);
return c;
}
function arcTween(b) {
var i = d3.interpolate(this._current, b);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
function updateArc(d) {
return {depth: d.depth, x: d.x, dx: d.dx};
}
d3.select(self.frameElement).style("height", margin.top + margin.bottom + "px");
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment