sovello/README.md

## README.md

      
    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')

  
## 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')

## 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}]

## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## us-states.json

      
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.
      
          Viewer requires iframe.
      
    
## 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
	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