Skip to content

Instantly share code, notes, and snippets.

@guglielmo
Forked from JacquesJahnichen/README.md
Last active August 31, 2018 15:42
Show Gist options
  • Save guglielmo/16d880a6615da7f502116220cb551498 to your computer and use it in GitHub Desktop.
Save guglielmo/16d880a6615da7f502116220cb551498 to your computer and use it in GitHub Desktop.
d3.js v4 - Interactive zoomable treemap
license: gpl-3.0
height: 600

A zoomable treemap, with dynamic width for mobile, and wrapped texts.

This is a port to D3v4 of the original Jacques Jahnichen's Block.

It has been somewhat simplified and slightly modified: colors are not used, breadcrumbs have been added to the navigation bar, titles have been added to the svg rects (popover effect on some browser)

{
"name": "Budget du Departement",
"rate": 0.03,
"children": [
{
"name": "Aménagement et développement durable",
"rate": -0.01,
"children": [
{
"name": "Réseau routier et mobilité durable",
"rate": 0,
"children": [
{
"name": "Mobilité durable",
"rate": 0.02,
"value": 47.1
},
{
"name": "PDU et infrastructures de transports en commun",
"rate": -2.92,
"value": 0.21
},
{
"name": "Réseau routier",
"rate": -0.07,
"value": 5.23
}
]
},
{
"name": "Développement et attractivité des territoires",
"rate": -0.1,
"children": [
{
"name": "Aménagement",
"rate": -0.16,
"value": 1.52
},
{
"name": "Développement économique et promotion du territoire",
"rate": -0.17,
"value": 3.03
},
{
"name": "Economie sociale et solidaire, emploi et formation",
"rate": -0.05,
"value": 1.82
},
{
"name": "Politique de la ville et habitat",
"rate": 0.36,
"value": 0.49
}
]
},
{
"name": "Ecologie urbaine",
"rate": -0.02,
"children": [
{
"name": "Biodiversité et nature en ville",
"rate": -0.01,
"value": 8.96
},
{
"name": "Cadre de vie",
"rate": 0.42,
"value": 0.01
},
{
"name": "Qualité de l'environnement urbain",
"rate": -0.03,
"value": 3.82
}
]
}
]
},
{
"name": "Direction générale",
"rate": -0.05,
"children": [
{
"name": "Direction et animation de l'action départementale",
"rate": -0.07,
"children": [
{
"name": "Animation du développement social local",
"rate": 1,
"value": 0.01
},
{
"name": "Animation et gestion de projets européens",
"rate": -0.48,
"value": 0.07
},
{
"name": "Audit interne",
"rate": -0.86,
"value": 0.02
},
{
"name": "Information et communication",
"rate": -0.07,
"value": 2.9
},
{
"name": "Pilotage et Stratégie",
"rate": -0.02,
"value": 0.68
}
]
},
{
"name": "Conduite des politiques départementales",
"rate": -0.03,
"children": [
{
"name": "Assemblée départementale",
"rate": -0.02,
"value": 2.5
},
{
"name": "Moyens des groupes politiques",
"rate": -0.11,
"value": 0.39
}
]
}
]
},
{
"name": "Personnel et relations sociales",
"rate": 0.02,
"children": [
{
"name": "Ressources humaines",
"rate": 0.02,
"children": [
{
"name": "Gestion prévisionnelle des emplois et des compétences",
"rate": -0.14,
"value": 1.32
},
{
"name": "Politique salariale et gestion des carrières",
"rate": 0.02,
"value": 328.73
},
{
"name": "Relations sociales et santé au travail",
"rate": 0.02,
"value": 3.7
}
]
}
]
},
{
"name": "Ressources et moyens des services",
"rate": 0.05,
"children": [
{
"name": "Finances",
"rate": 0.07,
"children": [
{
"name": "Commande publique",
"rate": 1,
"value": 0.02
},
{
"name": "Stratégie budgétaire et financière",
"rate": 0.07,
"value": 75.1
}
]
},
{
"name": "Supports internes",
"rate": 0.01,
"children": [
{
"name": "Bâtiments départementaux",
"rate": 0.04,
"value": 11.02
},
{
"name": "Logistique",
"rate": 0.02,
"value": 15.11
},
{
"name": "Patrimoine immobilier et sécurisation juridique",
"rate": 0.01,
"value": 19.27
},
{
"name": "Systèmes d'information",
"rate": -0.08,
"value": 3.25
}
]
}
]
},
{
"name": "Société et citoyenneté",
"rate": 0.05,
"children": [
{
"name": "Culture, patrimoine, archives",
"rate": -0.01,
"children": [
{
"name": "Archives",
"rate": 0.14,
"value": 0.16
},
{
"name": "Culture",
"rate": -0.01,
"value": 18.71
},
{
"name": "Patrimoine culturel",
"rate": -0.06,
"value": 0.59
}
]
},
{
"name": "Education et jeunesse",
"rate": 0.14,
"children": [
{
"name": "Accueil des collégiens et de la communauté éducative",
"rate": 0.17,
"value": 33.85
},
{
"name": "Actions éducatives en direction des collégiens",
"value": 0
},
{
"name": "Actions pour la jeunesse",
"rate": 1,
"value": 0.07
},
{
"name": "Projet éducatif départemental",
"rate": 0.17,
"value": 13.58
}
]
},
{
"name": "Citoyenneté active, solidarité internationale et Sport",
"rate": -0.25,
"children": [
{
"name": "Promotion de la vie associative et démocratie participative",
"rate": 1,
"value": 0
},
{
"name": "Solidarité, coopération internationales",
"rate": -0.04,
"value": 0.3
},
{
"name": "Sport et loisirs",
"rate": -0.26,
"value": 11.53
}
]
}
]
},
{
"name": "Solidarité",
"rate": 0.03,
"children": [
{
"name": "Enfance et famille",
"rate": -0.02,
"children": [
{
"name": "Accueil de la petite enfance",
"rate": -0.04,
"value": 20.84
},
{
"name": "Aide sociale à l'enfance",
"rate": -0.02,
"value": 250.75
},
{
"name": "Protection maternelle et infantile, planification familiale",
"rate": 0.01,
"value": 19.16
}
]
},
{
"name": "Solidarité, insertion, santé",
"rate": 0.07,
"children": [
{
"name": "Accompagnement social",
"rate": -0.05,
"value": 17.58
},
{
"name": "Insertion",
"rate": 0.08,
"value": 448.12
},
{
"name": "Prévention des conduites à risques",
"rate": 0.04,
"value": 0.51
},
{
"name": "Prévention et promotion de la santé",
"rate": -0.02,
"value": 3.06
},
{
"name": "Promotion des droits fondamentaux",
"rate": 0.03,
"value": 0.25
}
]
},
{
"name": "Autonomie",
"rate": 0.01,
"children": [
{
"name": "Personnes âgées",
"rate": 0.01,
"value": 197.43
},
{
"name": "Personnes handicapées",
"rate": 0,
"value": 166.87
}
]
}
]
}
]
}
<meta charset="utf-8">
<style>
#chart {
max-width: 100%;
overflow:auto;
}
text {
pointer-events: none;
}
.grandparent text {
font-weight: bold;
}
rect {
stroke: #fff;
stroke-width: 1px;
}
rect.parent,
.grandparent rect {
stroke-width: 3px;
}
.grandparent:hover rect {
fill: grey;
}
.children rect.parent,
.grandparent rect {
cursor: pointer;
}
.children rect.child {
opacity: 0;
}
.children rect.parent {
}
.children:hover rect.child {
opacity: 1;
stroke-width: 1px;
}
.children:hover rect.parent {
opacity: 0;
}
.legend {
margin-bottom:8px !important;
}
.legend rect {
stroke-width: 0px;
}
.legend text {
text-anchor: middle;
pointer-events: auto;
font-size: 13px;
font-family: sans-serif;
fill: black;
}
.form-group {
text-align:left;
}
.textdiv {
font-family: "Open Sans",Helvetica,Arial,sans-serif;
font-size: 14px;
padding: 7px;
cursor: pointer;
overflow:none;
}
.textdiv .title {
font-size: 102%;
font-weight: bold;
margin-top: 8px;
font-size:11px !important;
}
.textdiv p{
line-height: 13px;
margin:0 0 4px !important;
padding:0px;
font-size:10px !important;
}
</style>
<p id="chart"></p>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
/**
* Interactive, zoomable treemap, using D3 v4
*
* A port to D3 v4 of Jacques Jahnichen's Block, using the same budget data
* see: http://bl.ocks.org/JacquesJahnichen/42afd0cde7cbf72ecb81
*
* Author: Guglielmo Celata
* Date: sept 1st 2017
**/
var el_id = 'chart';
var obj = document.getElementById(el_id);
var divWidth = obj.offsetWidth;
var margin = {top: 30, right: 0, bottom: 20, left: 0},
width = divWidth -25,
height = 600 - margin.top - margin.bottom,
formatNumber = d3.format(","),
transitioning;
// sets x and y scale to determine size of visible boxes
var x = d3.scaleLinear()
.domain([0, width])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, height])
.range([0, height]);
var treemap = d3.treemap()
.size([width, height])
.paddingInner(0)
.round(false);
var svg = d3.select('#'+el_id).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("margin-left", -margin.left + "px")
.style("margin.right", -margin.right + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.style("shape-rendering", "crispEdges");
var grandparent = svg.append("g")
.attr("class", "grandparent");
grandparent.append("rect")
.attr("y", -margin.top)
.attr("width", width)
.attr("height", margin.top)
.attr("fill", '#bbbbbb');
grandparent.append("text")
.attr("x", 6)
.attr("y", 6 - margin.top)
.attr("dy", ".75em");
d3.json("budget-data.json", function(data) {
var root = d3.hierarchy(data);
console.log(root);
treemap(root
.sum(function (d) {
return d.value;
})
.sort(function (a, b) {
return b.height - a.height || b.value - a.value
})
);
display(root);
function display(d) {
// write text into grandparent
// and activate click's handler
grandparent
.datum(d.parent)
.on("click", transition)
.select("text")
.text(name(d));
// grandparent color
grandparent
.datum(d.parent)
.select("rect")
.attr("fill", function () {
return '#bbbbbb'
});
var g1 = svg.insert("g", ".grandparent")
.datum(d)
.attr("class", "depth");
var g = g1.selectAll("g")
.data(d.children)
.enter().
append("g");
// add class and click handler to all g's with children
g.filter(function (d) {
return d.children;
})
.classed("children", true)
.on("click", transition);
g.selectAll(".child")
.data(function (d) {
return d.children || [d];
})
.enter().append("rect")
.attr("class", "child")
.call(rect);
// add title to parents
g.append("rect")
.attr("class", "parent")
.call(rect)
.append("title")
.text(function (d){
return d.data.name;
});
/* Adding a foreign object instead of a text object, allows for text wrapping */
g.append("foreignObject")
.call(rect)
.attr("class", "foreignobj")
.append("xhtml:div")
.attr("dy", ".75em")
.html(function (d) {
return '' +
'<p class="title"> ' + d.data.name + '</p>' +
'<p>' + formatNumber(d.value) + '</p>'
;
})
.attr("class", "textdiv"); //textdiv class allows us to style the text easily with CSS
function transition(d) {
if (transitioning || !d) return;
transitioning = true;
var g2 = display(d),
t1 = g1.transition().duration(650),
t2 = g2.transition().duration(650);
// Update the domain only after entering new elements.
x.domain([d.x0, d.x1]);
y.domain([d.y0, d.y1]);
// Enable anti-aliasing during the transition.
svg.style("shape-rendering", null);
// Draw child nodes on top of parent nodes.
svg.selectAll(".depth").sort(function (a, b) {
return a.depth - b.depth;
});
// Fade-in entering text.
g2.selectAll("text").style("fill-opacity", 0);
g2.selectAll("foreignObject div").style("display", "none");
/*added*/
// Transition to the new view.
t1.selectAll("text").call(text).style("fill-opacity", 0);
t2.selectAll("text").call(text).style("fill-opacity", 1);
t1.selectAll("rect").call(rect);
t2.selectAll("rect").call(rect);
/* Foreign object */
t1.selectAll(".textdiv").style("display", "none");
/* added */
t1.selectAll(".foreignobj").call(foreign);
/* added */
t2.selectAll(".textdiv").style("display", "block");
/* added */
t2.selectAll(".foreignobj").call(foreign);
/* added */
// Remove the old node when the transition is finished.
t1.on("end.remove", function(){
this.remove();
transitioning = false;
});
}
return g;
}
function text(text) {
text.attr("x", function (d) {
return x(d.x) + 6;
})
.attr("y", function (d) {
return y(d.y) + 6;
});
}
function rect(rect) {
rect
.attr("x", function (d) {
return x(d.x0);
})
.attr("y", function (d) {
return y(d.y0);
})
.attr("width", function (d) {
return x(d.x1) - x(d.x0);
})
.attr("height", function (d) {
return y(d.y1) - y(d.y0);
})
.attr("fill", function (d) {
return '#bbbbbb';
});
}
function foreign(foreign) { /* added */
foreign
.attr("x", function (d) {
return x(d.x0);
})
.attr("y", function (d) {
return y(d.y0);
})
.attr("width", function (d) {
return x(d.x1) - x(d.x0);
})
.attr("height", function (d) {
return y(d.y1) - y(d.y0);
});
}
function name(d) {
return breadcrumbs(d) +
(d.parent
? " - Click to zoom out"
: " - Click inside square to zoom in");
}
function breadcrumbs(d) {
var res = "";
var sep = " > ";
d.ancestors().reverse().forEach(function(i){
res += i.data.name + sep;
});
return res
.split(sep)
.filter(function(i){
return i!== "";
})
.join(sep);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment