Skip to content

Instantly share code, notes, and snippets.

@bengadisoufiane

bengadisoufiane/.block

Last active September 16, 2019 19:56
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 bengadisoufiane/6f724bbf9d4d7fab438df35e825ab15a to your computer and use it in GitHub Desktop.
Save bengadisoufiane/6f724bbf9d4d7fab438df35e825ab15a to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
atptennis.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 29 should actually have 4 columns, instead of 3. in line 28.
year,pts,rank,player
2019,9865,1,Djoko
2018,9045,1,Djoko
2017,2585,12,Djoko
2016,11780,2,Djoko
2015,16585,1,Djoko
2014,11368,1,Djoko
2013,12260,2,Djoko
2012,12290,1,Djoko
2011,13630,1,Djoko
2010,6240,3,Djoko
2009,5295,3,Djoko
2008,8310,3,Djoko
2007,2530,3,Djoko
2006,1380,16,Djoko
2019,9225,2,Nadal
2018,7480,2,Nadal
2017,10645,1,Nadal
2016,3300,9,Nadal
2015,5230,5,Nadal
2014,6835,3,Nadal
2013,13030,1,Nadal
2012,6690,4,Nadal
2011,9995,2,Nadal
2010,11500,1,Nadal
2009,9105,2,Nadal
2008,10550,1,Nadal
2007,5735,2,Nadal
2006,4470,Nadal
2019,7130,3,Federer
2018,6420,3,Federer
2017,9605,2,Federer
2016,2130,16,Federer
2015,8340,3,Federer
2014,9775,2,Federer
2013,4205,6,Federer
2012,10265,2,Federer
2011,8170,3,Federer
2010,9145,2,Federer
2009,10550,1,Federer
2008,5305,2,Federer
2007,7180,1,Federer
2006,8370,1,Federer
2019,0,..,Murray
2018,0,..,Murray
2017,2290,17,Murray
2016,12410,1,Murray
2015,8945,2,Murray
2014,4675,4,Murray
2013,5790,3,Murray
2012,8000,3,Murray
2011,7380,4,Murray
2010,5760,4,Murray
2009,7030,4,Murray
2008,3720,4,Murray
2007,1755,11,Murray
2007,1370,17,Murray
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<!-- Color Scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 100, bottom: 30, left: 30},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.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 + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv", function(data) {
// List of groups (here I have one group per column)
var allGroup = ["valueA", "valueB", "valueC"]
// Reformat the data: we need an array of arrays of {x, y} tuples
var dataReady = allGroup.map( function(grpName) { // .map allows to do something for each element of the list
return {
name: grpName,
values: data.map(function(d) {
return {time: d.time, value: +d[grpName]};
})
};
});
// I strongly advise to have a look to dataReady with
// console.log(dataReady)
// A color scale: one color for each group
var myColor = d3.scaleOrdinal()
.domain(allGroup)
.range(d3.schemeSet2);
// Add X axis --> it is a date format
var x = d3.scaleLinear()
.domain([0,10])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain( [0,20])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// Add the lines
var line = d3.line()
.x(function(d) { return x(+d.time) })
.y(function(d) { return y(+d.value) })
svg.selectAll("myLines")
.data(dataReady)
.enter()
.append("path")
.attr("d", function(d){ return line(d.values) } )
.attr("stroke", function(d){ return myColor(d.name) })
.style("stroke-width", 4)
.style("fill", "none")
// Add the points
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment