Skip to content

Instantly share code, notes, and snippets.

@yanhann10

yanhann10/.block

Last active April 28, 2018 10: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 yanhann10/c6b88179bea3e72f11e77e89628ecf92 to your computer and use it in GitHub Desktop.
Save yanhann10/c6b88179bea3e72f11e77e89628ecf92 to your computer and use it in GitHub Desktop.
Download ZIP
voronoi tree
Raw
.block
license: mit
Raw
df_d3.csv
world region_grp Country code weight color
world Eastern Asia China CHN 0.889188729244159 #EFB605
world Eastern Asia Democratic People's Republic of Korea PRK 0.014967706383358 #EFB605
world Eastern Asia Japan JPN 0.0616617638716683 #EFB605
world Eastern Asia Mongolia MNG 0.000178283454485044 #EFB605
world Eastern Asia Republic of Korea KOR 0.0340035170463294 #EFB605
world Other region Egypt EGY 0.124394984564961 #E58903
world Other region Iraq IRQ 0.0521742444452914 #E58903
world Other region Madagascar MDG 0.0895613399900911 #E58903
world Other region Saudi Arabia SAU 0.0395975456381722 #E58903
world Other region United States of America USA 0.0839589923396471 #E58903
world South America Brazil BRA 0.55134903640257 #E58903
world South America Colombia COL 0.115974304068522 #E58903
world South America Ecuador ECU 0.060728051391863 #E58903
world South America Peru PER 0.12728051391863 #E58903
world South America Venezuela VEN 0.0608993576017131 #E58903
world South-Eastern Asia Indonesia IDN 0.423655805634974 #E58903
world South-Eastern Asia Myanmar MMR 0.0890839704270942 #E58903
world South-Eastern Asia Philippines PHL 0.148015668098291 #E58903
world South-Eastern Asia Thailand THA 0.0966913107548144 #E58903
world South-Eastern Asia Viet Nam VNM 0.166920664508735 #E58903
world Southern Asia Bangladesh BGD 0.217461973266054 #E58903
world Southern Asia India IND 0.703573421314379 #E58903
world Southern Asia Iran IRN 0.0187606640628159 #E58903
world Southern Asia Nepal NPL 0.0197229567453482 #E58903
world Southern Asia Sri Lanka LKA 0.0188738749666432 #E58903
world Western Africa Côte d'Ivoire CIV 0.0999767675985441 #E58903
world Western Africa Guinea GIN 0.0883605668705955 #E58903
world Western Africa Mali MLI 0.0675288468984744 #E58903
world Western Africa Nigeria NGA 0.379539998451173 #E58903
world Western Africa Senegal SEN 0.079145047626423 #E58903
world Other region Others Others 0.610312893021838 #E58903
world South America Others Others 0.0837687366167024 #E58903
world South-Eastern Asia Others Others 0.0756325805760923 #E58903
world Southern Asia Others Others 0.0216071096447604 #E58903
world Western Africa Others Others 0.28544877255479 #E58903
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<p>based on kcnarf's tree voronoi http://blockbuilder.org/Kcnarf/fa95aa7b076f537c00aed614c29bb568</p>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>d3-voronoi-treemap usage</title>
<meta name="description" content="d3-voronoi-treemap plugin to remake 'The Costs of Being Fat, in Actual Dollars'">
<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js"></script>
<script src="https://raw.githack.com/Kcnarf/d3-voronoi-map/master/build/d3-voronoi-map.js"></script>
<script src="https://raw.githack.com/Kcnarf/d3-voronoi-treemap/master/build/d3-voronoi-treemap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
<style>
svg {
background-color: rgb(250,250,250);
}
#title {
letter-spacing: 4px;
font-weight: 700;
font-size: x-large;
}
text.tiny {
font-size: 10pt;
}
text.light {
fill: lightgrey
}
.world {
stroke: lightgrey;
stroke-width: 4px;
}
.cell {
stroke: #333;
stroke-width: 1px;
}
.label {
text-anchor: middle;
fill: #333;
}
.label>.name {
dominant-baseline: text-after-edge;
}
.label>.value {
dominant-baseline: text-before-edge;
}
.hoverer {
fill: transparent;
stroke: white;
stroke-width:0px;
}
.hoverer:hover {
stroke-width: 3px;
}
.legend-color {
stroke-width: 1px;
stroke:darkgrey;
}
</style>
</head>
<body>
<svg></svg>
<script>
//begin: constants
var _2PI = 2*Math.PI;
//end: constants
//begin: layout conf.
var svgWidth = 700,
svgHeight = 520,
margin = {top: 10, right: 10, bottom: 10, left: 10},
height = svgHeight - margin.top - margin.bottom,
width = svgWidth - margin.left - margin.right,
halfWidth = width/2,
halfHeight = height/2,
quarterWidth = width/4,
quarterHeight = height/4,
titleY = 20,
treemapRadius = 205,
treemapCenter = [halfWidth, halfHeight+5];
//end: layout conf.
//begin: treemap conf.
var _voronoiTreemap = d3.voronoiTreemap();
var hierarchy, circlingPolygon;
//end: treemap conf.
//begin: drawing conf.
var fontScale = d3.scaleLinear();
var opacityScale = d3.scaleLinear()
.domain([0.1,0.9])
.range([0.3,1]);
var numFormat = d3.format(",.0%")
//end: drawing conf.
//begin: reusable d3Selection
var svg, drawingArea, treemapContainer;
//end: reusable d3Selection
var rootData = {
"name": "world",
"children": [
{
"name": "Eastern Asia",
"color": "#DE4945",
"children": [{"name":"China","code":"CHN","production":136873,"weight":0.2762610809,"pct":0.9140710565},{"name":"Democratic People's Republic of Korea","code":"PRK","production":1935,"weight":0.003905556183,"pct":0.01292239882},{"name":"Japan","code":"JPN","production":7176,"weight":0.01448386107,"pct":0.04792306665},{"name":"Republic of Korea","code":"KOR","production":3756,"weight":0.007581017584,"pct":0.02508347803}]
},
{
"name": "Southern Asia",
"color": "#DBB62A",
"children":
[{"name":"Bangladesh","code":"BGD","production":34350,"weight":0.06933119116,"pct":0.2210908436},{"name":"India","code":"IND","production":106186,"weight":0.2143231984,"pct":0.683457127},{"name":"Nepal","code":"NPL","production":3005,"weight":0.006065217742,"pct":0.01934142605},{"name":"Pakistan","code":"PAK","production":6767,"weight":0.01365834558,"pct":0.043555218},{"name":"Sri Lanka","code":"LKA","production":3082,"weight":0.00622063264,"pct":0.01983702998},{"name":"Others","code":"Others","production":1976,"weight":0.00398830957,"pct":0.01271835537}]
},
{
"name": "South-Eastern Asia",
"color": "#1FAD8F",
"children":
[{"name":"Indonesia","code":"IDN","production":47544,"weight":0.09596163472,"pct":0.3329505028},{"name":"Myanmar","code":"MMR","production":19188,"weight":0.03872858504,"pct":0.1343735119},{"name":"Philippines","code":"PHL","production":12299,"weight":0.02482399767,"pct":0.08612986358},{"name":"Thailand","code":"THA","production":24054,"weight":0.04854999919,"pct":0.1684500966},{"name":"Viet Nam","code":"VNM","production":29374,"weight":0.05928775573,"pct":0.2057060422},{"name":"Others","code":"Others","production":10337,"weight":0.02086394536,"pct":0.07238998291}]
},
{
"name": "South America",
"color": "#5DBCD2",
"children":
[{"name":"Argentina","code":"ARG","production":1043,"weight":0.002105165426,"pct":0.06396026246},{"name":"Brazil","code":"BRA","production":7843,"weight":0.01583011739,"pct":0.4809590973},{"name":"Colombia","code":"COL","production":1367,"weight":0.00275911902,"pct":0.08382903048},{"name":"Ecuador","code":"ECU","production":1011,"weight":0.002040577417,"pct":0.06199791501},{"name":"Peru","code":"PER","production":2035,"weight":0.004107393712,"pct":0.1247930337},{"name":"Others","code":"Others","production":3008,"weight":0.006071272868,"pct":0.1844606611}]
},
{
"name": "Western Africa",
"color": "#6E5194",
"children":
[{"name":"Côte d'Ivoire","code":"CIV","production":1290,"weight":0.002603704122,"pct":0.1330720033},{"name":"Guinea","code":"GIN","production":1370,"weight":0.002765174145,"pct":0.1413245306},{"name":"Mali","code":"MLI","production":1475,"weight":0.002977103551,"pct":0.1521559728},{"name":"Nigeria","code":"NGA","production":3135,"weight":0.00632760653,"pct":0.323395915},{"name":"Sierra Leone","code":"SLE","production":837,"weight":0.001689380117,"pct":0.08634206726},{"name":"Others","code":"Others","production":1587,"weight":0.003203161583,"pct":0.163709511}]
},
{
"name": "Other Regions",
"color": " #D47176",
"children":
[{"name":"Egypt","code":"EGY","production":3818,"weight":0.007706156852,"pct":0.1772104897},{"name":"Italy","code":"ITA","production":956,"weight":0.001929566776,"pct":0.04437224414},{"name":"Madagascar","code":"MDG","production":2408,"weight":0.004860247695,"pct":0.111766071},{"name":"United Republic of Tanzania","code":"TZA","production":1464,"weight":0.002954901423,"pct":0.06795080065},{"name":"United States of America","code":"USA","production":5745,"weight":0.01159556603,"pct":0.2666511952},{"name":"Others","code":"Others","production":7154,"weight":0.01443945681,"pct":0.3320491994}]
}
]}
initData();
initLayout(rootData);
hierarchy = d3.hierarchy(rootData).sum(function(d){ return d.weight; });
_voronoiTreemap
.clip(circlingPolygon)
(hierarchy);
drawTreemap(hierarchy);
function initData(rootData) {
circlingPolygon = computeCirclingPolygon(treemapRadius);
fontScale.domain([0, 0.4]).range([6, 20]).clamp(true);
}
function computeCirclingPolygon(radius) {
var points = 60,
increment = _2PI/points,
circlingPolygon = [];
for (var a=0, i=0; i<points; i++, a+=increment) {
circlingPolygon.push(
[radius + radius*Math.cos(a), radius + radius*Math.sin(a)]
)
}
return circlingPolygon;
};
function initLayout(rootData) {
svg = d3.select("svg")
.attr("width", svgWidth)
.attr("height", svgHeight);
drawingArea = svg.append("g")
.classed("drawingArea", true)
.attr("transform", "translate("+[margin.left,margin.top]+")")
.style('fill','white');
treemapContainer = drawingArea.append("g")
.classed("treemap-container", true)
.attr("transform", "translate("+treemapCenter+")");
treemapContainer.append("path")
.classed("world", true)
.attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
.attr("d", "M"+circlingPolygon.join(",")+"Z");
drawTitle();
}
function drawTitle() {
drawingArea.append("text")
.attr("id", "title")
.attr("transform", "translate("+[halfWidth, titleY]+")")
.attr("text-anchor", "middle")
//.text("The Global Economy by GDP (as of 01/2017)")
}
function drawFooter() {
drawingArea.append("text")
.classed("tiny light", true)
.attr("transform", "translate("+[0, height]+")")
.attr("text-anchor", "start")
.text("Remake of HowMuch.net's article 'The Global Economy by GDP'")
drawingArea.append("text")
.classed("tiny light", true)
.attr("transform", "translate("+[halfWidth, height]+")")
.attr("text-anchor", "middle")
.text("by @_Kcnarf")
drawingArea.append("text")
.classed("tiny light", true)
.attr("transform", "translate("+[width, height]+")")
.attr("text-anchor", "end")
.text("bl.ocks.org/Kcnarf/fa95aa7b076f537c00aed614c29bb568")
}
function drawTreemap(hierarchy) {
var leaves=hierarchy.leaves();
var cells = treemapContainer.append("g")
.classed('cells', true)
.attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
.selectAll(".cell")
.data(leaves)
.enter()
.append("path")
.classed("cell", true)
.attr("d", function(d){ return "M"+d.polygon.join(",")+"z"; })
.style("fill", d=>d3.interpolateLab("white", d.parent.data.color)(opacityScale(d.data.pct)));
var labels = treemapContainer.append("g")
.classed('labels', true)
.attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
.selectAll(".label")
.data(leaves)
.enter()
.append("g")
.classed("label", true)
.attr("transform", function(d){
return "translate("+[d.polygon.site.x, d.polygon.site.y]+")";
})
.style("font-size", function(d){ return fontScale(d.data.weight); });
labels.append("text")
.classed("name", true)
.html(function(d){
return (d.data.weight<0.015)? d.data.code : d.data.name;
})
.style('font-weight','bold')
.style('font-family', 'futura');
labels.append("text")
.classed("value", true)
.text(function(d){ return numFormat(d.data.weight); })
.style('font-family', 'futura');
var hoverers = treemapContainer.append("g")
.classed('hoverers', true)
.attr("transform", "translate("+[-treemapRadius,-treemapRadius]+")")
.selectAll(".hoverer")
.data(leaves)
.enter()
.append("path")
.classed("hoverer", true)
.attr("d", function(d){ return "M"+d.polygon.join(",")+"z"; });
hoverers.append("title")
.text(function(d) { return d.data.name + "\n" + d.value+"%"; });
}
////////////////
////legend
////////////////
var ordinal = d3.scaleOrdinal()
.domain(["Eastern Asia",
"Southern Asia",
"South-Eastern Asia",
"South America",
"Western Africa",
"Other Regions"])
.range(["#DE4945","#DBB62A","#1FAD8F",
"#5DBCD2","#6E5194","#D47176"]);
svg.append("g")
.attr("class", "legendOrdinal")
.attr("transform", "translate(50,20)");
var legendOrdinal = d3.legendColor()
.shape("path", d3.symbol().type(d3.symbolCircle).size(100)())
.shapePadding(90)
.scale(ordinal)
.shapeWidth(200)
.orient('horizontal');
//add legend
svg.select(".legendOrdinal")
.call(legendOrdinal)
.style('font-family', 'futura')
.style('font-size', '12px');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment