Skip to content

Instantly share code, notes, and snippets.

@wrobstory

wrobstory/README.md

Last active April 22, 2019 17:24
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save wrobstory/5609830 to your computer and use it in GitHub Desktop.
Save wrobstory/5609830 to your computer and use it in GitHub Desktop.
Download ZIP
Folium Choropleth Default
Raw
README.md

A Leaflet.js map created with Folium and the default D3 threshold scale. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map = folium.Map(location=[48, -102], zoom_start=3)
map.geo_json(geo_path=state_geo, data=state_data,
             columns=['State', 'Unemployment'],
             key_on='feature.id',
             fill_color='YlGn', fill_opacity=0.7, line_opacity=0.2,
             legend_name='Unemployment Rate (%)')
map.create_map(path='us_states.html')
Raw
choro_states.py
import folium
import pandas as pd
state_geo = r'data/us-states.json'
state_unemployment = r'data/US_Unemployment_Oct2012.csv'
state_data = pd.read_csv(state_unemployment)
#Let Folium determine the scale
map = folium.Map(location=[48, -102], zoom_start=3)
map.geo_json(geo_path=state_geo, data=state_data,
columns=['State', 'Unemployment'],
key_on='feature.id',
fill_color='YlGn', fill_opacity=0.7, line_opacity=0.2,
legend_name='Unemployment Rate (%)')
map.create_map(path='us_states.html')
Raw
data.json
[{"WA": 7.8, "DE": 7.1, "WI": 6.8, "WV": 7.5, "HI": 5.4, "FL": 8.2, "WY": 5.1, "NH": 5.7, "NJ": 9.6, "NM": 6.8, "TX": 6.4, "LA": 5.9, "NC": 9.4, "ND": 3.2, "NE": 3.9, "TN": 7.8, "NY": 8.4, "PA": 8.0, "CA": 10.1, "NV": 10.3, "VA": 5.8, "CO": 7.7, "AK": 6.8, "AL": 7.1, "AR": 7.2, "VT": 5.0, "IL": 8.8, "GA": 8.8, "IN": 8.4, "IA": 5.1, "OK": 5.2, "AZ": 8.1, "ID": 6.6, "CT": 8.4, "ME": 7.2, "MD": 6.8, "MA": 6.7, "OH": 6.9, "UT": 5.5, "MO": 6.7, "MN": 5.6, "MI": 9.1, "RI": 10.1, "KS": 5.6, "MT": 5.8, "MS": 9.1, "SC": 8.8, "KY": 8.1, "OR": 8.5, "SD": 4.4}]
Raw
index.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<style>
.legend {
padding: 0px 0px;
font: 10px sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.key path {
display: none;
}
</style>
</head>
<body>
<div id="map" style="width: 960px; height: 500px"></div>
<script>
queue()
.defer(d3.json, 'data.json')
.defer(d3.json, 'us-states.json')
.await(makeMap)
function makeMap(error, data_1,gjson_1) {
function matchKey(datapoint, key_variable){
return(parseFloat(key_variable[0][datapoint]));
};
var color = d3.scale.threshold()
.domain([3.0, 7.0, 8.0, 9.0, 9.0])
.range(['#FFFFCC', '#D9F0A3', '#ADDD8E', '#78C679', '#41AB5D', '#238443']);
var map = L.map('map').setView([48, -102], 3);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data (c) <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
}).addTo(map);
function style_1(feature) {
return {
fillColor: color(matchKey(feature.id, data_1)),
weight: 1,
opacity: 0.2,
color: 'black',
fillOpacity: 0.7
};
}
gJson_layer_1 = L.geoJson(gjson_1, {style: style_1}).addTo(map)
var legend = L.control({position: 'topright'});
legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return div};
legend.addTo(map);
var x = d3.scale.linear()
.domain([0, 9])
.range([0, 400]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("top")
.tickSize(1)
.tickValues(color.domain())
var svg = d3.select(".legend.leaflet-control").append("svg")
.attr("id", 'legend')
.attr("width", 450)
.attr("height", 40);
var g = svg.append("g")
.attr("class", "key")
.attr("transform", "translate(25,16)");
g.selectAll("rect")
.data(color.range().map(function(d, i) {
return {
x0: i ? x(color.domain()[i - 1]) : x.range()[0],
x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
z: d
};
}))
.enter().append("rect")
.attr("height", 10)
.attr("x", function(d) { return d.x0; })
.attr("width", function(d) { return d.x1 - d.x0; })
.style("fill", function(d) { return d.z; });
g.call(xAxis).append("text")
.attr("class", "caption")
.attr("y", 21)
.text('Unemployment Rate (%)');
};
</script>
</body>
Display the source blob
Display the rendered blob
Raw
us-states.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
US_Unemployment_Oct2012.csv
State Unemployment
AL 7.1
AK 6.8
AZ 8.1
AR 7.2
CA 10.1
CO 7.7
CT 8.4
DE 7.1
FL 8.2
GA 8.8
HI 5.4
ID 6.6
IL 8.8
IN 8.4
IA 5.1
KS 5.6
KY 8.1
LA 5.9
ME 7.2
MD 6.8
MA 6.7
MI 9.1
MN 5.6
MS 9.1
MO 6.7
MT 5.8
NE 3.9
NV 10.3
NH 5.7
NJ 9.6
NM 6.8
NY 8.4
NC 9.4
ND 3.2
OH 6.9
OK 5.2
OR 8.5
PA 8
RI 10.1
SC 8.8
SD 4.4
TN 7.8
TX 6.4
UT 5.5
VT 5
VA 5.8
WA 7.8
WV 7.5
WI 6.8
WY 5.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment