Skip to content

Instantly share code, notes, and snippets.

@vpletzke

vpletzke/.block

Last active April 18, 2017 01:36
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/a53d29b7b7dfdbdd49ca229f3d7e3609 to your computer and use it in GitHub Desktop.
Save vpletzke/a53d29b7b7dfdbdd49ca229f3d7e3609 to your computer and use it in GitHub Desktop.
Download ZIP
Tree
Raw
.block
license: mit
Raw
flare.csv
id value
UNC-CH
UNC-CH.QuickFactsData
UNC-CH.QuickFactsData.Gender
UNC-CH.QuickFactsData.Gender.Female 16827
UNC-CH.QuickFactsData.Gender.Male 12642
UNC-CH.QuickFactsData.Age
UNC-CH.QuickFactsData.Age.Under 25 20873
UNC-CH.QuickFactsData.Age.25 and Over 8595
UNC-CH.QuickFactsData.Attendance
UNC-CH.QuickFactsData.Attendance.Full-Time 25084
UNC-CH.QuickFactsData.Attendance.Part-Time 4585
UNC-CH.QuickFactsData.Residency
UNC-CH.QuickFactsData.Residency.In-State 21232
UNC-CH.QuickFactsData.Residency.Out-of-State 8237
UNC-CH.QuickFactsData.Enrollment
UNC-CH.QuickFactsData.Enrollment.Undergraduate 18523
UNC-CH.QuickFactsData.Enrollment.Graduate 8427
UNC-CH.QuickFactsData.Enrollment.Professional 2519
UNC-CH.QuickFactsData.Citizenship
UNC-CH.QuickFactsData.Citizenship.US Citizen 27114
UNC-CH.QuickFactsData.Citizenship.Resident Alien 763
UNC-CH.QuickFactsData.Citizenship.Nonresident Alien 1592
UNC-CH.QuickFactsData.Proximity
UNC-CH.QuickFactsData.Proximity.On-Campus 27100
UNC-CH.QuickFactsData.Proximity.Off-Campus 2369
UNC-CH.QuickFactsData.Race
UNC-CH.QuickFactsData.Race.American Indian or Alaskan Native 129
UNC-CH.QuickFactsData.Race.Asian 3759
UNC-CH.QuickFactsData.Race.Black or African-American 2342
UNC-CH.QuickFactsData.Race.Hispanic 2145
UNC-CH.QuickFactsData.Race.Native Hawaiian or Pacific Islander 43
UNC-CH.QuickFactsData.Race.Race/Ethnicity Unknown 1184
UNC-CH.QuickFactsData.Race.Two or More Races 1610
UNC-CH.QuickFactsData.Race.White 18257
Raw
flare.json
{
"name": "UNC-CH Quick Facts Data",
"children": [
{"name": "Gender",
"children":
[
{"name": "Female", "size":16827},
{"name":"Male", "size":12642}]},
{"name":"Age",
"children":
[
{"name":"Under 25", "size":20873},
{"name":"25 and Over", "size":8595}]},
{"name":"Attendance",
"children":
[
{"name":"Full-Time", "size":25084},
{"name":"Part-Time", "size":4385}]},
{"name":"Residency",
"children":
[
{"name":"In-State", "size":21232},
{"name":"Out-of-State", "size":8237}]},
{"name":"Enrollment",
"children":
[
{"name":"Undergraduate", "size":18523},
{"name":"Graduate", "size":8427},
{"name":"Professional", "size":2519}]},
{"name":"Citizenship",
"children":
[
{"name":"US Citizen", "size":27114},
{"name":"Resident Alien", "size":763},
{"name":"Nonresident Alien", "size":1592}]},
{"name":"Proximity",
"children":
[
{"name":"On-Campus", "size":27100},
{"name":"Off-Campus", "size":2369}]},
{"name":"Race",
"children":
[
{"name":"American Indian or Alaskan Native", "size":129}]},
{"name":"Asian", "size":27114},
{"name":"Black or African-American", "size":3759},
{"name":"Hispanic", "size":2342},
{"name":"Native Hawaiian or Pacific Islander", "size":2145},
{"name":"Race/Ethnicity Unknown", "size":43},
{"name":"Two or More Races", "size":1184},
{"name":"White", "size":18257}]}
]
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 12px sans-serif;
position: relative;
}
.node {
box-sizing: border-box;
position: absolute;
overflow: hidden;
}
.node-label {
padding: 10px;
line-height: 1em;
white-space: pre;
}
.node-value {
color: rgba(0,0,0,0.8);
font-size: 10px;
margin-top: 1px;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 1060;
var format = d3.format(",d");
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10
.map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
d3.csv("flare.csv", type, function(error, data) {
if (error) throw error;
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
d3.select("body")
.selectAll(".node")
.data(root.leaves())
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) { return d.id + "\n" + format(d.value); })
.style("left", function(d) { return d.x0 + "px"; })
.style("top", function(d) { return d.y0 + "px"; })
.style("width", function(d) { return d.x1 - d.x0 + "px"; })
.style("height", function(d) { return d.y1 - d.y0 + "px"; })
.style("background", function(d) { while (d.depth > 2) d = d.parent; return color(d.id); })
.append("div")
.attr("class", "node-label")
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\n"); })
.append("div")
.attr("class", "node-value")
.text(function(d) { return format(d.value); });
});
function type(d) {
d.value = +d.value;
return d;
}
</script>
Raw
index2.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
position: relative;
}
.node {
box-sizing: border-box;
position: absolute;
overflow: hidden;
}
.node-label {
padding: 4px;
line-height: 1em;
white-space: pre;
}
.node-value {
color: rgba(0,0,0,0.8);
font-size: 9px;
margin-top: 1px;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 961,
height = 1061,
ratio = 4;
var format = d3.format(",d");
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10
.map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var treemap = d3.treemap()
.tile(d3.treemapSquarify.ratio(1))
.size([width / ratio, height]);
d3.csv("flare.csv", type, function(error, data) {
if (error) throw error;
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
d3.select("body")
.selectAll(".node")
.data(root.leaves())
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) { return d.id + "\n" + format(d.value); })
.style("left", function(d) { return Math.round(d.x0 * ratio) + "px"; })
.style("top", function(d) { return Math.round(d.y0) + "px"; })
.style("width", function(d) { return Math.round(d.x1 * ratio) - Math.round(d.x0 * ratio) - 1 + "px"; })
.style("height", function(d) { return Math.round(d.y1) - Math.round(d.y0) - 1 + "px"; })
.style("background", function(d) { while (d.depth > 1) d = d.parent; return color(d.id); })
.append("div")
.attr("class", "node-label")
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1); })
.append("div")
.attr("class", "node-value")
.text(function(d) { return format(d.value); });
});
function type(d) {
d.value = +d.value;
return d;
}
</script>
Raw
index3.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text {
font: 10px sans-serif;
text-anchor: middle;
}
.node--hover circle {
stroke: #000;
stroke-width: 1.2px;
}
</style>
<svg width="960" height="960"><g transform="translate(1,1)"></g></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var format = d3.format(",d");
var color = d3.scaleSequential(d3.interpolateMagma)
.domain([-4, 4]);
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var pack = d3.pack()
.size([width - 2, height - 2])
.padding(3);
d3.csv("flare.csv", function(error, data) {
if (error) throw error;
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.value - a.value; });
pack(root);
var node = svg.select("g")
.selectAll("g")
.data(root.descendants())
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.attr("class", function(d) { return "node" + (!d.children ? " node--leaf" : d.depth ? "" : " node--root"); })
.each(function(d) { d.node = this; })
.on("mouseover", hovered(true))
.on("mouseout", hovered(false));
node.append("circle")
.attr("id", function(d) { return "node-" + d.id; })
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.depth); });
var leaf = node.filter(function(d) { return !d.children; });
leaf.append("clipPath")
.attr("id", function(d) { return "clip-" + d.id; })
.append("use")
.attr("xlink:href", function(d) { return "#node-" + d.id + ""; });
leaf.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.id + ")"; })
.selectAll("tspan")
.data(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g); })
.enter().append("tspan")
.attr("x", 0)
.attr("y", function(d, i, nodes) { return 13 + (i - nodes.length / 2 - 0.5) * 10; })
.text(function(d) { return d; });
node.append("title")
.text(function(d) { return d.id + "\n" + format(d.value); });
});
function hovered(hover) {
return function(d) {
d3.selectAll(d.ancestors().map(function(d) { return d.node; })).classed("node--hover", hover);
};
}
</script>
Raw
skillsdata.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 3 columns, instead of 2. in line 1.
id,value,color
UNC-CH QuickFactsData,
UNC-CH QuickFactsData.Gender,
UNC-CH QuickFactsData.Gender.Female - 16827,16827,#808080
UNC-CH QuickFactsData.Gender.Male,12642,#2E2575
UNC-CH QuickFactsData.Age,
UNC-CH QuickFactsData.Age.Under 25,20873,#808080
UNC-CH QuickFactsData.Age.25 and Over,8595,#2E2575
UNC-CH QuickFactsData.Attendance,
UNC-CH QuickFactsData.Attendance.Full-Time,25084,#808080
UNC-CH QuickFactsData.Attendance.Part-Time,4585,#2E2575
UNC-CH QuickFactsData.Residency,
UNC-CH QuickFactsData.Residency.In-State,21232,#808080
UNC-CH QuickFactsData.Residency.Out-of-State,8237,#2E2575
UNC-CH QuickFactsData.Enrollment,
UNC-CH QuickFactsData.Enrollment.Undergraduate,18523,#808080
UNC-CH QuickFactsData.Enrollment.Graduate,8427,#2E2575
UNC-CH QuickFactsData.Enrollment.Professional,2519,#E54F24
UNC-CH QuickFactsData.Citizenship,
UNC-CH QuickFactsData.Citizenship.US Citizen,27114,#808080
UNC-CH QuickFactsData.Citizenship.Resident Alien,763,#2E2575
UNC-CH QuickFactsData.Citizenship.Nonresident Alien,1592,#E54F24
UNC-CH QuickFactsData.Proximity,
UNC-CH QuickFactsData.Proximity.On-Campus,27100,#808080
UNC-CH QuickFactsData.Proximity.Off-Campus,2369,#2E2575
UNC-CH QuickFactsData.Race,
UNC-CH QuickFactsData.Race.American Indian or Alaskan Native,129,#808080
UNC-CH QuickFactsData.Race.Asian,3759,#2E2575
UNC-CH QuickFactsData.Race.Black or African-American,2342,#E54F24
UNC-CH QuickFactsData.Race.Hispanic,2145,#FF9900
UNC-CH QuickFactsData.Race.Native Hawaiian or Pacific Islander,43,#563B7E
UNC-CH QuickFactsData.Race.Race/Ethnicity Unknown,1184,#D6BA33
UNC-CH QuickFactsData.Race.Two or More Races,1610,#1169AE
UNC-CH QuickFactsData.Race.White,18257,#F6854D
Raw
treeman.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
position: relative;
}
.node {
box-sizing: border-box;
position: absolute;
overflow: hidden;
}
.node-label {
padding: 4px;
line-height: 1em;
white-space: pre;
}
.node-value {
color: rgba(0,0,0,0.8);
font-size: 9px;
margin-top: 1px;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 960,
height = 1060;
var format = d3.format(",d");
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10
.map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
d3.csv("flare.csv", type, function(error, data) {
if (error) throw error;
var root = stratify(data)
.sum(function(d) { return d.value; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
d3.select("body")
.selectAll(".node")
.data(root.leaves())
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) { return d.id + "\n" + format(d.value); })
.style("left", function(d) { return d.x0 + "px"; })
.style("top", function(d) { return d.y0 + "px"; })
.style("width", function(d) { return d.x1 - d.x0 + "px"; })
.style("height", function(d) { return d.y1 - d.y0 + "px"; })
.style("background", function(d) { while (d.depth > 2) d = d.parent; return color(d.id); })
.append("div")
.attr("class", "node-label")
.text(function(d) { return d.id.substring(d.id.lastIndexOf(".") + 1).split(/(?=[A-Z][^A-Z])/g).join("\n"); })
.append("div")
.attr("class", "node-value")
.text(function(d) { return format(d.value); });
});
function type(d) {
d.value = +d.value;
return d;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment