xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script> <title>Ghg emissions' evolution by country, 2012</title><style type="text/css"> body { margin: 0; background-color: steelBlue; font-family: Verdana, Arial, sans-serif; } h1 { color: grey; font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 20px 0; } a { color: steelBlue; text-decoration: none; } a:hover { color: grey; text-decoration: underline; } .title { display: block; max-width: 300px; color: blue; } svg { background-color: white; } #container { width: 800px; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 50px; background-color: white; box-shadow: 1px 1px 2px 3px #fff; } circle:hover { fill: orange; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } /* Scott added this */ circle { cursor: pointer; } #tooltip { pointer-events: none; } </style> </head> <body> <div id="container"> <h1>Greenhouse gas (GHG) emissions' evolution by country</h1> <p>GHG emissions' evolution between 1990 and 2012 (%) and their level per capita and by country (Kilograms per capita, thousands, 2012). Source: <a href="https://stats.oecd.org/viewhtml.aspx?datasetcode=AIR_GHG&lang=en#">OECD</a>.</p> </div> <script type="text/javascript"> var w = 700; var h = 600; var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(8); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickFormat(function(d) { return d + "%"; }); var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h); d3.csv("evolution.csv", function(data) { xScale.domain([ d3.min(data, function(d) { return +d.annee2012; }), d3.max(data, function(d) { return +d.annee2012; }) ]); yScale.domain([ d3.max(data, function(d) { return +d.evolution; }), d3.min(data, function(d) { return +d.evolution; }) ]); var circles = svg.selectAll("circle") .data(data) .enter() .append("circle"); circles.attr("cx", function(d) { return xScale(d.annee2012); }) .attr("cy", function(d) { return yScale(d.evolution); }) .attr("r", 0.2) .attr("fill", "steelblue") .on("mouseover", function(d) { //Scott edited this section //Get this bar's x/y values, then augment for the tooltip var xPosition = parseFloat(d3.select(this).attr("cx")); var yPosition = parseFloat(d3.select(this).attr("cy")); //Position the tooltip, set it's text contents, then make it visible tooltip.attr("x", xPosition) .attr("y", yPosition) .text(d.Country + "'s GHG emissions evolved by " + d.evolution + "% between 1990 and 2012. In 2012, GHG emissions' amount for " + d.Country + " were at a level of " + d.annee2012 + " thousands kg per capita.") .attr("opacity", 1); }) .on("mouseout", function(d) { tooltip.attr("opacity", 0); }); circles.sort(function(a, b) { return d3.ascending(+a.annee2012, +b.annee2012); }) .transition() .delay(function(d, i) { return i * 50; }) .duration(2000) .attr("r", 4); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2] + 10) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3] - 10) + ",0)") .call(yAxis); //Scott added this section var tooltip = svg.append("text") .attr("id", "tooltip") .attr("x", 0) .attr("y", 0) .attr("text-anchor", "start") .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("font-weight", "bold") .attr("opacity", 0) .text(""); }); </script> </body></html> https://d3js.org/d3.v3.min.js