wrobstory · April 22, 2019 17:24
diff --git a/README.md b/README.md
diff --git a/choro_states.py b/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')
diff --git a/data.json b/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}]
diff --git a/index.html b/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>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us-states.json b/us-states.json
diff --git a/US_Unemployment_Oct2012.csv b/US_Unemployment_Oct2012.csv
	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')
	<!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>
	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