{% extends "templates/_base.html" %}

{% block title %}Map of the U.S.{% endblock %}

{% set date = "March 11, 2014" %}

{% block styles %}
  <style>
  .state {
    fill: lightgrey;
    stroke: white;
    stroke-width: 1px;
    transition: fill .1s linear;
  }

  .state:hover {
    fill: coral;
    transition: fill .1s linear;
  }

  .overlay {
    fill: none;
  }

  .focus text {
    fill: black;
    font-weight: 600;
  }
  </style>
{% endblock %}

{% block content %}
<article>
<p class="date">March 11, 2014</p>
<h1>Map of the U.S</h1>

<svg></svg>

<p>A simple demonstration of
<a href="https://github.com/mbostock/topojson">TopoJSON</a> and interactivity.
Mouseover to show the state's abbreviation and the latitude and longitude of
the point.</p>

<h2>Visualization</h2>

<p>In addition to <a href="http://d3js.org/d3.v3.min.js">D3</a>, this
visualization relies on TopoJSON. The map uses an
<a href="https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-albersUsa">Albers USA</a>
projection, for which Alaska is scaled by 0.35x, giving it a
<a href="http://www.infovis-wiki.net/index.php?title=Lie_Factor">lie factor of
3</a>. On mousemoves, the corresponding state abbreviation in the data is
shown, and the latitude and longitude is computed by
<a href="https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-invert">inverting</a>
the mouse position.</p>

<pre><code class="javascript">
var width = 840,
    height = 500;

var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("us2.json", function(error, us) {
  svg.selectAll(".state")
      .data(topojson.feature(us, us.objects.usStates).features)
    .enter()
      .append("path")
      .attr("class", "state")
      .attr("d", path)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", function(d) {
        var pos = d3.mouse(this),
            latlng = projection.invert(pos);
        focus.select(".abbr").text(d.properties.STATE_ABBR);
        focus.select(".latlng").text("(" + d3.round(latlng[0], 2) + "\u00B0, "
                                         + d3.round(latlng[1], 2) + "\u00B0)");
        focus.attr("transform", "translate(" + pos[0] + "," + pos[1] + ")");
      });

  var focus = svg.append("g")
      .attr("class", "focus")
      .style("display", "none");

  focus.append("text")
      .attr("class", "abbr")
      .attr("x", -10)
      .attr("y", -30)
      .attr("dy", ".35em");

  focus.append("text")
      .attr("class", "latlng")
      .attr("x", -10)
      .attr("y", -13)
      .attr("dy", ".35em");
});
</code></pre>
</article>

<img style="display:none;" src="us-map.png">

<script src="/vendor/highlight/highlight.pack.js" charset="utf-8"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<script>
var width = 840,
    height = 500;

var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("us2.json", function(error, us) {
  svg.selectAll(".state")
      .data(topojson.feature(us, us.objects.usStates).features)
    .enter()
      .append("path")
      .attr("class", "state")
      .attr("d", path)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", function(d) {
        var pos = d3.mouse(this),
            latlng = projection.invert(pos);
        focus.select(".abbr").text(d.properties.STATE_ABBR);
        focus.select(".latlng").text("(" + d3.round(latlng[0], 2) + "\u00B0, "
                                         + d3.round(latlng[1], 2) + "\u00B0)");
        focus.attr("transform", "translate(" + pos[0] + "," + pos[1] + ")");
      });

  var focus = svg.append("g")
      .attr("class", "focus")
      .style("display", "none");

  focus.append("text")
      .attr("class", "abbr")
      .attr("x", -10)
      .attr("y", -30)
      .attr("dy", ".35em");

  focus.append("text")
      .attr("class", "latlng")
      .attr("x", -10)
      .attr("y", -13)
      .attr("dy", ".35em");
});
</script>
{% include "includes/footer.html" %}
{% endblock %}