cgroll/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    The plot shows a single time series with missing values, where missing
values cause line breaks.
You can view a rendered version of this gist at
bl.ocks.org.

  
## assembly_code.js
// define margins
var margin = {top: 20, right: 80, bottom: 30, left: 150};

// graphics size without axis
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function (d) { return d/1000000000 });

// function for the x grid lines
function make_x_axis() {
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5)
}

// function for the y grid lines
function make_y_axis() {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
}

var parseDate = d3.time.format("%Y-%m-%d").parse;

var line = d3.svg.line()
    .interpolate("basis")
    .defined(function(d) { return !isNaN(d.US); })
    .x(function(d) { return x(d.idx); })
    .y(function(d) { return y(d.US); });

var tsdata = d3.csv("gdp_us.csv", function (data) {

    data.forEach(function(d) {
        d.idx = parseDate(d.idx);
        d.US = +d.US
    });

    y.domain([0, d3.max(data, function(d) { return d.US; })]);
    x.domain(d3.extent(data, function(d) { return d.idx; }));

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("GDP in bn $");

    // Draw the x Grid lines
    svg.append("g")
        .attr("class", "grid")
        .attr("transform", "translate(0," + height + ")")
        .call(make_x_axis()
              .tickSize(-height, 0, 0)
              .tickFormat("")
             )

    // Draw the y Grid lines
    svg.append("g")
        .attr("class", "grid")
        .call(make_y_axis()
              .tickSize(-width, 0, 0)
              .tickFormat("")
             )

    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);


});


## gdp_us.csv

          
            idx
            US

            
              1960-12-31
              NA

            
              1961-12-31
              NA

            
              1962-12-31
              NA

            
              1963-12-31
              6.386e11

            
              1964-12-31
              6.858e11

            
              1965-12-31
              7.437e11

            
              1966-12-31
              8.15e11

            
              1967-12-31
              8.617e11

            
              1968-12-31
              9.425e11

            
              1969-12-31
              1.0199e12

            
              1970-12-31
              1.0759e12

            
              1971-12-31
              1.1678e12

            
              1972-12-31
              1.2824e12

            
              1973-12-31
              1.4285e12

            
              1974-12-31
              1.5488e12

            
              1975-12-31
              1.6889e12

            
              1976-12-31
              1.8776e12

            
              1977-12-31
              2.086e12

            
              1978-12-31
              2.3566e12

            
              1979-12-31
              2.6321e12

            
              1980-12-31
              2.8625e12

            
              1981-12-31
              3.211e12

            
              1982-12-31
              3.345e12

            
              1983-12-31
              3.6381e12

            
              1984-12-31
              4.0407e12

            
              1985-12-31
              4.3467e12

            
              1986-12-31
              4.5902e12

            
              1987-12-31
              4.8702e12

            
              1988-12-31
              5.2526e12

            
              1989-12-31
              5.6577e12

            
              1990-12-31
              5.9796e12

            
              1991-12-31
              6.174e12

            
              1992-12-31
              6.5393e12

            
              1993-12-31
              6.8787e12

            
              1994-12-31
              7.3088e12

            
              1995-12-31
              7.6641e12

            
              1996-12-31
              8.1002e12

            
              1997-12-31
              8.6085e12

            
              1998-12-31
              9.0892e12

            
              1999-12-31
              9.6606e12

            
              2000-12-31
              NA

            
              2001-12-31
              NA

            
              2002-12-31
              NA

            
              2003-12-31
              1.15107e13

            
              2004-12-31
              1.22749e13

            
              2005-12-31
              1.30937e13

            
              2006-12-31
              1.38559e13

            
              2007-12-31
              1.44776e13

            
              2008-12-31
              1.47186e13

            
              2009-12-31
              1.44187e13

            
              2010-12-31
              1.49644e13

            
              2011-12-31
              1.55179e13

            
              2012-12-31
              1.61632e13

            
              2013-12-31
              1.67681e13

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
  font: 16px sans-serif;
  }

  .axis path,
  .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  }

  .x.axis path {
  <!-- display: none; -->
  }

  .line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
  }

  .grid .tick {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
  }

  .grid path {
  stroke-width: 0;
  }

</style>
<body>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8">
  </script>

  <script src="assembly_code.js">
  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	// define margins
	var margin = {top: 20, right: 80, bottom: 30, left: 150};

	// graphics size without axis
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(function (d) { return d/1000000000 });

	// function for the x grid lines
	function make_x_axis() {
	return d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(5)
	}

	// function for the y grid lines
	function make_y_axis() {
	return d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(5)
	}

	var parseDate = d3.time.format("%Y-%m-%d").parse;

	var line = d3.svg.line()
	.interpolate("basis")
	.defined(function(d) { return !isNaN(d.US); })
	.x(function(d) { return x(d.idx); })
	.y(function(d) { return y(d.US); });

	var tsdata = d3.csv("gdp_us.csv", function (data) {

	data.forEach(function(d) {
	d.idx = parseDate(d.idx);
	d.US = +d.US
	});

	y.domain([0, d3.max(data, function(d) { return d.US; })]);
	x.domain(d3.extent(data, function(d) { return d.idx; }));

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("GDP in bn $");

	// Draw the x Grid lines
	svg.append("g")
	.attr("class", "grid")
	.attr("transform", "translate(0," + height + ")")
	.call(make_x_axis()
	.tickSize(-height, 0, 0)
	.tickFormat("")
	)

	// Draw the y Grid lines
	svg.append("g")
	.attr("class", "grid")
	.call(make_y_axis()
	.tickSize(-width, 0, 0)
	.tickFormat("")
	)

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);


	});
	idx	US
	1960-12-31	NA
	1961-12-31	NA
	1962-12-31	NA
	1963-12-31	6.386e11
	1964-12-31	6.858e11
	1965-12-31	7.437e11
	1966-12-31	8.15e11
	1967-12-31	8.617e11
	1968-12-31	9.425e11
	1969-12-31	1.0199e12
	1970-12-31	1.0759e12
	1971-12-31	1.1678e12
	1972-12-31	1.2824e12
	1973-12-31	1.4285e12
	1974-12-31	1.5488e12
	1975-12-31	1.6889e12
	1976-12-31	1.8776e12
	1977-12-31	2.086e12
	1978-12-31	2.3566e12
	1979-12-31	2.6321e12
	1980-12-31	2.8625e12
	1981-12-31	3.211e12
	1982-12-31	3.345e12
	1983-12-31	3.6381e12
	1984-12-31	4.0407e12
	1985-12-31	4.3467e12
	1986-12-31	4.5902e12
	1987-12-31	4.8702e12
	1988-12-31	5.2526e12
	1989-12-31	5.6577e12
	1990-12-31	5.9796e12
	1991-12-31	6.174e12
	1992-12-31	6.5393e12
	1993-12-31	6.8787e12
	1994-12-31	7.3088e12
	1995-12-31	7.6641e12
	1996-12-31	8.1002e12
	1997-12-31	8.6085e12
	1998-12-31	9.0892e12
	1999-12-31	9.6606e12
	2000-12-31	NA
	2001-12-31	NA
	2002-12-31	NA
	2003-12-31	1.15107e13
	2004-12-31	1.22749e13
	2005-12-31	1.30937e13
	2006-12-31	1.38559e13
	2007-12-31	1.44776e13
	2008-12-31	1.47186e13
	2009-12-31	1.44187e13
	2010-12-31	1.49644e13
	2011-12-31	1.55179e13
	2012-12-31	1.61632e13
	2013-12-31	1.67681e13
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	body {
	font: 16px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	<!-- display: none; -->
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	.grid .tick {
	stroke: lightgrey;
	stroke-opacity: 0.7;
	shape-rendering: crispEdges;
	}

	.grid path {
	stroke-width: 0;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">
	</script>

	<script src="assembly_code.js">
	</script>
	</body>
	</html>