jtr13/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.high); });

d3.csv("mydata.csv", function(d) {
  d.date = parseTime(d.date);
  d.high = +d.high;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.high; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

</script>

	</body>
</html>

## mydata.csv

          
            date
             high

            
              1/1/17
              35

            
              1/2/17
              30

            
              1/3/17
              24

            
              1/4/17
              37

            
              1/5/17
              54

            
              1/6/17
              55

            
              1/7/17
              62

            
              1/8/17
              62

            
              1/9/17
              70

            
              1/10/17
              66

            
              1/11/17
              51

            
              1/12/17
              63

            
              1/13/17
              74

            
              1/14/17
              58

            
              1/15/17
              69

            
              1/16/17
              56

            
              1/17/17
              56

            
              1/18/17
              50

            
              1/19/17
              52

            
              1/20/17
              48

            
              1/21/17
              55

            
              1/22/17
              44

            
              1/23/17
              35

            
              1/24/17
              32

            
              1/25/17
              35

            
              1/26/17
              21

            
              1/27/17
              15

            
              1/28/17
              32

            
              1/29/17
              21

            
              1/30/17
              12

            
              1/31/17
              23
	<!DOCTYPE html>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var parseTime = d3.timeParse("%d-%b-%y");

	var x = d3.scaleTime()
	.rangeRound([0, width]);

	var y = d3.scaleLinear()
	.rangeRound([height, 0]);

	var line = d3.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.high); });

	d3.csv("mydata.csv", function(d) {
	d.date = parseTime(d.date);
	d.high = +d.high;
	return d;
	}, function(error, data) {
	if (error) throw error;

	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain(d3.extent(data, function(d) { return d.high; }));

	g.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))
	.select(".domain")
	.remove();

	g.append("g")
	.call(d3.axisLeft(y))
	.append("text")
	.attr("fill", "#000")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Price ($)");

	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);
	});

	</script>

	</body>
	</html>
	date	high
	1/1/17	35
	1/2/17	30
	1/3/17	24
	1/4/17	37
	1/5/17	54
	1/6/17	55
	1/7/17	62
	1/8/17	62
	1/9/17	70
	1/10/17	66
	1/11/17	51
	1/12/17	63
	1/13/17	74
	1/14/17	58
	1/15/17	69
	1/16/17	56
	1/17/17	56
	1/18/17	50
	1/19/17	52
	1/20/17	48
	1/21/17	55
	1/22/17	44
	1/23/17	35
	1/24/17	32
	1/25/17	35
	1/26/17	21
	1/27/17	15
	1/28/17	32
	1/29/17	21
	1/30/17	12
	1/31/17	23