2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | Aris Carlos | Observable"}] 32:Tcbb,### Explanations #### Processing the Data When I first reviewed the GeoJSON, I found the structure a little confusing. However, by parsing the data as JSON in ObservableHQ, I quickly determined what I needed for my visualization. The data for the actual stations was located in `features`. From `features`, I extracted each station's coordinates: latitude from `geometry.coordinates[1]` and longitude from `geometry.coordinates[0]`. With that, I used `.map()` to put the data into arrays, which is enough to create a visualization with PlotlyJS. For my visualization, though, I explored the properties and found it useful to also include `properties.STATION` (the given Hawaiian station name) and `properties.station_name_FEIS` (the alternative station name). #### Styling Choices For my map visualization, I chose `carto-positron` because it provides good geographical detail while offering strong contrast for my plotted data points and connecting lines, which makes it easier on viewers' eyes. When experimenting with line/point/text styles for this data, I chose `markers+lines` because it achieves the main goal: showing what the Honolulu Skyline rail looks like, with all station points plotted and connected by lines. I wanted to go with `markers+text+lines` initially, where I would also label each point with its station name, but not all station name labels appeared correctly: some of the text blended in with the points and lines, and some of the text didn't render at all, especially where the distance between the rail stations was smaller in the main city area. I framed the map around a central coordinate and chose a zoom level that captured both endpoints of the rail line from East Kapolei to Ala Moana Center, which, to me, allowed for better focus on the main aspects of the visualization. Lastly, for additional information, I added a title labeling my map visualization as a route map of the Honolulu Skyline. I also made it so users can hover over each station to view both the Hawaiian and alternative station names, especially since the alternative station name includes details about the area it serves. #### Rail Path Accuracy To me, the rail path in my visualization is fairly accurate in some segments, mainly where the guideway is relatively straight. It's less accurate where the guideway needs to turn to navigate around the landscape, existing buildings, and infrastructure. For example, you can see how the connecting line just connects the stations, which isn't faithful to what exists in real life, with curvatures to navigate around coastlines (like the guideway between Kalauao station and Halawa station, since in real life, it curves around the coast alongside Pearl Harbor) or existing infrastructure (like the guideway between Makalapa station and Lelepaua station, since in real life it curves around the aircraft apron area of the Hawaiian Airlines Terminal 1 concourse extension at HNL airport). To make this visualization more accurate, I would need more coordinate points along the rail's route. One idea is to get the coordinates of every concrete pier that supports the guideway (See the image; notice how the piers are already labeled? Having coordinate data associated with each pier would help our case).33:T7ef,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":"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"}]34:T4b9,{ let data = [{ type: "choropleth", locationmode: "USA-states", locations: marriedStateCodes, z: marriedMapData.map(item => item.sameSex), text: marriedMapData.map(item => item.state), colorscale: [ [0, "rgb(242,240,247)"], [0.2, "rgb(218,218,235)"], [0.4, "rgb(188,189,220)"], [0.6, "rgb(158,154,200)"], [0.8, "rgb(117,107,177)"], [1, "rgb(84,39,143)"] ], zmin: 0, zmax: d3.max(marriedMapData, item => item.sameSex), marker: { line: { color: "white", width: 0.7 } }, colorbar: { title: { text: "Households" }, thickness: 12, len: 0.75, tickformat: ",.0f" }, hovertemplate: "%{text}
Same-sex married households: %{z:,.0f}" }]; let layout = { title: { text: "Same-Sex Married-Couple Households
by State (2021)", x: 0.5, xanchor: "center", font: { size: 18 } }, height: 500, geo: { scope: "usa", projection: { type: "albers usa" } }, dragmode: false, margin: { r: 20, t: 80, b: 20, l: 20 } }; const div = DOM.element("div"); Plotly.newPlot(div, data, layout); return div; }35:T4a1,{ let data = [{ type: "choropleth", locationmode: "USA-states", locations: marriedStateCodes, z: marriedPercentages, text: marriedMapData.map(item => item.state), colorscale: [ [0, "rgb(242,240,247)"], [0.2, "rgb(218,218,235)"], [0.4, "rgb(188,189,220)"], [0.6, "rgb(158,154,200)"], [0.8, "rgb(117,107,177)"], [1, "rgb(84,39,143)"] ], zmin: 0, zmax: d3.max(marriedPercentages), marker: { line: { color: "white", width: 0.7 } }, colorbar: { title: { text: "Percent (%)" }, thickness: 12, len: 0.75, tickformat: ".1f" }, hovertemplate: "%{text}
Share of married-couple households: %{z:.2f}%" }]; let layout = { title: { text: "Same-Sex Share of Married-Couple Households
by State (2021)", x: 0.5, xanchor: "center", font: { size: 18 } }, height: 500, geo: { scope: "usa", projection: { type: "albers usa" } }, dragmode: false, margin: { r: 20, t: 80, b: 20, l: 20 } }; const div = DOM.element("div"); Plotly.newPlot(div, data, layout); return div; }36:T12e3,### Explanations #### Same-Sex Married Household Counts To me, the first choropleth is useful for showing the geographical distribution of same-sex married-couple households across US states. The darker colors indicate states with higher household counts, while the lighter colors indicate lower counts. In my visualization, California, Texas, Florida, and New York have higher values, while the other states, such as Alaska, Idaho, and Montana have lower values. However, I don't think the counts alone provide a fair comparison of how common these households are within each state. A state with more households overall has more opportunities to have a larger number of same-sex married households. This makes differences in state population and household totals a reasonable possible explanation for the pattern, although this map alone cannot confirm why those differences exist. The count map answers where there are more same-sex married households, but it doesn't tell us their share of married-couple households. #### Same-Sex Share of Married-Couple Households For the second choropleth, I divided each state's number of same-sex married-couple households by its total number of married-couple households, then multiplied by 100 to express the ratio as a percentage. To me, this provides a more appropriate comparison of how common same-sex married households are among married-couple households across states because it accounts for differences in the number of those households. For example, Delaware has a relatively high percentage at about 2.02%, compared with Florida at 1.59% and California at 1.57%. On the lower end, Kansas is about 0.46%, Idaho is about 0.54%, and Iowa is about 0.67%. These differences make sense to me because having a larger household count does not necessarily mean having a larger percentage. A smaller state can have fewer same-sex married households overall but still have a higher share of them among its married-couple households. However, I would need additional demographic information to explain why particular states have higher or lower percentages. The visualization shows the differences, but it doesn't establish their causes. Also, these percentages describe married-couple households specifically, rather than the entire population or all LGBTQ+ households. #### Styling Choices For both choropleths, I used Plotly's US geographical map with an Albers USA projection. This provides state boundaries and places Alaska and Hawaii in inset positions, allowing viewers to compare all 50 states in one view. Unlike my HART visualization, these charts don't need a detailed street basemap because the data is summarized at the state level. I used a sequential purple color scale, where lighter shades represent lower values and darker shades represent higher values. To me, this is appropriate because the data represents increasing amounts rather than opposing categories. I kept the same color palette across both maps for consistency, but each map has its own numerical range and units. Therefore, the same shade of purple does not represent the same numerical value across both charts. When I initially included DC in the percentage map, its value of approximately 6% was much higher than the other values, which made most states appear very pale. I decided to limit both maps to the 50 US states, excluding DC and Puerto Rico. This gives both charts the same geographical scope and makes differences among the states easier to see. Lastly, I added descriptive titles that identify the measure and the year, 2021. I labeled the color bars as households or percent so viewers can distinguish the count map from the percentage map. I also included hover information with state names and exact values, and used white state borders to make neighboring states easier to distinguish. #### Bubble Map Alternative To create a bubble map, I would need a representative latitude and longitude for each state, such as a state centroid or another suitable point within its boundaries. I could then place a bubble at that location and size it according to the household count. The bubble's area should be proportional to the count so that its size accurately represents the data. To me, a bubble map could be a better alternative for the raw counts because it represents the number of households through symbol size instead of coloring the entire state. This would help avoid giving geographically large states more visual emphasis simply because they occupy more space on the map. However, bubbles could overlap, especially in the northeastern US where states are smaller and closer together. Comparing bubble sizes precisely can also be difficult. For the percentages, I would keep the choropleth because it makes geographical patterns in the relative values easier to identify.37:[{"id":"024dff9f46e19615ddb07399859701d65b736173ff72bc637888159fe995bed206cec0fbd78bff4bde48d3815c93e48dfc808669d95f383e36c5610d84801b40","href":"https://static.observableusercontent.com/files/024dff9f46e19615ddb07399859701d65b736173ff72bc637888159fe995bed206cec0fbd78bff4bde48d3815c93e48dfc808669d95f383e36c5610d84801b40","name":"Screenshot 2026-10-08 230118.png","type":"image/png","lastModified":1791536488015,"size":4180079}] 30:{"id":"ce8f7aba6aef85de","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"33137e0bdd5dfac609b1b95bd222a8f6f047e664c0720fc723064b1b4e07d439","access_level":"public","create_time":"$D2026-10-09T07:05:34.364Z","update_time":"$D2026-10-09T09:53:04.033Z","view_time":null,"first_public_time":"$D2026-10-09T09:53:55.169Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"405cae645c2e1d6b","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":"free_2026","bio":""},"version":147,"publish_version":147,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d286dabeed650d","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","tier":null,"bio":""}],"members":[{"type":"team","id":"405cae645c2e1d6b","login":"aris-carlos","name":"Aris Carlos","avatar_url":"https://avatars-next.observableusercontent.com/3be1db797c8aab7d44dc0d6eb3c3611d82fecbae7500e09872659ab1285741f6","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":"### Aris Carlos - ICS 684","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"## HART Rail Stations\n### Code + Visualization","pinned":true,"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":5,"value":"railStations = 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":6,"value":"stationLat = railStations.features.map(station => station.geometry.coordinates[1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"stationLon = railStations.features.map(station => station.geometry.coordinates[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"stationNames = railStations.features.map(station => station.properties.STATION)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"stationFEISNames = railStations.features.map(\n station => station.properties.station_name_FEIS\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"\n let data = [{\n type: \"scattermap\",\n lat: stationLat,\n lon: stationLon,\n text: stationNames,\n mode: \"markers+lines\",\n marker: {\n size: 10,\n color: \"#00796b\"\n },\n line: {\n width: 3,\n color: \"#00796b\"\n },\n customdata: stationFEISNames,\n hovertemplate:\n \"%{text}
%{customdata}\",\n hoverlabel: {\n font: {\n size: 11\n }\n }\n}]\n\n let layout = {\n title: {\n text: 'Honolulu Skyline Route Map',\n },\n height: 500,\n map: {\n style: \"carto-positron\",\n center: {\n lat: 21.345,\n lon: -157.95\n },\n zoom: 11\n },\n margin: { r: 0, t: 50, b: 0, l: 0 }\n };\n\n const div = DOM.element('div');\n Plotly.newPlot(div, data, layout);\n display(div);\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"FileAttachment(\"Screenshot 2026-10-08 230118.png\").image()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"## Married Household USA\n### Code + Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"married = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/married.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"marriedClean = married.map(row => ({\n state: row[\"State name\"],\n sameSex: Number(\n row[\"Married couple households Same-sex\"].replace(/,/g, \"\")\n ),\n marriedCouples: Number(\n row[\"Married couple households\"].replace(/,/g, \"\")\n )\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"marriedMapData = marriedClean.filter(\n row => row.state !== \"Puerto Rico\" && row.state !== \"District of Columbia\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"marriedStateCodes = marriedMapData.map(item => {\n let obj = codes.filter(i => i.name === item.state)[0];\n if (obj) return obj.abbreviation;\n else return \"\";\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"marriedPercentages = marriedMapData.map(\n item => 100 * item.sameSex / item.marriedCouples\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"2"}} 31:"$30:body"