markdown freeCodeCamp：使用Scatterplot Graph可视化数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown freeCodeCamp：使用Scatterplot Graph可视化数据相关的知识，希望对你有一定的参考价值。
body {
text-align: center;
font-family: Arial;
font-size: 11px;
color: #111;
background-image: url("https://1.bp.blogspot.com/_W6PdCSPYbOM/TBAOi-mfW2I/AAAAAAAABNI/sXOOLguJI80/s1600/Alpe+d+Huez+2007+2.jpg");
background-size: cover;
background-repeat: no-repeat;
}
h1 {
font-size: 3.2em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.title, #footer {
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.subtitle {
font-size: 2em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.asterix {
font-size: 1.4em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.legend {
font-size: 1em;
}
circle {
stroke: rgb(204, 204, 204);
stroke-width: 1px;
cursor: pointer;
}
circle:hover {
stroke: black;
}
.tooltip {
margin: 0 auto;
position: absolute;
width: 200px;
pointer-events: pointer;
width: 150px;
line-height: 1.2;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
font-size: 1.2em;
}
#container {
margin: 30px auto;
padding: 0px;
width: 800px;
height: 600px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.32)
}
svg {
background-color: #fff;
opacity: .8;
}
.axis text {
font: 15px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.legend rect {
fill:white;
stroke:black;
opacity:0.8;}
#footer{
text-align: left;
position: relative;
bottom: 0;
font-size: 1.2em;
background: ;
display: block;
color:#bbb;
text-shadow: 2px 2px 4px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
// https://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":"https://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":"https://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
//https://bl.ocks.org/mbostock/3048166
//https://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 = "<span class = 'name'>" + d.Name + "</span><br/>" + d.Year + "<br/>" + d.Nationality;
if (d.doping !== "") {
tooltipHTML += "<br/>" + d.Doping;
} else {
tooltipHTML += "<br/>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 = "<span class = 'name'>" + d.Name+": "+ d.Nationality+"</span>" ;
tooltipHTML += "<br/>Year: " + d.Year + ", Time: " + friendlySeconds(d.Seconds) +"<br/>";
if (d.doping !== "") {
tooltipHTML += "<br/>" + d.Doping;
} else {
tooltipHTML += "<br/>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 = "<span class = 'name'>" + d.Name + ": " + d.Nationality + "</span>";
tooltipHTML += "<br/>Year: " + d.Year + ", Time: " + friendlySeconds(d.Seconds) + "<br/>";
if (d.doping !== "") {
tooltipHTML += "<br/>" + d.Doping;
} else {
tooltipHTML += "<br/>No Doping Allegation";
}
return tooltipHTML;
}
<h1>Free Code Camp Zipline</h1>
<h2>D3 Scatterplot Visualization</h2>
<div id="container"></div>
<div id="tooltip"></div>
<div id="footer">Sources: <br/>
https://en.wikipedia.org/wiki/Alpe_d%27Huez<br/>
http://www.fillarifoorumi.fi/forum/showthread.php?38129-Ammattilaispy%F6r%E4ilij%F6iden-nousutietoja-%28aika-km-h-VAM-W-W-kg-etc-%29&p=2041608#post2041608<br/>
https://alex-cycle.blogspot.com/2015/07/alpe-dhuez-tdf-fastest-ascent-times.html<br/>
http://www.dopeology.org/
</div>freeCodeCamp : Visualize Data with a Scatterplot Graph
------------------------------------------------------
Forked from [Suzanne Atkinson](http://codepen.io/AdventureBear/)'s Pen [Fastest Times up Alpe d'Huez - How many are marred by doping?](http://codepen.io/AdventureBear/pen/jWrbqB/).
Forked from [Free Code Camp](http://codepen.io/FreeCodeCamp/)'s Pen [Fastest Times up Alpe d'Huez - How many are marred by doping?](http://codepen.io/FreeCodeCamp/pen/GoNNEy/).
Forked from [Jonathan Graham](http://codepen.io/theflametrooper/)'s Pen [Fastest Times up Alpe d'Huez - How many are marred by doping?](http://codepen.io/theflametrooper/pen/EKmvKO/).
A [Pen](https://codepen.io/harunpehlivan/pen/PQMmjL) by [HARUN PEHLİVAN](https://codepen.io/harunpehlivan) on [CodePen](https://codepen.io).
[License](https://codepen.io/harunpehlivan/pen/PQMmjL/license).以上是关于markdown freeCodeCamp：使用Scatterplot Graph可视化数据的主要内容，如果未能解决你的问题，请参考以下文章
markdown freeCodeCamp：构建维基百科查看器
markdown freeCodeCamp：构建维基百科查看器