allyraza/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data.csv

          
            date
            close
            open

            
              1-May-12
              68.13
              34.12

            
              30-Apr-12
              63.98
              45.56

            
              27-Apr-12
              67.00
              67.89

            
              26-Apr-12
              89.70
              78.54

            
              25-Apr-12
              99.00
              89.23

            
              24-Apr-12
              130.28
              99.23

            
              23-Apr-12
              166.70
              101.34

            
              20-Apr-12
              234.98
              122.34

            
              19-Apr-12
              345.44
              134.56

            
              18-Apr-12
              443.34
              160.45

            
              17-Apr-12
              543.70
              180.34

            
              16-Apr-12
              580.13
              210.23

            
              13-Apr-12
              605.23
              223.45

            
              12-Apr-12
              622.77
              201.56

            
              11-Apr-12
              626.20
              212.67

            
              10-Apr-12
              628.44
              310.45

            
              9-Apr-12
              636.23
              350.45

            
              5-Apr-12
              633.68
              410.23

            
              4-Apr-12
              624.31
              430.56

            
              3-Apr-12
              629.32
              460.34

            
              2-Apr-12
              618.63
              510.34

            
              30-Mar-12
              599.55
              534.23

            
              29-Mar-12
              609.86
              578.23

            
              28-Mar-12
              617.62
              590.12

            
              27-Mar-12
              614.48
              560.34

            
              26-Mar-12
              606.98
              580.12

## 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>
    var margin = { top: 30, right: 30, bottom: 30, left: 30 };
    var outerWidth = 600;
    var outerHeight = 300;
    var width = outerWidth - margin.left - margin.right;
    var height = outerHeight - margin.top - margin.bottom;

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

    var parseDate = d3.timeParse('%d-%b-%y');

    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.open));

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

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

      data.forEach(d => {
        d.date = parseDate(d.date);
        d.open = +d.open;
        d.close = +d.close;
      });

      x.domain(d3.extent(data, d => d.date));
      y.domain([0, d3.max(data, d => Math.max(d.open, d.close))]);

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


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

      svg.append('g')
      	.call(d3.axisLeft(y));

      svg.append('g')
      	.attr('transform', `translate(0, ${height-50})`)
      	.call(d3.axisBottom(x));
    }

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


  </script>
</body>
date	close	open
1-May-12	68.13	34.12
30-Apr-12	63.98	45.56
27-Apr-12	67.00	67.89
26-Apr-12	89.70	78.54
25-Apr-12	99.00	89.23
24-Apr-12	130.28	99.23
23-Apr-12	166.70	101.34
20-Apr-12	234.98	122.34
19-Apr-12	345.44	134.56
18-Apr-12	443.34	160.45
17-Apr-12	543.70	180.34
16-Apr-12	580.13	210.23
13-Apr-12	605.23	223.45
12-Apr-12	622.77	201.56
11-Apr-12	626.20	212.67
10-Apr-12	628.44	310.45
9-Apr-12	636.23	350.45
5-Apr-12	633.68	410.23
4-Apr-12	624.31	430.56
3-Apr-12	629.32	460.34
2-Apr-12	618.63	510.34
30-Mar-12	599.55	534.23
29-Mar-12	609.86	578.23
28-Mar-12	617.62	590.12
27-Mar-12	614.48	560.34
26-Mar-12	606.98	580.12
	<!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>
	var margin = { top: 30, right: 30, bottom: 30, left: 30 };
	var outerWidth = 600;
	var outerHeight = 300;
	var width = outerWidth - margin.left - margin.right;
	var height = outerHeight - margin.top - margin.bottom;

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

	var parseDate = d3.timeParse('%d-%b-%y');

	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.open));

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

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

	data.forEach(d => {
	d.date = parseDate(d.date);
	d.open = +d.open;
	d.close = +d.close;
	});

	x.domain(d3.extent(data, d => d.date));
	y.domain([0, d3.max(data, d => Math.max(d.open, d.close))]);

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


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

	svg.append('g')
	.call(d3.axisLeft(y));

	svg.append('g')
	.attr('transform', `translate(0, ${height-50})`)
	.call(d3.axisBottom(x));
	}

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



	</script>
	</body>