2c:null 2d:["$","title",null,{"children":"Geospatial Visualization | Truman Choy | Observable"}] 32:Ta40,const stateCodes = [{"name":"Alabama","abbreviation":"AL"},{"name":"Alaska","abbreviation":"AK"},{"name":"Arizona","abbreviation":"AZ"},{"name":"Arkansas","abbreviation":"AR"},{"name":"California","abbreviation":"CA"},{"name":"Colorado","abbreviation":"CO"},{"name":"Connecticut","abbreviation":"CT"},{"name":"Delaware","abbreviation":"DE"},{"name":"Florida","abbreviation":"FL"},{"name":"Georgia","abbreviation":"GA"},{"name":"Hawaii","abbreviation":"HI"},{"name":"Idaho","abbreviation":"ID"},{"name":"Illinois","abbreviation":"IL"},{"name":"Indiana","abbreviation":"IN"},{"name":"Iowa","abbreviation":"IA"},{"name":"Kansas","abbreviation":"KS"},{"name":"Kentucky","abbreviation":"KY"},{"name":"Louisiana","abbreviation":"LA"},{"name":"Maine","abbreviation":"ME"},{"name":"Maryland","abbreviation":"MD"},{"name":"Massachusetts","abbreviation":"MA"},{"name":"Michigan","abbreviation":"MI"},{"name":"Minnesota","abbreviation":"MN"},{"name":"Mississippi","abbreviation":"MS"},{"name":"Missouri","abbreviation":"MO"},{"name":"Montana","abbreviation":"MT"},{"name":"Nebraska","abbreviation":"NE"},{"name":"Nevada","abbreviation":"NV"},{"name":"New Hampshire","abbreviation":"NH"},{"name":"New Jersey","abbreviation":"NJ"},{"name":"New Mexico","abbreviation":"NM"},{"name":"New York","abbreviation":"NY"},{"name":"North Carolina","abbreviation":"NC"},{"name":"North Dakota","abbreviation":"ND"},{"name":"Ohio","abbreviation":"OH"},{"name":"Oklahoma","abbreviation":"OK"},{"name":"Oregon","abbreviation":"OR"},{"name":"Pennsylvania","abbreviation":"PA"},{"name":"Rhode Island","abbreviation":"RI"},{"name":"South Carolina","abbreviation":"SC"},{"name":"South Dakota","abbreviation":"SD"},{"name":"Tennessee","abbreviation":"TN"},{"name":"Texas","abbreviation":"TX"},{"name":"Utah","abbreviation":"UT"},{"name":"Vermont","abbreviation":"VT"},{"name":"Virginia","abbreviation":"VA"},{"name":"Washington","abbreviation":"WA"},{"name":"West Virginia","abbreviation":"WV"},{"name":"Wisconsin","abbreviation":"WI"},{"name":"Wyoming","abbreviation":"WY"}] stateCodes.concat([{"name": "District of Columbia", "abbreviation": "DC"}, {"name": "Puerto Rico", "abbreviation": "PR"}]) const parseNum = (str) => parseInt(str.replace(/,/g, '')) const marriedHouseholds = marriedHouseholdsCsv.map(household => ({ stateName: household["State name"], stateCode: stateCodes.find(code => code.name === household["State name"])?.abbreviation, marriedHouseholds: parseNum(household["Married couple households"]), marriedHouseholdsSameSex: parseNum(household["Married couple households Same-sex"]), })) display(marriedHouseholds)33:T488,This choropleth much more clearly conveys the differences in same-sex marriage *rates* across states, because the data used is the percentages rather than just the numbers. Now, we can see that many of the states that appeared to have virtually zero same-sex marriages in the previous chart actually have a relatively larger proportion compared to the other states. Many of the states in the west coast, like Nevada, are much higher on the scale than before. I thought the default base map was fine, so I didn't change it. I went with the viridis color scale because I thought it most accurately mapped the steps in the data values to colors. In the hover text, I made sure to include both numbers instead of just the percentages or just the raw number, so that it would be clear to the viewer the drastic differences in populations and reports across the states. A bubble map could be constructed with the data already present. It could be a better visual encoding if you actually want to display the raw numbers, because a bubble map would directly scale the size of the bubbles with the values, which is clearer than using the colors like in a choropleth.34:[] 30:{"id":"4d62307cf7c1b96c","slug":"geospatial-visualization","title":"Geospatial Visualization","thumbnail":"23f67c89891667e96a7ec2ca3aae95759061fab0721559f2c713481184e5154f","access_level":"public","create_time":"$D2026-10-04T12:56:13.378Z","update_time":"$D2026-10-09T12:26:48.910Z","view_time":null,"first_public_time":"$D2026-10-09T09:47:58.654Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1383329390b9484b","login":"truman-choy","name":"Truman Choy","avatar_url":"https://avatars-next.observableusercontent.com/a7d29b17fd00b3c8079fc515ddcaff9fba90108f6356c3110ff709917a14fd18","tier":"starter_2024","bio":""},"version":688,"publish_version":688,"role":null,"authored":false,"authors":[{"type":"individual","id":"821429cf50ca85d7","login":"choytr","name":"Truman Choy","avatar_url":"https://avatars-next.observableusercontent.com/a7d29b17fd00b3c8079fc515ddcaff9fba90108f6356c3110ff709917a14fd18","tier":null,"bio":""}],"members":[{"type":"team","id":"1383329390b9484b","login":"truman-choy","name":"Truman Choy","avatar_url":"https://avatars-next.observableusercontent.com/a7d29b17fd00b3c8079fc515ddcaff9fba90108f6356c3110ff709917a14fd18","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Geospatial Visualization","cells":[{"id":1,"value":"# Geospatial Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"## HART Rail Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"The Honolulu Authority for Rail Stations (HART) provides geospatial data of the Skyline's 21 planned stations. This data can be used to visualize on a world map where the stations are located. And though we don't have a set of polylines for the exact path the Skyline will take, we can still draw lines between each station to get a *very* rough estimate.\n\nFirst, we need to fetch the raw data in GeoJSON format.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"railStationsGeoJSON = d3.json(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"GeoJSON is just JSON with a couple of key properties, which can be found in the [RFC](https://datatracker.ietf.org/doc/html/rfc7946). The most important one is the \"features\" array, which is a list of geographic locations representing points on a map. One point represents one station. First let's put the data in a format we can work with easier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"type Station = {\n lat: number,\n lon: number,\n name: string,\n}\nconst stations: Station[] = []\nrailStationsGeoJSON.features.forEach(feature => {\n stations.push({\n lat: feature.geometry.coordinates[1],\n lon: feature.geometry.coordinates[0],\n name: feature.properties.STATION,\n })\n})\ndisplay(stations)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"This gives us a clean list of just the stations' latitudes, longitudes, and names, leaving out everything GeoJSON-specific. The [RFC](https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.1) specifies that the coordinate array should contain longitude, latitude, and optionally elevation, so our lats will be in `coordinates[1]` and our lons are in `coordinates[0]`. The station names are found in the custom `properties.STATION` property.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"### Building the map\n\nTo use this for a Plotly map, we need arrays for all the lat/lon coordinates as well as the name of each station. We can just map over each of our cleaned stations and pick out the properties we need.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import Plotly from \"npm:plotly.js-dist-min\";\n\nconst lats = stations.map(s => s.lat);\nconst lons = stations.map(s => s.lon);\nconst names = stations.map(s => s.name);\n\nconst data = [\n {\n type: 'scattermap',\n mode: 'markers+lines+text',\n lat: lats,\n lon: lons,\n text: names,\n textposition: 'bottom center',\n marker: {\n size: 10,\n color: '#f43f5e',\n },\n line: {\n color: '#3b82f6',\n width: 3,\n },\n hovertemplate: '%{text}
%{lat:.4f}, %{lon:.4f}',\n },\n];\n\nconst layout = {\n title: { text: 'Planned Skyline Stations (21 Stations)', x: 0.016 },\n width: 800,\n height: 600,\n margin: { t: 50, r: 10, b: 10, l: 10 },\n map: {\n style: 'basic',\n center: { lat: 21.345, lon: -157.945 },\n zoom: 10.8,\n },\n};\n\nconst div = DOM.element('div');\nPlotly.newPlot(div, data, layout);\ndisplay (div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"I centered the map on the full Skyline path. I tried centering it on Oahu as a whole, but that made the station markers, name, and paths small and difficult to read. The default basic base map was good enough for displaying the stations. For readability, the markers and lines are rose and blue respectively, colors that highly contrast with the colors used in the base map. I set the size and width of the markers and lines to what I thought looked good, and I didn't feel the need to change them more after that. I also put the total number of stations in the title, as well as the station names under each marker. I thought these would be convenient for the viewer while not adding much clutter.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"## Married Household USA","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"The U.S. Census Bureau provides data on same-sex marriage households. We can visualize rates of same-sex marriage households across states in a choropleth. First we need to import and process it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"marriedHouseholdsCsv = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/married.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"The state identifiers are provided as state names, but we need to convert those to state codes so Plotly can read them. The numbers are provided as strings with commas, so we need to remove them and parse them as JavaScript numbers. We're only keeping the \"Married couple households\" and \"Married couple households Same-Sex\" columns because those are the only ones we're interested in.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"### Building the choropleth\n\nA basic way to visualize same-sex marriage in a choropleth is to simply set the number of same-sex marriages proportional to the color scale on the chart, setting the highest value to the highest number found in the dataset (California).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"const rows = marriedHouseholds.filter(h => h.stateCode !== \"PR\");\n\nconst trace = {\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: rows.map(h => h.stateCode),\n z: rows.map(h => h.marriedHouseholdsSameSex),\n text: rows.map(h => h.stateName),\n customdata: rows.map(h => [h.marriedHouseholdsSameSex, h.marriedHouseholds]),\n hovertemplate:\n \"%{text}
%{customdata[1]:,} married\" +\n \"
%{customdata[0]:,} same sex\",\n colorscale: \"Viridis\",\n zmin: 0,\n zmax: 102587,\n colorbar: { title: \"% same-sex\" },\n marker: { line: { color: \"white\", width: 0.5 } }\n};\n\nconst layout = {\n title: {\n text: \"Same-sex Married-Couple Households\",\n x: 0.016,\n },\n width: 1000,\n height: 600,\n margin: { t: 50, r: 10, b: 10, l: 10 },\n geo: { scope: \"usa\" },\n};\n\nconst div = html`

`;\nPlotly.newPlot(div, [trace], layout);\ndisplay(div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"However this doesn't produce the most informative chart. Though we do see some very high and some mid-range values (California holds the highest number of same-sex marriages, Texas, Florida and New York hold a middle value, while the rest of the states hold very low numbers) the values are skewed because each state has different populations. What we're really interested in seeing is the *proportions* of marriages that are same-sex in each state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"const rows = marriedHouseholds.filter(h => h.stateCode !== \"PR\");\n\nconst trace = {\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: rows.map(h => h.stateCode),\n z: rows.map(h => (h.marriedHouseholdsSameSex / h.marriedHouseholds) * 100),\n text: rows.map(h => h.stateName),\n customdata: rows.map(h => [h.marriedHouseholdsSameSex, h.marriedHouseholds]),\n hovertemplate:\n \"%{text}\" +\n \"
%{customdata[1]:,} married-couple households\" +\n \"
%{customdata[0]:,} same-sex\" +\n \"
%{z:.2f}% same-sex\",\n colorscale: \"Viridis\",\n zmin: 0,\n zmax: 2.5,\n colorbar: { title: \"% same-sex\" },\n marker: { line: { color: \"white\", width: 0.5 } }\n};\n\nconst layout = {\n title: {\n text: \"Same-sex Share of Married-Couple Households\",\n x: 0.016,\n },\n width: 1000,\n height: 600,\n margin: { t: 50, r: 10, b: 10, l: 10 },\n geo: { scope: \"usa\" },\n};\n\nconst div = html`