| 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> |