gromin/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

d3-dsv - parse tab-separated values
d3-time-format - date parsing and formatting
d3-scale - position encodings
d3-array - data processing
d3-axis - axes
d3-shape - lines


## data.tsv

          
            date
            close

            
              2018-9-11 14:48
              1268.35

            
              2018-9-11 14:47
              1506.83

            
              2018-9-11 14:46
              1535.46

            
              2018-9-11 14:32
              1700.93

            
              2018-9-11 14:31
              1278.65

            
              2018-9-11 14:30
              1342.99

            
              2018-9-11 14:29
              1255.77

            
              2018-9-11 14:28
              1423.20

            
              2018-9-11 14:27
              1434.49

            
              2018-9-11 14:14
              1667.04

            
              2018-9-11 14:13
              1329.50

            
              2018-9-11 8:24
              1770.81

            
              2018-9-11 8:23
              941.16

            
              2018-9-11 8:22
              998.89

            
              2018-9-11 8:21
              1228.01

            
              2018-9-11 8:20
              1364.09

            
              2018-9-11 8:19
              986.12

            
              2018-9-11 8:18
              964.25

            
              2018-9-11 8:17
              963.76

            
              2018-9-11 8:16
              1275.42

            
              2018-9-11 8:15
              1439.74

            
              2018-9-11 8:14
              1074.49

## 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("%Y-%-m-%-d %-H:%-M");

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.close); });

d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = parseFloat(d.close);
  return d;
}, function(error, data) {
  console.log(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.close; }));

  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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	date	close
	2018-9-11 14:48	1268.35
	2018-9-11 14:47	1506.83
	2018-9-11 14:46	1535.46
	2018-9-11 14:32	1700.93
	2018-9-11 14:31	1278.65
	2018-9-11 14:30	1342.99
	2018-9-11 14:29	1255.77
	2018-9-11 14:28	1423.20
	2018-9-11 14:27	1434.49
	2018-9-11 14:14	1667.04
	2018-9-11 14:13	1329.50
	2018-9-11 8:24	1770.81
	2018-9-11 8:23	941.16
	2018-9-11 8:22	998.89
	2018-9-11 8:21	1228.01
	2018-9-11 8:20	1364.09
	2018-9-11 8:19	986.12
	2018-9-11 8:18	964.25
	2018-9-11 8:17	963.76
	2018-9-11 8:16	1275.42
	2018-9-11 8:15	1439.74
	2018-9-11 8:14	1074.49
	<!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("%Y-%-m-%-d %-H:%-M");

	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.close); });

	d3.tsv("data.tsv", function(d) {
	d.date = parseTime(d.date);
	d.close = parseFloat(d.close);
	return d;
	}, function(error, data) {
	console.log(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.close; }));

	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>