d3 = require("d3@5")
import {legend} from "@d3/color-legend"
simple = require("simple-statistics@7.0.7/dist/simple-statistics.min.js")
format = d => `${d}%`
topojson = require("topojson-client@3")
Counties = FileAttachment("County2010washWGS84.json").json()
WashingtonCounties = topojson.feature(Counties, Counties.objects.County2010washWGS84)
csv_data = d3.csvParse(await FileAttachment("County2010washWGS84.dbf.csv").text(),({COUNTYFP10, POPWHITE, POP10}) => [COUNTYFP10, +POPWHITE/+POP10])
data = Object.assign(new Map(csv_data), {title: "Percent White"})
data.get("009")
pct_white = Array.from(csv_data.values(), d => d[1])
Pink = [d3.color("#feebe2"), d3.color("#fbb4b9"), d3.color("#f768a1"), d3.color("#ae017e")]
naturalbreaks = simple.ckmeans(pct_white, Pink.length).map(v => v.pop())
//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(Pink)
width = 975
height = 610
margin = 100
//Rotate the map sets the longitude of origin for our UTM Zone 15N projection.
projection = d3.geoTransverseMercator().rotate([120,0]).fitExtent([[80, 80], [width, height]], WashingtonCounties);
//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)
//projection = d3.geoAlbers().fitExtent([[120,120], [975 - 100, 610 - 100]], WashingtonCounties)
//projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], counties)
//Using a path generator to project geometry onto the map
path = d3.geoPath().projection(projection);
//this whole chunk of code creates your map
choropleth = {
const svg = d3.create("svg")
//this is creating our canvas to put our map on
.attr("viewBox", [0, 0, width, height]);
//this is bringing in the canvas that we defined above
svg.append("g")
.attr("transform", "translate(60,20)")
//this value 'translate' changes where your legend is positioned based on the x and y values of our previously defined canvas
.append(() =>
legend({
color: color,
//inputting the color range and colors that we created before
title: data.title,
//bringing down the title that we created earlier
//you can also put the tile in here manually as well if you want
width: 300,
//width of the legend
tickFormat: ".2f"
//number of decimal places within the legend
})
);
svg.append("g")
//"painting" the map onto our canvas
//"g" is grouping our graphics together, in our case polygons
.selectAll("path")
.data(WashingtonCounties.features)
//what we are going to read for our data, reads from the topojson
//you need to pull the features here, not just the counties
.join("path")
//paths are polygons
.attr("stroke", "black")
//color of the outlines
.attr("stroke-linejoin", "round")
//you can change the type of your line
.attr("stroke-width", 1.1)
//the thickness of your lines
// .attr("fill", function(d){
// console.log(color(data.get(d.properties.FIPS)[0]))
// return color(data.get(d.properties.FIPS)[0]);
// })
.attr("fill", d => color(data.get(d.properties.COUNTYFP10)))
//determines the color of each polygon, using the data 'dictionary' that we created
//the data also has to match in type, numeric or string
.attr("d", path)
.append("title")
.text(d => "Percent White" + (data.get(d.properties.COUNTYFP10)));
//allows you to hover over and see the exact values for each polygon
return svg.node();
}
md`### It does not seem like there are any strong spatial patterns present within our data. But, from initial searches on population density, it seems like the areas with lower population density, which are also less urbanized, have lower percentages of the population being white. It also appears that in the larger cities that there is a greater percentage of the population is white. Another pattern seems to be that coastal areas have higher percentages of white populations in general. Most of the patterns that could be found most likely relate to the population distribution/density of the areas.`
csv_data_objects= Object.assign((d3.csvParse(await FileAttachment("County2010washWGS84@1.dbf.csv").text(), d3.autoType)).map(({COUNTYFP10, POPWHITE, POP10}) => ({FIPS: +COUNTYFP10, pctwhite: +POPWHITE/+POP10})))
viewof bins = Inputs.range([0,100], {step: 1, label: "Bins"})
Plot.plot({
marks: [
Plot.rectY(csv_data_objects, Plot.binX({y: "count"}, {x: "pctwhite", thresholds: bins})),
Plot.ruleY([0])
]
})
whitepct= Array.from(csv_data.values)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
