Nederlandse Overheid structuur

Nederlandse overheid visualisatie

Based on Mike Bostock's Zoomable Circle Packing

Todo

Budgetten voor alle toevoegen
Interne afdelingen van ministeries toevoegen
Text binnen rondjes houden?
Andere kleuren

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.node {
  cursor: pointer;
}

.node:hover {
  stroke: #000;
  stroke-width: 1.5px;
}

.node--leaf {
  fill: white;
}

.label {
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
  pointer-events: none;
}

.node--root {
  fill: hsl(152,80%,80%);
}

.node {
  fill: hsl(152,80%,80%);  
}

.rwt {
  fill: #C80014;
}

.agentschap {
  fill: #0078BE;
}

.rwtzbo{
  fill: #FFA500;
}

.zbo {
  fill: #FABE1E;
}

.Staatsbedrijf { 
  fill: #8c8c8c;
}

.ministerie {
  r: 6;
  stroke: black;
}

</style>
<body>
<svg width="1200" height="1240"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = 20,
    diameter = +svg.attr("width"),
    g = svg.append("g")
      .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")")
      .attr("id", "pack");

var types = ["agentschap", "rwt", "rwtzbo", "zbo", "Staatsbedrijf"];

var legend = svg.append("g")
    .attr("id", "legend")

types.forEach(function(element, index) {

var legendItem = legend.append("g")
    .attr("class", element)
    .attr("transform", "translate(10," + (10 + (index * 15)) + ")");

legendItem.append("circle")
    .attr("r", 6)
  
  legendItem.append("text")
    .text(element)
    .attr("x", 15)
     .attr("y", 3);
});

var color = d3.scaleLinear()
    .domain([-1, 5])
    .range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
    .interpolate(d3.interpolateHcl);

var pack = d3.pack()
    .size([diameter - margin, diameter - margin])
    .padding(2);

d3.csv("tree.csv", function(error, data) {
  if (error) throw error;

var stratifiedData = d3.stratify()
    .id(function(d) { return d.name; })
    .parentId(function(d) { return d.parent; })
    (data);

root = d3.hierarchy(stratifiedData)
      .sum(function(d) { return d.data.size; })
      .sort(function(a, b) { return b.value - a.value; });

var focus = root,
      nodes = pack(root).descendants(),
      view;

svg
    .on("click", function() { zoom(root); });

zoomTo([root.x, root.y, root.r * 2 + margin]);

function zoom(d) {
  	var focus0 = focus;

focus = d;

var transition = d3.transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .tween("zoom", function(d) {
          var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
          return function(t) { zoomTo(i(t)); };
        });

transition.select("#pack").selectAll("text")
      .filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
        .style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
        .on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
        .on("end", function(d) { if (d.parent !== focus) this.style.display = "inline"; }); //none
  }

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js