jwilber/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## cities.csv

          
            city
            state
            population
            land area

            
              seattle
              WA
              652405
              83.9

            
              new york
              NY
              8405837
              302.6

            
              boston
              MA
              645966
              48.3

            
              kansas city
              MO
              467007
              315.0

## data.json
[{cell: 'test',
  country: 'usa',
  value: 50
}]

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    const margin = {top: 50, right: 25, bottom: 25, left: 50};
    const height = 600 - margin.top - margin.bottom;
    const width = 600 - margin.right - margin.left;

	const svg = d3.select('body')
		.append('svg')
		.attr('width', width + margin.right + margin.left)
		.attr('height', height + margin.top + margin.bottom)
		.append('g')
  	.attr('class', 'palette')
		.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    const data = [
      {color:"d3.rgb(12, 27, 199)", percentage: .100, img_url: ''},
      {color:"d3.rgb(180, 5, 65)", percentage: .20, img_url: ''},
      {color:"d3.rgb(120, 67, 199)", percentage: .24, img_url: ''},
      {color:"d3.rgb(120, 167, 199)", percentage: .30, img_url: ''},
      {color:"d3.rgb(11.5, 102.5, 3.5)", percentage: .09, img_url: ''}
     ];

    data.forEach(function(d) {
      d.color = d.color;
      d.percentage = +d.percentage;
    });

    const nest = d3.nest()
      .key(d => d.color)
      .rollup(v => d3.sum(v, vals => vals.percentage))
    	.entries(data);

    const treemapLayout = d3.treemap()
      .size([50, 70])
      .paddingOuter(1);

    const root = d3.hierarchy({values: nest}, d => d.values)
      .sum(d => d.value)
//       .sort( (a, b) => b.value - a.value);

    treemapLayout(root);

    d3.select('.palette')
     .selectAll('rect')
     .data(root.descendants())
     .enter()
     .append('rect')
     .attr("class", "rect")
     .attr('x', d => d.x0)
     .attr('y', d => d.y0)
     .attr('width', d => d.x1 - d.x0)
     .attr('height', d => d.y1 - d.y0)
     .attr('fill', d => eval(d.data.key) || 'white')
     .attr('stroke', 'black')
     .attr('stroke-width', 1)
     .style('opacity', 1);

    const HOVER_SCALE = 5;
    const HOVER_POS = 2;

    d3.select('.palette')
      .on("mouseover", highlight)
    	.on("mouseout", deHightlight);

    function highlight(d) {
        d3.selectAll('rect.rect')
        	.transition()
          .attr('x', d => d.x0 + HOVER_POS)
        	.attr('y', d => d.y0 - HOVER_POS)
          .attr('width', d => d.x1 + HOVER_SCALE - d.x0 )
          .attr('height', d => d.y1 + HOVER_SCALE - d.y0)
          .attr('stroke-width', 3.5)
        };

    function deHightlight(d) {
        d3.selectAll('rect.rect')
        	.transition()
          .attr('x', d => d.x0)
        	.attr('y', d => d.y0)
          .attr('width', d => d.x1 - d.x0)
          .attr('height', d => d.y1 - d.y0)
          .attr('stroke-width', 1)
        };


  </script>
</body>
city	state	population	land area
seattle	WA	652405	83.9
new york	NY	8405837	302.6
boston	MA	645966	48.3
kansas city	MO	467007	315.0
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	const margin = {top: 50, right: 25, bottom: 25, left: 50};
	const height = 600 - margin.top - margin.bottom;
	const width = 600 - margin.right - margin.left;

	const svg = d3.select('body')
	.append('svg')
	.attr('width', width + margin.right + margin.left)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('class', 'palette')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	const data = [
	{color:"d3.rgb(12, 27, 199)", percentage: .100, img_url: ''},
	{color:"d3.rgb(180, 5, 65)", percentage: .20, img_url: ''},
	{color:"d3.rgb(120, 67, 199)", percentage: .24, img_url: ''},
	{color:"d3.rgb(120, 167, 199)", percentage: .30, img_url: ''},
	{color:"d3.rgb(11.5, 102.5, 3.5)", percentage: .09, img_url: ''}
	];

	data.forEach(function(d) {
	d.color = d.color;
	d.percentage = +d.percentage;
	});

	const nest = d3.nest()
	.key(d => d.color)
	.rollup(v => d3.sum(v, vals => vals.percentage))
	.entries(data);

	const treemapLayout = d3.treemap()
	.size([50, 70])
	.paddingOuter(1);

	const root = d3.hierarchy({values: nest}, d => d.values)
	.sum(d => d.value)
	// .sort( (a, b) => b.value - a.value);

	treemapLayout(root);

	d3.select('.palette')
	.selectAll('rect')
	.data(root.descendants())
	.enter()
	.append('rect')
	.attr("class", "rect")
	.attr('x', d => d.x0)
	.attr('y', d => d.y0)
	.attr('width', d => d.x1 - d.x0)
	.attr('height', d => d.y1 - d.y0)
	.attr('fill', d => eval(d.data.key) \|\| 'white')
	.attr('stroke', 'black')
	.attr('stroke-width', 1)
	.style('opacity', 1);

	const HOVER_SCALE = 5;
	const HOVER_POS = 2;

	d3.select('.palette')
	.on("mouseover", highlight)
	.on("mouseout", deHightlight);

	function highlight(d) {
	d3.selectAll('rect.rect')
	.transition()
	.attr('x', d => d.x0 + HOVER_POS)
	.attr('y', d => d.y0 - HOVER_POS)
	.attr('width', d => d.x1 + HOVER_SCALE - d.x0 )
	.attr('height', d => d.y1 + HOVER_SCALE - d.y0)
	.attr('stroke-width', 3.5)
	};

	function deHightlight(d) {
	d3.selectAll('rect.rect')
	.transition()
	.attr('x', d => d.x0)
	.attr('y', d => d.y0)
	.attr('width', d => d.x1 - d.x0)
	.attr('height', d => d.y1 - d.y0)
	.attr('stroke-width', 1)
	};



	</script>
	</body>