davidbradway/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    This simple line chart is constructed from a TSV file storing the price of lab notebooks at Duke University Store over the years.

  
## data.tsv

          
            date
            close

            
              Oct-1988
              7.95

            
              Mar-1989
              7.95

            
              Apr-1990
              8.50

            
              Mar-1991
              8.50

            
              Sep-1991
              8.50

            
              Mar-1992
              8.50

            
              Jan-1993
              8.50

            
              Jul-1993
              8.50

            
              Sep-1993
              8.50

            
              May-1994
              8.50

            
              Jun-1994
              8.50

            
              Aug-1994
              8.50

            
              Jul-1998
              7.95

            
              Aug-1998
              7.95

            
              Feb-1999
              7.95

            
              Sep-1999
              7.95

            
              Oct-1999
              10.25

            
              Nov-1999
              10.25

            
              Jan-2000
              10.25

            
              Apr-2000
              10.25

            
              May-2000
              10.25

            
              Oct-2000
              11.95

            
              Feb-2001
              11.95

            
              Sep-2001
              11.95

            
              Jan-2002
              11.95

            
              Mar-2003
              11.95

            
              Jun-2003
              11.95

            
              Mar-2004
              11.95

            
              Oct-2004
              11.95

            
              Sep-2007
              11.95

            
              Jun-2008
              11.95

            
              Oct-2009
              11.95

## 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("%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.close); });
d3.tsv("data.tsv", function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  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.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
	Oct-1988	7.95
	Mar-1989	7.95
	Apr-1990	8.50
	Mar-1991	8.50
	Sep-1991	8.50
	Mar-1992	8.50
	Jan-1993	8.50
	Jul-1993	8.50
	Sep-1993	8.50
	May-1994	8.50
	Jun-1994	8.50
	Aug-1994	8.50
	Jul-1998	7.95
	Aug-1998	7.95
	Feb-1999	7.95
	Sep-1999	7.95
	Oct-1999	10.25
	Nov-1999	10.25
	Jan-2000	10.25
	Apr-2000	10.25
	May-2000	10.25
	Oct-2000	11.95
	Feb-2001	11.95
	Sep-2001	11.95
	Jan-2002	11.95
	Mar-2003	11.95
	Jun-2003	11.95
	Mar-2004	11.95
	Oct-2004	11.95
	Sep-2007	11.95
	Jun-2008	11.95
	Oct-2009	11.95
	<!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("%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.close); });
	d3.tsv("data.tsv", function(d) {
	d.date = parseTime(d.date);
	d.close = +d.close;
	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.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>