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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment