paula test
#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 .tooltip p { margin: 0; padding: 0; } #cam-d3-paula .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"); }) ;