Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Last active January 9, 2019 05:57
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 jwilber/4793b84700f922f5a52d2edce0690a7d to your computer and use it in GitHub Desktop.
Save jwilber/4793b84700f922f5a52d2edce0690a7d to your computer and use it in GitHub Desktop.
Download ZIP
multiple waffles
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>TreeMap</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<svg width="1200" height="720">
<g></g>
<section class="container1">
<p class="p1"> North England </p><p class="p2"> South England </p>
<p class="p3"> Bradford City </p><p class="p4"> Leeds </p>
<p class="p5"> Liverpool </p><p class="p6"> Manchester </p>
<p class="p7"> Sheffield </p><p class="p8"> Brighton </p>
<p class="p9"> Bristol </p><p class="p10"> Luton </p>
<p class="p11"> Milton Keynes </p><p class="p12"> Southampton </p>
<object class="Box" class="cancer"></object>
</section>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var data = {
"name": "England",
"children": [
{
"name": "North England",
"children": [
{
"name": "Bradford City",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Leeds",
"children": [
{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.52,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.29,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.71,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.82,
"color": "#CC527A",
}
]
},
{
"name": "Liverpool",
"children": [
{
"name": "Cancer",
"value": 2.50,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 5.90,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.71,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 6.70,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.88,
"color": "#CC527A",
}
]
},
{
"name": "Manchester",
"children": [
{
"name": "Cancer",
"value": 1.78,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 2.95,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.61,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.05,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
{
"name": "Sheffield",
"children": [
{
"name": "Cancer",
"value": 2.54,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 4.57,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 3.85,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 7.08,
"color": "#474747",
},
{
"name": "Stroke",
"value": 2.13,
"color": "#CC527A",
}
]
},
]
},
{
"name": "South England",
"children": [
{
"name": "Brighton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Bristol",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Luton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Milton Keynes",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color":"#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
{
"name": "Southampton",
"children": [
{
"name": "Cancer",
"value": 1.18,
"color": "#A8A7A7",
},
{
"name": "CKD",
"value": 3.21,
"color": "#2F9599",
},
{
"name": "CHD",
"value": 2.57,
"color": "#E8175D",
},
{
"name": "Diabetes",
"value": 11.92,
"color": "#474747",
},
{
"name": "Stroke",
"value": 1.18,
"color": "#CC527A",
}
]
},
]
}
]
};
var treemapLayout = d3.treemap()
.size([1000, 600])
.paddingTop(20)
.paddingInner(2);
var rootNode = d3.hierarchy(data)
rootNode.sum(function(d) {
return d.value;
});
treemapLayout(rootNode);
var nodes = d3.select('svg g')
.selectAll('g')
.data(rootNode.descendants())
.enter()
.append('g')
.attr('transform', function(d) {return 'translate(' + [d.x0, d.y0] + ')'})
nodes
.append('rect')
.attr('width', function(d) { return d.x1 - d.x0; })
.attr('height', function(d) { return d.y1 - d.y0; })
.attr('opacity', function(d) { return 0.8 /* has to be like d.value / max or so */ })
.attr('fill', function(d) { if (d.data.color) {
return d.data.color
} else {
return "white"
}})
nodes
.append('text')
.attr('dx', 10)
.attr('dy', 8)
.text(function(d) {
return d.data.value;
});
</script>
</body>
Raw
stylesheet.css
@import url("https://fonts.googleapis.com/css?family=Lato:300");
rect {
stroke: white;
}
text {
font-family: "Lato";
fill: white;
font-size: 8px;
text-anchor: middle;
}
svg {
padding-left: 60px;
padding-top:17px;
position: fixed;
}
p {
font-size: 14px;
}
.p1 {
position: absolute;
font-family: "Lato";
font-size: 17px;
padding-left: 60px;
}
.p2 {
position: absolute;
font-family: "Lato";
font-size: 17px;
padding-left: 550px;
}
.p3 {
position: absolute;
font-family: "Lato";
padding-left: 60px;
padding-top: 35px;
}
.p4 {
position: absolute;
font-family: "Lato";
padding-left: 230px;
padding-top: 35px;
}
.p5 {
position: absolute;
font-family: "Lato";
padding-left: 380px;
padding-top: 35px;
}
.p6 {
position: absolute;
font-family: "Lato";
padding-left: 60px;
padding-top: 390px;
}
.p7 {
position: absolute;
font-family: "Lato";
padding-left: 283px;
padding-top: 390px;
}
.p8 {
position: absolute;
font-family: "Lato";
padding-left: 553px;
padding-top: 35px;
}
.p9 {
position: absolute;
font-family: "Lato";
padding-left: 723px;
padding-top: 35px;
}
.p10 {
position: absolute;
font-family: "Lato";
padding-left: 896px;
padding-top: 35px;
}
.p11 {
position: absolute;
font-family: "Lato";
padding-left: 553px;
padding-top: 380px;
}
.p12 {
position: absolute;
font-family: "Lato";
padding-left: 900px;
padding-top: 380px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment