JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
// http://matthewgladney.com/blog/data-science/no-nonsense-guide-getting-started-scatter-plots-d3-js-d3-csv/
var alps = [{
"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": ""
}]
//format seconds for human readable axis
//http://bl.ocks.org/mbostock/3048166
//http://stackoverflow.com/questions/24541296/d3-js-time-scale-nicely-spaced-ticks-at-minute-intervals-when-data-is-in-second
// Formatters for counts and times (converting numbers to Dates).
var formatCount = d3.format(",.0f"),
formatTime = d3.time.format("%H:%M"),
formatMinutes = function(d) {
var t = new Date(2012, 0, 1, 0, d)
t.setSeconds(t.getSeconds() + d);
return formatTime(t);
};
var tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {
var tooltipHTML = "" + d.Name + "
" + d.Year + "
" + d.Nationality;
if (d.doping !== "") {
tooltipHTML += "
" + d.Doping;
} else {
tooltipHTML += "
No doping allegations";
}
return tooltipHTML;
});
var fastestTime = 2210;
//Prep the data for D3
alps.forEach(function(finish) {
//turn finishing time into seconds behind winner
finish.behind = finish.Seconds - fastestTime;
//add data legend
if (finish.Doping != "") {
finish.legend = "Doping Allegations";
} else {
finish.legend = "No Doping Allegation";
}
console.log(finish.legend);
})
//d3 Stuff Here
var margin = {
top: 80,
right: 140,
bottom: 60,
left: 60
},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var yScale = d3.scale.linear()
.domain([1, 36])
.range([0, height]);
var xScale = d3.scale.linear()
.domain([60 * 3.5, 0])
//.domain([d3.max(alps, function(d) {
// return d.behind+50;
// }),0])
.range([0, width]);
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(8)
.orient("left");
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(6)
.orient("bottom")
.tickFormat(formatMinutes);
//Create SVG element
var svg = d3.select("#container").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 + ")");
var ascents = svg.selectAll("circle")
.data(alps)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.behind);
})
.attr("cy", function(d) {
return yScale(d.Place);
})
.attr("r", 5)
.attr("fill", function(d) {
if (d.Doping == "") {
return "#333";
}
return "#f44";
})
.attr("data-legend", function(d) {
return d.legend;
})
.on("mouseover", function(d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(createToolTip(d)
/*
function() {
var tooltipHTML = "" + d.Name+": "+ d.Nationality+"" ;
tooltipHTML += "
Year: " + d.Year + ", Time: " + friendlySeconds(d.Seconds) +"
";
if (d.doping !== "") {
tooltipHTML += "
" + d.Doping;
} else {
tooltipHTML += "
No Doping Allegation";
}
return tooltipHTML;
}
*/
)
.style("left", (width / 2) + "px")
.style("top", (280) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//text labels
svg.selectAll("text")
.data(alps)
.enter()
.append("text")
.text(function(d) {
return d.Name;
})
.attr("x", function(d) {
return xScale(d.behind);
})
.attr("y", function(d) {
return yScale(d.Place);
})
.attr("transform", "translate(15,+4)");
//create xAxis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 300)
.attr("y", 35)
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text("Minutes Behind Fastest Time");;
//.attr("transform", "translate(40,500)");
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0, 0)")
.call(yAxis)
.append("text")
.attr("x", 0)
.attr("y", -35)
.attr("dy", ".35em")
.style("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text("Ranking");
//Add title & subtitle to SvG element
//Could also be done in HTML
svg.append("text")
.attr("x", (width / 2))
.attr("y", -margin.top / 2)
.attr("text-anchor", "middle")
.attr("class", "title")
.text("Doping in Professional Bicycle Racing");
svg.append("text")
.attr("x", (width / 2))
.attr("y", -margin.top / 2 + 35)
.attr("text-anchor", "middle")
.attr("class", "subtitle")
.text("35 Fastest times up Alpe d'Huez");
svg.append("text")
.attr("x", (width / 2))
.attr("y", -margin.top / 2 + 55)
.attr("text-anchor", "middle")
.attr("class", "asterix")
.text("Normalized to 13.8km distance");
//legend
//circles with fill
//gray circle
svg.append("circle")
.attr("cx", function(d) {
return xScale(10);
})
.attr("cy", function(d) {
return yScale(20);
})
.attr("r", 5)
.attr("fill", "#333");
svg.append("text")
.attr("x", function(d) {
return xScale(7);
})
.attr("y", function(d) {
return yScale(20) + 4;
})
.attr("text-anchor", "left")
.attr("class", "legend")
.text("No doping allegations");
//red circle
svg.append("circle")
.attr("cx", function(d) {
return xScale(10);
})
.attr("cy", function(d) {
return yScale(23);
})
.attr("r", 5)
.attr("fill", "#f44");
svg.append("text")
.attr("x", function(d) {
return xScale(7);
})
.attr("y", function(d) {
return yScale(23) + 4;
})
.attr("text-anchor", "left")
.attr("class", "legend")
.text("Riders with doping allegations");
function friendlySeconds(seconds) {
return parseInt(seconds / 60) + ":" + seconds % 60;
}
function createToolTip(d) {
var tooltipHTML = "" + d.Name + ": " + d.Nationality + "";
tooltipHTML += "
Year: " + d.Year + ", Time: " + friendlySeconds(d.Seconds) + "
";
if (d.doping !== "") {
tooltipHTML += "
" + d.Doping;
} else {
tooltipHTML += "
No Doping Allegation";
}
return tooltipHTML;
}
扫一扫
1032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
