2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | Chayanika Devi | Observable"}] 32:T54d,{ const div = html`

`; const ring = { // dark outline behind each stop type: "scattermap", lat, lon, mode: "markers", marker: {size: 14, color: "#0b6e4f"}, hoverinfo: "skip" }; const rail = { type: "scattermap", lat, lon, mode: "lines+markers+text", text: names, textposition: names.map((_, i) => (i % 2 ? "bottom right" : "top left")), textfont: {family: "Arial", size: 11, color: "#0b3d2e"}, line: {width: 4, color: "#0b6e4f"}, marker: {size: 10, color: "white"}, customdata: stations.map(f => f.properties.station_name_FEIS), hovertemplate: "%{text}
Planning name: %{customdata}" }; const layout = { title: { text: "HART Skyline Rail Stations, Oahu
^{21 stations from Kualakai (East Kapolei) to Kalia (Ala Moana) · straight lines between stations}", x: 0.02 }, map: {style: "carto-positron", center: {lat: 21.355, lon: -157.95}, zoom: 10.8}, showlegend: false, margin: {l: 0, r: 0, t: 70, b: 0}, annotations: [{ text: "Data: City & County of Honolulu Open Data", showarrow: false, x: 0.01, y: 0.01, xref: "paper", yref: "paper", font: {size: 10, color: "#555"} }] }; Plotly.newPlot(div, [ring, rail], layout, {responsive: true}); return div; }33:T7d0,## 3. Styling choices a. Base map: I used carto-positron, a light and muted street map that keeps the rail route as the main visual focus. The map still provides useful geographic context, including the coastline, streets, and major place names such as Pearl Harbor, the airport, Kalihi, and downtown. A satellite or dark basemap would add visual noise and compete with the rail line and station labels. b. Line, point, and text style: The rail is represented with a thick (4px), solid green line to create a clear transit-line appearance. White station markers with green outlines resemble stop symbols commonly used on transit maps, making each station easy to identify. The labels use small, dark sans-serif text, with the word “Station” removed to reduce visual clutter. Because the downtown stations (14–21) are closely spaced, their labels alternate above and below the line to improve readability. Hovering over a station also displays its earlier planning name, such as “Ala Moana Center,” which can help readers recognize stations by their former or commonly known names. c. Framing: The map is initially centered near the middle of the route (approximately 21.355, −157.95) with a zoom level of 10.8. This framing keeps the full route from East Kapolei to Ala Moana visible while providing enough surrounding geographic context, including Pearl Harbor and the south shore. A wider view would include too much ocean, while a closer view could cut off one end of the route. Users can zoom in further when they need to read the more crowded downtown labels. d. Additional information: I added a title identifying the rail system and island, along with a subtitle that provides the total number of stations, the two terminal stations, and a note clarifying that the route segments are represented as straight lines rather than the actual track alignment. I also included a data-source credit and hover tooltips to provide additional information when users interact with the map.34:T4eb,### 2. Is this appropriate? It is not accurate. A choropleth map of a raw count primarily reflects where larger populations live rather than the prevalence or status of same-sex married households. Highest counts: California (≈102,600), Texas (≈63,500), Florida (≈63,100), and New York (≈51,800), followed by Illinois and Pennsylvania—all among the most populous states. Lowest counts: Montana (≈940), Wyoming, Alaska, South Dakota, and North Dakota (≈1,050–1,100 each), along with West Virginia—generally among the less populous states. These values are numerically reasonable, but the visualization can be misleading when the goal is to understand the distribution or prevalence of same-sex married households. For example, Texas appears “high” largely because of its large population, while states such as Montana and Wyoming occupy substantial visual area despite having relatively small populations. For a choropleth, rates or proportions are generally more appropriate than raw totals, because the geographic area of each state already provides a strong visual cue about magnitude. Normalizing the counts by an appropriate population or household denominator would therefore provide a more meaningful comparison across states.35:T44e,{ const div = html`

`; Plotly.newPlot(div, [{ type: "choropleth", locationmode: "USA-states", locations: states.map(d => d.code), z: states.map(d => d.pct), text: states.map(d => d.state), customdata: states.map(d => [d.sameSex, d.married]), colorscale: "Purples", zmin: 0.4, zmax: 2.1, // DC (6.0%) is an outlier; capping keeps contrast among states marker: {line: {color: "white", width: 0.8}}, colorbar: {title: {text: "% same-sex"}, ticksuffix: "%"}, hovertemplate: "%{text}
%{z:.2f}% of married-couple households
" + "%{customdata[0]:,} of %{customdata[1]:,}" }], { title: {text: "Share of Married-Couple Households That Are Same-Sex, 2021
^{Same-sex/all married-couple households · colour capped at 2.1% (DC = 6.0%)}", x: 0.02}, geo: {scope: "usa", projection: {type: "albers usa"}, showlakes: true, lakecolor: "#ffffff", bgcolor: "rgba(0,0,0,0)"}, margin: {l: 0, r: 0, t: 70, b: 0} }, {responsive: true}); return div; }36:[] 30:{"id":"3b6e23b0e5cb80b3","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-10-08T07:12:29.485Z","update_time":"$D2026-10-08T08:28:06.365Z","view_time":null,"first_public_time":"$D2026-10-08T08:09:51.797Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"31dbb6ced9453b54","login":"chayanika-devi2","name":"Chayanika Devi","avatar_url":null,"tier":"free_2026","bio":""},"version":172,"publish_version":172,"role":null,"authored":false,"authors":[{"type":"individual","id":"969dacb454405c0d","login":"chayanika-devi2","name":"Chayanika Devi","avatar_url":null,"tier":null,"bio":""}],"members":[{"type":"team","id":"31dbb6ced9453b54","login":"chayanika-devi2","name":"Chayanika Devi","avatar_url":null,"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":"\n# Assignment 3: Geospatial Visualizations\n# Chayanika Devi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"Plotly = fetch(\"https://cdn.jsdelivr.net/npm/plotly.js-dist-min@2.35.2/plotly.min.js\")\n .then(r => r.text())\n .then(code => {\n const module = {exports: {}};\n new Function(\"module\", \"exports\", \"define\", code)(module, module.exports, undefined);\n return module.exports;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"hart = fetch(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\").then(r => r.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"stations = [...hart.features].sort((a, b) => a.properties.ID - b.properties.ID)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"lat = stations.map(f => f.geometry.coordinates[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"lon = stations.map(f => f.geometry.coordinates[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"names = stations.map(f => f.properties.STATION.replace(\" Station\", \"\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"## 2. Visualizing the rail\nI used a `scattermap` trace with `mode: \"lines+markers+text\"`. The line connects the stations in ID order to form the \"rail\", the markers show the stations, and the text labels give the names. Labels alternate above and below the line so stations that are close together downtown don't overlap.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"### 2. Visualizing the rail\n\nI used a `scattermap` trace with `mode: \"lines+markers+text\"` to represent the rail. The line connects the stations in ID order to create the rail route, while the markers identify individual stations and the text labels display their names. To improve readability and minimize overlap, particularly in areas where stations are closely spaced downtown, the labels are alternated above and below the rail.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$33","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## 4. How well does the path represent the rail?\nIt captures the overall shape reasonably well. The stations are in the correct order (sorted by `ID`), and the route from Kapolei, around Pearl Harbor, past the airport and into downtown is recognisable.\n\nIt is only an approximation, though:\n- The real guideway curves along roads such as Farrington Highway, Kamehameha Highway and Dillingham Boulevard, but the chart draws straight segments between stations. Where stations are far apart (e.g. Waiawa → Kalauao), the straight line cuts across land the track doesn't actually cross.\n- The data says nothing about which segments are operating and which are still under construction, whether the track is elevated, or where the rail yard is.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"## What additional information would you need?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":" I added a title identifying the rail system and island, along with a subtitle that provides the total number of stations, the two terminal stations, and a note clarifying that the route segments are represented as straight lines rather than the actual track alignment. I also included a data-source credit and hover tooltips to provide additional information when users interact with the map.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## Married Households in the USA (2021)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"married = d3.csvParse(\n await fetch(\"https://raw.githubusercontent.com/nuritk/data/main/married.csv\").then(r => r.text()),\n d => ({\n state: d[\"State name\"].trim(),\n total: +d[\"Total Married\"].replace(/,/g, \"\"),\n married: +d[\"Married couple households\"].replace(/,/g, \"\"),\n opposite: +d[\"Married couple households Opposite-sex\"].replace(/,/g, \"\"),\n sameSex: +d[\"Married couple households Same-sex\"].replace(/,/g, \"\")\n })\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"stateCodes = ({\n \"Alabama\":\"AL\",\"Alaska\":\"AK\",\"Arizona\":\"AZ\",\"Arkansas\":\"AR\",\"California\":\"CA\",\"Colorado\":\"CO\",\n \"Connecticut\":\"CT\",\"Delaware\":\"DE\",\"District of Columbia\":\"DC\",\"Florida\":\"FL\",\"Georgia\":\"GA\",\n \"Hawaii\":\"HI\",\"Idaho\":\"ID\",\"Illinois\":\"IL\",\"Indiana\":\"IN\",\"Iowa\":\"IA\",\"Kansas\":\"KS\",\n \"Kentucky\":\"KY\",\"Louisiana\":\"LA\",\"Maine\":\"ME\",\"Maryland\":\"MD\",\"Massachusetts\":\"MA\",\n \"Michigan\":\"MI\",\"Minnesota\":\"MN\",\"Mississippi\":\"MS\",\"Missouri\":\"MO\",\"Montana\":\"MT\",\n \"Nebraska\":\"NE\",\"Nevada\":\"NV\",\"New Hampshire\":\"NH\",\"New Jersey\":\"NJ\",\"New Mexico\":\"NM\",\n \"New York\":\"NY\",\"North Carolina\":\"NC\",\"North Dakota\":\"ND\",\"Ohio\":\"OH\",\"Oklahoma\":\"OK\",\n \"Oregon\":\"OR\",\"Pennsylvania\":\"PA\",\"Rhode Island\":\"RI\",\"South Carolina\":\"SC\",\n \"South Dakota\":\"SD\",\"Tennessee\":\"TN\",\"Texas\":\"TX\",\"Utah\":\"UT\",\"Vermont\":\"VT\",\n \"Virginia\":\"VA\",\"Washington\":\"WA\",\"West Virginia\":\"WV\",\"Wisconsin\":\"WI\",\"Wyoming\":\"WY\",\n \"Puerto Rico\":\"PR\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"states = married\n .map(d => ({...d, code: stateCodes[d.state], pct: 100 * d.sameSex / d.married}))\n .filter(d => d.code && d.code !== \"PR\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"Inputs.table(states, {sort: \"pct\", reverse: true,\n format: {pct: x => x.toFixed(2) + \"%\"}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"### 1. Choropleth: number of same-sex married-couple households","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"{\n const div = html`

`;\n Plotly.newPlot(div, [{\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: states.map(d => d.code),\n z: states.map(d => d.sameSex),\n text: states.map(d => d.state),\n colorscale: \"Light Grey\",\n marker: {line: {color: \"white\", width: 0.8}},\n colorbar: {title: {text: \"Households\"}, tickformat: \",d\"},\n hovertemplate: \"%{text}
%{z:,} same-sex married-couple households\"\n }], {\n title: {text: \"Same-Sex Married-Couple Households by State, 2021
^{Raw count of households · Source: U.S. Census Bureau}\", x: 0.02},\n geo: {scope: \"usa\", projection: {type: \"albers usa\"}, showlakes: true, lakecolor: \"#ffffff\", bgcolor: \"rgba(0,0,0,0)\"},\n margin: {l: 0, r: 0, t: 70, b: 0}\n }, {responsive: true});\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$34","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"### 3. a choropleth that shows the ratio of “Married couple households Same-sex” out of the “Married couple households” data column","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"### 4. Is this suitable?\n\nIndeed — this is a far more suitable method of encoding. Normalizing by the number of married-couple households mitigates the impact of total population size, enabling the color to reflect the **relative occurrence of same-sex married couples**, which is appropriate for a choropleth map.\n\n- **Highest:** District of Columbia (6.0%, significantly surpassing any state), Delaware (2.0%), Massachusetts (1.7%), Nevada (1.6%), Florida and New York (1.6%), as well as California (1.6%).\n\n- **Lowest:** Montana (0.43%), Kansas (0.46%), Idaho (0.54%), West Virginia (0.56%), and South Dakota (0.62%).\n\nIn general, the trend appears reasonable: larger proportions are found in more urban and socially progressive regions, alongside states with sizable LGBTQ+ populations and a longer history of marriage equality. For instance, Massachusetts was the first state in the U.S. to legalize same-sex marriage.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"### 5. Design Choices\n\n**a. Base map.** The built-in `geo` feature of Plotly with `scope: \"usa\"` and the **Albers USA** projection.\n\nThis projection preserves area equivalence (which is crucial for choropleths, ensuring no state appears larger than its actual size)\n\nand includes Alaska and Hawaiʻi so that all 50 states plus DC are displayed together. There are no street tiles —\n\nthe focus here is solely on state boundaries. Thin white lines distinguish the states clearly. Puerto Rico is included in the CSV but is not represented in the USA-states geometry, thus it is omitted (as indicated in the code).\n\n**b. Colour scale.** Single-hue **sequential** scales (Blues for counts, Purples for the\n\nratio) are used since the data comprises ordered, non-negative values without a significant midpoint — a diverging or rainbow scale would suggest a center or categories that do not exist. Light = low,","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### What additional information (if any) would you need to create a bubble map for this data? Would that be a better visual encoding for the data?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"I added subtitles explaining the formula or unit and the data source, as well as headers that make the measure and year obvious. The units—households for the count map and percentages for the ratio map—are indicated by the colorbars. In addition to the state name and precise value, hover tooltips additionally show the underlying household counts for the ratio map to provide more detail.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2"}} 31:"$30:body"