D3 Examples - État d'urgence, le résultat de 2500 perquisitions

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
​
        body {
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
          margin: auto;
          position: relative;
          width: 960px;
          box-sizing: border-box;
        }
​
        .node {
          border: solid 1px white;
          font: 10px sans-serif;
          line-height: 12px;
          overflow: hidden;
          position: absolute;
          text-indent: 2px;
        }
        </style>
        <script src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <script>
​
        var margin = {top: 0, right: 0, bottom: 0, left: 0},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
​
​
        var color = function(d){
            return d.children ? null : d.color;
        }
​
        var treemap = d3.layout.treemap()
            .size([width, height])
            .sticky(true)
            .value(function(d) { return d.size; });
​
        var div = d3.select('body').append('div')
            .style('position', 'relative')
            .style('width', (width + margin.left + margin.right) + 'px')
            .style('height', (height + margin.top + margin.bottom) + 'px')
            .style('left', margin.left + 'px')
            .style('top', margin.top + 'px');
​
        d3.json('flare.json', function(error, root) {
          if (error) throw error;
          var node = div.datum(root).selectAll(".node")
              .data(treemap.nodes)
            .enter().append('div')
              .attr('class', 'node')
              .style('background', color)
              .text(function(d) { return d.children ? null : d.name; })
              .call(position);
        });
​
        function position() {
          this.style('left', function(d) { return d.x + 'px'; })
              .style('top', function(d) { return d.y + 'px'; })
              .style('width', function(d) { return Math.max(0, d.dx - 1) + 'px'; })
              .style('height', function(d) { return Math.max(0, d.dy - 1) + 'px'; });
        }
​
        </script>
    </body>
</html>
​
    