Skip to content

Instantly share code, notes, and snippets.

@yanhann10

yanhann10/.block

Last active March 31, 2018 08:19
Show Gist options
  • Save yanhann10/8e4d79cc42fa33af5e22d7e4d848d9f5 to your computer and use it in GitHub Desktop.
Save yanhann10/8e4d79cc42fa33af5e22d7e4d848d9f5 to your computer and use it in GitHub Desktop.
Download ZIP
scatter_plot
Raw
.block
license: mit
Raw
cyclist-data.json
[
{
"Time": "36:50",
"Place": 1,
"Seconds": 2210,
"Name": "Marco Pantani",
"Year": 1995,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1995 due to high hematocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
},
{
"Time": "36:55",
"Place": 2,
"Seconds": 2215,
"Name": "Marco Pantani",
"Year": 1997,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1997 due to high hermatocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
},
{
"Time": "37:15",
"Place": 3,
"Seconds": 2235,
"Name": "Marco Pantani",
"Year": 1994,
"Nationality": "ITA",
"Doping": "Alleged drug use during 1994 due to high hermatocrit levels",
"URL": "https://en.wikipedia.org/wiki/Marco_Pantani#Alleged_drug_use"
},
{
"Time": "37:36",
"Place": 4,
"Seconds": 2256,
"Name": "Lance Armstrong",
"Year": 2004,
"Nationality": "USA",
"Doping": "2004 Tour de France title stripped by UCI in 2012",
"URL": "https://en.wikipedia.org/wiki/History_of_Lance_Armstrong_doping_allegations"
},
{
"Time": "37:42",
"Place": 5,
"Seconds": 2262,
"Name": "Jan Ullrich",
"Year": 1997,
"Nationality": "GER",
"Doping": "Confessed later in his career to doping",
"URL": "https://en.wikipedia.org/wiki/Jan_Ullrich#Operaci.C3.B3n_Puerto_doping_case"
},
{
"Time": "38:05",
"Place": 6,
"Seconds": 2285,
"Name": "Lance Armstrong",
"Year": 2001,
"Nationality": "USA",
"Doping": "2001 Tour de France title stripped by UCI in 2012",
"URL": "https://en.wikipedia.org/wiki/History_of_Lance_Armstrong_doping_allegations"
},
{
"Time": "38:14",
"Place": 7,
"Seconds": 2294,
"Name": "Miguel Indurain",
"Year": 1995,
"Nationality": "ESP",
"Doping": "1994 Failed test for salbutemol, not a banned drug at that time",
"URL": "http://www.independent.co.uk/sport/drugs-in-sport-indurain-allowed-to-use-banned-drug-1379584.html"
},
{
"Time": "38:14",
"Place": 8,
"Seconds": 2294,
"Name": "Alex Zülle",
"Year": 1995,
"Nationality": "SUI",
"Doping": "Confessed in 1998 to taking EPO",
"URL": "https://en.wikipedia.org/wiki/Alex_Z%C3%BClle#Festina_affair"
},
{
"Time": "38:16",
"Place": 9,
"Seconds": 2296,
"Name": "Bjarne Riis",
"Year": 1995,
"Nationality": "DEN",
"Doping": "Alleged drug use during 1995 due to high hermatrocite levels",
"URL": "https://en.wikipedia.org/wiki/Bjarne_Riis#Doping_allegations"
},
{
"Time": "38:22",
"Place": 10,
"Seconds": 2302,
"Name": "Richard Virenque",
"Year": 1997,
"Nationality": "FRA",
"Doping": "In 2000 confessed to doping during his career",
"URL": "https://en.wikipedia.org/wiki/Richard_Virenque#Festina_affair"
},
{
"Time": "38:36",
"Place": 11,
"Seconds": 2316,
"Name": "Floyd Landis",
"Year": 2006,
"Nationality": "USA",
"Doping": "Stripped of 2006 Tour de France title",
"URL": "https://en.wikipedia.org/wiki/Floyd_Landis_doping_case"
},
{
"Time": "38:36",
"Place": 12,
"Seconds": 2316,
"Name": "Andreas Klöden",
"Year": 2006,
"Nationality": "GER",
"Doping": "Alleged use of illegal blood transfusions in 2006",
"URL": "https://en.wikipedia.org/wiki/Andreas_Kl%C3%B6den#2009_Doping_allegations"
},
{
"Time": "38:40",
"Place": 13,
"Seconds": 2320,
"Name": "Jan Ullrich",
"Year": 2004,
"Nationality": "GER",
"Doping": "Confessed later in his career to doping",
"URL": "https://en.wikipedia.org/wiki/Jan_Ullrich#Operaci.C3.B3n_Puerto_doping_case"
},
{
"Time": "38:44",
"Place": 14,
"Seconds": 2324,
"Name": "Laurent Madouas",
"Year": 1995,
"Nationality": "FRA",
"Doping": "Tested positive for Salbutemol in 1994, suspended for 1 month",
"URL": "http://www.dopeology.org/incidents/Madouas-positive/"
},
{
"Time": "38:55",
"Place": 15,
"Seconds": 2335,
"Name": "Richard Virenque",
"Year": 1994,
"Nationality": "FRA",
"Doping": "In 2000 confessed to doping during his career",
"URL": "https://en.wikipedia.org/wiki/Richard_Virenque#Festina_affair"
},
{
"Time": "39:01",
"Place": 16,
"Seconds": 2341,
"Name": "Carlos Sastre",
"Year": 2006,
"Nationality": "ESP",
"Doping": "",
"URL": ""
},
{
"Time": "39:09",
"Place": 17,
"Seconds": 2349,
"Name": "Iban Mayo",
"Year": 2003,
"Nationality": "ESP",
"Doping": "Failed doping test in 2007 Tour de France",
"URL": "https://en.wikipedia.org/wiki/Iban_Mayo"
},
{
"Time": "39:12",
"Place": 18,
"Seconds": 2352,
"Name": "Andreas Klöden",
"Year": 2004,
"Nationality": "GER",
"Doping": "Alleged doping during 2006 Tour de France",
"URL": "https://en.wikipedia.org/wiki/Operaci%C3%B3n_Puerto_doping_case"
},
{
"Time": "39:14",
"Place": 19,
"Seconds": 2354,
"Name": "Jose Azevedo",
"Year": 2004,
"Nationality": "POR",
"Doping": "Implicated in the Operación Puerto doping case",
"URL": "https://en.wikipedia.org/wiki/Operaci%C3%B3n_Puerto_doping_case"
},
{
"Time": "39:15",
"Place": 20,
"Seconds": 2355,
"Name": "Levi Leipheimer",
"Year": 2006,
"Nationality": "USA",
"Doping": "Testified in 2012 to doping during his time with US Postal Service ",
"URL": "http://www.wsj.com/articles/SB10000872396390444799904578048352672452328"
},
{
"Time": "39:22",
"Place": 21,
"Seconds": 2362,
"Name": "Francesco Casagrande",
"Year": 1997,
"Nationality": "ITA",
"Doping": "Positive testosterone test in 1998",
"URL": "http://autobus.cyclingnews.com/results/1998/sep98/sep2.shtml"
},
{
"Time": "39:23",
"Place": 22,
"Seconds": 2363,
"Name": "Nairo Quintana",
"Year": 2015,
"Nationality": "COL",
"Doping": "",
"URL": ""
},
{
"Time": "39:23",
"Place": 23,
"Seconds": 2363,
"Name": "Bjarne Riis",
"Year": 1997,
"Nationality": "DEN",
"Doping": "Alleged drug use during 1995 due to high hermatrocite levels",
"URL": "https://en.wikipedia.org/wiki/Bjarne_Riis#Doping_allegations"
},
{
"Time": "39:30",
"Place": 24,
"Seconds": 2370,
"Name": "Miguel Indurain",
"Year": 1994,
"Nationality": "ESP",
"Doping": "1994 Failed test for salbutemol, not a banned drug at that time",
"URL": "http://www.independent.co.uk/sport/drugs-in-sport-indurain-allowed-to-use-banned-drug-1379584.html"
},
{
"Time": "39:30",
"Place": 25,
"Seconds": 2370,
"Name": "Luc Leblanc",
"Year": 1994,
"Nationality": "FRA",
"Doping": "Admitted to using epo and amphetimines throughout 1994 ",
"URL": "http://www.dopeology.org/people/Luc_Leblanc/"
},
{
"Time": "39:32",
"Place": 26,
"Seconds": 2372,
"Name": "Carlos Sastre",
"Year": 2008,
"Nationality": "ESP",
"Doping": "",
"URL": ""
},
{
"Time": "39:37",
"Place": 27,
"Seconds": 2377,
"Name": "Vladimir Poulnikov",
"Year": 1994,
"Nationality": "UKR",
"Doping": "",
"URL": ""
},
{
"Time": "39:40",
"Place": 28,
"Seconds": 2380,
"Name": "Giuseppe Guerini",
"Year": 2004,
"Nationality": "ITA",
"Doping": "",
"URL": ""
},
{
"Time": "39:41",
"Place": 29,
"Seconds": 2381,
"Name": "Santos Gonzalez",
"Year": 2004,
"Nationality": "ESP",
"Doping": "High Hematocrit during 2005 season, removed by team management",
"URL": "http://www.cyclingnews.com/news/santos-gonzalez-sacked-by-phonak/"
},
{
"Time": "39:41",
"Place": 30,
"Seconds": 2381,
"Name": "Vladimir Karpets",
"Year": 2004,
"Nationality": "RUS",
"Doping": "Made payments to Ferrari, but no charges filed",
"URL": "http://www.dopeology.org/incidents/Ferrari-investigation/"
},
{
"Time": "39:45",
"Place": 31,
"Seconds": 2385,
"Name": "Fernando Escartin",
"Year": 1995,
"Nationality": "ESP",
"Doping": "Implicated in Giardini Margherita Raid in 1998 as a 'victim' ",
"URL": "http://www.dopeology.org/incidents/Giardini-Margherita-raid-%5bBologna%5d/"
},
{
"Time": "39:47",
"Place": 32,
"Seconds": 2387,
"Name": "Denis Menchov",
"Year": 2006,
"Nationality": "RUS",
"Doping": "",
"URL": ""
},
{
"Time": "39:47",
"Place": 33,
"Seconds": 2387,
"Name": "Michael Rasmussen",
"Year": 2006,
"Nationality": "DEN",
"Doping": "Admitted to doping with multiple substances 1998-2010",
"URL": "http://www.dopeology.org/people/Michael_Rasmussen/"
},
{
"Time": "39:47",
"Place": 34,
"Seconds": 2387,
"Name": "Pietro Caucchioli",
"Year": 2006,
"Nationality": "ITA",
"Doping": "Associated with Mantova investigation, charges dropped",
"URL": "http://www.cyclingnews.com/news/italian-judge-set-to-decide-if-32-named-in-mantova-doping-investigation-should-go-on-trial/"
},
{
"Time": "39:50",
"Place": 35,
"Seconds": 2390,
"Name": "Nairo Quintana",
"Year": 2013,
"Nationality": "COL",
"Doping": "",
"URL": ""
}
]
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.5/d3-legend.js"></script>
<h3>Cyclist Doping</h3>
<style>
h3 {
font-size: 22px;
font-family: futura;
font-weight: bold;
text-align: center;
}
.tooltip {
background-color: rgba(0, 0, 0, 0.8);
color: #fafafa;
padding: 5px;
border-radius: 4px;
transition: opacity 0.2s ease;
font-size: 12px;
text-align: left;
font-weight: bold;
}
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<p> <button>View by year </button> </p>
<script>
// Feel free to change or delete any of the code you see in this editor!
d3.json('cyclist-data.json', function(error, data) {
var margin = {top: 20, right: 20, bottom: 30, left: 40},
w = 600 - margin.left - margin.right,
h = 600 - margin.top - margin.bottom,
padding = 20,
space_for_label =60;
space_for_title =2;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left+"," +
margin.top+")");
//scale
var xScale = d3.scaleLinear()
.domain([d3.min(data, d=>d.Seconds ),
d3.max(data, d=>d.Seconds ) + space_for_label])
.rangeRound([margin.left, w + margin.left]);
//want to list from 1 to max
var yScale = d3.scaleLinear()
.domain([
d3.min(data, d=>d.Place) -
space_for_title ,
d3.max(data, d=>d.Place) +1])
.rangeRound([0, h]);
var xAxis = d3.axisBottom()
.scale(xScale)
.ticks(5);
var yAxis = d3.axisLeft()
.scale(yScale)
.ticks(5);
//tooltip
var tip = d3.select('body')
.append('div')
.attr('class', 'tooltip');
//legend
var ordinal = d3.scaleOrdinal()
.domain(["With Doping Allegation", "Without Doping Allegation"])
.range(["red","grey"]);
svg.append("g")
.attr("class", "legendOrdinal")
.attr("transform", "translate(350,30)");
var legendOrdinal = d3.legendColor()
.shape("path", d3.symbol().type(d3.symbolCircle).size(100)())
.shapePadding(10)
.scale(ordinal);
//draw circle
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx',d=>xScale(d.Seconds ))
.attr('cy',d=>yScale(d.Place))
.attr('r',5)
.style("fill", d=>d.Doping===''?"grey":"red" )
.on('mousemove', (d) => {
tip
.style('position', 'absolute')
.style('left', `${d3.event.pageX + 10}px`)
.style('top', `${d3.event.pageY + 20}px`)
.style('display', 'inline-block')
.style('opacity', '0.9')
.html(`
<span>${d.Name}: ${d.Nationality}</span>
<span>Year: ${d.Year}</span>
<br>
<span>${d.Doping}</span>
`);
})
.on('mouseout', () => tip.style('display', 'none'));
//text label
svg.selectAll('text')
.data(data)
.enter()
.append('text')
.attr('x',d=>xScale(d.Seconds ) + 5)
.attr('y',d=>yScale(d.Place) + 5)
.text(d => d.Name)
.style('font-size', '12px')
.style('font-family', 'futura');
//draw axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
svg.append("g")
.attr("class", "xaxis")
.attr("transform", "translate(0,"+ h +")")
.call(xAxis);
//axis label
svg.append('text')
.text('Seconds')
.style('font-size', '18px')
.attr('x', w/2 )
.attr('y', h + margin.top + 10)
.style('font-family', 'futura');
svg.append('text')
.text('places')
.style('font-size', '18px')
.attr('transform', 'rotate(-90)')
.attr('y', - margin.left/2 )
.attr('x', -h/2)
.style('font-family', 'futura');
//add
svg.select(".legendOrdinal")
.call(legendOrdinal)
.style('font-family', 'futura')
.style('font-size', '12px');
//////transition
//switch axis
var currentSelect = 'speed';
d3.select("p")
.on("click", function() {
var xScale = d3.scaleLinear()
.domain([d3.min(data, d=>d.Year ),
d3.max(data, d=>d.Year ) + 10])
.rangeRound([margin.left, w + margin.left]);
//update circle
svg.selectAll('circle')
.data(data)
.transition(1000)
.attr('cx',d=>xScale(d.Year))
.attr('cy',d=>yScale(d.Place))
//update text
svg.selectAll('text')
.data(data)
.transition(1000)
.attr('x',d=>xScale(d.Year) + 5)
.attr('y',d=>yScale(d.Place) + 5)
})
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment