London Marathon 2015 interactive: Is this the best place to run a fast time?
The London Marathon is a special event on the 26-mile racing calendar, and not just because of the iconic city the route takes in.
It is also the best place to run a fast time, according to the data, with more of the fastest 2,500 men’s and 2,500 women’s times being run here than any other city.
For women, almost 10 per cent of those times (249) were run in London, while for the men the figure is a still impressive 198 (7.9 per cent).
Second placed for men is Osaka, while for women it is Rotterdam. Of the 19 venues on both lists, 11 appear twice. Notably Osaka (2nd for men) doesn’t appear on the women’s list at all.
So why is London fast? The course avoids the big hills, as seen in places like Boston, and the blistering heat of other venues, or the wind often found in Chicago. It isn’t perfect (we all know English weather), but it seems to have become the goldilocks course for both men and women, where the conditions are most likely to be just right.
If you’re reading this on desktop you can explore the data using the interactive below, which also shows Paula Radcliffe’s times. Hover over any dot to see who ran that time, when, and where. Click on the prompts to highlight times run in London, or Paula's times.
#cam-d3-paula .axis path, #cam-d3-paula .axis line { fill: none; stroke: #069ddc; storke-weight: 6px shape-rendering: crispEdges; }
#cam-d3-paula .dot { stroke: #fff; }
#cam-d3-paula .tooltip { position: absolute; top: 160px; left: 100px; width: 200px; text-align: left; padding: 10px; font: 16px sans-serif; border: 4px solid #069ddc ; border-radius: 8px; pointer-events: none; } #cam-d3-paula div.tooltip p { margin: 0; padding: 0; } #cam-d3-paula div.tooltip h2 { margin: 0; padding: 0 0 0.5em 0; }
var x = d3.time.scale() .range([0, width]);
var y = d3.scale.linear() .range([-900, height]);
var radiusScale = d3.scale.sqrt();
var tooltip = d3.select("#cam-d3-paula") .append("div") // declare the tooltip div .attr("class", "tooltip") // apply the 'tooltip' class .style("opacity", 0);
//var color = d3.scale.category10();//
var xAxis = d3.svg.axis() .scale(x) .orient("bottom") ;
var yAxis = d3.svg.axis() .scale(y) .orient("left");
/*var zoom = d3.behavior.zoom() .x(x) .y(y) .scaleExtent([1, 10]) .on("zoom", zoomed);*/
//function zoomed() { //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); //};
var svg = d3.select("#cam-d3-paula").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 + ")"); //.attr("class", "allDots"); //.call(zoom);
d3.csv("https://www.cityam.com/wp-content/uploads/2015/04/data-553a001f20413.csv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.date) d.age = +d.age d.time = +d.time; });
var colourReset = function() {
d3.selectAll(".dot").style("fill", "gray");}
var sizeReset = function() {
d3.selectAll(".dot").attr("r", 3);}
var colour = function(d) {
switch (d.venue) { case "3": return "rgba(8,81,156,1) "; break; case "2": return "rgba(239,59,44,1)"; break; case "1": return "rgba(149,156,161,1)"; break; }};
var toggleColor = (function(){ var currentColor = "gray";
return function(){ currentColor = currentColor == "gray" ? colour : "gray"; d3.selectAll(".dot").style("fill", currentColor); } })();
var radii = function(d) { return (d.venue)*2.5; };
var toggleSize = (function(){ var currentSize = 3;
return function(){ currentSize = currentSize == 3 ? radii : 3; d3.selectAll(".dot").attr("r", currentSize); } })();
var colour2 = function(d) {
switch (d.colourz) { case "3": return "rgba(8,81,156,1) "; break; case "2": return "rgba(239,59,44,1)"; break; case "1": return "rgba(149,156,161,1)"; break; }};
var toggleColor2 = (function(){ var currentColor2 = "gray";
return function(){ currentColor2 = currentColor2 == colour2 ? colour : colour2; d3.selectAll(".dot").style("fill", currentColor2); } })(); var radii2 = function(d) { return (d.colourz)*2.5; };
var toggleSize2 = (function(){ var currentSize2 = 3;
return function(){ currentSize2 = currentSize2 == radii2 ? radii : radii2; d3.selectAll(".dot").attr("r", currentSize2); } })();
/*.attr("class", function(d,i) { var badge = "f0";
if(typeof cup[d.properties.id-1] === "undefined"){ badge = "f0"; } else { badge = "f" + cup[d.properties.id-1].colour; } return "dot" + d.properties.id + " " + badge; })
.attr("class", function (d) { var colorz = "dot"; if ( d.colourz === 1 ) { colorz = dot; }else{ colorz = "dot" + "1"*/
x.domain(d3.extent(data, function(d) { return d.date; })) y.domain(d3.extent(data, function(d) { return d.time; })).nice();
svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end"); //.text("Date");
svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("seconds over 2hrs")
svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") //.attr("class", function(d) { return (d.clasi);} .attr("r", 3) .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.time); }) .style("fill", "gray" ) .style("opacity", 0.7) .on("mouseover", mouseover) .on("mouseout", mouseout); //.on("click", function() {d3.selectAll(".dot").style("fill", colour);});
/*var legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect") .attr("x", width +45) .attr("width", 18) .attr("height", 18) .style("fill", color);
legend.append("text") .attr("x", width +35 ) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; });*/
function mouseover(d) { //console.log(d); // show tooltip fade in tooltip.transition() .duration(500) .style("opacity", 0) .style("stroke-width", 9); tooltip.transition() .duration(200) .style("opacity", .9) .style("stroke-width", 3); tooltip.html("
" + "Name: " + "" + d.name + "
" + "Time: " + "" + d.Result + "
" +"Date: " + "" + d.Date + "
" +"All-time rank: "+ ""+ d.rank + "
" + "Placing: "+ ""+ d.place + "
" + "Venue: " + "" + d.Venue + "
" + "Age at time: " + "" + d.age + "
" + "Nationality: " + "" + d.Country + "
");
}
function mouseout(p) { tooltip.transition().duration(200).style("opacity", .9); tooltip.transition().duration(500).style("opacity", 0); } svg.append("text") .attr("x", 90) .attr("y", 34) .attr("class", "legend") .style("fill", "#069ddc") .style ("font-family", "open sans") .style ("font-size", "25px") .text("The fastest 2,500 women's marathons of all time");
svg.append("text") .attr("x", 40) .attr("y",72) .attr("class", "legend") .style("fill", "rgba(239,59,44,1)") .style ("font-family", "open sans") .style ("font-size", "14px") .on("click", function(d) { toggleColor(d) toggleSize(d);}) .text("Click here to show London results"); svg.append("text") .attr("x", 40) .attr("y", 100) .attr("class", "legend") .style("fill", "rgba(8,81,156,1) ") .style ("font-family", "open sans") .style ("font-size", "14px") .on("click", function(d) { toggleColor2(d) toggleSize2(d);}) .text("Then click here to show Paula Radcliffe's best performances"); svg.append("text") .attr("x", width - 50) .attr("y", 60) .attr("class", "legend") .style("fill", "Black") .style ("font-family", "open sans") .style ("font-size", "20px") .on("click", function(d) { colourReset(d) sizeReset(d);}) .text("Reset"); }) ;
All data from all-timeathletics.com, updated 19 April 2015.