thole/ParisRoubaix.csv

## index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">

<style>
body {
  font: 11px sans-serif;
}

.axis path {
  fill: none;
}

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

.tick line {
  fill: none;
  stroke: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>

<script>
var margin = {top: 20, right: 20, bottom: 60, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;


// setup x
var xValue = function(d) { return d.distance;}, // data -> value
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// setup y
var yValue = function(d) { return d.avgspeed;}, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");


// add the graph canvas to the body of the webpage
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 + ")");


// load data
d3.csv("ParisRoubaix.csv", function(error, data) {

  // change string (from CSV) into number format
  data.forEach(function(d) {
    d.year = parseInt(d.year);
    d.distance = parseFloat(d.distance);
    d.avgspeed = parseFloat(d.avgspeed);
  });

  // don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

  // x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + (height + 20) +  ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width/2)
      .attr("y", 40)
      .style("text-anchor", "center")
      .text("distance (km)");

  // y-axis
  svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(-20,0)")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", -40)
      .attr("x", -height/2)
      .attr("dy", ".71em")
      .style("text-anchor", "center")
      .text("avg speed (km/h)");

  // draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 2)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return "black";})

  svg.selectAll(".xline")
      .data(data)
    .enter().append("line")
      .attr("class", "line")
      .attr("x1", xMap)
      .attr("x2", xMap)
      .attr("y1", 0 + height)
      .attr("y2", 20 + height)
      .style("stroke","gray")
      .style("stroke-width",1)

   svg.selectAll(".yline")
      .data(data)
    .enter().append("line")
      .attr("class", "line")
      .attr("x1", -20)
      .attr("x2", 0)
      .attr("y1", yMap)
      .attr("y2", yMap)
      .style("stroke","gray")
      .style("stroke-width",1)


});

</script>
</body>
</html>

## ParisRoubaix.csv
year,distance,avgspeed
1896,280,30.162
1897,280,28.124
1898,268,32.599
1899,268,31.976
1900,268,37.352
1901,280,25.862
1902,268,28.088
1903,268,29.104
1904,268,32.518
1905,268,33.206
1906,270,27.034
1907,270,30.971
1908,271,25.630
1909,276,30.469
1910,266,29.274
1911,266,31.345
1912,266,31.30
1913,265,35.333
1914,274,30.33
1919,280,22.857
1920,280,25.95
1921,263,29.09
1922,262,33.66
1923,270,30.098
1924,270,25.55
1925,260,28.03
1926,270,35.63
1927,260,30.45
1928,260,33.60
1929,260,29.168
1930,258,31.51
1931,256,36.44
1932,255,37.320
1933,255,35.523
1934,255,32.415
1935,262,37.363
1936,262,36.137
1937,255,34.935
1938,255,30.936
1939,262,35.934
1943,250,41.822
1944,246,39.897
1945,246,31.212
1946,246,34.055
1947,246,39.831
1948,246,43.612
1949,244,39.356
1950,247,39.123
1951,247,40.355
1952,245,41.938
1953,245,43.522
1954,246,35.590
1955,249,40.741
1956,252,41.831
1957,253,34.738
1958,269,33.300
1959,262.5,42.760
1960,262.5,43.538
1961,263,41.700
1962,258,38.321
1963,266,37.681
1964,265,"45.129
1965,267.5,41.847
1966,262.5,37.546
1967,263,36.824
1968,262,36.606
1969,264,38.939
1970,266,41.644
1971,265.2,42.108
1972,272,36.709
1973,272.5,36.370
1974,274,37.567
1975,277.5,40.406
1976,270.5,40.811
1977,250.5,40.464
1978,263,36.494
1979,264,41.010
1980,264,43.106
1981,263,40.868
1982,270,36.733
1983,274,40.308
1984,265,36.074
1985,265,36.109
1986,268,39.374
1987,264,36.982
1988,266,40.324
1989,265,39.164
1990,265,34.855
1991,266,37.332
1992,267.5,41.480
1993,267.5,41.652
1994,270,36.160
1995,266,41.303
1996,262,43.310
1997,267,40.159
1998,266,38.505
1999,273,40.519
2000,273,40.172
2001,254.5,37.703
2002,261,39.235
2003,261,42.143
2004,261,39.107
2005,259,40.101
2006,259,42.239
2007,259.5,42.181
2008,259.5,43.406
2009,259,41.34
2010,259,39.325
2011,258,42.126
2012,257.5,43.476
2013,254.5,44.190
2014,257,41.787
2015,253.5,43.476
2016,257.5,43.907

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">

	<style>
	body {
	font: 11px sans-serif;
	}

	.axis path {
	fill: none;
	}

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

	.tick line {
	fill: none;
	stroke: none;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>

	<script>
	var margin = {top: 20, right: 20, bottom: 60, left: 60},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;


	// setup x
	var xValue = function(d) { return d.distance;}, // data -> value
	xScale = d3.scale.linear().range([0, width]), // value -> display
	xMap = function(d) { return xScale(xValue(d));}, // data -> display
	xAxis = d3.svg.axis().scale(xScale).orient("bottom");

	// setup y
	var yValue = function(d) { return d.avgspeed;}, // data -> value
	yScale = d3.scale.linear().range([height, 0]), // value -> display
	yMap = function(d) { return yScale(yValue(d));}, // data -> display
	yAxis = d3.svg.axis().scale(yScale).orient("left");


	// add the graph canvas to the body of the webpage
	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 + ")");


	// load data
	d3.csv("ParisRoubaix.csv", function(error, data) {

	// change string (from CSV) into number format
	data.forEach(function(d) {
	d.year = parseInt(d.year);
	d.distance = parseFloat(d.distance);
	d.avgspeed = parseFloat(d.avgspeed);
	});

	// don't want dots overlapping axis, so add in buffer to data domain
	xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
	yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

	// x-axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (height + 20) + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width/2)
	.attr("y", 40)
	.style("text-anchor", "center")
	.text("distance (km)");

	// y-axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(-20,0)")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", -40)
	.attr("x", -height/2)
	.attr("dy", ".71em")
	.style("text-anchor", "center")
	.text("avg speed (km/h)");

	// draw dots
	svg.selectAll(".dot")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", 2)
	.attr("cx", xMap)
	.attr("cy", yMap)
	.style("fill", function(d) { return "black";})

	svg.selectAll(".xline")
	.data(data)
	.enter().append("line")
	.attr("class", "line")
	.attr("x1", xMap)
	.attr("x2", xMap)
	.attr("y1", 0 + height)
	.attr("y2", 20 + height)
	.style("stroke","gray")
	.style("stroke-width",1)

	svg.selectAll(".yline")
	.data(data)
	.enter().append("line")
	.attr("class", "line")
	.attr("x1", -20)
	.attr("x2", 0)
	.attr("y1", yMap)
	.attr("y2", yMap)
	.style("stroke","gray")
	.style("stroke-width",1)



	});

	</script>
	</body>
	</html>
	year,distance,avgspeed
	1896,280,30.162
	1897,280,28.124
	1898,268,32.599
	1899,268,31.976
	1900,268,37.352
	1901,280,25.862
	1902,268,28.088
	1903,268,29.104
	1904,268,32.518
	1905,268,33.206
	1906,270,27.034
	1907,270,30.971
	1908,271,25.630
	1909,276,30.469
	1910,266,29.274
	1911,266,31.345
	1912,266,31.30
	1913,265,35.333
	1914,274,30.33
	1919,280,22.857
	1920,280,25.95
	1921,263,29.09
	1922,262,33.66
	1923,270,30.098
	1924,270,25.55
	1925,260,28.03
	1926,270,35.63
	1927,260,30.45
	1928,260,33.60
	1929,260,29.168
	1930,258,31.51
	1931,256,36.44
	1932,255,37.320
	1933,255,35.523
	1934,255,32.415
	1935,262,37.363
	1936,262,36.137
	1937,255,34.935
	1938,255,30.936
	1939,262,35.934
	1943,250,41.822
	1944,246,39.897
	1945,246,31.212
	1946,246,34.055
	1947,246,39.831
	1948,246,43.612
	1949,244,39.356
	1950,247,39.123
	1951,247,40.355
	1952,245,41.938
	1953,245,43.522
	1954,246,35.590
	1955,249,40.741
	1956,252,41.831
	1957,253,34.738
	1958,269,33.300
	1959,262.5,42.760
	1960,262.5,43.538
	1961,263,41.700
	1962,258,38.321
	1963,266,37.681
	1964,265,"45.129
	1965,267.5,41.847
	1966,262.5,37.546
	1967,263,36.824
	1968,262,36.606
	1969,264,38.939
	1970,266,41.644
	1971,265.2,42.108
	1972,272,36.709
	1973,272.5,36.370
	1974,274,37.567
	1975,277.5,40.406
	1976,270.5,40.811
	1977,250.5,40.464
	1978,263,36.494
	1979,264,41.010
	1980,264,43.106
	1981,263,40.868
	1982,270,36.733
	1983,274,40.308
	1984,265,36.074
	1985,265,36.109
	1986,268,39.374
	1987,264,36.982
	1988,266,40.324
	1989,265,39.164
	1990,265,34.855
	1991,266,37.332
	1992,267.5,41.480
	1993,267.5,41.652
	1994,270,36.160
	1995,266,41.303
	1996,262,43.310
	1997,267,40.159
	1998,266,38.505
	1999,273,40.519
	2000,273,40.172
	2001,254.5,37.703
	2002,261,39.235
	2003,261,42.143
	2004,261,39.107
	2005,259,40.101
	2006,259,42.239
	2007,259.5,42.181
	2008,259.5,43.406
	2009,259,41.34
	2010,259,39.325
	2011,258,42.126
	2012,257.5,43.476
	2013,254.5,44.190
	2014,257,41.787
	2015,253.5,43.476
	2016,257.5,43.907