allyraza/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.csv

          
            date
            value
            target

            
              02-Feb-16
              14.54
              15.70

            
              02-Jan-16
              15.03
              17.21

            
              02-Dec-15
              14.75
              15.56

            
              02-Nov-15
              14.00
              16.34

            
              02-Oct-15
              13.64
              14.87

            
              02-Sep-15
              12.76
              13.21

            
              03-Aug-15
              12.21
              14.15

            
              02-Jul-15
              12.72
              16.69

            
              02-Jun-15
              11.89
              13.71

            
              04-May-15
              11.29
              12.01

            
              02-Apr-15
              11.02
              10.00

            
              02-Mar-15
              10.22
              7.01

            
              03-Feb-15
              10.42
              5.00

## 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; }

    .chart {
      margin: 100px;
      border: 1px solid #ddd;
    }
  </style>
</head>

<body>
  <script>
    var margin = { top: 10, right: 10, bottom: 10, left: 10 };
    var outerWidth = 300;
    var outerHeight = 100;
    var width = outerWidth - margin.left - margin.right;
    var height = outerHeight - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
    	.attr('class', 'chart')
      .attr("width", outerWidth)
      .attr("height", outerHeight)
    .append('g')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`);

    var x = d3.scaleTime().range([0, width]);
    var y = d3.scaleLinear().range([height, 0]);

    var line = d3.line()
    	.x(d => x(d.date))
    	.y(d => y(d.value));

    var target = d3.line()
    	.x(d => x(d.date))
    	.y(d => y(d.target));

    function draw(error, data) {
      if (error) return;

      data.forEach((d) => {
        d.value = +d.value;
        d.target = +d.target;
        d.date = new Date(d.date);
      });

      data2 = data.slice(0, 10);

      x.domain(d3.extent(data, d => d.date));
      y.domain([0, d3.max(data, d => d.value+d.target)]);

      svg.append('path')
      	.attr('class', 'target')
      	.attr('stroke', '#ddd')
      	.attr('fill', 'none')
      	.attr('d', target(data));

      svg.append('path')
      	.attr('class', 'line')
      	.attr('stroke', 'skyblue')
      	.attr('fill', 'none')
      	.attr('d', line(data));
    }

    d3.csv('data.csv', draw);

  </script>
</body>
date	value	target
02-Feb-16	14.54	15.70
02-Jan-16	15.03	17.21
02-Dec-15	14.75	15.56
02-Nov-15	14.00	16.34
02-Oct-15	13.64	14.87
02-Sep-15	12.76	13.21
03-Aug-15	12.21	14.15
02-Jul-15	12.72	16.69
02-Jun-15	11.89	13.71
04-May-15	11.29	12.01
02-Apr-15	11.02	10.00
02-Mar-15	10.22	7.01
03-Feb-15	10.42	5.00
	<!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; }

	.chart {
	margin: 100px;
	border: 1px solid #ddd;
	}
	</style>
	</head>

	<body>
	<script>
	var margin = { top: 10, right: 10, bottom: 10, left: 10 };
	var outerWidth = 300;
	var outerHeight = 100;
	var width = outerWidth - margin.left - margin.right;
	var height = outerHeight - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr('class', 'chart')
	.attr("width", outerWidth)
	.attr("height", outerHeight)
	.append('g')
	.attr('transform', `translate(${margin.left}, ${margin.top})`);

	var x = d3.scaleTime().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	var line = d3.line()
	.x(d => x(d.date))
	.y(d => y(d.value));

	var target = d3.line()
	.x(d => x(d.date))
	.y(d => y(d.target));

	function draw(error, data) {
	if (error) return;

	data.forEach((d) => {
	d.value = +d.value;
	d.target = +d.target;
	d.date = new Date(d.date);
	});

	data2 = data.slice(0, 10);

	x.domain(d3.extent(data, d => d.date));
	y.domain([0, d3.max(data, d => d.value+d.target)]);

	svg.append('path')
	.attr('class', 'target')
	.attr('stroke', '#ddd')
	.attr('fill', 'none')
	.attr('d', target(data));

	svg.append('path')
	.attr('class', 'line')
	.attr('stroke', 'skyblue')
	.attr('fill', 'none')
	.attr('d', line(data));
	}

	d3.csv('data.csv', draw);

	</script>
	</body>