Skip to content

Instantly share code, notes, and snippets.

@drarnakarick

drarnakarick/.block

Last active April 25, 2018 05:45
Show Gist options
  • Save drarnakarick/17a7e94c5a50a7a0bb3410750e638f8f to your computer and use it in GitHub Desktop.
Save drarnakarick/17a7e94c5a50a7a0bb3410750e638f8f to your computer and use it in GitHub Desktop.
Download ZIP
Visualising an Art Exhibition – Studio 12
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<style>
form {
font-family: "Poppins", Poppins, sans-serif;
}
svg {
font: 10px sans-serif;
}
</style>
<svg width="960" height="570"></svg>
<form>
<label><input type="radio" name="mode" value="sumBySize" checked> Size</label>
<label><input type="radio" name="mode" value="sumByCount"> Count</label>
</form>
<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 color = d3.scaleOrdinal().range(['red','orange', 'yellow','green', 'blue', 'purple', 'grey','magenta','pink']),
format = d3.format(",d");
var treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([width, height])
.round(true)
.paddingInner(2);
d3.json("studio12_data.json", function(error, data) {
if (error) throw error;
var root = d3.hierarchy(data)
.eachBefore(function(d) { d.data.id = (d.parent ? d.parent.data.id + "." : "") + d.data.name; })
.sum(sumBySize)
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
var cell = svg.selectAll("g")
.data(root.leaves())
.enter().append("g")
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; });
cell.append("rect")
.attr("id", function(d) { return d.data.id; })
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; })
.attr("fill", function(d) { return color(d.parent.data.id); });
cell.append("clipPath")
.attr("id", function(d) { return "clip-" + d.data.id; })
.append("use")
.attr("xlink:href", function(d) { return "#" + d.data.id; });
cell.append("text")
.attr("clip-path", function(d) { return "url(#clip-" + d.data.id + ")"; })
.selectAll("tspan")
.data(function(d) { return d.data.name.split(/(?=[A-Z][^A-Z])/g); })
.enter().append("tspan")
.attr("x", 4)
.attr("y", function(d, i) { return 13 + i * 10; })
.text(function(d) { return d; });
cell.append("title")
.text(function(d) { return d.data.id + "\n" + format(d.value); });
d3.selectAll("input")
.data([sumBySize, sumByCount], function(d) { return d ? d.name : this.value; })
.on("change", changed);
var timeout = d3.timeout(function() {
d3.select("input[value=\"sumByCount\"]")
.property("checked", true)
.dispatch("change");
}, 2000);
function changed(sum) {
timeout.stop();
treemap(root.sum(sum));
cell.transition()
.duration(750)
.attr("transform", function(d) { return "translate(" + d.x0 + "," + d.y0 + ")"; })
.select("rect")
.attr("width", function(d) { return d.x1 - d.x0; })
.attr("height", function(d) { return d.y1 - d.y0; });
}
});
function sumByCount(d) {
return d.children ? 0 : 1;
}
function sumBySize(d) {
return d.size;
}
</script>
</body>
Raw
studio12_data.json
{
"name": "exhibition",
"children": [
{
"name": "Rosemary",
"children": [
{"name":"Rosemary's Oils",
"children": [
{"name": "Rosemary's Oils","size":275},
{"name": "","size":390},
{"name": "","size":420},
{"name": "","size":450}
]},
{"name": "Rosemary's Watercolors",
"children": [
{"name": "Rosemary's Watercolors","size":180},
{"name": "","size":180}
]},
{"name": "Rosemary's Pastel",
"children": [
{"name": "Rosemary's Pastels","size":200},
{"name": " ","size":200},
{"name": "","size":200},
{"name": "","size":220},
{"name": "","size":320},
{"name": "","size":380},
{"name": "","size":390},
{"name": "","size":420},
{"name": "","size":560}
]}
]},
{
"name": "Lorna",
"children": [
{"name":"Lorna's Oils",
"children": [
{"name": "Lorna's Acylic","size":200},
{"name": "","size":200},
{"name": "","size":350},
{"name": "","size":400}
]},
{"name": "Lorna's Watercolors",
"children": [
{"name": "Lorna's Watercolors","size":190},
{"name": "","size":190},
{"name": "","size":240}
]},
{"name": "Lorna's Acylic MM",
"children": [
{"name": "Lorna's Acylic MM","size":195},
{"name": " ","size":350},
{"name": "","size":750},
{"name": "","size":950},
{"name": "","size":970},
{"name": "","size":1400}
]}
]},
{
"name": "John",
"children": [
{"name":"John's Acrylics",
"children": [
{"name": "John's Acrylics","size":150},
{"name": "","size":150},
{"name": "","size":225},
{"name": "","size":850},
{"name": "","size":850}
]},
{"name": "John's Oils",
"children": [
{"name": "John's Oils","size":220},
{"name": "","size":850}
]},
{"name": "John's P+W",
"children": [
{"name": "John's P+W","size":150},
{"name": " ","size":150},
{"name": "","size":150},
{"name": "","size":150},
{"name": "","size":220},
{"name": "","size":220},
{"name": "","size":250},
{"name": "","size":350},
{"name": "","size":350},
{"name": "","size":395}
]}
]},
{
"name": "Jacqui",
"children": [
{"name":"Jacqui's Oils",
"children": [
{"name": "Jacqui's Oils","size":150},
{"name": "","size":230},
{"name": "","size":250},
{"name": "","size":350},
{"name": "","size":395},
{"name": "","size":400},
{"name": "","size":450},
{"name": "","size":450},
{"name": "","size":695}
]},
{"name": "Jacqui''s Watercolors",
"children": [
{"name": "Jacqui's Watercolors","size":280},
{"name": "","size":495}
]},
{"name": "Jacqui's Mixed Media",
"children": [
{"name": "Jacqui's Pastels","size":85},
{"name": " ","size":220}
]}
]},
{
"name": "Joan",
"children": [
{"name":"Joans's Oils",
"children": [
{"name": "Joans's Oils","size":180},
{"name": "","size":220},
{"name": "","size":280},
{"name": "","size":280},
{"name": "","size":320},
{"name": "","size":320},
{"name": "","size":400},
{"name": "","size":400},
{"name": "","size":480}
]},
{"name": "Joan's Pastels",
"children": [
{"name": "Joan's Pastels","size":160},
{"name": "","size":250},
{"name": "","size":330}
]}
]},
{
"name": "Hilda",
"children": [
{
"name":"Hilda's Oils",
"children": [
{"name": "Hilda's Oils","size":150},
{"name": "","size":195},
{"name": "","size":230},
{"name": "","size":300},
{"name": "","size":350},
{"name": "","size":375},
{"name": "","size":400},
{"name": "","size":450},
{"name": "","size":500},
{"name": "","size":500},
{"name": "","size":500},
{"name": "","size":500},
{"name": "","size":500},
{"name": "","size":500}
]}
]},
{
"name": "Sandra",
"children": [
{
"name":"Sandra's Oils",
"children": [
{"name": "Sandra's Oils","size":175},
{"name": "","size":175},
{"name": "","size":325},
{"name": "","size":395},
{"name": "","size":595},
{"name": "","size":595},
{"name": "","size":595},
{"name": "","size":595},
{"name": "","size":595},
{"name": "","size":595},
{"name": "","size":600}
]}
]},
{
"name": "Wendy",
"children": [
{
"name":"Wendy's w/c",
"children": [
{"name": "Wendy's w/c","size":175},
{"name": "","size":175},
{"name": "","size":300},
{"name": "","size":300},
{"name": "","size":425},
{"name": "","size":475},
{"name": "","size":475},
{"name": "","size":525},
{"name": "","size":750},
{"name": "","size":750}
]}
]},
{
"name": "Richard",
"children": [
{
"name":"Richard's Oils",
"children": [
{"name": "Richard's Oils","size":125},
{"name": "","size":275},
{"name": "","size":275},
{"name": "","size":275},
{"name": "","size":395},
{"name": "","size":495},
{"name": "","size":875},
{"name": "","size":495}
]}
]},
{
"name": "Paula",
"children": [
{
"name":"Paula's Oils",
"children": [
{"name": "Paula's Oils","size":275},
{"name": "","size":390},
{"name": "","size":420},
{"name": "","size":450}
]
},
{
"name": "Paula's Watercolors",
"children": [
{"name": "Paula's Watercolors","size":180},
{"name": "","size":180}
]
},
{
"name": "Paula's Pastel",
"children": [
{"name": "Paula's Pastel","size":200},
{"name": "","size":200},
{"name": "","size":200},
{"name": "","size":220},
{"name": "","size":320},
{"name": "","size":380},
{"name": "","size":390},
{"name": "","size":420},
{"name": "","size":560}
]}
]}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment