a79c039a460c96a186e9

Open

index.html#


<!DOCTYPE html>
<html class="ocks-org do-not-copy">
<meta charset="utf-8">
<title>The Wealth & Health of Nations</title>
<style>

@import url(../style.css?aea6f0a);

#chart {
  margin-left: -40px;
  height: 506px;
}

text {
  font: 10px sans-serif;
}

.dot {
  stroke: #000;
}

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

.label {
  fill: #777;
}

.year.label {
  font: 500 196px "Helvetica Neue";
  fill: #ddd;
}

.year.label.active {
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

</style>

<header>
  <aside>August 10, 2016</aside>
 
</header>

<h1>The Indemnity & Medical Payment</h1>

<p id="chart"></p>

<aside>Mouseover the year to move forward and backwards through time.</aside>

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script>
<script>

// Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.Avg_med; }
function y(d) { return d.Avg_indm; }
function radius(d) { return d.Claims; }
function color(d) { return d.Region; }
function key(d) { return d.name; }

// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 99.5},
    width = 1060 - margin.right,
    height = 500 - margin.top - margin.bottom;

// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.log().domain([3000, 40000]).range([0, width]),
    yScale = d3.scale.linear().domain([0, 18000]).range([height, 0]),
    radiusScale = d3.scale.sqrt().domain([0, 500]).range([0, 10]),
    colorScale = d3.scale.category10();

// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left");

// Create the SVG container and set the origin.
var svg = d3.select("#chart").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 + ")");

// Add the x-axis.
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the y-axis.
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// Add an x-axis label.
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("Average Medical Payment");

// Add a y-axis label.
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Average Indemnity Amount");

// Add the year label; the value is set on transition.
var label = svg.append("text")
    .attr("class", "year label")
    .attr("text-anchor", "end")
    .attr("y", height - 24)
    .attr("x", width)
    .text(2011);

// Load the data.
d3.json("nations.json", function(nations) {

  // A bisector since many nation's data is sparsely-defined.
  var bisect = d3.bisector(function(d) { return d[0]; });

  // Add a dot per nation. Initialize the data at 1800, and set the colors.
  var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(interpolateData(2011))
    .enter().append("circle")
      .attr("class", "dot")
      .style("fill", function(d) { return colorScale(color(d)); })
      .call(position)
      .sort(order);

  // Add a title.
  dot.append("title")
      .text(function(d) { return d.name; });

  // Add an overlay for the year label.
  var box = label.node().getBBox();

  var overlay = svg.append("rect")
        .attr("class", "overlay")
        .attr("x", box.x)
        .attr("y", box.y)
        .attr("width", box.width)
        .attr("height", box.height)
        .on("mouseover", enableInteraction);

  // Start a transition that interpolates the data based on year.
  svg.transition()
      .duration(5000)
      .ease("linear")
      .tween("year", tweenYear)
      .each("end", enableInteraction);

  // Positions the dots based on data.
  function position(dot) {
    dot .attr("cx", function(d) { return xScale(x(d)); })
        .attr("cy", function(d) { return yScale(y(d)); })
        .attr("r", function(d) { return radiusScale(radius(d)); });
  }

  // Defines a sort order so that the smallest dots are drawn on top.
  function order(a, b) {
    return radius(b) - radius(a);
  }

  // After the transition finishes, you can mouseover to change the year.
  function enableInteraction() {
    var yearScale = d3.scale.linear()
        .domain([2011, 2016])
        .range([box.x + 10, box.x + box.width - 10])
        .clamp(true);

    // Cancel the current transition, if any.
    svg.transition().duration(0);

    overlay
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("mousemove", mousemove)
        .on("touchmove", mousemove);

    function mouseover() {
      label.classed("active", true);
    }

    function mouseout() {
      label.classed("active", false);
    }

    function mousemove() {
      displayYear(yearScale.invert(d3.mouse(this)[0]));
    }
  }

  // Tweens the entire chart by first tweening the year, and then the data.
  // For the interpolated data, the dots and label are redrawn.
  function tweenYear() {
    var year = d3.interpolateNumber(2011, 2016);
    return function(t) { displayYear(year(t)); };
  }

  // Updates the display to show the specified year.
  function displayYear(year) {
    dot.data(interpolateData(year), key).call(position).sort(order);
    label.text(Math.round(year));
  }

  // Interpolates the dataset for the given (fractional) year.
  function interpolateData(year) {
    return nations.map(function(d) {
      return {
        name: d.name,
        Region: d.Region,
        Avg_indm: interpolateValues(d.Avg_indm, year),
        Claims: interpolateValues(d.Claims, year),
        Avg_med: interpolateValues(d.Avg_med , year)
      };
    });
  }

  // Finds (and possibly interpolates) the value for the specified year.
  function interpolateValues(values, year) {
    var i = bisect.left(values, year, 0, values.length - 1),
        a = values[i];
    if (i > 0) {
      var b = values[i - 1],
          t = (year - a[0]) / (b[0] - a[0]);
      return a[1] * (1 - t) + b[1] * t;
    }
    return a[1];
  }
});

</script>

nations.json#

[ { "name": "AK", "Region": "South", "Claims": [ [ "2011", "90" ], [ "2012", "70" ], [ "2013", "69" ], [ "2014", "79" ], [ "2015", "37" ], [ "2016", "64" ] ], "Avg_indm": [ [ "2011", "9361.454111" ], [ "2012", "4063.633286" ], [ "2013", "2891.012754" ], [ "2014", "1140.622279" ], [ "2015", "281.7754054" ], [ "2016", "30283.44859" ] ], "Avg_med": [ [ "2011", "13873.83378" ], [ "2012", "15666.56586" ], [ "2013", "9482.984493" ], [ "2014", "4715.883924" ], [ "2015", "4245.264865" ], [ "2016", "8560.237969" ] ] }, { "name": "AL", "Region": "South", "Claims": [ [ "2011", "473" ], [ "2012", "368" ], [ "2013", "367" ], [ "2014", "416" ], [ "2015", "398" ], [ "2016", "382" ] ], "Avg_indm": [ [ "2011", "2854.5274" ], [ "2012", "5974.483016" ], [ "2013", "4069.167384" ], [ "2014", "3830.336274" ], [ "2015", "6395.076181" ], [ "2016", "7980.138822" ] ], "Avg_med": [ [ "2011", "7190.763784" ], [ "2012", "12784.28541" ], [ "2013", "7244.395368" ], [ "2014", "9106.276899" ], [ "2015", "9833.773819" ], [ "2016", "37161.86236" ] ] }, { "name": "AR", "Region": "South", "Claims": [ [ "2011", "251" ], [ "2012", "214" ], [ "2013", "217" ], [ "2014", "233" ], [ "2015", "232" ], [ "2016", "223" ] ], "Avg_indm": [ [ "2011", "2219.684143" ], [ "2012", "2470.684019" ], [ "2013", "3119.857419" ], [ "2014", "3524.409528" ], [ "2015", "4446.830043" ], [ "2016", "5193.330045" ] ], "Avg_med": [ [ "2011", "3198.605538" ], [ "2012", "4281.625701" ], [ "2013", "6679.639862" ], [ "2014", "6892.218283" ], [ "2015", "6853.305647" ], [ "2016", "12070.69238" ] ] }, { "name": "AZ", "Region": "West", "Claims": [ [ "2011", "766" ], [ "2012", "913" ], [ "2013", "997" ], [ "2014", "922" ], [ "2015", "788" ], [ "2016", "833" ] ], "Avg_indm": [ [ "2011", "4033.709648" ], [ "2012", "1396.332793" ], [ "2013", "1799.99332" ], [ "2014", "2199.139881" ], [ "2015", "1931.663198" ], [ "2016", "1530.200276" ] ], "Avg_med": [ [ "2011", "5657.269856" ], [ "2012", "5523.843932" ], [ "2013", "5487.577302" ], [ "2014", "4023.290846" ], [ "2015", "3872.018706" ], [ "2016", "4819.389736" ] ] }, { "name": "CA", "Region": "West", "Claims": [ [ "2011", "5248" ], [ "2012", "4722" ], [ "2013", "5246" ], [ "2014", "5089" ], [ "2015", "4816" ], [ "2016", "4905" ] ], "Avg_indm": [ [ "2011", "10710.2239" ], [ "2012", "11463.20537" ], [ "2013", "13169.17066" ], [ "2014", "11859.41453" ], [ "2015", "12508.52731" ], [ "2016", "11135.72352" ] ], "Avg_med": [ [ "2011", "14360.34898" ], [ "2012", "15834.65475" ], [ "2013", "17647.75688" ], [ "2014", "18058.00853" ], [ "2015", "16298.30312" ], [ "2016", "15248.29606" ] ] }, { "name": "CO", "Region": "West", "Claims": [ [ "2011", "654" ], [ "2012", "710" ], [ "2013", "870" ], [ "2014", "757" ], [ "2015", "680" ], [ "2016", "655" ] ], "Avg_indm": [ [ "2011", "4859.102508" ], [ "2012", "4544.19338" ], [ "2013", "4479.726575" ], [ "2014", "4151.786063" ], [ "2015", "4810.933485" ], [ "2016", "7016.019588" ] ], "Avg_med": [ [ "2011", "4227.339266" ], [ "2012", "3967.762254" ], [ "2013", "4040.065736" ], [ "2014", "4334.116565" ], [ "2015", "4053.512779" ], [ "2016", "5741.279221" ] ] } ,

{ "name": "CT", "Region": "East", "Claims": [ [ "2011", "1244" ], [ "2012", "1173" ], [ "2013", "1189" ], [ "2014", "1251" ], [ "2015", "1173" ], [ "2016", "1242" ] ], "Avg_indm": [ [ "2011", "9765.228344" ], [ "2012", "7329.116974" ], [ "2013", "7030.150479" ], [ "2014", "9696.080983" ], [ "2015", "10238.75765" ], [ "2016", "9665.819911" ] ], "Avg_med": [ [ "2011", "8371.803625" ], [ "2012", "13012.39003" ], [ "2013", "6502.573877" ], [ "2014", "7330.22757" ], [ "2015", "7965.68896" ], [ "2016", "7751.689847" ] ] }, { "name": "DC", "Region": "East", "Claims": [ [ "2011", "157" ], [ "2012", "118" ], [ "2013", "145" ], [ "2014", "144" ], [ "2015", "152" ], [ "2016", "127" ] ], "Avg_indm": [ [ "2011", "5133.167834" ], [ "2012", "7177.575339" ], [ "2013", "11890.53648" ], [ "2014", "12168.02014" ], [ "2015", "8234.031842" ], [ "2016", "16472.73268" ] ], "Avg_med": [ [ "2011", "6193.821019" ], [ "2012", "4104.893475" ], [ "2013", "6311.959586" ], [ "2014", "8452.479931" ], [ "2015", "3970.700592" ], [ "2016", "7004.504095" ] ] }, { "name": "DE", "Region": "East", "Claims": [ [ "2011", "126" ], [ "2012", "111" ], [ "2013", "136" ], [ "2014", "156" ], [ "2015", "122" ], [ "2016", "137" ] ], "Avg_indm": [ [ "2011", "15994.4427" ], [ "2012", "9790.201261" ], [ "2013", "6830.550147" ], [ "2014", "11585.0484" ], [ "2015", "3465.928771" ], [ "2016", "11724.39329" ] ], "Avg_med": [ [ "2011", "22256.06143" ], [ "2012", "64737.86216" ], [ "2013", "12359.25507" ], [ "2014", "17287.65558" ], [ "2015", "7708.411639" ], [ "2016", "30067.95664" ] ] }, { "name": "FL", "Region": "South", "Claims": [ [ "2011", "1874" ], [ "2012", "1744" ], [ "2013", "1798" ], [ "2014", "1908" ], [ "2015", "1646" ], [ "2016", "1664" ] ], "Avg_indm": [ [ "2011", "9285.115544" ], [ "2012", "5249.55168" ], [ "2013", "5678.162152" ], [ "2014", "3416.068868" ], [ "2015", "3733.529478" ], [ "2016", "4961.222656" ] ], "Avg_med": [ [ "2011", "10390.84242" ], [ "2012", "10802.62347" ], [ "2013", "9978.608715" ], [ "2014", "8251.393564" ], [ "2015", "8525.030182" ], [ "2016", "8988.772236" ] ] }, { "name": "GA", "Region": "South", "Claims": [ [ "2011", "999" ], [ "2012", "836" ], [ "2013", "1049" ], [ "2014", "1001" ], [ "2015", "909" ], [ "2016", "931" ] ], "Avg_indm": [ [ "2011", "12423.03515" ], [ "2012", "16800.96988" ], [ "2013", "15211.13695" ], [ "2014", "13888.31001" ], [ "2015", "14149.17771" ], [ "2016", "12163.01573" ] ], "Avg_med": [ [ "2011", "10296.45788" ], [ "2012", "18210.08432" ], [ "2013", "11167.07892" ], [ "2014", "11247.09543" ], [ "2015", "10844.90944" ], [ "2016", "9881.038421" ] ] },

 { "name": "HI", "Region": "West", "Claims": [ [ "2011", "66" ], [ "2012", "52" ], [ "2013", "47" ], [ "2014", "44" ], [ "2015", "51" ], [ "2016", "48" ] ], "Avg_indm": [ [ "2011", "6863.950758" ], [ "2012", "5808.520118" ], [ "2013", "8638.988085" ], [ "2014", "5014.948182" ], [ "2015", "8728.938628" ], [ "2016", "1821.387292" ] ], 

"Avg_med": [ [ "2011", "4505.911818" ], [ "2012", "3969.3875" ], [ "2013", "5390.857234" ], [ "2014", "6203.323409" ], [ "2015", "9630.952157" ], [ "2016", "1801.862917" ] ] }, 

{ "name": "IA", "Region": "North", "Claims": [ [ "2011", "546" ], [ "2012", "513" ], [ "2013", "574" ], [ "2014", "546" ], [ "2015", "479" ], [ "2016", "495" ] ], "Avg_indm": [ [ "2011", "4771.421795" ], [ "2012", "6070.340546" ], [ "2013", "6896.906585" ], [ "2014", "6519.739158" ], [ "2015", "10376.25276" ], [ "2016", "6505.889253" ] ], "Avg_med": [ [ "2011", "8273.228498" ], [ "2012", "7552.202105" ], [ "2013", "6576.054686" ], [ "2014", "6435.274158" ], [ "2015", "10174.64213" ], [ "2016", "6768.696909" ] ] }, { "name": "ID", "Region": "North", "Claims": [ [ "2011", "147" ], [ "2012", "157" ], [ "2013", "171" ], [ "2014", "172" ], [ "2015", "144" ], [ "2016", "204" ] ], "Avg_indm": [ [ "2011", "2027.462925" ], [ "2012", "1971.974204" ], [ "2013", "1524.90269" ], [ "2014", "2368.786744" ], [ "2015", "3698.426597" ], [ "2016", "1901.454216" ] ], "Avg_med": [ [ "2011", "4176.865102" ], [ "2012", "4225.178408" ], [ "2013", "5014.203275" ], [ "2014", "4780.061279" ], [ "2015", "5862.435764" ], [ "2016", "7213.29098" ] ] }, { "name": "IL", "Region": "North", "Claims": [ [ "2011", "2059" ], [ "2012", "1906" ], [ "2013", "2101" ], [ "2014", "1971" ], [ "2015", "1783" ], [ "2016", "1749" ] ], "Avg_indm": [ [ "2011", "15867.64163" ], [ "2012", "14652.73545" ], [ "2013", "16387.07701" ], [ "2014", "16330.80904" ], [ "2015", "18177.7434" ], [ "2016", "18164.64184" ] ], "Avg_med": [ [ "2011", "13885.41476" ], [ "2012", "12503.64653" ], [ "2013", "14613.04367" ], [ "2014", "14757.37036" ], [ "2015", "14841.7455" ], [ "2016", "14714.83191" ] ] }, { "name": "IN", "Region": "North", "Claims": [ [ "2011", "1169" ], [ "2012", "1020" ], [ "2013", "1126" ], [ "2014", "1156" ], [ "2015", "1081" ], [ "2016", "1082" ] ], "Avg_indm": [ [ "2011", "2015.168914" ], [ "2012", "2209.191324" ], [ "2013", "2278.840151" ], [ "2014", "1733.299896" ], [ "2015", "2185.083913" ], [ "2016", "2005.418087" ] ], "Avg_med": [ [ "2011", "5787.742284" ], [ "2012", "6609.924039" ], [ "2013", "5700.139618" ], [ "2014", "4992.83891" ], [ "2015", "4681.941915" ], [ "2016", "5303.80268" ] ] }, { "name": "KS", "Region": "South", "Claims": [ [ "2011", "552" ], [ "2012", "549" ], [ "2013", "593" ], [ "2014", "579" ], [ "2015", "484" ], [ "2016", "578" ] ], "Avg_indm": [ [ "2011", "3655.739928" ], [ "2012", "2507.793224" ], [ "2013", "3622.389781" ], [ "2014", "2924.189966" ], [ "2015", "2530.594029" ], [ "2016", "3568.564256" ] ], "Avg_med": [ [ "2011", "4965.330851" ], [ "2012", "5118.248033" ], [ "2013", "5121.536324" ], [ "2014", "4660.366149" ], [ "2015", "4606.583244" ], [ "2016", "5877.26936" ] ] }, { "name": "KY", "Region": "South", "Claims": [ [ "2011", "468" ], [ "2012", "446" ], [ "2013", "530" ], [ "2014", "490" ], [ "2015", "429" ], [ "2016", "480" ] ], "Avg_indm": [ [ "2011", "6531.217009" ], [ "2012", "4605.486188" ], [ "2013", "4506.968038" ], [ "2014", "5213.003245" ], [ "2015", "3524.798415" ], [ "2016", "4080.442646" ] ], "Avg_med": [ [ "2011", "6161.997735" ], [ "2012", "4726.912825" ], [ "2013", "6349.392396" ], [ "2014", "5359.292388" ], [ "2015", "4672.327529" ], [ "2016", "4984.858563" ] ] } ,
{ "name": "LA", "Region": "South", "Claims": [ [ "2011", "389" ], [ "2012", "319" ], [ "2013", "331" ], [ "2014", "338" ], [ "2015", "337" ], [ "2016", "302" ] ], "Avg_indm": [ [ "2011", "12380.97635" ], [ "2012", "8227.235768" ], [ "2013", "12690.60021" ], [ "2014", "10248.4024" ], [ "2015", "14002.947" ], [ "2016", "18679.63454" ] ], "Avg_med": [ [ "2011", "20895.81234" ], [ "2012", "13117.77326" ], [ "2013", "17317.26212" ], [ "2014", "12367.25769" ], [ "2015", "13868.36849" ], [ "2016", "18438.87709" ] ] }, { "name": "MA", "Region": "East", "Claims": [ [ "2011", "1505" ], [ "2012", "1527" ], [ "2013", "1567" ], [ "2014", "1536" ], [ "2015", "1484" ], [ "2016", "1527" ] ], "Avg_indm": [ [ "2011", "7512.669442" ], [ "2012", "7652.489535" ], [ "2013", "10647.86509" ], [ "2014", "8568.051491" ], [ "2015", "10551.97776" ], [ "2016", "9162.112325" ] ], "Avg_med": [ [ "2011", "3380.25513" ], [ "2012", "3095.980124" ], [ "2013", "4922.272387" ], [ "2014", "4045.392175" ], [ "2015", "4708.246018" ], [ "2016", "3726.135115" ] ] }, { "name": "MD", "Region": "East", "Claims": [ [ "2011", "632" ], [ "2012", "530" ], [ "2013", "644" ], [ "2014", "604" ], [ "2015", "626" ], [ "2016", "585" ] ], "Avg_indm": [ [ "2011", "13851.21264" ], [ "2012", "13801.98785" ], [ "2013", "8965.480761" ], [ "2014", "5909.144437" ], [ "2015", "6866.350048" ], [ "2016", "10299.68149" ] ], "Avg_med": [ [ "2011", "10911.28704" ], [ "2012", "12683.37881" ], [ "2013", "7483.988276" ], [ "2014", "4603.57058" ], [ "2015", "4732.22647" ], [ "2016", "11548.60694" ] ] }, { "name": "ME", "Region": "East", "Claims": [ [ "2011", "138" ], [ "2012", "128" ], [ "2013", "142" ], [ "2014", "152" ], [ "2015", "144" ], [ "2016", "143" ] ], "Avg_indm": [ [ "2011", "7409.503551" ], [ "2012", "2747.219375" ], [ "2013", "12836.77197" ], [ "2014", "4251.972697" ], [ "2015", "7019.454861" ], [ "2016", "7431.861469" ] ], "Avg_med": [ [ "2011", "7060.640652" ], [ "2012", "3736.369453" ], [ "2013", "4233.554578" ], [ "2014", "5186.119145" ], [ "2015", "6895.698611" ], [ "2016", "6344.248671" ] ] }, { "name": "MI", "Region": "North", "Claims": [ [ "2011", "1357" ], [ "2012", "1201" ], [ "2013", "1293" ], [ "2014", "1281" ], [ "2015", "1163" ], [ "2016", "1200" ] ], "Avg_indm": [ [ "2011", "4225.587922" ], [ "2012", "4342.341665" ], [ "2013", "5138.590139" ], [ "2014", "3888.468735" ], [ "2015", "3374.687885" ], [ "2016", "4895.477817" ] ], "Avg_med": [ [ "2011", "4197.592911" ], [ "2012", "4167.281399" ], [ "2013", "4818.989884" ], [ "2014", "5590.720906" ], [ "2015", "4429.975916" ], [ "2016", "4970.115267" ] ] }, { "name": "MN", "Region": "North", "Claims": [ [ "2011", "1151" ], [ "2012", "1042" ], [ "2013", "1234" ], [ "2014", "1103" ], [ "2015", "965" ], [ "2016", "949" ] ], "Avg_indm": [ [ "2011", "6606.503918" ], [ "2012", "5102.097025" ], [ "2013", "4529.00966" ], [ "2014", "4410.265059" ], [ "2015", "6066.095389" ], [ "2016", "4714.62117" ] ], "Avg_med": [ [ "2011", "6013.123397" ], [ "2012", "4832.817562" ], [ "2013", "5009.97265" ], [ "2014", "5039.024007" ], [ "2015", "5370.337503" ], [ "2016", "4935.118409" ] ] } ,{ "name": "MO", "Region": "North", "Claims": [ [ "2011", "1031" ], [ "2012", "948" ], [ "2013", "1036" ], [ "2014", "1024" ], [ "2015", "950" ], [ "2016", "1009" ] ], "Avg_indm": [ [ "2011", "3398.9455" ], [ "2012", "4070.615306" ], [ "2013", "3937.928012" ], [ "2014", "3422.05419" ], [ "2015", "3912.799958" ], [ "2016", "4572.927116" ] ], "Avg_med": [ [ "2011", "5425.517886" ], [ "2012", "6702.186213" ], [ "2013", "5989.497741" ], [ "2014", "6164.728652" ], [ "2015", "5341.019768" ], [ "2016", "6077.298464" ] ] } ]

LICENSE#

Released under The GNU General Public License, version 3.