Published
Edited
Mar 6, 2020
2 stars
md`# Choropleth Mapping
Population in Alaska Counties: 5 and Younger, Source: [Census 2010]`
d3 = require("d3@5")
topojson = require("topojson-client@3")
AlaskaNew = FileAttachment("AlaskaNew.json").json()
county_features = topojson.feature(AlaskaNew, AlaskaNew.objects.AlaskaNew)
csv_data = d3.csvParse(await FileAttachment("Alaska1@2.csv").text(),({FIPS, AGE_UNDER5, POP2010}) => [+FIPS, [+AGE_UNDER5, +AGE_UNDER5/+POP2010]])
data = Object.assign(new Map(csv_data), {title: ["Percent Population of Alaska: 5 and Younger"]})
childpct = Array.from(csv_data.values(), d => d[1][1])
md`# Classification: Natural Breaks`
naturalbreaks = simple.ckmeans(childpct, YlOrBr.length).map(v => v.pop())
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
md`# Color Scheme`
YlOrBr = [d3.color("#fee391"), d3.color("#fec44f"), d3.color("#fe9929"), d3.color("#d95f0e"),d3.color("#993404")]
//more information on sequential scales: https://observablehq.com/@d3/sequential-scales
// color = d3.scaleSequentialQuantile([...data.values()], d3.interpolateBlues)
// color = d3.scaleQuantile()
// .domain(med_age)
// .range()
color = d3.scaleThreshold()
.domain(naturalbreaks)
.range(YlOrBr)
md`# Creating a Canvas`
width = 900
height = 600
md`# Projecting a Map`
//Rotate the map sets the longitude of origin for our Albers projection.
projection = d3.geoTransverseMercator()
.rotate([154, 0])
.center([0, 62])
.fitExtent([[80, 80], [width, height]], county_features);
//d3 reference for projections: https://github.com/d3/d3-geo/blob/master/README.md
//use the following url for specific projection settings: https://github.com/veltman/d3-stateplane
//Use this code to set up the map projection (if different than geographic projection)
//margin = 100
//projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
margin = 100
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
md`# Creating a Choropleth Map`
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, 15, width, height]);
svg.append("g")
.attr("transform", "translate(360,20)")
.append(() =>
legend({
color: color,
title: data.title,
width: 350,
tickFormat: ".2%"
})
);
svg.append("g")
.selectAll("path")
.data(county_features.features)
.join("path")
.attr("stroke", "black")
.attr("stroke-width", 0.5)
.attr("stroke-linejoin", "round")
// .attr("fill", function(d){
// console.log(data.get(+d.properties.FIPS)[1])
// })
.attr("fill", d => color(data.get(+d.properties.FIPS)[1]))
.attr("d", path)
.append("title")
.text(d => format(data.get(+d.properties.FIPS)[1]));
return svg.node();
}
import {legend} from "@d3/color-legend"
format = d3.format(".2%")
//format = d => `${d}%`
md`# Spatial Distribution of the Values
The spatial distribution of values in this map indicates that Alaska counties with a large percentage of children ages 5 and younger tend to be located on the western side of mainland Alaska, while counties with a small percentage occur on islands. It appears that a majority of counties have an above average percent of population ages 5 and younger, indicated by prevelance of the 4th (7.03%-9.33%) and 5th class (9.33%-12.11%) on the map. Additionally, a very small portion of Alaska has a low percentage of children, mainly isolated to islands which are classified as the lowest class (0%-3.92%). These trends can be caused by various compounded factors, such as greater educational opportunities and resources on the mainland that would cause a family with children to move off the islands. Because this map is normalized by total population, it would be inaccurate to simply say that more children live in darker counties because these values are percentages of the total population, not raw counts. Additionally, counties located adjacent to one another tend to share similar values, evident in the pattern of blocked group coloration. This pattern fits with the generally accepted concept in geography that objects located close together tend to be more similar than objects located far apart.`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.