Skip to content

Instantly share code, notes, and snippets.

@ilanman
Last active January 16, 2020 10:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ilanman/11125725 to your computer and use it in GitHub Desktop.
Save ilanman/11125725 to your computer and use it in GitHub Desktop.
Choropleth of Medicare payments

This is a choropleth of Medicare payments by state, using the data recently released by the Center for Medicare and Medicaid Services. I used a kmeans algorithm to determine that 3 clusters explains roughly 90% of the variation in the data.

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
path:hover {
opacity: 0.3;
transition-duration: 0.2s;
}
div.tooltip {
position: absolute;
min-width: 60px;
height: auto;
padding: 10px;
background-color: silver;
border-radius: 10px;
pointer-events: none;
}
</style>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 600;
var h = 400;
var color = d3.scale.quantize()
.range(["rgb(0,191,255)", "rgb(30,144,255)",
"rgb(135, 206, 235)"]);
var projection = d3.geo.albersUsa()
.translate([w/2, h/2])
.scale([700]);
//Define default path generator
var path = d3.geo.path()
.projection(projection);
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.json("us-states.json", function(json) {
d3.csv("state_med.csv", function(data) {
color.domain([
d3.min(data, function(d) { return d.value; }),
d3.max(data, function(d) { return d.value; })
]);
//Merge the ag. data and GeoJSON
//Loop through once for each ag. data value
for (var i = 0; i < data.length; i++) {
//Grab state name
var dataState = data[i].state;
//Grab data value, and convert from string to float
var dataValue = parseFloat(data[i].value);
var dataStd = parseFloat(data[i].std);
var dataclus1 = parseFloat(data[i].c1);
var dataclus2 = parseFloat(data[i].c2);
//Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
json.features[j].properties.value = dataValue;
json.features[j].properties.std = dataStd;
json.features[j].properties.c1 = dataclus1;
json.features[j].properties.c2 = dataclus2;
break;
}
}
}
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value) {
//If value exists…
return color(value);
} else {
//If value is undefined…
return "#ccc";
}
})
.on("mouseover",function(d){
div.transition()
.style("opacity", 0.9);
div.html(function() {
return "State: <strong>" + d.properties.name + "</strong><br> Avg Payment: <strong>" + d.properties.value + "</strong><br> Std Dev: <strong>" + d.properties.std;
})
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 20) + "px");
})
.on("mouseout",function(d) {
div.transition()
.style("opacity", 0);
});
});
});
</script>
</body>
</html>
state value std clus1 clus2
Alaska 97.3 17.9 1 6
Alabama 66.3 12.9 3 2
Arkansas 63.7 11.8 3 7
Arizona 84.4 14.0 1 6
California 87.0 13.2 1 6
Colorado 78.6 13.2 2 1
Connecticut 72.3 10.9 2 1
Delaware 82.1 13.4 1 6
Florida 91.2 14.3 1 6
Georgia 72.1 12.5 2 3
Hawaii 64.1 14.0 3 8
Iowa 60.8 9.9 3 7
Idaho 69.3 13.3 2 1
Illinois 77.6 12.4 2 3
Indiana 70.7 14.1 2 3
Kansas 70.4 12.0 2 3
Kentucky 63.2 11.0 3 7
Louisiana 67.8 12.2 2 2
Massachusetts 72.6 11.2 2 3
Maryland 91.5 14.6 1 6
Maine 60.8 10.3 3 7
Michigan 73.2 11.7 2 1
Minnesota 60.8 11.2 3 4
Missouri 75.3 12.5 2 1
Mississippi 67.6 11.8 2 7
Montana 71.9 13.0 2 3
North Carolina 69.4 12.0 2 2
North Dakota 59.3 9.5 3 4
Nebraska 64.1 10.7 3 5
New Hampshire 68.0 11.4 2 3
New Jersey 84.5 12.5 1 6
New Mexico 70.6 11.8 2 3
Nevada 89.3 16.4 1 6
New York 79.1 11.6 2 1
Ohio 69.5 11.6 2 3
Oklahoma 70.0 13.1 2 2
Oregon 67.7 12.2 2 2
Pennsylvania 73.9 11.8 2 1
Rhode Island 76.6 12.8 2 1
South Carolina 67.2 11.7 3 2
South Dakota 66.7 11.9 3 7
Tennessee 63.8 11.5 3 7
Texas 76.6 13.3 2 1
Utah 74.0 14.5 2 3
Virginia 71.7 12.6 2 3
Vermont 55.0 9.7 3 4
Washington 75.3 13.3 2 1
Wisconsin 60.0 10.8 3 4
West Virginia 61.0 11.0 3 5
Wyoming 61.3 11.5 3 2
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment