Population Density by County

Developer
Steve Pepple
Size
3,520 Kb
Views
78,936
  1. Population Density by County Previews
  2. Population Density by County HTML Codes
  3. Population Density by County CSS Codes
  4. Population Density by County JS Codes

How do I make an population density by county?

I used Turf.JS to calculate the population density of each county in California. Data is from 2010 census. . What is a population density by county? How do you make a population density by county? This script and codes were developed by Steve Pepple on 22 June 2022, Wednesday.

Population Density by County Previews
IQ Test

Population Density by County - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Population Density by County</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="header"> <span class="title"> Population Density of California Counties </span> </h2> <select name="Classification Type" id="type"> <option value="quantile">Quantile Classification</option> <option value="jenks">Jenks Classification</option> </select>
</div>
<div id="map"></div>
<div id="legend"> <b>Population Density</b><br/> <span class="type">Quantile Classification</span> <div class="breaks"> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/turf.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/chroma-js/0.6.3/chroma.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/230399/ca_counties_small.geojson'></script> <script src="js/index.js"></script>
</body>
</html>

Population Density by County - Script Codes CSS Codes

html, body{ height:100%; font-family: Helvetica;
}
body { margin:0; padding:0;
}
#map { height: 100%; width:100%; position: relative }
#header { background: #333; padding: 1vw; padding-left: 2vw; height: 3vw;}
#header .title { color: #EEE; font-size: 1.6vw; line-height: 3.4vw;
}
#type { background: #222; border: solid 1px #888; color: #EEE; font-size: 1.2vw; float:right
}
#legend { background:#FFFFFF; position: absolute; width: 18vw; height: auto; bottom: 1vw; right: 1vw; padding:12px;
}
#legend .icon { width: 1.5vw; height:1.5vw; margin-right: 2vw; float:left;
}
#legend .sub { font-size: .9vw; color: #444;
}
#legend .type { font-size: 1vw; color: #666;
}

Population Density by County - Script Codes JS Codes

// Public auth for initializing the map
var mapMain = 'stevepepple.lkojhhoh';
L.mapbox.accessToken = 'pk.eyJ1Ijoic3RldmVwZXBwbGUiLCJhIjoiTmd4T0wyNCJ9.1-jWg2J5XmFfnBAhyrORmw';
// Quantile or Jenks classification
var type = $("#type").val();
var breaks;
// Color scale using chroma.js
var scale = chroma.scale('YlOrBr');
// Create the base map using Mapbox
map = L.mapbox.map('map', mapMain, { attributionControl: false, maxZoom: 12, minZoom: 5
}).setView([34.0261899,-118.2455643], 8);
// Calculate population density for each county
_.each(counties.features, function(feature) { // Population from 2010 Census var pop = feature.properties.POP; // Calcualate desnity as popluation / square meters var area = turf.area(feature.geometry); var sq_miles = area * 0.000000386102158542; feature.properties.pop_density = (pop / sq_miles);
});
updateMap();
// Show the Choropleth of Population Density
function updateMap() {	// Make a Turf collection for analysis collection = turf.featurecollection(counties.features); // Basic UI for select Jenks or Quantile classification if (type == "jenks") {	breaks = turf.jenks(collection, "pop_density", 8); } else { breaks = turf.quantile(collection, "pop_density", [25, 50, 75, 99]); }	// Get the color when adding to the map var layer = L.geoJson(counties, { style: getStyle }) layer.addTo(map); // Fit to map to counties and set the legend map.fitBounds(layer.getBounds()); updateLegend(); function getStyle(feature) {	var pop = feature.properties.POP; var pop_density = feature.properties.pop_density; return {	fillColor: getColor(pop_density), fillOpacity: 0.7, weight: 1, opacity: 0.2, color: 'black'	} } function updateLegend() {	$(".breaks").html(); for(var i = 0; i < breaks.length; i++) {	var density = Math.round(breaks[i] * 100) / 100; var background = scale(i / (breaks.length)); $(".breaks").append("<p><div class='icon' style='background: " + background + "'></div><span> " + density + " <span class='sub'>pop / mi<sup>2</sup></span></span></p>");	}	}
}
/* Get color depending on population density value */
function getColor(d) { // Select a color scale from Color Brewer var color = scale(0); // Place the feature based upon breaks for (var i = breaks.length - 1; i >= 0; i--) {	if (d < breaks[i]) {	// Automatic way to select the color by class	var percentage = (i / (breaks.length));	color = scale(percentage); }	}	return color;
}
Population Density by County - Script Codes
Population Density by County - Script Codes
Home Page Home
Developer Steve Pepple
Username stevepepple
Uploaded June 22, 2022
Rating 3
Size 3,520 Kb
Views 78,936
Do you need developer help for Population Density by County?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steve Pepple (stevepepple) Script Codes
Name
Isometric Treemap Visualization of Money Allocation
Color Scales with D3.js
LA Point-of-Interest Analysis
Real Time Buses API
A Pen by Steve Pepple
Bay Area Bus Stops and Businesses
3D Map Sphere using Three.js
Photos from Mission San Francisco
Diverging Color Scales
Categorical Color Scales
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!