pbellon/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Un mois après les attentats du 13 novembre 2015 le nombre de perquisitions administratives s'élève à 2500. Quel bilan tirer de ces perquisitions ?


Pas de suite 2154


Stupéfiants 165


Militants de gauche et écologistes 26


Terrorisme 2


Source: Rebellyon

  
## flare.json
{
    "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"
                }
            ]
        }
    ]
}

## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	{
	"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>