2c:null 2d:["$","title",null,{"children":"Assignment 3 Geospatial Visualizations | Harrison Law | Observable"}] 32:T459,(() => { const div = html`

`; const every = k => a => a.filter((_, i) => i % 2 === k); const label = (k, pos) => ({ type: "scattermap", mode: "markers+text", lon: every(k)(lons), lat: every(k)(lats), text: every(k)(names), textposition: pos, marker: {size: 8, color: "white"}, textfont: {size: 11, color: "#1f2d3d"}, hovertemplate: "%{text}" }); Plotly.newPlot(div, [ {type: "scattermap", mode: "lines", lon: lons, lat: lats, line: {width: 5, color: "#00718F"}, hoverinfo: "skip"}, {type: "scattermap", mode: "markers", lon: lons, lat: lats, marker: {size: 15, color: "#00718F"}, hoverinfo: "skip"}, label(0, "top right"), label(1, "bottom left") ], { map: {style: "carto-positron", center: {lon: -157.95, lat: 21.34}, zoom: 10.6}, title: {text: "Honolulu Rail (HART): 21 Stations
^{East Kapolei → Kālia (Ala Moana). Source: City & County of Honolulu Open Data}"}, margin: {l: 0, r: 0, t: 70, b: 0}, showlegend: false }, {responsive: true}); return div; })()33:T5a0,## 1.3 Styling choices a. Base map. carto-positron: a light, low-saturation map, so the thin rail line stands out while coast, roads and place names still help people orient. b. Line, point and text. A thick (5 px) teal line that contrasts with the grey base. Stations are white dots with a teal ring, the usual transit-map style. Labels are small dark text, alternating right and left so the dense downtown stops don't overlap. Full names appear on hover. c. Framing. The route is about 30 km, thin and east–west. Centered at about 21.34°N, −157.95°W with zoom 10.6, all 21 stations show on load with a small margin. Zooming in further cuts off an end, and zooming out wastes space on ocean. d. Extras. A title with the system, station count and termini, a subtitle with direction and source, hover text, and no legend (one data series). ## 1.4 How well does the path represent the rail? Not very well, as the straight segments show where the stops are, not where the tracks are. The elevated guideway follows highways and curves (around Pearl Harbor and the airport), and the segments cut across those curves. The error is largest where stations are far apart (Waiawa→Kalauao, Hālawa→Makalapa). I'd need the track alignment as a `LineString` layer from HART/City GIS, plus opening dates and phases to show which stations are in service, and the current station names (the file has new Hawaiian names and older planning names).34:T8b0,## 2.4 Is the ratio appropriate? Much better. Dividing by married-couple households removes the population effect. The highest shares are DC (≈6.0%), Delaware (≈2.0%), Massachusetts (≈1.7%), Nevada (≈1.65%), then Florida, New York, California and Rhode Island (≈1.6%). The lowest are Montana (0.43%), Kansas (0.46%), Idaho (0.54%), West Virginia (0.56%) and South Dakota (0.62%). This fits the pattern I'd expect: urban Northeast and West Coast states are high, and the rural Plains, Mountain West and Appalachia are low. Massachusetts legalized same-sex marriage first (2004), and Nevada and Florida may be boosted by migration and tourism. Caveats: these are survey estimates with margins of error (large for small states), so tiny gaps shouldn't be over-read, and the ratio reflects where people live, not acceptance. DC is about 3× the next value, so I capped the color scale at 2.1%. ## 2.5 Styling decisions a. Base map. Plotly's `albers usa` projection, which places Alaska and Hawaii in insets so all states are visible. Only state outlines are needed because the data is by state. Lakes are off. Puerto Rico is in the CSV but isn't drawn. b. Color scale. A sequential single-hue scale (Purples). The data is ordered low to high with no meaningful midpoint, so a diverging scale would mislead. Purple avoids red/blue political connotations. The ratio scale is clipped at 2.1% so DC doesn't flatten the other 50 states. c. Extras. A title with the measure and year, a subtitle with the formula and scale-cap note, a labeled colorbar with units, and hover text with name, ratio and both counts. ## 2.6 Would a bubble map be better? Needed: a lat/lon per state (a centroid), though `scattergeo` with `locationmode: "USA-states"` can place bubbles by code. Population or household totals would also help for comparison. Better? For counts, yes: area encodes quantity, and tiny states like RI and DC aren't hidden by large empty ones. For ratios, no: a rate isn't additive and size would imply a total, so color is the standard. The best option is both: color for the share and bubble area for the count (below). Bubbles can overlap in the Northeast, and area must be scaled honestly with `sizemode: "area"`.35:[] 30:{"id":"4c6d5051ae89d31d","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3 Geospatial Visualizations","thumbnail":"553e7f7ab305f26733b9a8a693dcee2666fc4f8a8804009de051fd0fc04745c6","access_level":"public","create_time":"$D2026-10-06T21:24:53.320Z","update_time":"$D2026-10-09T09:17:58.355Z","view_time":null,"first_public_time":"$D2026-10-09T09:18:45.431Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"016a75231850063b","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":"free_2026","bio":""},"version":106,"publish_version":106,"role":null,"authored":false,"authors":[{"type":"individual","id":"d66e4012a6856cb7","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":null,"bio":""}],"members":[{"type":"team","id":"016a75231850063b","login":"harrison-law","name":"Harrison Law","avatar_url":"https://avatars-next.observableusercontent.com/136636aa6e7ce908c07533ee74b8a3f44e7ed33ef773a6443c710d40248d2fa4","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 3 Geospatial Visualizations","cells":[{"id":1,"value":"# Assignment 3 Geospatial Visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"const Plotly = await (async () => {\n const r = await fetch(\"https://cdn.jsdelivr.net/npm/plotly.js-dist-min@2.35.2/plotly.min.js\", {proxy: true});\n if (!r.ok) throw new Error(\"Plotly fetch failed: \" + r.status);\n (0, eval)(await r.text());\n return window.Plotly;\n})();","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"# Part 1: HART Rail Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## 1.1 Exploring GeoJSON","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"let gj = d3.json(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\")","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"({type: gj.type, count: gj.features.length, first: gj.features[0]})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"A `FeatureCollection` holds a `features` array. Each feature has a `geometry` (a `Point` with `coordinates` as [lon, lat], longitude first) and `properties` (`STATION`, `station_name_FEIS`, IDs). The next cells map over `features` to get three arrays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"let lons = gj.features.map(f => f.geometry.coordinates[0])\nlet lats = gj.features.map(f => f.geometry.coordinates[1])\nlet names = gj.features.map(f => f.properties.STATION)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"## 1.2 Visualizing the Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$32","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"# Part 2: Married Household USA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"let raw = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/married.csv\")\nlet codes = ({Alabama:\"AL\",Alaska:\"AK\",Arizona:\"AZ\",Arkansas:\"AR\",California:\"CA\",Colorado:\"CO\",Connecticut:\"CT\",Delaware:\"DE\",\"District of Columbia\":\"DC\",Florida:\"FL\",Georgia:\"GA\",Hawaii:\"HI\",Idaho:\"ID\",Illinois:\"IL\",Indiana:\"IN\",Iowa:\"IA\",Kansas:\"KS\",Kentucky:\"KY\",Louisiana:\"LA\",Maine:\"ME\",Maryland:\"MD\",Massachusetts:\"MA\",Michigan:\"MI\",Minnesota:\"MN\",Mississippi:\"MS\",Missouri:\"MO\",Montana:\"MT\",Nebraska:\"NE\",Nevada:\"NV\",\"New Hampshire\":\"NH\",\"New Jersey\":\"NJ\",\"New Mexico\":\"NM\",\"New York\":\"NY\",\"North Carolina\":\"NC\",\"North Dakota\":\"ND\",Ohio:\"OH\",Oklahoma:\"OK\",Oregon:\"OR\",Pennsylvania:\"PA\",\"Rhode Island\":\"RI\",\"South Carolina\":\"SC\",\"South Dakota\":\"SD\",Tennessee:\"TN\",Texas:\"TX\",Utah:\"UT\",Vermont:\"VT\",Virginia:\"VA\",Washington:\"WA\",\"West Virginia\":\"WV\",Wisconsin:\"WI\",Wyoming:\"WY\",\"Puerto Rico\":\"PR\"})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const states = (() => {\n const num = s => parseInt(String(s).replace(/,/g, \"\"));\n return raw.map(r => {\n const same = num(r[\"Married couple households Same-sex\"]);\n const married = num(r[\"Married couple households\"]);\n return {state: r[\"State name\"], code: codes[r[\"State name\"]], same, married, ratio: same / married * 100};\n });\n})();","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const usaLayout = title => ({\n title: {text: title}, margin: {l: 0, r: 0, t: 70, b: 0},\n geo: {scope: \"usa\", projection: {type: \"albers usa\"}, showlakes: false}\n});","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## 2.1 Married couple households Same-sex Chloropleth","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"(() => {\n const div = html`

`;\n Plotly.newPlot(div, [{\n type: \"choropleth\", locationmode: \"USA-states\",\n locations: states.map(d => d.code), z: states.map(d => d.same),\n text: states.map(d => d.state), colorscale: \"Purples\",\n colorbar: {title: {text: \"Households\"}},\n hovertemplate: \"%{text}
%{z:,} same-sex married households\"\n }], usaLayout(\"Same-sex married-couple households by state, 2021
^{Raw counts. Source: adapted Census data}\"), {responsive: true});\n return div;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## 2.2 Is raw count appropriate?\nNot really, as it mostly shows population. The highest counts are California (≈102.6k), Texas (≈63.5k), Florida (≈63.1k) and New York (≈51.8k). The lowest are Montana (942), Wyoming, South Dakota and Alaska (≈1.05–1.08k) and North Dakota. That follows state size, which makes sense as a count, but Texas ranks second despite its history of limited protections, so the map says little about how common same-sex marriage is. Big states dominate the scale, so most states look the same pale shade.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## 2.3 Ratio of Married couple households Same-sex to Married couple households Chloropleth","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"(() => {\n const div = html`

`;\n Plotly.newPlot(div, [{\n type: \"choropleth\", locationmode: \"USA-states\",\n locations: states.map(d => d.code), z: states.map(d => d.ratio),\n zmin: 0, zmax: 2.1, text: states.map(d => d.state),\n customdata: states.map(d => [d.same, d.married]), colorscale: \"Purples\",\n colorbar: {title: {text: \"% of married HH\"}, ticksuffix: \"%\"},\n hovertemplate: \"%{text}
%{z:.2f}%
%{customdata[0]:,} of %{customdata[1]:,}\"\n }], usaLayout(\"Share of married-couple households that are same-sex, 2021
^{Same-sex ÷ all married-couple households. Scale capped at 2.1% (DC = 6.0%)}\"), {responsive: true});\n return div;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"(() => {\n const div = html`

`;\n const maxSame = d3.max(states, d => d.same);\n Plotly.newPlot(div, [\n {type: \"choropleth\", locationmode: \"USA-states\",\n locations: states.map(d => d.code), z: states.map(d => d.ratio),\n zmin: 0, zmax: 2.1, colorscale: \"Purples\",\n colorbar: {title: {text: \"% of married HH\"}, ticksuffix: \"%\"}, hoverinfo: \"skip\"},\n {type: \"scattergeo\", locationmode: \"USA-states\", mode: \"markers\",\n locations: states.map(d => d.code), text: states.map(d => d.state),\n customdata: states.map(d => d.same),\n marker: {size: states.map(d => d.same), sizemode: \"area\",\n sizeref: 2 * maxSame / 45 ** 2, color: \"rgba(255,140,0,0.55)\",\n line: {color: \"white\", width: 0.5}},\n hovertemplate: \"%{text}
%{customdata:,} same-sex married households\"}\n ], usaLayout(\"Share (color) and count (bubble area)\"), {responsive: true});\n return div;\n})()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"