European Life Expectancy

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B1EG_orcd43bcWdLUkVDMHNxbWM/css/continental.css">
    <style>
      body {
        background-color: #f0f0f0;
      }

#map {
        position: relative;
        font-size: 200px;
        margin-left: 650px;
      }

.moused {
        opacity: 1 !important;
      }

#map > [class*="map-"] {
        position: absolute;
        border: white;
        top: 0;
        left: 0;
        color: silver;
      }

body {
        fill: #444;
      }

.axis path,
      .axis line {
        fill: none;
        stroke: grey;
        shape-rendering: crispEdges;
      }

.hover {
        background-color: #eee;
      }

#tooltip {
        position: absolute;
        width: auto;
        height: auto;
        padding: 10px;
        background-color: white;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
        pointer-events: none;
      }

#tooltip.hidden {
        display: none;
      }

#tooltip p {
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="chart"></div>
    <div id="tooltip" class="hidden">
      <p><span id="value"></span></p>
    </div>
  </body>
  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="scatterplot.js" charset="utf-8"></script>
  <script>
    /*
     * European country data collected from Wikipedia sources.
     * abbr - country abbrevation
     * name - country name
     * leb - life expectancy at birth
     * pop - population
     * size - area km^2
     */

d3.json("countries.json", function (error, countries) {
      if (error) throw error;

countries = countries.filter(function (country) {
        return country.abbr !== "va"; // Exclude Vatican City - does not have a leb
      });

countries.forEach(function (country) {
        country.den = country.pop / country.size; // Add population density measure
      });

// Color scale for life expectancy at birth
      var colorAccessor = function (d) { return d.leb; };
      var radiusAccessor = function (d) { return Math.log(d.size); };
      var colorScale = d3.scale.log()
        .domain(d3.extent(countries, colorAccessor))
        .range(["red", "blue"]);

// Create scatterplot function
      var chart = scatterPlot()
        .width(720)
        .x(function (d) { return d.leb; })
        .y(function (d) { return d.pop; })
        .circleClass(function (d) { return d.abbr; })
        .radius(radiusAccessor)
        .color(colorScale)
        .fill(colorAccessor)
        .opacity(0.5)
        .axisX({ title: "Median Life Expectancy at Birth" })
        .axisY({ title: "Population Size" })
        .on("mouseover", function (d, i) {
          // Increase size of circle
          d3.select(this).classed("moused", true).transition().attr("r", 20);

d3.select("tr." + d.abbr).classed("hover", true);

// Grey out all countries except one selected
          d3.selectAll("span[class^='map-']")
            .filter(function (e) { return e.abbr !== d.abbr; })
            .style("color", "grey");

// Tooltip
          var xPosition = parseFloat(d3.select(this).attr("cx"));
          var yPosition;

if (d3.select(this).attr("cy") < 140) {
            yPosition = parseFloat(d3.select(this).attr("cy")) + 50;
          } else {
            yPosition = parseFloat(d3.select(this).attr("cy")) - 100;
          }

d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")
            .select("#value")
            .html(
              "Country: " + d.name +
              "<br>Population: " + numberWithCommas(d.pop) +
              "<br>Median Life Expectancy: " + d.leb +
              "<br>Country Area: " + numberWithCommas(d.size)
            );

d3.select("#tooltip").classed("hidden", false);
        })
        .on("mouseout", function (d, i) {
          // Return circles to original size
          d3.select(this).classed("moused", false)
            .transition().attr("r", radiusAccessor);

d3.select("tr." + d.abbr).classed("hover", false);

// Re-color countries
          d3.selectAll("span[class^='map-']")
            .style("color", function (d) { return colorScale(d.leb); });
          
          // Hide tooltip
          d3.select("#tooltip").classed("hidden", true);
        });

// Create map
        var map = d3.select("#map");
        var span = map.selectAll("span")
          .data(countries)
          .enter().append("span")
          .attr("class", function (d) {
            return "map-" + d.abbr;
          })
          .style("color", function (d) {
            return colorScale(d.leb);
          });

d3.select("#chart")
          .datum(countries)
          .call(chart);

function numberWithCommas(x) {
          return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    });
  </script>
</html>

https://d3js.org/d3.v3.min.js