Observable uses JavaScript modules, so we have to load D3 and TopoJSON using `require)`.
- D3 does CSV parsing, scales, and visualization.
- TopoJSON-client converts TopoJSON objects into GeoJSON features that D3 can use.
We have to do these imports before reading or transforming any spatial data.
Uploading and reading TopoJSON
I transformed my original shapefile into TopoJSON using Mapshaper. To do this I opened mapshaper and imported my Nebraska counties data. Then I used the simplify button to smooth out the boundaries and saved it as a '.json' file.
To upload it to observable I went to the "files" panel and uploaded the .json file.
I called this data Counties and allowed observable to read it by saying:
FileAttachment("NE_Counties.json").json()
To make a csv file I used map shaper and uploaded by .dbf. I then exported it as a csv. I then uploaded that csv file through the Files panel on the side of observable. So we can read it, I used 'd3.csvParse()' which will turn each row into JavaScript object.
In the row function I created a new normalized variable. I took the number of nursing facilities within a county (NursingFac) and the Total population of a county (Total_Pupu). I did NursingFac/Total_Popu to create nursing prct which is the percent of nursing facility within a county. I put + in front of NursingFac and Total_Popu variable to ensure they were integers.
Raw counts like the number of nursing facilities can't be compared across counties because counties differ greatly in population size. Now 'nursingprct' represents the number of nursing facilities per person in each county.
To join the CSV attributes to the spatial polygons, I created a `Map` where the key is the county identifier (`COUNTYFP`) and the value is the normalized variable (`nursingprct`)
Using the map will allow fast lookups when styling polygons during visualization. This is necessary for choropleth mapping in observable.