D3 Examples - European Life Expectancy

xxxxxxxxxx
 
<!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>
​
    