gregce/activities_limited.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    DATASCI W209 - Assignment #3

This simple line chart is constructed from a CSV file storing the date and number of miles I've run over the last few months.

The chart's data is sourced from my public strava profile.
Of note, this viz features conventional margins.


## activities_limited.csv

          
            date
            miles

            
              19-Dec-15
              4.154826604

            
              21-Dec-15
              2.003054337

            
              22-Dec-15
              2.049867181

            
              24-Dec-15
              1.993654418

            
              26-Dec-15
              2.354586421

            
              27-Dec-15
              2.161856948

            
              31-Dec-15
              3.296757145

            
              01-Jan-16
              2.489920359

            
              02-Jan-16
              3.375629316

            
              03-Jan-16
              3.253430364

            
              09-Jan-16
              5.082617319

            
              10-Jan-16
              4.180847573

            
              16-Jan-16
              3.745027471

            
              17-Jan-16
              4.264201825

            
              23-Jan-16
              4.756732698

            
              24-Jan-16
              3.481518474

            
              24-Jan-16
              3.236996068

            
              25-Jan-16
              2.398099955

            
              28-Jan-16
              2.510027471

            
              31-Jan-16
              4.052797016

            
              03-Feb-16
              2.47722113

            
              07-Feb-16
              4.371958516

            
              07-Feb-16
              2.53492792

            
              11-Feb-16
              2.401523766

            
              12-Feb-16
              2.47

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Greg's Strava Running Activity</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.js"></script>
		<style type="text/css">
			/* No style rules here yet */
			.body {
				font: 12px sans-serif;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: #000;
				shape-rendering: crispEdges;
			}
			.x.axis path {
				display: none;
			}
			.line {
				fill: none;
				/* web green */
				stroke: #008000;
				stroke-width: 1	.5px;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var formatDate = d3.time.format("%d-%b-%y");
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");
var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.miles); });
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 + ")");
d3.csv("activities_limited.csv", type, function(error, data) {
  if (error) throw error;
  x.domain(d3.extent(data, function(d) { return d.date; }));
  // Round miles from CSV
  y.domain(d3.extent(data, function(d) { return Math.round(d.miles * 100) / 100 ; }));
  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)",
      	y: 6,
      	dy: ".71em"
      })
      .style("text-anchor", "end")
      .text("Distance (MI)");
  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});
function type(d) {
  d.date = formatDate.parse(d.date);
  d.miles = +d.miles;
  return d;
}
		</script>
	</body>
</html>### DATASCI W209 - Assignment \#3
This simple line chart is constructed from a CSV file storing the date and number of miles I've run over the last few months.

*	The chart's data is sourced from my [public strava profile](https://www.strava.com/athletes/gregce).
*	Of note, this viz features [conventional margins](http://bl.ocks.org/mbostock/3019563).
	date	miles
	19-Dec-15	4.154826604
	21-Dec-15	2.003054337
	22-Dec-15	2.049867181
	24-Dec-15	1.993654418
	26-Dec-15	2.354586421
	27-Dec-15	2.161856948
	31-Dec-15	3.296757145
	01-Jan-16	2.489920359
	02-Jan-16	3.375629316
	03-Jan-16	3.253430364
	09-Jan-16	5.082617319
	10-Jan-16	4.180847573
	16-Jan-16	3.745027471
	17-Jan-16	4.264201825
	23-Jan-16	4.756732698
	24-Jan-16	3.481518474
	24-Jan-16	3.236996068
	25-Jan-16	2.398099955
	28-Jan-16	2.510027471
	31-Jan-16	4.052797016
	03-Feb-16	2.47722113
	07-Feb-16	4.371958516
	07-Feb-16	2.53492792
	11-Feb-16	2.401523766
	12-Feb-16	2.47
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Greg's Strava Running Activity</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.js"></script>
	<style type="text/css">
	/* No style rules here yet */
	.body {
	font: 12px sans-serif;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.x.axis path {
	display: none;
	}
	.line {
	fill: none;
	/* web green */
	stroke: #008000;
	stroke-width: 1 .5px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	var formatDate = d3.time.format("%d-%b-%y");
	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");
	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.miles); });
	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 + ")");
	d3.csv("activities_limited.csv", type, function(error, data) {
	if (error) throw error;
	x.domain(d3.extent(data, function(d) { return d.date; }));
	// Round miles from CSV
	y.domain(d3.extent(data, function(d) { return Math.round(d.miles * 100) / 100 ; }));
	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)",
	y: 6,
	dy: ".71em"
	})
	.style("text-anchor", "end")
	.text("Distance (MI)");
	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("d", line);
	});
	function type(d) {
	d.date = formatDate.parse(d.date);
	d.miles = +d.miles;
	return d;
	}
	</script>
	</body>
	</html>### DATASCI W209 - Assignment \#3
	This simple line chart is constructed from a CSV file storing the date and number of miles I've run over the last few months.

	* The chart's data is sourced from my [public strava profile](https://www.strava.com/athletes/gregce).
	* Of note, this viz features [conventional margins](http://bl.ocks.org/mbostock/3019563).