Last active
March 14, 2016 17:57
-
-
Save captainelaine/879ed6a6364d6831ea24 to your computer and use it in GitHub Desktop.
My Update Plot
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Driver | wage2015 | point2015 | Age | CareerPoint | CareerYear | |
---|---|---|---|---|---|---|
Fernando Alonso | 350 | 11 | 35 | 1778 | 15 | |
Kimi Raikkonen | 180 | 150 | 37 | 1174 | 15 | |
Sebastian Vettel | 280 | 278 | 29 | 1896 | 9 | |
Lewis Hamilton | 250 | 381 | 31 | 1867 | 9 | |
Jenson Button | 100 | 16 | 36 | 1214 | 16 | |
Nico Rosberg | 135 | 322 | 31 | 1209.5 | 10 | |
Felipe Massa | 40 | 121 | 35 | 1071 | 14 | |
Nico Hulkenberg | 40 | 58 | 29 | 290 | 6 | |
Sergio Perez | 40 | 78 | 26 | 266 | 5 | |
Romain Grosjean | 40 | 51 | 30 | 287 | 7 | |
Pastor Maldonado | 40 | 27 | 31 | 76 | 5 | |
Daniel Ricciardo | 15 | 92 | 27 | 360 | 5 | |
Valtteri Bottas | 20 | 136 | 27 | 326 | 3 | |
Daniil Kvyat | 7.5 | 95 | 22 | 103 | 2 | |
Max Verstappen | 2.5 | 49 | 19 | 49 | 1 | |
Carlos Sainz | 2.5 | 18 | 22 | 18 | 1 | |
Felipe Nasr | 2 | 27 | 24 | 27 | 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href='https://fonts.googleapis.com/css?family=Ubuntu:300italic,500|Josefin+Sans:400italic' rel='stylesheet' type='text/css'> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Formula One World</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 { | |
padding: 50px; | |
font-family: 'Ubuntu',sans-serif; | |
font-size: 12pt; | |
text-align: center; | |
} | |
button { | |
margin: 5px; | |
font-size: 15pt; | |
padding: 3px; | |
cursor: pointer; | |
} | |
input { | |
margin: 5px; | |
font-size: 15pt; | |
padding: 3px; | |
} | |
.mybartooltip { | |
position: absolute; | |
z-index: 10; | |
} | |
.mybartooltip p { | |
background-color:rgb(244,239,243); | |
border: none; | |
padding: 2px; | |
font-size: 12px; | |
} | |
#chart { | |
background-color:rgb(252,250,250 ); | |
z-index: -10000px; | |
} | |
#menu { | |
padding: 20px 75px; | |
} | |
.labels { | |
fill: black; | |
font-size: 10px; | |
font-family: 'Josefin Sans', sans-serif; | |
} | |
.labelsdrivername { | |
font-size: 10px; | |
font-family: 'Josefin Sans', sans-serif; | |
} | |
.axis { | |
shape-rendering: crispEdges; | |
font-size: 10px; | |
} | |
.axis path { | |
fill: none; | |
stroke: none; | |
} | |
.x.axis path { | |
fill: none; | |
stroke: white; | |
stroke-opacity:0; | |
} | |
.x.axis line { | |
stroke: gray; | |
stroke-opacity: .8; | |
} | |
.y.axis path { | |
stroke: black; | |
} | |
.focused { | |
opacity: 0.9; | |
} | |
.unfocused { | |
opacity: 0.4; | |
} | |
.hidden { | |
display: none; | |
} | |
</style> | |
</head> | |
<body> | |
<div class = "intro"> | |
<h1>Formula One World</h1> | |
<p><em>As below, you can see many different kinds of imformation of drivers who attended the 2015 Season</em></p> | |
<p><em>You can take a look at different drivers' wage, won points and so on from high to low.</em></p> | |
<p>Source:<a href = "http://www.crash.net/f1/news/221215/1/f1-2015-driver-salaries-published-but-who-earns-most.html">Crash.Net</a> <a href="https://en.wikipedia.org/wiki/2015_Formula_One_season">Wikipedia-FormulaOne</a></p> | |
</div> | |
<div id="menu"> | |
<select> | |
<option value ="Age">Age of drivers</option> | |
<option value="wage2015">Wage of 2015(hundred thousand)</option> | |
<option value="point2015">Points won in 2015</option> | |
<option value="CareerPoint">Career total won points</option> | |
<option value ="CareerYear">Career Age</option> | |
</select> | |
</div> | |
<div id="chart"> | |
</div> | |
<script type="text/javascript"> | |
var fullwidth = 900; | |
var fullheight = 500; | |
var margin = {top: 20, right: 50, bottom: 20, left: 100}; | |
var height = fullheight - margin.top - margin.bottom; | |
var width = fullwidth - margin.left - margin.right; | |
var vis = d3.select("#chart").append("svg"); | |
var svg = vis | |
.attr("width", fullwidth) | |
.attr("height", fullheight) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
svg.append("g") | |
.attr("class", "x axis"); | |
svg.append("g") | |
.attr("class", "xbottom") | |
var xScale = d3.scale.linear() | |
.range([0, width]); | |
var yScale = d3.scale.ordinal() | |
.rangeRoundBands([0, height], .1); | |
var xAxis = d3.svg.axis() | |
.scale(xScale) | |
.orient("top") | |
.ticks(10) | |
.innerTickSize([5]) | |
.outerTickSize([5]); | |
var mybartooltip = d3.select("body") | |
.append("div") | |
.attr("class", "mybartooltip"); | |
d3.csv("f1driverwage.csv", function(error, data) { | |
var column = d3.select("#menu select").property("value"); | |
var dataset = bigfirst(data, column); | |
console.log(column); | |
//setup our ui -- requires access to data variable, so inside csv | |
d3.select("#menu select") | |
.on("change", function() { | |
column = d3.select("#menu select").property("value"); | |
dataset = bigfirst(data, column); | |
redraw(dataset, column); | |
}); | |
}); | |
function bigfirst(data, column){ | |
data.sort(function(a,b){ | |
return d3.descending(+a[column],+b[column]); | |
}) | |
redraw(data,column); | |
} | |
//get the descending values; | |
function redraw(data, column) { | |
var max = d3.max(data, function(d) {return +d[column];}); | |
xScale.domain([0, max]); | |
yScale.domain(d3.range(data.length)); | |
var bars = svg.selectAll("rect.bar") | |
.data(data, function (d) { | |
return d.Driver; | |
}); | |
bars | |
.attr("fill", "gray") | |
.attr("opacity","0.2"); | |
//enter - new bars get set to darkorange when we "redraw." | |
bars.enter() | |
.append("rect") | |
.attr("class", "bar") | |
.attr("fill", function(d){ | |
if (d.Driver==="Kimi Raikkonen" ||d.Driver==="Sebastian Vettel") { | |
return "rgb(250,67,52)"; | |
} else if (d.Driver ==="Lewis Hamilton" || d.Driver ==="Nico Rosberg") { | |
return "rgb(137,141,142)"; | |
} else if (d.Driver === "Felipe Massa" || d.Driver ==="Valtteri Bottas") { return "rgb (51,133,229)"; | |
} else if (d.Driver ==="Fernando Alonso" || d.Driver === "Janson Button") { | |
return "rgb(248,160,53)"; | |
} else if (d.Driver === "Daniel Ricciardo" || d.Driver ==="Daniil Kvyat") { | |
return "rgb(172,62,100)"; | |
} else { | |
return "rgb(184,192,201)"; | |
} | |
}) | |
.attr("opacity","0.4") | |
.on("mouseover", mouseoverBar) | |
.on("mouseout", mouseoutBar); | |
//exit -- remove ones that aren't in the index set | |
bars.exit() | |
.transition() | |
.duration(300) | |
.attr("width", 0) | |
.remove(); | |
//at goes here at the end of exit? | |
// transition -- move the bars to proper widths and location | |
bars | |
.transition() | |
.duration(500) | |
.ease("quad") | |
.attr("width", function(d) { | |
return xScale(+d[column]); | |
}) | |
.attr("height", yScale.rangeBand())//TODO: In an ordinal scale bar chart, what goes here?) | |
.attr("fill", function(d){ | |
if (d.Driver==="Kimi Raikkonen" ||d.Driver==="Sebastian Vettel") { | |
return "red"; | |
} else if (d.Driver ==="Lewis Hamilton" || d.Driver ==="Nico Rosberg") { | |
return "rgb(137,141,142)"; | |
} else if (d.Driver === "Felipe Massa" || d.Driver ==="Valtteri Bottas") { return "rgb(9,103,159)"; | |
} else if (d.Driver ==="Fernando Alonso" || d.Driver === "Jenson Button") { | |
return "rgb(248,160,53)"; | |
} else if (d.Driver === "Daniel Ricciardo" || d.Driver ==="Daniil Kvyat") { | |
return "rgb(172,62,100)"; | |
} else { | |
return "rgb(184,192,201)"; | |
} | |
}) | |
.attr("opacity","0.4")// do what you like with the colors | |
.attr("transform", function(d,i) { | |
return "translate(0," + yScale(i) + ")"; | |
}); | |
svg.transition().select(".x.axis") | |
.call(xAxis); | |
// We are attaching the labels separately, not in a group with the bars... | |
var labels = svg.selectAll("text.labels") | |
.data(data, function (d) { | |
return d.Driver; | |
}); | |
// everything gets a class and a text field. But we assign attributes in the transition. | |
labels.enter() | |
.append("text") | |
.attr("class", "labels"); | |
labels.exit() | |
.remove(); | |
labels.transition() | |
.duration(500)//: How long do you want this to last?) | |
.text(function(d) { | |
return +d[column]; | |
}) | |
.attr("x", function(d){ | |
return xScale(+d[column]); | |
}) | |
.attr("y", function(d,i) { | |
return yScale(i); | |
}) | |
.attr("dy", "1.2em") | |
.attr("dx", function(d){ | |
if (+d[column]> 1000) { | |
return "30px"; | |
} else { | |
return "20px"; | |
} | |
}) | |
.attr("text-anchor", "end"); | |
var labelsdrivername = svg.selectAll("text.labelsdrivername") | |
.data(data,function(d){ | |
return d.Driver; | |
}); | |
labelsdrivername.enter() | |
.append("text") | |
.attr("class", "labelsdrivername"); | |
labelsdrivername.transition() | |
.duration(500) | |
.text(function(d){ | |
return d.Driver; | |
}) | |
.attr("x",-3) | |
.attr("transform", function(d,i) { | |
return "translate(" + 0+ "," + yScale(i) + ")" | |
}) | |
.attr("dy", "15px") | |
.attr("dx", "-3px") | |
.attr("text-anchor", "end"); | |
function mouseoverBar(d) { | |
d3.select(this) | |
.classed("focused", true) | |
.classed("unfocused", false) | |
mybartooltip | |
.style("display", null) | |
.html("<p>Driver:" + " " +d.Driver + | |
"</p>") | |
.style("top", (d3.event.pageY - 10) + "px" ) | |
.style("left", (d3.event.pageX + 10) + "px"); | |
} | |
function mouseoutBar(d) { | |
d3.select(this) | |
.classed("focused", false) | |
.classed("unfocused", true) | |
mybartooltip | |
.style("display","none"); | |
} | |
} | |
svg.append("circle") | |
.attr("cx",650) | |
.attr("cy",340) | |
.style("fill","rgb(250,67,52)") | |
.attr("r",6) | |
svg.append("text") | |
.attr("x",660) | |
.attr("y",346) | |
.attr("font-size","16px") | |
.attr("font-weight","bold") | |
.style("text-anchor", "left") | |
.text("Ferrair"); | |
svg.append("circle") | |
.attr("cx",650) | |
.attr("cy",360) | |
.style("fill","rgb(137,141,142)") | |
.attr("r",6) | |
svg.append("text") | |
.attr("x",660) | |
.attr("y",366) | |
.attr("font-size","16px") | |
.attr("font-weight","bold") | |
.style("text-anchor", "left") | |
.text("Mercedes"); | |
svg.append("circle") | |
.attr("cx",650) | |
.attr("cy",380) | |
.attr("r",6) | |
.style("fill","rgb(9,103,159)") | |
svg.append("text") | |
.attr("x",660) | |
.attr("y",386) | |
.attr("font-size","16px") | |
.attr("font-weight","bold") | |
.style("text-anchor", "left") | |
.text("Williams"); | |
svg.append("circle") | |
.attr("cx",650) | |
.attr("cy",400) | |
.attr("r",6) | |
.style("fill","rgb(248,160,53)") | |
svg.append("text") | |
.attr("x",660) | |
.attr("y",406) | |
.attr("font-size","16px") | |
.attr("font-weight","bold") | |
.style("text-anchor", "left") | |
.text("McLaren"); | |
svg.append("circle") | |
.attr("cx",650) | |
.attr("cy",420) | |
.attr("r",6) | |
.style("fill","rgb(172,62,100)") | |
svg.append("text") | |
.attr("x",660) | |
.attr("y",426) | |
.attr("font-size","16px") | |
.attr("font-weight","bold") | |
.style("text-anchor", "left") | |
.text("Red Bull"); | |
svg.append("circle") | |
.attr("cx",650) | |
.attr("cy",440) | |
.attr("r",6) | |
.style("fill","rgb(184,192,201)") | |
svg.append("text") | |
.attr("x",660) | |
.attr("y",446) | |
.attr("font-size","16px") | |
.attr("font-weight","bold") | |
.style("text-anchor", "left") | |
.text("Other Teams"); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" standalone="no"?> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" | |
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> | |
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" | |
width="409.000000pt" height="59.000000pt" viewBox="0 0 409.000000 59.000000" | |
preserveAspectRatio="xMidYMid meet"> | |
<metadata> | |
Created by potrace 1.13, written by Peter Selinger 2001-2015 | |
</metadata> | |
<g transform="translate(0.000000,59.000000) scale(0.100000,-0.100000)" | |
fill="#000000" stroke="none"> | |
<path d="M562 470 l-142 -5 -130 -169 c-72 -93 -130 -173 -130 -178 0 -4 72 | |
-8 161 -8 154 0 161 1 180 23 66 75 249 322 246 330 -4 13 -10 13 -185 7z"/> | |
<path d="M809 460 c-27 -24 -259 -328 -259 -339 0 -7 28 -11 74 -11 56 0 79 4 | |
94 18 17 15 237 299 255 329 12 19 -142 22 -164 3z"/> | |
<path d="M1445 451 c-43 -49 -255 -326 -255 -333 0 -10 62 -10 76 0 21 14 257 | |
326 258 340 2 28 -54 22 -79 -7z"/> | |
<path d="M3545 470 l-370 -5 0 -175 0 -175 380 0 380 0 0 105 0 105 -195 0 | |
-195 0 0 -30 0 -30 125 -5 c120 -5 125 -6 128 -27 l3 -23 -245 0 -246 0 0 85 | |
0 85 93 1 c50 0 176 0 279 -1 103 -1 203 2 222 6 33 6 36 9 36 39 0 18 -6 36 | |
-12 41 -7 5 -179 7 -383 4z"/> | |
<path d="M1020 433 c-100 -124 -238 -308 -234 -315 3 -4 30 -8 60 -8 47 0 59 | |
4 81 27 25 28 233 296 247 321 5 9 -9 12 -58 12 -63 0 -66 -1 -96 -37z"/> | |
<path d="M1132 301 c-73 -94 -132 -175 -132 -181 0 -7 17 -10 47 -8 l48 3 132 | |
170 c73 94 132 173 133 178 0 4 -22 7 -48 7 l-49 0 -131 -169z"/> | |
<path d="M1582 409 c-26 -34 -86 -112 -133 -173 -48 -61 -85 -114 -82 -118 2 | |
-5 35 -8 73 -8 67 0 69 1 102 40 l33 40 240 0 c132 0 248 1 257 0 12 0 18 -10 | |
20 -37 l3 -38 60 0 60 0 3 178 2 177 -295 0 -295 0 -48 -61z m496 -27 c7 -1 | |
12 -19 12 -47 l0 -45 -215 0 c-118 0 -215 3 -215 6 0 3 14 23 30 44 24 31 39 | |
39 68 42 36 3 295 3 320 0z"/> | |
<path d="M2294 457 c-2 -7 -3 -87 -2 -177 l3 -165 65 0 65 0 3 108 c1 62 7 | |
107 13 107 5 0 52 -27 105 -60 88 -55 100 -60 152 -60 53 0 65 5 152 60 52 33 | |
100 60 107 60 9 0 13 -31 15 -107 l3 -108 60 0 60 0 3 178 2 177 -67 0 c-68 0 | |
-68 0 -188 -78 -66 -43 -128 -81 -137 -84 -11 -5 -59 21 -147 78 -129 84 -129 | |
84 -195 84 -45 0 -68 -4 -72 -13z"/> | |
</g> | |
</svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment