2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | Christian Moore | Observable"}] 32:T4a8,3. Make styling choices that you think are appropriate for the chart. Explain your choices: a. What is a good base map? b. What line/point/text style works for this data? c. How should you frame the map? (how much and what do we see when it first appears) d. What additional information (such as a title) did you add? **Answer**: a) I think the carto-positron is a good base map. I chose this because I liked the scattermap example from the class example notebook, and I thought that lines would make the desired "rail" look. The stations are visualized on the map and the lines give the connections/rails for each station. The background is pretty simple compared to a open street maps background, clutering the visuals. b) For the lines, I used thin red lines. For the stations, I used slightly larger blue dots, and black text to contrast the background. c) I chose to zoom the map so we could see the entire station area, including all the stations. Then, let the user zoom into the map and see more details like the station names for those that are in close proximity of other stations. Seeing the whole island is also not needed here and would be out of scope for the current stations.33:T431,let stateCodes = { "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" }34:[] 30:{"id":"e85e6860f449c5a1","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"45846ed9ef2c3a58f26d7b7236bc3e1e8614d5d5474c26a53fdd82ea115523f3","access_level":"public","create_time":"$D2026-10-05T22:45:22.688Z","update_time":"$D2026-10-06T01:56:39.539Z","view_time":null,"first_public_time":"$D2026-10-05T23:04:46.486Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b5ca32f4163d4864","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":"free_2026","bio":""},"version":282,"publish_version":282,"role":null,"authored":false,"authors":[{"type":"individual","id":"d025da308015c262","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","tier":null,"bio":""}],"members":[{"type":"team","id":"b5ca32f4163d4864","login":"christian-moore","name":"Christian Moore","avatar_url":"https://avatars-next.observableusercontent.com/3aae35cc0204ca11df5d7044f368ef0540fe07712880cdaee1a8b6fd598e29c9","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":4,"value":"## HART Rail Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"### Questions / Responses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"1. Explore the GeoJson format of the file. How would you process the data so you have an\narray of all the Lat values, an array for all the Lon values and an array for all the station\nnames.\n\n**Answer**: After grabbing the data from the given source, I manually inspect the first element to see what keys and values I have in the JSON data. Since we are given the arrays to look for in this question, I use the map function to place those values in their respective arrays. The important part was figuring out the lat lon order, which became apparent after visualizing the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"2. Use those arrays to visualize the data. Try linking the stations with a line to create the “rail”\n.\nHint: in PlotlyJS, you can use modes like ‘markers’\n‘markers+text’\n,\n, and\n‘markers+text+lines’ but you may need to look up how to style text.\n\n**Answer**: I used markers+text+lines to link the stations and create a rail.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"4. How well does the path represent the path of the rail? What additional information would\nyou need?\n\n**Answer**: My path does not faithfully represent the path of the actual rail. I have straight line segments, but the real rail has curves and height associated with each location along the path. I would need to have more points along the actual rail to faithfully visualize the rail on my visualization. At the current moment, I am undersampling the rail geometry.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"### Data Wrangling & Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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 hart_data = d3.json(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"hart_data","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"hart_data.features[0].geometry.coordinates","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"hart_data.features[0].properties.STATION","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"let stations = hart_data.features","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"let lat = 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":45,"value":"let lon = 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":46,"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":38,"value":"let data = [{\n type: \"scattermap\",\n mode: \"markers+text+lines\",\n\n lon: lon,\n lat: lat,\n text: stationNames,\n\n textposition: \"top center\",\n\n marker: {\n size: 8,\n color: \"blue\"\n },\n\n line: {\n width: 2,\n color: \"red\"\n },\n\n hovertemplate:\n \"lat: %{lat}
\" +\n \"long: %{lon}
\" +\n \"station name: %{text}\" +\n \"\"\n}];\n\nlet layout = {\n title: {\n text: \"HART Rail Stations, Oahu\"\n },\n\n map: {\n style: \"carto-positron\",\n center: {\n lon: -157.93,\n lat: 21.34\n },\n zoom: 10\n },\n\n height: 600,\n\n margin: {\n top: 50,\n bottom: 0,\n left: 0,\n right: 0\n }\n};\n\nconst div = DOM.element(\"div\");\n\nPlotly.newPlot(div, data, layout);\n\ndisplay(div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"## Married Household USA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"### Questions / Responses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"1. Create a choropleth for the “Married couple households Same-sex” data column.\n\n**Answer**: See the visualization titled: \"Same-Sex Married Households by State\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"2. Is this an appropriate way to showcase the status of same-sex married households across US states? Which states have the higher values, which have the lower values? Does that make sense to you?\n\n**Answer**: This is a good for showing the distribution geographically of the total number of same-sex married households, but its not the best way to compare same-sex married households across states because larger states naturally have larger values in total.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"3. Create a choropleth that shows the ratio of “Married couple households Same-sex” out of\nthe “Married couple households” data column.\n\n**Answer**: See the visualization titled: \"Same-Sex Married Households as a Percentage of Married Households\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"4. Is this an appropriate way to showcase the status of same-sex married households across\nUS states? Which states have the higher values, which have the lower values, does that\nmake sense to you?\n\n**Answer**: Yes, this makes the visualization more apparent to see the status of same-sex married households across US states. I see Delaware, Massachusetts, Nevada, Florida, etc. that have the higher values and Montana, Kansas, Idaho, etc. that has the lower values. DC also has about 6% and is much higher than the other locations. This is much better because now, we don't have large states dominating the count just because of population, compared to ratio.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"5. Explain your styling decisions for the choropleth charts.\na. What base map did you use?\nb. What color scale did you use?\nc. What additional information (such as a title) did you add?\n\n**Answer**: I wanted to use plotly's geo base map, since we just need the state outlines. I used Blues for the absolute count map colorscale and Purples for the ratio map. I think that saturation or washed-out color works best for this, and shows how the values change relative to each other. I added a descriptive title and wanted the user to see the actual percentage when they hover over the state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"6. What additional information (if any) would you need to create a bubble map for this data?\nWould that be a better visual encoding for the data?\n\n**Answer**: I don't think a bubble map would work for the absolute counts, it would make larger population states like California overlap with other nearby states. A bubble map could work for the percentages since they seem to be in a similar range, but I wouldn't use it for this ratio visualization either.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"### Data Wrangling & Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"let married = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/married.csv\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"married[0]","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"married.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"let toNumber = str => parseInt(str.replace(/,/g, \"\"), 10)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"let sameSex = married.map(\n d => toNumber(d[\"Married couple households Same-sex\"])\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"let marriedCouples = married.map(\n d => toNumber(d[\"Married couple households\"])\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$33","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"let locations = married\n .filter(d => d[\"State name\"] !== \"Puerto Rico\")\n .map(d => stateCodes[d[\"State name\"]])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"let data = [{\n type: \"choropleth\",\n\n locations: locations,\n locationmode: \"USA-states\",\n\n z: sameSex,\n\n colorscale: [ // define the gradient stop points\n [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],\n [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],\n [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']\n ],\n\n zmin: 0,\n zmax: 70000,\n\n\n colorbar: {\n title: {\n text: \"Same-sex married
households\"\n }\n },\n\n hovertemplate:\n \"%{location}
\" +\n \"Same-sex married households: %{z:,}\" +\n \"\"\n}];\n\nlet layout = {\n title: {\n text: \"Same-Sex Married Households by State\"\n },\n\n geo: {\n scope: \"usa\",\n projection: {\n type: \"albers usa\"\n },\n\n showlakes: true,\n lakecolor: \"white\"\n },\n\n height: 600,\n\n margin: {\n top: 60,\n bottom: 0,\n left: 0,\n right: 0\n }\n};\n\nconst div = DOM.element(\"div\");\n\nPlotly.newPlot(div, data, layout);\n\ndisplay(div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"let ratio = sameSex.map(\n (d, i) => d / marriedCouples[i]\n)\n\nlet ratioPercent = sameSex.map(\n (d, i) => (d / marriedCouples[i]) * 100\n)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"let data = [{\n type: \"choropleth\",\n\n locations: locations,\n locationmode: \"USA-states\",\n\n z: ratioPercent,\n\n colorscale: \"Purples\",\n\n zmin: 0,\n zmax: 2.0,\n\n colorbar: {\n title: {\n text: \"Same-sex households (%)\"\n }\n },\n\n hovertemplate:\n \"%{location}
\" +\n \"Same-sex married households: %{z:.2f}%\" +\n \"\"\n}];\n\nlet layout = {\n title: {\n text: \"Same-Sex Married Households as a Percentage of Married Households\"\n },\n\n geo: {\n scope: \"usa\",\n projection: {\n type: \"albers usa\"\n },\n\n showlakes: true,\n lakecolor: \"white\"\n },\n\n height: 600,\n\n margin: {\n top: 60,\n bottom: 0,\n left: 0,\n right: 0\n }\n};\n\nconst div = DOM.element(\"div\");\n\nPlotly.newPlot(div, data, layout);\n\ndisplay(div);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"