paula test
By: Billy Ehrenberg
By: Billy Ehrenberg
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"); }) ;
Subscribe to the City A.M. newsletter to have our top stories delivered directly to your inbox.
Subscribe By signing up to our newsletters you agree to the Terms and Conditions and Privacy Policy.Subscribe to get the essential daily news updates from City A.M's top stories to your inbox.
By signing up to our newsletters you agree to the Terms and Conditions and Privacy Policy.