aendra-rininsland/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);

    var range = d3.range(-1, 1, 0.05);
    var padding = 2;
    var normalisedPadding = (padding * (range.length - 1) / range.length);
    var width = (svg.attr('width') / range.length) - normalisedPadding;
    var height = svg.attr('height') / 2;

    var colorScaleThreshold = d3.scale.threshold()
        .domain([-0.5, -0.15, 0, 0.15, 0.5])
//        .domain([-0.5, -0.25, 0, 0.25, 0.5]) // Use this for equal buckets
        .range(["#e03d46", "#f4a098", "#f9cac6", '#d5e3f2', '#a2c1e1', '#579dd5'])

    var colorScaleLinear = d3.scale.linear()
        .domain([-0.5, -0.15, 0, 0.15, 0.5])
//        .domain([-0.5, -0.25, 0, 0.25, 0.5]) // Use this for equal buckets
        .range(["#e03d46", "#f4a098", "#f9cac6", '#d5e3f2', '#a2c1e1', '#579dd5'])

    svg.selectAll('rect.threshold')
      .data(range)
      .enter()
      .append('rect')
    	.classed('threshold', true)
    	.attr('width', width)
      .attr('height', height)
    	.attr('x', (d, i) => i * (width + padding))
      .attr('y', 0)
    	.attr('fill', (d) => colorScaleThreshold(d));

    svg.selectAll('rect.linear')
      .data(range)
      .enter()
      .append('rect')
    	.classed('linear', true)
    	.attr('width', width)
      .attr('height', height)
    	.attr('x', (d, i) => i * (width + padding))
      .attr('y', height)
      .attr('fill', (d) => colorScaleLinear(d));


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

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", 960)
	.attr("height", 500);

	var range = d3.range(-1, 1, 0.05);
	var padding = 2;
	var normalisedPadding = (padding * (range.length - 1) / range.length);
	var width = (svg.attr('width') / range.length) - normalisedPadding;
	var height = svg.attr('height') / 2;

	var colorScaleThreshold = d3.scale.threshold()
	.domain([-0.5, -0.15, 0, 0.15, 0.5])
	// .domain([-0.5, -0.25, 0, 0.25, 0.5]) // Use this for equal buckets
	.range(["#e03d46", "#f4a098", "#f9cac6", '#d5e3f2', '#a2c1e1', '#579dd5'])

	var colorScaleLinear = d3.scale.linear()
	.domain([-0.5, -0.15, 0, 0.15, 0.5])
	// .domain([-0.5, -0.25, 0, 0.25, 0.5]) // Use this for equal buckets
	.range(["#e03d46", "#f4a098", "#f9cac6", '#d5e3f2', '#a2c1e1', '#579dd5'])

	svg.selectAll('rect.threshold')
	.data(range)
	.enter()
	.append('rect')
	.classed('threshold', true)
	.attr('width', width)
	.attr('height', height)
	.attr('x', (d, i) => i * (width + padding))
	.attr('y', 0)
	.attr('fill', (d) => colorScaleThreshold(d));

	svg.selectAll('rect.linear')
	.data(range)
	.enter()
	.append('rect')
	.classed('linear', true)
	.attr('width', width)
	.attr('height', height)
	.attr('x', (d, i) => i * (width + padding))
	.attr('y', height)
	.attr('fill', (d) => colorScaleLinear(d));


	</script>
	</body>