Skip to content

Instantly share code, notes, and snippets.

@andrewwitherspoon

andrewwitherspoon/.block

Last active February 20, 2019 20:48
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 andrewwitherspoon/b2839890d0373b2dd20f1d129e2cadd7 to your computer and use it in GitHub Desktop.
Save andrewwitherspoon/b2839890d0373b2dd20f1d129e2cadd7 to your computer and use it in GitHub Desktop.
Download ZIP
Google requests treemap
Raw
.block
border: no
height: 600
license: gpl-3.0
Raw
README.md
Raw
flare.json
{
"name": "flare",
"children": [
{
"name": "Africa",
"children": [
{"name":"Algeria","size":2},
{"name":"Brunei","size":1},
{"name":"Djibouti","size":2},
{"name":"Egypt","size":16},
{"name":"Gambia","size":2},
{"name":"Ghana","size":1},
{"name":"Kenya","size":8},
{"name":"Libya","size":220},
{"name":"Madagascar","size":2},
{"name":"Mali","size":1},
{"name":"Mauritius","size":9},
{"name":"Morocco","size":2},
{"name":"Nigeria","size":4},
{"name":"Senegal","size":2},
{"name":"Sierra Leone","size":1},
{"name":"Somalia","size":1},
{"name":"South Africa","size":28},
{"name":"Tanzania","size":1},
{"name":"Togo","size":1},
{"name":"Tunisia","size":1},
{"name":"Zambia","size":1}
]
},
{
"name": "Americas",
"children": [
{"name":"Argentina","size":737},
{"name":"Bolivia","size":4},
{"name":"Brazil","size":6455},
{"name":"Canada","size":768},
{"name":"Chile","size":20},
{"name":"Colombia","size":43},
{"name":"Dominican Republic","size":4},
{"name":"Ecuador","size":83},
{"name":"El Salvador","size":2},
{"name":"French Guiana","size":1},
{"name":"Guatemala","size":10},
{"name":"Guyana","size":1},
{"name":"Jamaica","size":1},
{"name":"Mexico","size":115},
{"name":"Nicaragua","size":1},
{"name":"Panama","size":11},
{"name":"Paraguay","size":1},
{"name":"Peru","size":57},
{"name":"Puerto Rico","size":0},
{"name":"United States","size":7964},
{"name":"Uruguay","size":4},
{"name":"Venezuela","size":11}
]
},
{
"name": "Asia",
"children": [
{"name":"South Korea","size":2098},
{"name":"Afghanistan","size":7},
{"name":"Armenia","size":20},
{"name":"Azerbaijan","size":7},
{"name":"Bahrain","size":1},
{"name":"Bangladesh","size":33},
{"name":"Cambodia","size":0},
{"name":"China","size":627},
{"name":"Georgia","size":9},
{"name":"Hong Kong","size":41},
{"name":"India","size":5308},
{"name":"Indonesia","size":171},
{"name":"Iran","size":3},
{"name":"Iraq","size":1},
{"name":"Israel","size":1436},
{"name":"Japan","size":720},
{"name":"Jordan","size":7},
{"name":"Kazakhstan","size":188},
{"name":"Kosovo","size":6},
{"name":"Kuwait","size":8},
{"name":"Kyrgyzstan","size":1},
{"name":"Lebanon","size":8},
{"name":"Macau","size":8},
{"name":"Malaysia","size":90},
{"name":"Maldives","size":2},
{"name":"Mongolia","size":5},
{"name":"Nepal","size":11},
{"name":"Oman","size":2},
{"name":"Pakistan","size":292},
{"name":"Palestine","size":1},
{"name":"Philippines","size":25},
{"name":"Qatar","size":3},
{"name":"Saudi Arabia","size":85},
{"name":"Singapore","size":39},
{"name":"Sri Lanka","size":6},
{"name":"Taiwan","size":254},
{"name":"Thailand","size":575},
{"name":"Timor-Leste","size":1},
{"name":"Turkey","size":10379},
{"name":"Turkmenistan","size":1},
{"name":"United Arab Emirates","size":137},
{"name":"Uzbekistan","size":4},
{"name":"Vietnam","size":121},
{"name":"Yemen","size":1}
]
},
{
"name": "Europe",
"children": [
{"name":"Åland Islands","size":1},
{"name":"Albania","size":1},
{"name":"Andorra","size":1},
{"name":"Austria","size":84},
{"name":"Belarus","size":6},
{"name":"Belgium","size":166},
{"name":"Bosnia & Herzegovina","size":3},
{"name":"Bulgaria","size":1},
{"name":"Croatia","size":23},
{"name":"Cyprus","size":8},
{"name":"Czechia","size":33},
{"name":"Denmark","size":54},
{"name":"Estonia","size":6},
{"name":"Finland","size":61},
{"name":"France","size":2291},
{"name":"Germany","size":3197},
{"name":"Gibraltar","size":1},
{"name":"Greece","size":116},
{"name":"Hungary","size":30},
{"name":"Iceland","size":4},
{"name":"Ireland","size":102},
{"name":"Italy","size":1691},
{"name":"Latvia","size":4},
{"name":"Liechtenstein","size":22},
{"name":"Lithuania","size":15},
{"name":"Luxembourg","size":9},
{"name":"Macedonia (FYROM)","size":5},
{"name":"Malta","size":17},
{"name":"Moldova","size":2},
{"name":"Monaco","size":11},
{"name":"Montenegro","size":6},
{"name":"Netherlands","size":304},
{"name":"Norway","size":103},
{"name":"Poland","size":104},
{"name":"Portugal","size":54},
{"name":"Romania","size":35},
{"name":"Russia","size":61471},
{"name":"San Marino","size":1},
{"name":"Serbia","size":6},
{"name":"Slovakia","size":6},
{"name":"Slovenia","size":7},
{"name":"Spain","size":1065},
{"name":"Sweden","size":37},
{"name":"Switzerland","size":147},
{"name":"Ukraine","size":182},
{"name":"United Kingdom","size":3894},
{"name":"Vatican City","size":1}
]
},
{
"name": "Oceania",
"children": [
{"name":"Australia","size":393},
{"name":"Cook Islands","size":6},
{"name":"New Zealand","size":81},
{"name":"Papua New Guinea","size":1},
{"name":"Solomon Islands","size":0},
{"name":"Tokelau","size":1},
{"name":"Trinidad & Tobago","size":1}
]
}
]
}
Raw
index.html
<!DOCTYPE html>
<style>
form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
svg {
font: 10px sans-serif;
}
</style>
<svg width="325" height="400"></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 fader = function(color) { return d3.interpolateRgb(color, "#fff")(0.2); },
color = d3.scaleOrdinal(d3.schemeCategory20.map(fader)),
format = d3.format(",d");
var treemap = d3.treemap()
.tile(d3.treemapResquarify)
.size([width, height])
.round(true)
.paddingInner(1);
d3.json("flare.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 : 4;
}
function sumBySize(d) {
return d.size;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment