Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/f1teams.csv

Last active December 4, 2015 14:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GerardoFurtado/c62eb5c9db364fafd73f to your computer and use it in GitHub Desktop.
Save GerardoFurtado/c62eb5c9db364fafd73f to your computer and use it in GitHub Desktop.
Download ZIP
Performance of Formula 1 teams
Raw
f1teams.csv
teamname 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014
Vanwall 71.3 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Ferrari 71.3 59.4 37.5 81.3 22.2 28.9 54.4 30.0 39.5 20.2 29.6 7.1 47.0 33.3 30.6 8.9 48.1 57.1 57.6 63.4 40.3 50.2 3.8 15.1 30.8 39.6 23.8 34.2 15.4 22.1 27.1 24.6 45.8 21.9 8.2 10.9 27.7 26.8 27.3 37.5 52.0 50.0 62.5 65.8 81.3 54.9 80.9 29.2 62.0 66.7 53.1 22.9 48.5 45.9 46.5 43.3 26.4
Cooper 38.8 82.8 80.6 28.1 45.7 28.9 17.8 15.6 43.2 28.3 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
BRM 22.5 28.1 11.1 10.9 51.9 50.0 56.7 67.8 27.2 17.2 25.9 7.1 19.7 36.4 13.0 8.9 7.4 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Lotus 3.8 7.8 51.4 50.0 46.9 82.2 44.4 64.4 16.0 44.4 57.4 47.5 50.4 21.2 56.5 71.1 31.1 7.1 20.1 40.5 59.7 17.3 6.7 9.8 12.5 4.9 19.6 29.6 24.2 26.7 9.6 6.3 1.3 1.2 5.1 4.7 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 35.2 38.6 1.2
Porsche 0.0 0.0 1.4 35.9 23.5 5.6 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Lola 0.0 0.0 0.0 0.0 23.5 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Brabham 0.0 0.0 0.0 0.0 7.4 33.3 33.3 34.4 60.5 67.7 9.3 51.5 29.9 5.1 6.5 16.3 25.9 44.4 6.3 17.6 36.8 3.1 26.2 27.1 17.1 32.0 15.8 10.8 0.8 4.2 0.0 3.3 0.8 1.2 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Honda 0.0 0.0 0.0 0.0 0.0 0.0 0.0 12.2 3.7 20.2 13.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 26.5 2.0 4.3 0.0 0.0 0.0 0.0 0.0 0.0
Eagle 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 4.9 13.1 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
McLaren 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 2.5 3.0 45.4 40.4 29.9 10.1 45.4 43.0 55.6 42.1 52.1 39.2 10.4 6.7 5.2 12.4 28.8 15.1 60.0 37.5 40.0 31.7 82.9 58.8 50.4 54.3 38.7 32.8 16.4 11.0 19.1 23.2 60.9 48.4 55.9 37.5 23.9 49.3 21.3 53.2 34.0 0.0 46.6 23.2 55.6 60.8 44.0 14.9 22.2
Matra 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 41.7 66.7 19.7 9.1 11.1 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
March 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 41.0 34.3 13.9 10.4 4.4 5.6 13.2 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 9.2 1.7 0.0 0.0 1.2 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Tyrrel 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 73.7 47.2 63.7 38.5 19.8 49.3 17.6 26.4 12.4 5.7 4.4 10.4 5.3 0.0 1.7 4.6 4.6 2.1 6.7 6.7 4.7 3.1 0.0 5.1 1.8 2.0 0.7 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Surtees 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 2.6 8.1 16.7 5.2 2.2 0.0 4.9 3.9 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Hesketh 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 11.1 26.2 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Williams 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 4.8 0.0 0.0 7.6 33.3 57.1 42.2 24.2 16.0 10.4 29.6 58.8 57.1 8.3 32.1 23.8 48.8 64.1 65.6 42.2 41.2 68.4 45.2 14.8 13.7 13.2 29.4 33.8 50.0 27.2 19.3 3.4 10.8 8.0 11.1 8.4 0.6 8.8 0.6 39.2
Ligier 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 13.9 11.8 13.2 27.1 31.4 19.6 8.3 0.0 1.3 9.6 12.1 0.4 0.0 0.0 0.0 0.0 2.3 9.0 5.1 8.8 5.9 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Fittipaldi 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 2.1 7.2 11.8 0.4 5.2 0.0 0.4 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Wolf 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 35.9 16.7 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Shadow 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 6.7 5.2 7.9 6.9 15.0 4.2 1.3 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Renault 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 2.1 11.6 18.1 24.0 25.8 35.1 14.2 6.7 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 8.5 30.6 32.4 55.8 63.6 16.7 24.7 8.5 20.0 8.9 0.0 0.0 0.0
Benetton 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 7.9 11.7 16.3 16.3 29.6 15.2 35.5 28.1 40.2 50.4 26.6 24.6 12.9 6.3 7.4 3.7 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Jordan 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 5.1 0.4 1.2 10.9 7.7 8.6 12.1 13.3 23.8 6.3 7.0 3.3 4.5 1.5 3.5 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Sauber 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 2.7 4.7 6.6 4.3 5.9 3.9 2.0 2.2 7.7 4.0 6.6 10.5 5.8 11.1 33.0 41.7 11.8 5.4 5.4 14.7 7.0 0.0
Stewart 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 2.2 2.0 14.1 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
BAR 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 7.4 6.3 2.6 9.0 36.7 11.1 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0
Toyota 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.7 5.6 2.8 25.7 10.8 4.2 17.3 19.6 0.0 0.0 0.0 0.0 0.0
Red Bull 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 9.9 4.9 7.8 9.0 50.3 61.0 79.6 53.5 72.9 49.6
Toro Rosso 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.3 2.6 12.0 2.6 1.6 5.0 3.0 4.0 3.7
Brawn 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 56.2 0.0 0.0 0.0 0.0 0.0
Force India 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 4.2 8.3 8.4 12.7 9.4 19.0
Mercedes 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 0.0 26.2 20.2 16.5 44.1 85.8
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Formula 1 Teams</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
body {
margin: 0;
background-color: gainsboro;
font-family: "Roboto";
font-weight: 100;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
padding: 1px 20px 10px 20px;
background-color: white;
box-shadow: 1px 1px 1px 1px #fff;
}
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
font-weight: 550;
color: darkslategray;
font-size: 50px;
margin-bottom: 10px;
margin-top: 20px;
}
h2 {
font-weight: 550;
color: darkslategray;
font-size: 32px;
margin-bottom: 20px;
padding-bottom: 0px;
}
p {
font-size: 18px;
margin: 15px 0 10px 0;
}
p.footer {
font-size: 14px;
}
a:link {
text-decoration: none;
color: gray;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color: steelBlue;
}
svg {
background-color: white;
}
path.area:hover {
fill:maroon;
}
.button:hover {
fill: maroon;
stroke: darkslategray;
cursor: pointer;
}
#teamlabel {
position: relative;
left: 30px;
font-family: "Roboto";
color: #2f3b44;
font-size: 22px;
text-align: left;
font-weight: bold;
}
#teamlabel p.defaultText {
font-family: "Roboto";
font-size: 22px;
text-align: left;
font-weight: bold;
margin:0px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.y.axis line {
stroke: #777;
stroke-dasharray: 2,2;
}
div.tooltip {
position: absolute;
text-align: center;
white-space: normal;
padding: 2px;
font-size: 14px;
background: ivory;
border: 1px solid lightgray;
border-radius: 4px;
pointer-events: none;
cursor: none;
}
circle {
pointer-events: none;
}
</style>
</head>
<body>
<div id="container">
<h1>Performance of Formula 1 Teams</h1>
<img src="http://41.media.tumblr.com/30b4358c448de0777076360b63a4afae/tumblr_nxfbpyrg0p1rtst4no2_1280.jpg" align = "middle" width = 1000 height = 240>
<br>
<h2>Percentage of the maximum possible number of points</h2>
<p>The Formula One World Constructors' Championship, introduced in 1958, is awarded by the FIA to the most successful Formula One constructor over a season, as determined by a points system based on Grand Prix results. But in this chart the history of Formula One teams is shown differently: it doesn't show the number of points scored per season or the final position of each team, but <b>what percentage of the maximum number of points a team was able to score</b>.</p>
<p>All the teams are presented together, in what is called a "stacked area chart" (not very useful). Hover the stacked areas to select a team. Click on a team to see its performance. Vertical axis shows the percentage of the maximum number of points, horizontal axis shows the years. Hover the new isolated area to see the performance in a given year. Click the box next to "back to all teams" to, well, go back to all teams!</p>
<br>
<div id="teamlabel"><p class="defaultText">Team :</p></div>
<div id="svganchor"></div>
<br>
<p>Aditional explanations:</p>
<ol>
<li>The maximum number of points is obtained if a team wins every race of the season, and after 1979 if a team gets a one-two win in every race (up to 1978, only the best placed car for each team was eligible to score points).</li>
<li>As this chart shows how a team performed regarding the maximum number of points it could score and not regarding the total points distributed in that season, the sum of all teams in a season (the stacked areas) will be more than 100% of the maximum number of points.</li>
<li>All the data was collected on Wikipedia. To avoid a big number of small teams, I arbitrarily cut off all teams that never achieved 10% of the maximum number of points in a season (sorry, Arrows fans). All the races in a season were considered, differently from FIA system to award Formula One World Constructors' Championship.</li>
<li>Except for Ferrari, all other teams' graphs begin or end at the base (that is, zero points). This doesn't necessarily mean that that team was competing and scored zero points, that's just the way D3 creates areas. I'll improve the chart regarding this.</li>
</ol>
<p class="footer">Created by Gerardo Furtado (and all the people whose code I copy-pasted).</p>
</div>
<script type="text/javascript">
//width, height, padding
var w = 1000;
var h = 530;
var padding = [ 50, 30, 20, 30 ]; //Top, right, bottom, left
//Set up stack method
var stack = d3.layout.stack()
.values(function(d) {
return d.points;
})
.order("inside-out");
//Set up date format function (years)
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
// .attr("opacity", 0)
.ticks(10);
//Configure area generator
var area = d3.svg.area()
.interpolate("linear")
.x(function(d) {
return xScale(dateFormat.parse(d.x));
})
.y0(function(d) {
return yScale(d.y0); //Updated
})
.y1(function(d) {
return yScale(d.y0 + d.y); //updated
});
//Configure a flat area
var areaflat = d3.svg.area()
.interpolate("linear")
.x(function(d) {
return xScale(dateFormat.parse(d.x));
})
.y0(function(d) {
return yScale(0);
})
.y1(function(d) {
return yScale(0);
});
//Configure baseline area
var areabase = d3.svg.area()
.interpolate("linear")
.x(function(d) {
return xScale(dateFormat.parse(d.x));
})
.y0(function(d) {
return yScale(0)
})
.y1(function(d) {
return yScale(d.y);
});
//Easy colors accessible via a 20-step ordinal scale
var color = d3.scale.category20b();
//Creates the SVG
var svg = d3.select("#svganchor")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load the data
d3.csv("f1teams.csv", function(data) {
var years = ["1958", "1959", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014"];
//Create a new dataset for the restructured data
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this team's name and empty array
dataset[i] = {
team: data[i].teamname,
points: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
//Default value, used in case no value is present
var amount = null;
// If value is not empty
if (data[i][years[j]]) {
amount = +data[i][years[j]];
}
//Add a new object to the emissions data array
//for this country
dataset[i].points.push({
x: years[j],
y: amount
});
}
}
//Stack the data!
stack(dataset);
//Just checking if everything is ok...
// console.log(dataset);
//min and max to x scale
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
//Loop once for each year, and get the total value
//of percentage of points
var totals = [];
for (i = 0; i < years.length; i++) {
totals[i] = 0;
for (j = 0; j < dataset.length; j++) {
totals[i] += dataset[j].points[i].y;
}
}
yScale.domain([ d3.max(totals), 0 ]);
//again, just checking
//console.log(totals);
//Make a path for each team
var paths = svg.selectAll("path")
.data(dataset)
.enter()
.append("path")
.attr("class", "area")
.attr("d", function(d) {
return area(d.points);
})
.attr("stroke", "lightgray")
.attr("fill", function(d, i) {
return color(i);
});
//initial opacity of tooltip and circles
var ttop = 0.9;
var ttopc = 0;
//Displays the name of team on mouseover
paths.on("mouseover", function(d) {
d3.select("#teamlabel")
.html("Team: " + d.team)
});
paths.on("mousemove", function(d) {
var tttext = "<strong>" + d.team + "</strong>";
tt.html(tttext)
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", ttop);
});
//Removes the name of team on mouseout
paths.on("mouseout", function(d) {
d3.select("#teamlabel")
.html("Team:");
tt.style("opacity", 0);
});
var tt = d3.select("#svganchor").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//the circles on the top of the path
var cir = svg.append("circle")
.attr("r", 5)
.attr("stroke", "black")
.attr("opacity", 0);
//Changing the baseline after click
d3.selectAll("path")
.on("click", function() {
yScale.domain([100, 0])
//transitioning all paths to flat
d3.selectAll("path")
.attr("stroke", "none")
.data(dataset)
.transition()
.duration(500)
.attr("d", function(d) {
return areaflat(d.points);
});
//Selecting the path I clicked
d3.select(this)
.attr("stroke", "black")
.transition()
.duration(500)
.attr("d", function(d) {
return areabase(d.points);
})
.attr("class", "pathbase");
//showing tooltips and circles
paths.on("mousemove", function(d) {
var checkpath = document.getElementsByClassName("pathbase");
if (checkpath.length > 0) {
var ttop = 0.9;
var ttopc = 0.7;
} else {
var ttop = 0.9;
var ttopc = 0;
};
var mousex = d3.mouse(this);
mousex = mousex[0] + 10;
var invertedx = xScale.invert(mousex);
invertedx = invertedx.getFullYear();
var mousedate = years.indexOf(String(invertedx));
var pon = d.points[mousedate].y;
var posx = invertedx.toString();
cir.attr("cy", yScale(pon))
.attr("cx", xScale(dateFormat.parse(posx)))
.attr("opacity", ttopc)
.attr("fill", d3.select(this).style("fill"));
var tttext = "In <strong>" + invertedx + "</strong> " + d.team + " scored <strong>" + pon + "</strong>%<br> of the maximum number of points";
tt.html(tttext)
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 15 + 'px')
.style("opacity", ttop);
});
yAxis.innerTickSize(-(w-60))
.tickValues([20,40,60,80]);
paths.on("mouseout", function() {
tt.style("opacity", 0);
cir.attr("opacity", 0);
d3.select("#teamlabel")
.html("Team:");
});
d3.transition(svg).select(".y.axis")
.transition()
.duration(500)
.attr("opacity", 1)
.call(yAxis);
});
//Going back to normal chart with a button
svg.append("rect")
.attr("x", 30)
.attr("y", 10)
.attr("height", 20)
.attr("width", 20)
.attr("fill", "darkslategray")
.attr("stroke-width", "2px")
.attr("class", "button")
.on("click", function() {
var ttopc = 0;
paths.on("mousemove", function(d) {
var tttext = "<strong>" + d.team + "</strong>";
tt.html(tttext)
.style('top', d3.event.pageY - 12 + 'px')
.style('left', d3.event.pageX + 25 + 'px')
.style("opacity", ttop);
});
yScale.domain([ d3.max(totals), 0 ]);
d3.selectAll("path")
.data(dataset)
.attr("class", "area")
.attr("stroke", "lightgray")
.transition()
.duration(500)
.attr("d", function(d) {
return area(d.points);
});
d3.transition(svg).select(".y.axis")
.transition()
.duration(500)
.attr("opacity", 0)
.call(yAxis);
});
svg.append("text")
.attr("x", 54)
.attr("y", 25)
.attr("font-size", 16)
.attr("font-family", "Charter")
.text("Back to all teams");
//Create axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("opacity", 0)
.attr("transform", "translate(" + padding[3] + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment