2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | David Gieselman | Observable"}] 32:T4bd,const stateCodesA3 = new Map([ ["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"] ]); display(stateCodesA3);33:[] 30:{"id":"9c77791fe90143d5","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"dd294c4bc5164f963ceee3d915831db425d254f17e28d12466352cd23cf01edc","access_level":"public","create_time":"$D2026-10-09T09:00:04.642Z","update_time":"$D2026-10-09T09:29:30.279Z","view_time":null,"first_public_time":"$D2026-10-09T09:30:37.260Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0b077b36feace2f5","login":"david-gieselman","name":"David Gieselman","avatar_url":"https://avatars-next.observableusercontent.com/ee52462974ab632a71cad913f94b1d8dcfb3d47237c2d56a51e6e320030563df","tier":"free_2026","bio":""},"version":111,"publish_version":111,"role":null,"authored":false,"authors":[{"type":"individual","id":"94171e73c32aaec9","login":"david-gieselman","name":"David Gieselman","avatar_url":"https://avatars-next.observableusercontent.com/ee52462974ab632a71cad913f94b1d8dcfb3d47237c2d56a51e6e320030563df","tier":null,"bio":""}],"members":[{"type":"team","id":"0b077b36feace2f5","login":"david-gieselman","name":"David Gieselman","avatar_url":"https://avatars-next.observableusercontent.com/ee52462974ab632a71cad913f94b1d8dcfb3d47237c2d56a51e6e320030563df","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\n\nThis notebook explores two geospatial datasets. The first section maps the HART rail stations on Oʻahu and connects the stations to approximate the rail path. The second section uses choropleth maps to examine same-sex married-couple households across the United States.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## HART Rail Stations\n\nThe HART dataset is provided as a GeoJSON FeatureCollection. Each feature represents one rail station. I will first inspect the GeoJSON structure, then extract longitude, latitude, and station names into separate arrays.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"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":4,"value":"import * as d3 from \"npm:d3\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const hartGeoA3 = await fetch(\n \"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\"\n).then(response => response.json());\n\ndisplay(hartGeoA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const hartPreviewA3 = {\n type: hartGeoA3.type,\n numberOfStations: hartGeoA3.features.length,\n firstFeature: hartGeoA3.features[0]\n};\n\ndisplay(hartPreviewA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"The file is a GeoJSON FeatureCollection. The stations are stored in the `features` array.\n\nEach station has a `geometry` object containing its geographic coordinates and a `properties` object containing information about the station.\n\nBecause each station is represented as a Point, `geometry.coordinates` contains the values in the order `[longitude, latitude]`. The station name is stored in `properties.STATION`.\n\nI can therefore use `map()` to create separate arrays containing the longitude, latitude, and station names.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"const hartStationsA3 = hartGeoA3.features\n .slice()\n .sort((a, b) => a.properties.ID - b.properties.ID);\n\ndisplay(hartStationsA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const hartLonA3 = hartStationsA3.map(\n station => station.geometry.coordinates[0]\n);\n\ndisplay(hartLonA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const hartLatA3 = hartStationsA3.map(\n station => station.geometry.coordinates[1]\n);\n\ndisplay(hartLatA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"const hartNamesA3 = hartStationsA3.map(\n station => station.properties.STATION\n);\n\ndisplay(hartNamesA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"const hartTraceA3 = {\n type: \"scattermap\",\n mode: \"markers+text+lines\",\n\n lon: hartLonA3,\n lat: hartLatA3,\n\n text: hartNamesA3,\n textposition: \"top center\",\n\n textfont: {\n size: 10\n },\n\n marker: {\n size: 9,\n color: \"rgb(30, 100, 180)\"\n },\n\n line: {\n width: 4,\n color: \"rgb(30, 100, 180)\"\n },\n\n hovertemplate:\n \"%{text}
\" +\n \"Latitude: %{lat}
\" +\n \"Longitude: %{lon}\" +\n \"\",\n\n name: \"HART Stations\"\n};\n\nconst hartLayoutA3 = {\n title: {\n text: \"HART Rail Stations on Oʻahu\"\n },\n\n map: {\n style: \"carto-positron\",\n\n center: {\n lat: 21.345,\n lon: -157.948\n },\n\n zoom: 10.7\n },\n\n height: 650,\n\n margin: {\n r: 0,\n t: 50,\n b: 0,\n l: 0\n }\n};\n\nconst hartChartA3 = document.createElement(\"div\");\n\nawait Plotly.newPlot(\n hartChartA3,\n [hartTraceA3],\n hartLayoutA3,\n {responsive: true}\n);\n\ndisplay(hartChartA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"### HART Styling Choices\n\nI used the Carto Positron base map because its relatively simple and neutral appearance provides geographic context without competing visually with the rail data.\n\nThe stations are shown using blue circular markers connected by a blue line. Using the same color for both makes it clear that the points and line represent parts of the same transportation system.\n\nStation names are placed near their markers, and hovering over a station displays its name and geographic coordinates.\n\nI framed the map so that the initial view includes the complete HART station corridor while still showing enough of the surrounding area to understand its location on Oʻahu.\n\nI also added a descriptive title identifying the data as HART rail stations on Oʻahu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"### How Well Does the Line Represent the Rail?\n\nThe connected line provides a useful approximation of the rail route, but it does not perfectly represent the physical path of the tracks.\n\nThe visualization simply draws straight lines between consecutive station locations. The real rail alignment contains curves and follows a specific path between those stations.\n\nTo accurately show the physical rail route, I would need additional geographic data describing the rail alignment itself, such as a GeoJSON LineString containing points along the tracks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Same-Sex Married-Couple Households\n\nThe second dataset contains 2021 married-household data by state.\n\nI will create two choropleth maps. The first uses the raw number of same-sex married-couple households in each state. The second normalizes the data by calculating the percentage of all married-couple households that are same-sex married-couple households.\n\nComparing these maps will help show how using raw counts versus proportions can produce different geographic patterns.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"const marriedRawA3 = await d3.csv(\n \"https://raw.githubusercontent.com/nuritk/data/main/married.csv\"\n);\n\ndisplay(marriedRawA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"const marriedPreviewA3 = {\n numberOfRows: marriedRawA3.length,\n columns: Object.keys(marriedRawA3[0]),\n firstFiveRows: marriedRawA3.slice(0, 5)\n};\n\ndisplay(marriedPreviewA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$32","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"const marriedDataA3 = marriedRawA3\n .map(row => {\n const stateName =\n row[\"State name\"] ?? row[\"State name\"] ?? \"\";\n\n const marriedCouple = Number(\n String(row[\"Married couple households\"])\n .replace(/,/g, \"\")\n );\n\n const sameSex = Number(\n String(row[\"Married couple households Same-sex\"])\n .replace(/,/g, \"\")\n );\n\n const stateCode = stateCodesA3.get(stateName);\n\n return {\n stateName: stateName,\n stateCode: stateCode,\n marriedCouple: marriedCouple,\n sameSex: sameSex,\n sameSexRatio: (sameSex / marriedCouple) * 100\n };\n })\n .filter(row => row.stateCode !== undefined);\n\ndisplay(marriedDataA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"const marriedCheckA3 = marriedDataA3.map(row => ({\n state: row.stateName,\n code: row.stateCode,\n marriedCoupleHouseholds: row.marriedCouple,\n sameSexHouseholds: row.sameSex,\n sameSexPercent: row.sameSexRatio\n}));\n\ndisplay(marriedCheckA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"const rawMarriageTraceA3 = {\n type: \"choropleth\",\n\n locationmode: \"USA-states\",\n\n locations: marriedDataA3.map(\n d => d.stateCode ?? \"\"\n ),\n\n z: marriedDataA3.map(\n d => d.sameSex\n ),\n\n text: marriedDataA3.map(\n d => d.stateName\n ),\n\n colorscale: \"Viridis\",\n\n marker: {\n line: {\n color: \"white\",\n width: 1\n }\n },\n\n colorbar: {\n title: {\n text: \"Households\"\n }\n },\n\n hovertemplate:\n \"%{text}
\" +\n \"Same-sex married-couple households: %{z:,}\" +\n \"\"\n};\n\nconst rawMarriageLayoutA3 = {\n title: {\n text: \"Same-Sex Married-Couple Households by State\"\n },\n\n geo: {\n scope: \"usa\",\n showlakes: true\n },\n\n height: 600,\n\n margin: {\n r: 20,\n t: 50,\n b: 20,\n l: 20\n }\n};\n\nconst rawMarriageChartA3 =\n document.createElement(\"div\");\n\nawait Plotly.newPlot(\n rawMarriageChartA3,\n [rawMarriageTraceA3],\n rawMarriageLayoutA3,\n {responsive: true}\n);\n\ndisplay(rawMarriageChartA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"const marriedRankingsA3 = {\n highestRaw: [...marriedDataA3]\n .sort((a, b) => b.sameSex - a.sameSex)\n .slice(0, 5)\n .map(d => ({\n state: d.stateName,\n households: d.sameSex\n })),\n\n lowestRaw: [...marriedDataA3]\n .sort((a, b) => a.sameSex - b.sameSex)\n .slice(0, 5)\n .map(d => ({\n state: d.stateName,\n households: d.sameSex\n })),\n\n highestRatio: [...marriedDataA3]\n .sort((a, b) => b.sameSexRatio - a.sameSexRatio)\n .slice(0, 5)\n .map(d => ({\n state: d.stateName,\n percent: d.sameSexRatio\n })),\n\n lowestRatio: [...marriedDataA3]\n .sort((a, b) => a.sameSexRatio - b.sameSexRatio)\n .slice(0, 5)\n .map(d => ({\n state: d.stateName,\n percent: d.sameSexRatio\n }))\n};\n\ndisplay(marriedRankingsA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"### Interpretation of the Raw Household Counts\n\nThe raw-count choropleth shows substantial differences between states, but raw totals are not necessarily the best way to compare the prevalence of same-sex married households.\n\nCalifornia has the highest raw number of same-sex married-couple households, while other highly populated states such as Texas, Florida, and New York also have high values. Less populated states such as Montana and Wyoming have much smaller raw totals.\n\nThis pattern makes sense because population size strongly affects the number of households in a state. A state with more people will generally have more married couples of all types.\n\nFor this reason, the raw-count map is useful for showing where the largest total numbers of same-sex married households are located, but it is less useful for comparing how common these households are relative to each state's population of married couples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"const ratioMarriageTraceA3 = {\n type: \"choropleth\",\n\n locationmode: \"USA-states\",\n\n locations: marriedDataA3.map(\n d => d.stateCode ?? \"\"\n ),\n\n z: marriedDataA3.map(\n d => d.sameSexRatio\n ),\n\n text: marriedDataA3.map(\n d => d.stateName\n ),\n\n colorscale: \"Viridis\",\n\n marker: {\n line: {\n color: \"white\",\n width: 1\n }\n },\n\n colorbar: {\n title: {\n text: \"Percent\"\n }\n },\n\n hovertemplate:\n \"%{text}
\" +\n \"Same-sex share: %{z:.2f}%\" +\n \"\"\n};\n\nconst ratioMarriageLayoutA3 = {\n title: {\n text: \"Same-Sex Share of Married-Couple Households\"\n },\n\n geo: {\n scope: \"usa\",\n showlakes: true\n },\n\n height: 600,\n\n margin: {\n r: 20,\n t: 50,\n b: 20,\n l: 20\n }\n};\n\nconst ratioMarriageChartA3 =\n document.createElement(\"div\");\n\nawait Plotly.newPlot(\n ratioMarriageChartA3,\n [ratioMarriageTraceA3],\n ratioMarriageLayoutA3,\n {responsive: true}\n);\n\ndisplay(ratioMarriageChartA3);","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"### Interpretation of the Ratio\n\nThe ratio map provides a different and, for comparison purposes, more useful view of the data because it controls for differences in the total number of married-couple households in each state.\n\nThe District of Columbia has a particularly high percentage. States such as Delaware, Massachusetts, and Nevada also appear near the high end of the distribution. States such as Montana, Kansas, Idaho, and West Virginia have comparatively low percentages.\n\nThis is noticeably different from the raw-count map. A state does not need to have a very large population to have a high proportion of same-sex married-couple households.\n\nFor this reason, I think the ratio map is more appropriate when the goal is to compare the relative prevalence of same-sex married households between states.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"### Choropleth Styling Choices\n\nFor both choropleths I used Plotly's built-in United States geography. This keeps the visualization focused on the states being compared and avoids adding unnecessary geographic detail.\n\nI used the Viridis sequential color scale because both variables are quantitative values that range from low to high. A sequential color scale makes differences in magnitude relatively easy to interpret.\n\nWhite borders were added between states so the individual geographic regions are easier to distinguish.\n\nEach visualization includes a descriptive title and a labeled color scale. Hover information also provides the state name and exact value. The raw-count map displays the number of same-sex married-couple households, while the second map displays their percentage of 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":"### Could This Data Be Displayed as a Bubble Map?\n\nTo make a bubble map from this dataset, I would need a geographic point for each state, such as the latitude and longitude of its geographic centroid or population centroid. The current CSV identifies each state by name but does not provide coordinates.\n\nA bubble map could be a useful alternative for displaying the raw number of same-sex married-couple households. The area of each circle could represent the total number of households, allowing the marks to encode quantity rather than filling the entire area of each state.\n\nHowever, bubble sizes can be difficult to compare precisely, and circles may overlap in geographically small states, particularly in the northeastern United States.\n\nFor the normalized ratio, I think the choropleth is the stronger visualization because each state is already a meaningful geographic region and the color can directly encode the proportion for that state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## Conclusion\n\nThese visualizations demonstrate two different uses of geographic data.\n\nThe HART visualization uses individual point coordinates to show station locations and connects those points to approximate a transportation route. It also demonstrates that point locations alone are not enough to reconstruct the exact physical path between those locations.\n\nThe married-household visualizations associate statistical values with geographic regions. Comparing the two choropleths also demonstrates the importance of normalization. Raw household counts are strongly influenced by the population of each state, while the ratio provides a more meaningful way to compare the relative prevalence of same-sex married-couple households between states.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 31:"$30:body"