| { | |
| "name": "Perquisitions", | |
| "children": [ | |
| { | |
| "name": "Pas de suite", | |
| "size": 2154, | |
| "color": "#e2e0e0" | |
| }, | |
| { | |
| "name": "Poursuites", | |
| "children": [ | |
| { | |
| "name": "Stupéfiants", | |
| "size": 165, | |
| "color": "#3baf49" | |
| }, | |
| { | |
| "name": "Militants de gauche et écologistes", | |
| "size": 26, | |
| "color": "#ef3123" | |
| }, | |
| { | |
| "name": "Terrorisme", | |
| "size": 2, | |
| "color": "#000000" | |
| } | |
| ] | |
| } | |
| ] | |
| } |
| <!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="http://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> |
