Skip to content

Instantly share code, notes, and snippets.

@captainelaine

captainelaine/Drivertotal.csv

Created April 10, 2016 22:05
Show Gist options
  • Save captainelaine/5280b3c865994c12957da3a449504be5 to your computer and use it in GitHub Desktop.
Save captainelaine/5280b3c865994c12957da3a449504be5 to your computer and use it in GitHub Desktop.
Download ZIP
Questions of data nest
Raw
Drivertotal.csv
Drivername 2000 Team2000 2001 Team2001 2002 Team2002 2003 Team2003 2004 Team2004 2005 Team2005 2006 Team2006
Michael Schumacher 108 Ferrari 123 Ferrari 144 Ferrari 93 Ferrari 148 Ferrari 62 Ferrari 121 Ferrari
Mika H_kkinen 89 McLaren 37 McLaren 41 McLaren 51 McLaren 24 McLaren 24 Red Bull 24 Red Bull
David Coulthard 73 McLaren 65 MaLaren
Rubens Barrichello 62 Ferrari 56 Ferrari 77 Ferrari 65 Ferrari 114 Ferrari 38 Ferrari 30 Honda
Ralf Schumacher 24 Williams 49 Williams 42 Williams 58 Williams 24 Williams
Giancarlo Fisichella 18 Benetton 8 Benetton 7 Jordan 12 Jordan 22 Red Bull 58 Renault 72 Renault
Jacques Villeneuve 17 BAR 12 BAR
Jenson Button 12 Williams 2 Benetton 14 Renault 17 BAR 85 BAR 37 BAR 56 Honda
Heinz-Harald Frentzen 11 Jordan 6 Jordan 2 Arrows 13 Sauber
Jarno Trulli� 6 Jordan 12 Jordan 9 Renault 33 Renault 46 Renault 43 Toyota 15 Toyota
Mika Salo� 6 Sauber 2 Toyota
Jos Verstappen 5 Arrows 1 Arrows 0 Minardi
Eddie Irvine 4 Jaguar 6 Jaguar 8 Jaguar
Ricardo Zonta 3 BAR 0 Jordan 0 Toyota 0 Toyota
Alexander Wurz� 2 Benetton 5 McLaren
Pedro de la Rosa 2 Arrows 3 Jaguar 0 Jaguar 4 McLaren 19 McLaren
Marc Gen��� 0 Minardi 4 Williams 0 Williams
Nick Heidfeld 0 Prost 12 Sauber 7 Sauber 6 Sauber 3 Jordan 28 Williams 23 Sauber
Gaston Mazzacane 0 Minardi 0 Prost
Jean Alesi� 0 Prost 5 Prost
Luciano Burti� 0 Jaguar 0 Jaguar
Juan Pablo Montoya 31 Williams 50 Williams 82 Williams 58 Williams 60 McLaren 26 McLaren
Kimi R_ikk_nen� 9 Sauber 24 McLaren 91 McLaren 45 McLaren 112 McLaren 65 McLaren
Olivier Panis 5 BAR 3 BAR 6 Toyota 6 Toyota
Tarso Marques� 0 Minardi
Fernando Alonso 0 Minardi 55 Renault 59 Renault 133 Renault 134 Renault
Tomas Enge 0 Prost
Felipe Massa 4 Red Bull 12 Red Bull 11 Sauber 80 Ferrari
Takuma Sato 2 Jordan 3 BAR 34 BAR 1 BAR 0 Super Aguri
Mark Webber 2 Minardi 17 Jaguar 7 Jaguar 36 Williams 7 Williams
Cristiano da Matta 10 Toyota 3 Toyota
Ralph Firman 1 Jordan
Justin Wilson 1 Minardi
Zsolt Baumgartner 1 Minardi
Antonio Pizzonia 0 Jaguar 6 Williams 0 Williams
Christian Klien 3 Jaguar 9 Red Bull 2 Red Bull
Timo Glock 2 Jordan
Tiago Monteiro� 7 Jordan 0 MF1
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Legend Ferrari in Formula One</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="main">
<div id="ms1">
<div id= "introms1">
<h1>2000 - 2006</h1>
<h2>"Michael Schumacher Years"</h2>
<p>Year 2000 was a special year for the Formula One Ferrari team and all fans of Ferrari around the world. After 20 years' failure of winning the Driver Championship, Ferrari finally gained this honor again in the 2000 season.<p>
<p>The hero was Michael Schumacher, who joined Ferrari from season 1996, and started his five-year championships from this special season 2000.</p>
</div>
</div>
<div id="ms2">
<div id="introms2">
<h2>Michael Schumacher and Team Ferrari's performance from season 2000 - 2006</h2>
<p id="introms21">Season 2000 to season 2004 are "winner years" to both Michael Schumacher and Team Ferrari. They undertook both the championships of driver and team, which made Michael Schumacher become deserve the name of ”King of F1".</p>
<p>However, due to new rules of tyre and the backward of race car research and development, Ferrari race cars' failed to challenge team Renault in both season 2005 and 2006, and Fernando Alonso became world champion instead of Michael Schumacher. After season 2006, Michael Schumacher chose to retire from F1.</p>
</div>
<div id= "mslinechart1" class="driverchart"></div>
<div id= "mslinechart2" class = "teamchart"></div>
</div>
<div id = "ms3">
<h2>Mihcael Schumacher's Record</h2>
<div id= "introms3">
<p>There is no doubt that Michael Schumacher was one of the greatest Formula One drivers in the world. Although he has retired for several years, he still maintains multiple records in the field of Formula One, which is hard to be surpass by other F1 drivers.</p>
</div>
<div id="msbarchart"></div>
</div>
</div>
<script type="text/javascript">
//This is the script for the whole page, which make every section has the window size.
var pagewidth = window.innerWidth;
var pageheight = window.innerHeight;
function resize(d) {
document.getElementById(d).style.height = pageheight + "px";
document.getElementById(d).style.width = pagewidth + "px";
};
resize("ms1");
resize("ms2");
resize("ms3");
window.onresize = function() {
resize("ms1");
resize("ms2");
resize("ms3");
};
//global variable
var dateFormat = d3.time.format("%Y");
//The first line chart here.
var linefullwidth = 600;
var linefullheight = 500;
var linemargin = {top:50, right: 150, bottom: 50, left:100};
var linewidth = linefullwidth - linemargin.left - linemargin.right;
var lineheight = linefullheight - linemargin.top - linemargin.bottom;
var linechart1 = d3.select("#mslinechart1")
.append("svg")
.attr("width", linefullwidth)
.attr("height", linefullheight)
.append("g")
.attr("transform", "translate(" + linemargin.left + "," + linemargin.top + ")");
var linexScale = d3.time.scale()
.range([0,linewidth]);
var lineyScale = d3.scale.linear()
.range([0, lineheight]);
var linexAxis = d3.svg.axis()
.scale(linexScale)
.orient("bottom")
.ticks(10)
.tickFormat(function(d){
return dateFormat(d);
})
.innerTickSize([10])
.outerTickSize([10]);
var lineyAxis = d3.svg.axis()
.scale(lineyScale)
.orient("left")
.outerTickSize([10]);
var linechartline1 = d3.svg.line()
.x(function(d){
return xScale(dateFormat.parse(d.year));
})
.y(function(d){
return yScale(+d.point);
});
var linecharttooltip1 = d3.select("#mslinechart1")
.append("div")
.attr("class","linecharttooltip1");
d3.csv("Drivertotal.csv", function(data){
console.log(data);
var years = ["2000","2001","2002","2003","2004","2005","2006"];
var teams = ["Team2000","Team2001","Team2002","Team2003","Team2004","Team2005","Team2006"];
var fulldata = [];
data.forEach(function(d,i){
var performance=[];
var team = [];
years.forEach(function(y){
if(d[y]){
performance.push({
year: y,
point: d[y]
});
}
});
teams.forEach(function(t){
if (d[t]) {
team.push ({
year: t,
team: d[t]
});
}
});
fulldata.push({
driver:d.Drivername,
performance: performance,
team: team
});
});
console.log(fulldata);
linexScale.domain(
d3.extent(years, function(d){
return dateFormat.parse(d);
})
);
lineyScale.domain([
d3.max(fulldata, function(d){
return d3.max(d.performance, function(d){
return +d.point;
});
}),
0
]);
var drawline = linechart1.selectAll("g.lines")
.data(fulldata)
.enter()
.append("g")
.attr("class","lines")
.on("mouseover",mouseoverline)
.on("mouseout", mouseoutline);
drawline.selectAll("path")
.data(function(d){
return [d.performance];
})
.enter()
.append("path")
.attr("class","line")
.attr("d",line);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment