2c:null 2d:["$","title",null,{"children":"ICS 684 Assignment 3: Geospatial Visualizations | Rylee Au | Observable"}] 32:T56f,### HART Rail Stations — Analysis **Base map:** I chose the Carto Positron base map because it provides geographic context without distracting from the station markers and rail line. The neutral background makes the visualization easier to interpret. **Line, point, and text styling:** I used blue circular markers to represent individual stations and an orange line to connect them. These colors contrast with the base map, making the stations and approximate route easy to distinguish. I included station names as labels and hover information. **Map framing:** I centered the map on southern Oʻahu and selected a zoom level that shows the rail corridor from East Kapolei toward Honolulu. This provides context for the system's geographic coverage. **Additional information:** I included a descriptive title and station labels to make the visualization understandable without additional explanation. **Accuracy of the rail path:** The connected line provides a general representation of the rail route, but it is not completely accurate because Plotly connects the station coordinates using straight lines. The actual rail tracks include curves and other changes in direction. To represent the route more accurately, I would need geographic line data containing the actual track alignment. I would also need information about which stations are currently operational versus planned.33:T45c,let codes = [ ["Alabama","AL"], ["Alaska","AK"], ["Arizona","AZ"], ["Arkansas","AR"], ["California","CA"], ["Colorado","CO"], ["Connecticut","CT"], ["Delaware","DE"], ["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"], ["District of Columbia","DC"], ["Puerto Rico","PR"] ].map(d => ({name: d[0], code: d[1]}))34:Tba4,### Married Households USA — Analysis **Is the absolute-count choropleth appropriate?** The first choropleth shows the total number of same-sex married-couple households across U.S. states. California has the highest number (102,587), followed by Texas (63,510), Florida (63,127), and New York (51,750). Montana (942), Wyoming (1,046), and Alaska and South Dakota (1,079 each) have some of the lowest counts. These results make sense because states with larger populations generally have more households. However, the visualization can be misleading when comparing states because it does not account for population differences. States with larger populations are more likely to have higher absolute counts, regardless of the proportion of same-sex married-couple households. **Is the ratio choropleth appropriate?** The ratio choropleth provides a more meaningful comparison because it normalizes same-sex married-couple households by the total number of married-couple households in each state. The District of Columbia has the highest percentage (approximately 6.0%), followed by Delaware (approximately 2.0%) and Massachusetts (approximately 1.7%). Montana, Kansas, and Idaho have some of the lowest percentages. This makes sense because the absolute number of households does not necessarily correspond to their proportion within a state's population. The percentage map is more appropriate for comparing relative prevalence across states, while the absolute-count map provides information about total household numbers. **Base map:** I used Plotly's USA outline map with the Albers USA projection, as demonstrated in the class choropleth example. This allows the states to be compared in a familiar geographic layout. **Color scale:** I used a sequential blue color scale for absolute counts and Viridis for percentages. Both scales communicate differences in quantitative values, with darker or more intense colors representing higher values. The percentage map starts at zero because the data represents proportions. **Additional information:** I added descriptive titles identifying the metric and year. Both maps have color bars with appropriate units and hover information displaying state names and exact values. **Would a bubble map be better?** To create a bubble map, I would need geographic coordinates for each state, such as the latitude and longitude of its centroid. These coordinates would allow me to position a bubble over each state and size it according to the number of same-sex married-couple households. A bubble map could be more effective for absolute counts because the geographic size of a state does not correspond to the number of households living there. However, overlapping bubbles could make smaller northeastern states difficult to interpret. For percentages, I would prefer the choropleth because it clearly shows state-level geographic patterns. Both approaches have strengths depending on the information being communicated.35:[] 30:{"id":"9f9eb9723d9cb292","slug":"ics-684-assignment-3-geospatial-visualizations","title":"ICS 684 Assignment 3: Geospatial Visualizations","thumbnail":"67433fb0ce454790496687c75654093aa90bb4ddab01f8def30c8c8a9e6c6da2","access_level":"public","create_time":"$D2026-10-08T02:15:41.389Z","update_time":"$D2026-10-09T00:56:46.162Z","view_time":null,"first_public_time":"$D2026-10-09T00:57:28.141Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"32a45d75a6a3e05f","login":"ryleeau","name":"Rylee Au","avatar_url":"https://avatars-next.observableusercontent.com/da325d7b7a28d095e1c79f5b400cd1155a3f1214a140c3c5b6b6f994fd9fc721","tier":"free_2026","bio":""},"version":121,"publish_version":121,"role":null,"authored":false,"authors":[{"type":"individual","id":"8df33a8e270158ac","login":"ryleeau","name":"Rylee Au","avatar_url":"https://avatars-next.observableusercontent.com/da325d7b7a28d095e1c79f5b400cd1155a3f1214a140c3c5b6b6f994fd9fc721","tier":null,"bio":""}],"members":[{"type":"team","id":"32a45d75a6a3e05f","login":"ryleeau","name":"Rylee Au","avatar_url":"https://avatars-next.observableusercontent.com/da325d7b7a28d095e1c79f5b400cd1155a3f1214a140c3c5b6b6f994fd9fc721","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":"ICS 684 Assignment 3: Geospatial Visualizations","cells":[{"id":1,"value":"# ICS 684 Assignment 3: Geospatial Visualizations\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"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":"import Plotly from \"npm:plotly.js-dist-min\"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"let hartData = d3.json(\n \"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\"\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"hartData","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"#### Sorting the stations into rail sequence","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"let stations = hartData.features.sort(\n (a, b) => a.properties.ID - b.properties.ID\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"let stationLat = stations.map(d => d.geometry.coordinates[1])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"let stationLon = stations.map(d => d.geometry.coordinates[0])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"let stationNames = stations.map(d => d.properties.STATION)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"hartMap = {\n const data = [{\n type: \"scattermap\",\n mode: \"markers+lines+text\",\n lat: stationLat,\n lon: stationLon,\n text: stationNames,\n textposition: \"top center\",\n textfont: {\n size: 10,\n color: \"black\"\n },\n marker: {\n size: 10,\n color: \"blue\"\n },\n line: {\n color: \"orange\",\n width: 3\n },\n hovertemplate: \"%{text}\"\n }];\n\n const layout = {\n title: \"HART Skyline Rail Stations on Oʻahu\",\n map: {\n style: \"carto-positron\",\n center: {\n lat: 21.35,\n lon: -157.95\n },\n zoom: 10.5\n },\n margin: {\n l: 0,\n r: 0,\n t: 50,\n b: 0\n }\n };\n\n const div = DOM.element(\"div\");\n await Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"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":24,"value":"This section examines the distribution of same-sex married-couple households across U.S. states using 2021 Census-derived data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"let marriedRaw = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/married.csv\"\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"marriedRaw","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$33","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"let marriedData = marriedRaw.map(d => {\n const sameSex = parseInt(\n d[\"Married couple households Same-sex\"].replace(/,/g, \"\")\n );\n\n const married = parseInt(\n d[\"Married couple households\"].replace(/,/g, \"\")\n );\n\n return {\n state: d[\"State name\"],\n code: codes.find(c => c.name === d[\"State name\"])?.code,\n sameSex: sameSex,\n married: married,\n ratio: sameSex / married\n };\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"marriedData","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"This is the absolute 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":30,"value":"marriedCountMap = {\n const data = [{\n type: \"choropleth\",\n locationmode: \"USA-states\",\n\n locations: marriedData.map(d => d.code),\n z: marriedData.map(d => d.sameSex),\n text: marriedData.map(d => d.state),\n\n colorscale: \"Reds\",\n autocolorscale: false,\n\n marker: {\n line: {\n color: \"White\",\n width: 0.5\n }\n },\n\n colorbar: {\n title: {\n text: \"Households\"\n }\n },\n\n hovertemplate:\n \"%{text}
\" +\n \"Same-sex households: %{z:,}\"\n }];\n\n const layout = {\n title: \"Same-Sex Married-Couple Households by State (2021)\",\n\n geo: {\n scope: \"usa\",\n projection: {\n type: \"albers usa\"\n },\n showlakes: true,\n lakecolor: \"white\"\n },\n\n margin: {\n l: 0, r: 0, t: 50, b: 0\n }\n };\n\n const div = DOM.element(\"div\");\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"This shows the ratio of same-sex married-couple households to all married-couple households.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"marriedRatioMap = {\n const data = [{\n type: \"choropleth\",\n locationmode: \"USA-states\",\n\n locations: marriedData.map(d => d.code),\n z: marriedData.map(d => d.ratio * 100),\n text: marriedData.map(d => d.state),\n\n colorscale: \"Viridis\",\n autocolorscale: false,\n zmin: 0,\n\n marker: {\n line: {\n color: \"white\",\n width: 0.5\n }\n },\n\n colorbar: {\n title: {\n text: \"Percentage\"\n },\n ticksuffix: \"%\"\n },\n\n hovertemplate:\n \"%{text}
\" +\n \"Same-sex share: %{z:.2f}%\"\n }];\n\n const layout = {\n title: \"Percentage of Married-Couple Households That Are Same-Sex (2021)\",\n\n geo: {\n scope: \"usa\",\n projection: {\n type: \"albers usa\"\n },\n showlakes: true,\n lakecolor: \"white\"\n },\n\n margin: {\n l: 0, r: 0, t: 50, b: 0\n }\n };\n\n const div = DOM.element(\"div\");\n Plotly.newPlot(div, data, layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"let countRanking = [...marriedData]\n .sort((a, b) => b.sameSex - a.sameSex)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"let ratioRanking = [...marriedData]\n .sort((a, b) => b.ratio - a.ratio)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"({\n highestCounts: countRanking.slice(0, 5),\n lowestCounts: countRanking.slice(-5).reverse(),\n highestRatios: ratioRanking.slice(0, 5),\n lowestRatios: ratioRanking.slice(-5).reverse()\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"