2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | Joonhee Kim | Observable"}] 32:T824,codes = [ {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:"District of Columbia", abbreviation:"DC"}, {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"} ]33:T52d,{ const maxSameSex = Math.max(...married.map(d => d.sameSex)); let data = [{ type: "choropleth", locationmode: "USA-states", locations: married.map(d => d.code), z: married.map(d => d.sameSex), text: married.map(d => d.state), zmin: 0, zmax: maxSameSex, colorscale: [ [0.00, "#f7fbff"], [0.10, "#deebf7"], [0.20, "#c6dbef"], [0.30, "#9ecae1"], [0.40, "#6baed6"], [0.55, "#4292c6"], [0.70, "#2171b5"], [1.00, "#084594"] ], colorbar: { title: { text: "Households" }, thickness: 10, tickformat: "," }, marker: { line: { color: "white", width: 0.8 } }, hovertemplate: "%{text}
" + "Same-sex married households: %{z:,}" + "" }]; let layout = { title: { text: "Same-Sex Married Couple Households by State, 2021", x: 0.5, xanchor: "center", font: { size: 20 } }, geo: { scope: "usa", projection: { type: "albers usa" } }, dragmode: false, height: 550, margin: { r: 20, t: 80, b: 10, l: 20 } }; const div = DOM.element("div"); Plotly.newPlot(div, data, layout); return div; }34:T551,{ const maxRatio = Math.max(...married.map(d => d.ratio)); let data = [{ type: "choropleth", locationmode: "USA-states", locations: married.map(d => d.code), z: married.map(d => d.ratio), text: married.map(d => d.state), zmin: 0, zmax: maxRatio, colorscale: [ [0.00, "#f7fbff"], [0.10, "#deebf7"], [0.20, "#c6dbef"], [0.30, "#9ecae1"], [0.40, "#6baed6"], [0.55, "#4292c6"], [0.70, "#2171b5"], [1.00, "#084594"] ], colorbar: { title: { text: "Same-Sex Share" }, thickness: 10, tickformat: ".1%" }, marker: { line: { color: "white", width: 0.8 } }, hovertemplate: "%{text}
" + "Same-sex share: %{z:.2%}" + "" }]; let layout = { title: { text: "Ratio of Same-Sex Married Households
" + "to Married Couple Households, 2021", x: 0.5, xanchor: "center", font: { size: 20 } }, geo: { scope: "usa", projection: { type: "albers usa" } }, dragmode: false, height: 600, margin: { r: 30, t: 110, b: 10, l: 30 } }; const div = DOM.element("div"); Plotly.newPlot(div, data, layout); return div; }35:[] 30:{"id":"28754dba2c324aec","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"bca836a1661597a059296e1e4f26ccdfbd2c0dc57a8d9fe4d4ab5c365c945147","access_level":"public","create_time":"$D2026-10-04T07:54:22.471Z","update_time":"$D2026-10-05T02:22:27.263Z","view_time":null,"first_public_time":"$D2026-10-05T02:38:25.443Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6d2d009dbb13ed46","login":"joonhee-kim","name":"Joonhee Kim","avatar_url":null,"tier":"free_2026"},"version":196,"publish_version":196,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c8365c9919ecb5b","login":"joonhee-kim","name":"Joonhee Kim","avatar_url":null,"tier":null}],"members":[{"type":"team","id":"6d2d009dbb13ed46","login":"joonhee-kim","name":"Joonhee Kim","avatar_url":null,"tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Assignment 3: Geospatial Visualizations","cells":[{"id":3,"value":"# Assignment 3: Geospatial Visualizations","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"## HART Rail Stations","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"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":9,"value":"hart = 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":11,"value":"hart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"hart.type","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"hart.features.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"hart.features[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"### Exploring the GeoJSON\n\nThe file is a GeoJSON FeatureCollection containing 21 station features. Each station is represented as a Point. The geographic coordinates are stored in [longitude, latitude] order, and the station name is stored in the STATION property.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"stations = hart.features\n .slice()\n .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":57,"value":"I first sorted the station features by ID so that the stations would be connected in route order. I then used JavaScript's map() method to extract the latitude, longitude, and station name from each feature into three separate arrays.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"stations.map(d => d.properties.STATION)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"lat = stations.map(d => d.geometry.coordinates[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"lon = stations.map(d => d.geometry.coordinates[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"stationNames = stations.map(d => d.properties.STATION)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"({lat, lon, stationNames})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"{\n let data = [{\n type: \"scattermap\",\n\n mode: \"lines+markers+text\",\n\n lon: lon,\n lat: lat,\n text: stationNames,\n\n textposition: \"top center\",\n\n textfont: {\n size: 9\n },\n\n marker: {\n size: 9,\n color: \"navy\"\n },\n\n line: {\n width: 3,\n color: \"crimson\"\n },\n\n hovertemplate:\n \"%{text}
\" +\n \"Latitude: %{lat:.4f}
\" +\n \"Longitude: %{lon:.4f}\" +\n \"\"\n }];\n\n let layout = {\n\n title: {\n text: \"HART Rail Stations\",\n x: 0.5,\n xanchor: \"center\"\n },\n\n map: {\n style: \"carto-positron\",\n\n center: {\n lat: 21.345,\n lon: -157.95\n },\n\n zoom: 10\n },\n\n height: 600,\n\n margin: {\n r: 0,\n t: 70,\n b: 0,\n l: 0\n }\n };\n\n const div = DOM.element(\"div\");\n\n Plotly.newPlot(div, data, layout);\n\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"### Styling Choices\n\nI used the Carto Positron base map because its light and relatively simple background makes the stations and rail line easy to distinguish.\n\nI used circular markers for individual stations and a thicker line to connect the stations. I used contrasting colors for the station markers and rail line so that the two types of information can be distinguished easily. Station names are displayed in relatively small text to reduce visual clutter, while hovering over a station provides its name and coordinates.\n\nI centered the map on the HART corridor and selected a zoom level that allows the entire set of stations to be visible while still providing enough geographic context to understand where the route is located on Oʻahu.\n\nI also added the title \"HART Rail Stations\" and interactive hover information.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"### How Well Does the Line Represent the Rail Path?\n\nThe line provides a useful approximation of the overall rail route because the stations are connected in station order. However, it does not show the exact physical path of the rail. The visualization simply draws straight line segments between consecutive station locations.\n\nTo represent the actual rail alignment, I would need geographic data describing the rail track between stations, such as a GeoJSON `LineString` containing coordinates along the rail alignment.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"## Married Households in the United States","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"marriedRaw = d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/married.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"marriedRaw[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"toNumber = str => parseInt(str.replace(/,/g, \"\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"married = marriedRaw\n .filter(d => d[\"State name\"] !== \"Puerto Rico\")\n .map(d => {\n\n let total =\n toNumber(d[\"Married couple households\"]);\n\n let sameSex =\n toNumber(d[\"Married couple households Same-sex\"]);\n\n let stateCode =\n codes.find(c => c.name === d[\"State name\"]);\n\n return {\n state: d[\"State name\"],\n code: stateCode ? stateCode.abbreviation : \"\",\n marriedHouseholds: total,\n sameSex: sameSex,\n ratio: sameSex / total,\n percentage: 100 * sameSex / total\n };\n\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"married.slice(0, 5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"countSummary = ({\n highest:\n married\n .slice()\n .sort((a, b) => b.sameSex - a.sameSex)\n .slice(0, 5)\n .map(d => ({\n state: d.state,\n households: d.sameSex\n })),\n\n lowest:\n married\n .slice()\n .sort((a, b) => a.sameSex - b.sameSex)\n .slice(0, 5)\n .map(d => ({\n state: d.state,\n households: d.sameSex\n }))\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"### Interpreting the Raw-Count Choropleth\n\nThe raw-count map shows that California has the largest number of same-sex married couple households, followed by states such as Texas, Florida, and New York. States with much smaller populations, including Montana and Wyoming, have relatively low counts.\n\nThis pattern makes sense because the map displays absolute numbers. Large states tend to contain more households of all types simply because they have larger populations. Therefore, this visualization is useful for showing where the greatest numbers of same-sex married households are located, but it is not ideal for comparing the relative prevalence of same-sex married households across states.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"ratioSummary = ({\n highest:\n married\n .slice()\n .sort((a, b) => b.ratio - a.ratio)\n .slice(0, 5)\n .map(d => ({\n state: d.state,\n ratio: d.ratio\n })),\n\n lowest:\n married\n .slice()\n .sort((a, b) => a.ratio - b.ratio)\n .slice(0, 5)\n .map(d => ({\n state: d.state,\n ratio: d.ratio\n }))\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"### Interpreting the Ratio Choropleth\n\nThe ratio map provides a more meaningful comparison of the relative prevalence of same-sex married households across states because it accounts for the total number of married couple households in each state.\n\nThe pattern differs substantially from the raw-count map. For example, California has the largest absolute number of same-sex married households, but it does not have the highest ratio. The District of Columbia has the highest ratio, followed by Delaware and Massachusetts. Montana, Kansas, and Idaho have some of the lowest ratios.\n\nFor comparing states, I think this visualization is more appropriate than the raw-count map because it accounts for differences in the total number of married couple households across states.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"### Choropleth Styling Choices\n\nFor both choropleths, I used Plotly's U.S. geographic map with an Albers USA projection. This is appropriate because the unit of analysis is the U.S. state, and the projection provides a familiar view of the United States while also displaying Alaska and Hawaii.\n\nI used a sequential blue color scale, with lighter shades representing lower values and darker shades representing higher values. A diverging color scale would be less appropriate because there is no meaningful midpoint separating two different types of values.\n\nI used the same general color scale for both maps to maintain visual consistency. I also added descriptive titles, labeled color bars, state boundaries, and hover information that displays the exact value for each state.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"### Bubble Map\n\nA bubble map, or proportional symbol map, represents values using the size of symbols placed at geographic locations. For this dataset, the bubbles could represent either the number or the ratio of same-sex married households. If explicit locations are required, I would need latitude and longitude coordinates for a representative point in each state, such as the state centroid.\nA bubble map may be particularly useful for displaying the absolute counts, because symbol size represents magnitude without filling the entire geographic area of a state. However, raw counts may still largely reflect differences in population. For the ratio, the choropleth may be more intuitive because it represents a normalized characteristic of each state. Bubble maps may also suffer from overlapping symbols, especially in the Northeast.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 31:"$30:body"