jborden/JohnsonVotes.csv

## cityChicago.csv

          
            city
            longitude
            latitude
            population

            
              Bloomington-88.9936900
              -88.99369
              40.4842
              76610

            
              Chicago
              -87.65005
              41.85003
              2695598

            
              Springfield
              -89.64371
              39.80172
              116250

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Illinois by county</title>
		<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

			body {
				margin: 0;
				background-color: lightGray;
				font-family: Helvetica, Arial, sans-serif;
			}

			svg {
				background-color: white;
			}

			h1 {
				font-size: 20px;
				margin: 0;
			}

			p {
				font-size: 12px;
				margin: 5px 0 5px 0;
			}

			#container {
				width: 550px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				background-color: white;
			}

			div.tooltip {
				visibility:hidden;
				position:absolute;
				background: #ffffff;
				width: 155px;
				height: 10px;
				padding-bottom: .5em;
				padding-top: .25em;
				padding-left: .5em;
				font-size: 12px;
				font-family: Helvetica, Arial, sans-serif;
				text-align: left;

				border: 1px solid;
				pointer-events: none;

			}


		</style>
	</head>
	<body>

		<div id="container">

		  <h1>Libertarian Party Support by County in Illinois</h1>

		  <p>Libertarian Party support is defined by the percentage of voters for Gary Johnson.</p>
		  <p>Source: <a href="http://www.elections.il.gov/ElectionInformation/DownloadVoteTotals.aspx">Illinois Election Information</a></p>


		</div>

		<div class="tooltip"></div>

		<script type="text/javascript">

			//crop revenue to map
			var percent = "percent"

			//Width and height
			var w = 500;
			var h = 800;
			var padding = [ 20, 10, 30, 35 ];  //Top, right, bottom, left

			//Define map projection
			var projection = d3.geo.albers()
								   	.center([ 6.5, 40 ])
								  	.translate([ w/2, h/2 ])
			.scale([ w * 15 ]);


			//Define path generator
			var path = d3.geo.path()
							 .projection(projection);

			//define quantize scale to sort data values into areas of color
			var color = d3.scale.quantize()
			    .range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"]);

			//Create SVG
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			//Load in revenue data
			d3.csv("JohnsonVotes.csv", function(data) {
					//set input domain for color scale
					color.domain ([
						d3.min(data, function(d) {return +d[percent]; }),
						d3.max(data, function(d) {return +d[percent]; })
						]);

			var nameToPercent = {}
			data.forEach(function(d){
				nameToPercent[d.county.toUpperCase()] = +d.percent
			})

			//Load in GeoJSON data
			d3.json("mapshaper_illinois.json", function(json) {

				json.features.forEach(function(d){
					var name = d.properties.COUNTY_NAM
					var dataValue = nameToPercent[name]
					d.properties.percent = dataValue
				})

				//Merge the revenue data and GEOjson into a single array
				//Loop through once for each revenue data value
				// for (var i = 0; i < data.length; i++) {
				// 	debugger

				// 	//grab county name
				// 	var dataCounty = data[i].COUNTY_NAM;

				// 	//grab data value, and convert from string to float
				// 	var dataValue = +data[i][percent];

				// 	//find the corresponding county inside GeoJSON
				// 	for (var j = 0; j < json.features.length; j++) {

				// 		//link to the FIPS code
				// 		var jsonCounty = json.features[j].properties.CO_FIPS;

				// 		if (dataCounty == jsonCounty) {

				// 			//copy the data value into the GeoJSON
				// 			json.features[j].properties.percent = dataValue;

				// 			//Stop looking through the JSON
				// 			break;
				// 		}
				// 	}
				// }

				//console.log(json);

				//Bind data and create one path per GeoJSON feature
				svg.selectAll("path")
				   .data(json.features)
				   .enter()
				   .append("path")
				   .attr("d", path)
				   .attr("stroke", "black")
				   .attr("stroke-width", .75 )
				   .style("fill", function(d) {

				   		//get data value
				   		var value = d.properties.percent

				   		if (value) {
				   			//if value exists...
				   			return color(value);
				   		}

				   	});


				var tooltip = d3.select("div.tooltip");

				//Create tooltips
				svg.selectAll("path")
	   			.data(json.features)
	   			.on("mouseover", function() {
	   				return tooltip.style("visibility", "visible");
	   			})
	   			.on("mousemove", function(d) {

	   				//debugger

	   				tooltip.html('')

	   				tooltip
	   					.style("top", (d3.event.pageY + 16) + "px")
	   					.style("left", (d3.event.pageX + 16) + "px")

	   				tooltip
	   					.append('div')
	   					.text(d.properties.COUNTY_NAM + ": " + d.properties.percent + "%")
	   					// .html('<div class="countyName">'+d.properties.COUNTY_NAM+'</div>' + ": " + d.properties.percent + " percent");

	   			})
	   			.on("mouseout", function() {
	   				return tooltip.style("visibility", "hidden");
	   			})


				   //Load in cities data
					// d3.csv("cityChicago.csv", function(data) {

					// 	//Create a circle for each city
					// 	svg.selectAll("circle")
					// 	   .data(data)
					// 	   .enter()
					// 	   .append("circle")
					// 	   .attr("cx", function(d) {
					// 		   return projection([d.longitude, d.latitude])[0];
					// 	   })
					// 	   .attr("cy", function(d) {
					// 		   return projection([d.longitude, d.latitude])[1];
					// 	   })
					// 	   .attr("r", function(d) {
					// 	   	   //Use Math.sqrt to scale by area (not radius)
					// 		  return Math.sqrt(+d.population / w * .075);
					// 	   })
					// 		//.attr("r", 10)
					// 		.style("fill", "none")
					// 		.attr("stroke", "black")
					// 		.attr("stroke-width", 1);

					// });
			    //end cities data

				}); //end d3.json()

			}); //end d3.csv

		</script>
	</body>
</html>

## JohnsonVotes.csv

          
            county
            percent

            
              ALEXANDER
              1.7

            
              PULASKI
              2.0

            
              HARDIN
              2.2

            
              WAYNE
              2.3

            
              UNION
              2.6

            
              SCOTT
              2.6

            
              GALLATIN
              2.7

            
              COOK
              2.7

            
              EDWARDS
              2.7

            
              HAMILTON
              2.7

            
              WHITE
              2.8

            
              CALHOUN
              2.8

            
              POPE
              2.9

            
              FRANKLIN
              2.9

            
              MASSAC
              2.9

            
              GREENE
              3.0

            
              FAYETTE
              3.0

            
              JOHNSON
              3.0

            
              RICHLAND
              3.1

            
              WILLIAMSON
              3.2

            
              SALINE
              3.2

            
              LAWRENCE
              3.2

            
              WABASH
              3.2

            
              MARION
              3.2

            
              BROWN
              3.3

            
              CLAY
              3.3

            
              SHELBY
              3.4

            
              CASS
              3.4

            
              JEFFERSON
              3.4

            
              PIKE
              3.4

            
              ST. CLAIR
              3.5

            
              RANDOLPH
              3.5

            
              CLARK
              3.5

            
              JASPER
              3.5

            
              PERRY
              3.5

            
              VERMILION
              3.6

            
              ADAMS
              3.7

            
              EFFINGHAM
              3.7

            
              CRAWFORD
              3.7

            
              JERSEY
              3.8

            
              MOULTRIE
              3.8

            
              HANCOCK
              3.9

            
              MONROE
              3.9

            
              MACON
              3.9

            
              WASHINGTON
              3.9

            
              WILL
              3.9

            
              SCHUYLER
              4.1

            
              EDGAR
              4.2

            
              MACOUPIN
              4.2

            
              MADISON
              4.3

            
              KANKAKEE
              4.3

            
              IROQUOIS
              4.3

            
              WINNEBAGO
              4.3

            
              CUMBERLAND
              4.3

            
              CHRISTIAN
              4.3

            
              PUTNAM
              4.4

            
              LOGAN
              4.4

            
              JoDAVIESS
              4.5

            
              JACKSON
              4.5

            
              LAKE
              4.5

            
              DOUGLAS
              4.5

            
              MARSHALL
              4.5

            
              HENDERSON
              4.5

            
              MORGAN
              4.6

            
              WARREN
              4.7

            
              MONTGOMERY
              4.7

            
              SANGAMON
              4.7

            
              STEPHENSON
              4.7

            
              LaSALLE
              4.7

            
              KANE
              4.7

            
              CLINTON
              4.7

            
              BOONE
              4.7

            
              COLES
              4.7

            
              PEORIA
              4.7

            
              ROCK ISLAND
              4.8

            
              DuPAGE
              4.8

            
              MENARD
              4.8

            
              WOODFORD
              4.8

            
              OGLE
              4.9

            
              McDONOUGH
              4.9

            
              GRUNDY
              5.0

            
              MASON
              5.0

            
              FULTON
              5.0

            
              KNOX
              5.0

            
              KENDALL
              5.0

            
              CHAMPAIGN
              5.1

            
              McHENRY
              5.1

            
              WHITESIDE
              5.1

            
              HENRY
              5.1

            
              FORD
              5.1

            
              LIVINGSTON
              5.1

            
              BUREAU
              5.2

            
              TAZEWELL
              5.3

            
              CARROLL
              5.4

            
              STARK
              5.5

            
              MERCER
              5.6

            
              DeWITT
              5.8

            
              DeKALB
              5.8

            
              LEE
              5.9

            
              BOND
              6.0

            
              McLEAN
              6.1

            
              PIATT
              6.3

## mapshaper_illinois.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              mapshaper_illinois.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.
city	longitude	latitude	population
Bloomington-88.9936900	-88.99369	40.4842	76610
Chicago	-87.65005	41.85003	2695598
Springfield	-89.64371	39.80172	116250
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Illinois by county</title>
	<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: lightGray;
	font-family: Helvetica, Arial, sans-serif;
	}

	svg {
	background-color: white;
	}

	h1 {
	font-size: 20px;
	margin: 0;
	}

	p {
	font-size: 12px;
	margin: 5px 0 5px 0;
	}

	#container {
	width: 550px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	background-color: white;
	}

	div.tooltip {
	visibility:hidden;
	position:absolute;
	background: #ffffff;
	width: 155px;
	height: 10px;
	padding-bottom: .5em;
	padding-top: .25em;
	padding-left: .5em;
	font-size: 12px;
	font-family: Helvetica, Arial, sans-serif;
	text-align: left;

	border: 1px solid;
	pointer-events: none;

	}


	</style>
	</head>
	<body>

	<div id="container">

	<h1>Libertarian Party Support by County in Illinois</h1>

	<p>Libertarian Party support is defined by the percentage of voters for Gary Johnson.</p>
	<p>Source: <a href="http://www.elections.il.gov/ElectionInformation/DownloadVoteTotals.aspx">Illinois Election Information</a></p>


	</div>

	<div class="tooltip"></div>

	<script type="text/javascript">

	//crop revenue to map
	var percent = "percent"

	//Width and height
	var w = 500;
	var h = 800;
	var padding = [ 20, 10, 30, 35 ]; //Top, right, bottom, left

	//Define map projection
	var projection = d3.geo.albers()
	.center([ 6.5, 40 ])
	.translate([ w/2, h/2 ])
	.scale([ w * 15 ]);


	//Define path generator
	var path = d3.geo.path()
	.projection(projection);

	//define quantize scale to sort data values into areas of color
	var color = d3.scale.quantize()
	.range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#ffff8c","#f9d057","#f29e2e","#e76818","#d7191c"]);

	//Create SVG
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Load in revenue data
	d3.csv("JohnsonVotes.csv", function(data) {
	//set input domain for color scale
	color.domain ([
	d3.min(data, function(d) {return +d[percent]; }),
	d3.max(data, function(d) {return +d[percent]; })
	]);

	var nameToPercent = {}
	data.forEach(function(d){
	nameToPercent[d.county.toUpperCase()] = +d.percent
	})

	//Load in GeoJSON data
	d3.json("mapshaper_illinois.json", function(json) {

	json.features.forEach(function(d){
	var name = d.properties.COUNTY_NAM
	var dataValue = nameToPercent[name]
	d.properties.percent = dataValue
	})

	//Merge the revenue data and GEOjson into a single array
	//Loop through once for each revenue data value
	// for (var i = 0; i < data.length; i++) {
	// debugger

	// //grab county name
	// var dataCounty = data[i].COUNTY_NAM;

	// //grab data value, and convert from string to float
	// var dataValue = +data[i][percent];

	// //find the corresponding county inside GeoJSON
	// for (var j = 0; j < json.features.length; j++) {

	// //link to the FIPS code
	// var jsonCounty = json.features[j].properties.CO_FIPS;

	// if (dataCounty == jsonCounty) {

	// //copy the data value into the GeoJSON
	// json.features[j].properties.percent = dataValue;

	// //Stop looking through the JSON
	// break;
	// }
	// }
	// }

	//console.log(json);

	//Bind data and create one path per GeoJSON feature
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d", path)
	.attr("stroke", "black")
	.attr("stroke-width", .75 )
	.style("fill", function(d) {

	//get data value
	var value = d.properties.percent

	if (value) {
	//if value exists...
	return color(value);
	}

	});


	var tooltip = d3.select("div.tooltip");

	//Create tooltips
	svg.selectAll("path")
	.data(json.features)
	.on("mouseover", function() {
	return tooltip.style("visibility", "visible");
	})
	.on("mousemove", function(d) {

	//debugger

	tooltip.html('')

	tooltip
	.style("top", (d3.event.pageY + 16) + "px")
	.style("left", (d3.event.pageX + 16) + "px")

	tooltip
	.append('div')
	.text(d.properties.COUNTY_NAM + ": " + d.properties.percent + "%")
	// .html('<div class="countyName">'+d.properties.COUNTY_NAM+'</div>' + ": " + d.properties.percent + " percent");

	})
	.on("mouseout", function() {
	return tooltip.style("visibility", "hidden");
	})


	//Load in cities data
	// d3.csv("cityChicago.csv", function(data) {

	// //Create a circle for each city
	// svg.selectAll("circle")
	// .data(data)
	// .enter()
	// .append("circle")
	// .attr("cx", function(d) {
	// return projection([d.longitude, d.latitude])[0];
	// })
	// .attr("cy", function(d) {
	// return projection([d.longitude, d.latitude])[1];
	// })
	// .attr("r", function(d) {
	// //Use Math.sqrt to scale by area (not radius)
	// return Math.sqrt(+d.population / w * .075);
	// })
	// //.attr("r", 10)
	// .style("fill", "none")
	// .attr("stroke", "black")
	// .attr("stroke-width", 1);

	// });
	//end cities data

	}); //end d3.json()

	}); //end d3.csv

	</script>
	</body>
	</html>
	county	percent
	ALEXANDER	1.7
	PULASKI	2.0
	HARDIN	2.2
	WAYNE	2.3
	UNION	2.6
	SCOTT	2.6
	GALLATIN	2.7
	COOK	2.7
	EDWARDS	2.7
	HAMILTON	2.7
	WHITE	2.8
	CALHOUN	2.8
	POPE	2.9
	FRANKLIN	2.9
	MASSAC	2.9
	GREENE	3.0
	FAYETTE	3.0
	JOHNSON	3.0
	RICHLAND	3.1
	WILLIAMSON	3.2
	SALINE	3.2
	LAWRENCE	3.2
	WABASH	3.2
	MARION	3.2
	BROWN	3.3
	CLAY	3.3
	SHELBY	3.4
	CASS	3.4
	JEFFERSON	3.4
	PIKE	3.4
	ST. CLAIR	3.5
	RANDOLPH	3.5
	CLARK	3.5
	JASPER	3.5
	PERRY	3.5
	VERMILION	3.6
	ADAMS	3.7
	EFFINGHAM	3.7
	CRAWFORD	3.7
	JERSEY	3.8
	MOULTRIE	3.8
	HANCOCK	3.9
	MONROE	3.9
	MACON	3.9
	WASHINGTON	3.9
	WILL	3.9
	SCHUYLER	4.1
	EDGAR	4.2
	MACOUPIN	4.2
	MADISON	4.3
	KANKAKEE	4.3
	IROQUOIS	4.3
	WINNEBAGO	4.3
	CUMBERLAND	4.3
	CHRISTIAN	4.3
	PUTNAM	4.4
	LOGAN	4.4
	JoDAVIESS	4.5
	JACKSON	4.5
	LAKE	4.5
	DOUGLAS	4.5
	MARSHALL	4.5
	HENDERSON	4.5
	MORGAN	4.6
	WARREN	4.7
	MONTGOMERY	4.7
	SANGAMON	4.7
	STEPHENSON	4.7
	LaSALLE	4.7
	KANE	4.7
	CLINTON	4.7
	BOONE	4.7
	COLES	4.7
	PEORIA	4.7
	ROCK ISLAND	4.8
	DuPAGE	4.8
	MENARD	4.8
	WOODFORD	4.8
	OGLE	4.9
	McDONOUGH	4.9
	GRUNDY	5.0
	MASON	5.0
	FULTON	5.0
	KNOX	5.0
	KENDALL	5.0
	CHAMPAIGN	5.1
	McHENRY	5.1
	WHITESIDE	5.1
	HENRY	5.1
	FORD	5.1
	LIVINGSTON	5.1
	BUREAU	5.2
	TAZEWELL	5.3
	CARROLL	5.4
	STARK	5.5
	MERCER	5.6
	DeWITT	5.8
	DeKALB	5.8
	LEE	5.9
	BOND	6.0
	McLEAN	6.1
	PIATT	6.3