2d:null 2e:["$","title",null,{"children":"Zeyao Zhou Assignment 3: Geospatial Visualizations | Zeyao Zhou | Observable"}] 33:T5df,3. Make styling choices that you think are appropriate for the chart. Explain your choices: a. What is a good base map?\ **Answer**: The base map style that I chose is *open-street-map*. This base map shows streets, neighborhoods, and place names. This is appropriate for the HART Rail Station map since it is useful to see what place landmarks are near each rail station, and it also makes it easier for individuals to get directions to these stations. b. What line/point/text style works for this data?\ **Answer**: I used a width 3 solid *crimson* line. The color is strong enough to stand out on the map, and there is only 1 line needed. I also used a size 9 marker in the same color as the line, so the stations are distinguished but still shown as part of the line. I also used a size 10 black (#000) text as labels for each station, placed to the top left of every station. This makes the text readable against the map. c. How should you frame the map? (how much and what do we see when it first appears)\ **Answer**: I centered the map near the middle of the route ({lat: 21.34, lon: -157.94}) and set the zoom to 11 so the map mainly shows the full route when it first appears. This way, the entire rail line fits on screen, and the viewer can see it immediately. d. What additional information (such as a title) did you add?\ **Answer**: I added a title centered at the top, above the map. I also added an on-hover feature where the stations will show the station name when hovered over. 34:[{"id":"76d57f932bbb21e287fbdfc4165ff4b301419baaec935e80f2f722dfe65a8622022b6b6b2760e42d12c178f1e81b80bab0bafd4e0e487861951ae547b5a30bd6","href":"https://static.observableusercontent.com/files/76d57f932bbb21e287fbdfc4165ff4b301419baaec935e80f2f722dfe65a8622022b6b6b2760e42d12c178f1e81b80bab0bafd4e0e487861951ae547b5a30bd6","name":"Married.csv","type":"text/csv","lastModified":1791440610268,"size":2836},{"id":"a3d835c2fefef771074619a58d25dc74dcbc5ec9e7ded542b384d1beb4e52df5d2269a88b9b616cb0a5a697e7ad54817eae6d85d30b4d2dec14ae603b15c9daf","href":"https://static.observableusercontent.com/files/a3d835c2fefef771074619a58d25dc74dcbc5ec9e7ded542b384d1beb4e52df5d2269a88b9b616cb0a5a697e7ad54817eae6d85d30b4d2dec14ae603b15c9daf","name":"HART_Stations.geojson","type":"application/octet-stream","lastModified":1791440823241,"size":5671}] 31:{"id":"fa1070b049617fd7","slug":"zeyao-zhou-assignment-3-geospatial-visualizations","title":"Zeyao Zhou Assignment 3: Geospatial Visualizations","thumbnail":"7e95a9dc892c2393478d2ad7044648f3c151882c29b35cdba90a237dbde44398","access_level":"public","create_time":"$D2026-10-08T06:26:21.410Z","update_time":"$D2026-10-08T08:43:49.345Z","view_time":null,"first_public_time":"$D2026-10-08T08:44:15.345Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5682b6b777c953fc","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","tier":"free_2026","bio":""},"version":136,"publish_version":136,"role":null,"authored":false,"authors":[{"type":"individual","id":"3777be497ac13bca","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","tier":null,"bio":""}],"members":[{"type":"team","id":"5682b6b777c953fc","login":"zeyao-zhou","name":"Zeyao Zhou","avatar_url":"https://avatars-next.observableusercontent.com/9f20bbb8d358859d5ff0e688bab61b90ba6c6fd6396b9f0cd61400a871a55e5c","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":"Zeyao Zhou Assignment 3: Geospatial Visualizations","cells":[{"id":1,"value":"# Zeyao Zhou 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":"## HART Rail Stations\n1. Explore the GeoJson format of the file. How would you process the data so you have an array of all the Lat values, an array for all the Lon values and an array for all the station names.\n\n**Answer**: I would process the data by first loading the GeoJSON file, then, while going through its *features* array, I would pull out one value from each feature for each of the 3 arrays I will construct.\\\nFor the Lat values array, this would be the second value in *geometry.coordinates*.\\\nFor the Lon values array, this would be the first value in *geometry.coordinates*.\\\nFor the station names array, this would be the *STATION* value in *properties*.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"2. Use those arrays to visualize the data. Try linking the stations with a line to create the “rail”.\nHint: in PlotlyJS, you can use modes like ‘markers’, ‘markers+text’, and\n‘markers+text+lines’ but you may need to look up how to style text.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"stations = FileAttachment(\"HART_Stations.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import Plotly from \"npm:plotly.js-dist-min\";","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"railMap = {\n const div = html`

`;\n\n const lon = stations.features.map(d => d.geometry.coordinates[0]);\n const lat = stations.features.map(d => d.geometry.coordinates[1]);\n const names = stations.features.map(d => d.properties.STATION);\n\n const trace = {\n type: \"scattermap\",\n mode: \"markers+text+lines\",\n lat: lat,\n lon: lon,\n text: names,\n hoverinfo: \"text\",\n textposition: \"top right\",\n textfont: {size: 10, color: \"#000\"},\n marker: {size: 9, color: \"crimson\"},\n line: {width: 3, color: \"crimson\"}\n };\n\n const layout = {\n title: {text: \"HART Rail Line\", x: 0.5, font: {size: 20}},\n map: {\n style: \"open-street-map\",\n center: {lat: 21.34, lon: -157.94},\n zoom: 11\n },\n margin: {t: 40, b: 0, l: 0, r: 0}\n };\n\n Plotly.newPlot(div, [trace], layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Married Household USA\n\n1. Create a choropleth for the “Married couple households Same-sex” data column.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"married = FileAttachment(\"Married.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"stateCodes = ({\n \"Alabama\": \"AL\", \"Alaska\": \"AK\", \"Arizona\": \"AZ\", \"Arkansas\": \"AR\",\n \"California\": \"CA\", \"Colorado\": \"CO\", \"Connecticut\": \"CT\", \"Delaware\": \"DE\",\n \"District of Columbia\": \"DC\", \"Florida\": \"FL\", \"Georgia\": \"GA\", \"Hawaii\": \"HI\",\n \"Idaho\": \"ID\", \"Illinois\": \"IL\", \"Indiana\": \"IN\", \"Iowa\": \"IA\",\n \"Kansas\": \"KS\", \"Kentucky\": \"KY\", \"Louisiana\": \"LA\", \"Maine\": \"ME\",\n \"Maryland\": \"MD\", \"Massachusetts\": \"MA\", \"Michigan\": \"MI\", \"Minnesota\": \"MN\",\n \"Mississippi\": \"MS\", \"Missouri\": \"MO\", \"Montana\": \"MT\", \"Nebraska\": \"NE\",\n \"Nevada\": \"NV\", \"New Hampshire\": \"NH\", \"New Jersey\": \"NJ\", \"New Mexico\": \"NM\",\n \"New York\": \"NY\", \"North Carolina\": \"NC\", \"North Dakota\": \"ND\", \"Ohio\": \"OH\",\n \"Oklahoma\": \"OK\", \"Oregon\": \"OR\", \"Pennsylvania\": \"PA\", \"Rhode Island\": \"RI\",\n \"South Carolina\": \"SC\", \"South Dakota\": \"SD\", \"Tennessee\": \"TN\", \"Texas\": \"TX\",\n \"Utah\": \"UT\", \"Vermont\": \"VT\", \"Virginia\": \"VA\", \"Washington\": \"WA\",\n \"West Virginia\": \"WV\", \"Wisconsin\": \"WI\", \"Wyoming\": \"WY\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"sameSex = married\n .map(d => ({\n state: d[\"State name\"].trim(),\n code: stateCodes[d[\"State name\"].trim()],\n value: parseInt(d[\"Married couple households Same-sex\"].replace(/,/g, \"\"))\n }))\n .filter(d => d.code !== undefined && !isNaN(d.value))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"sameSexMap = {\n const div = html`

`;\n\n const trace = {\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: sameSex.map(d => d.code),\n z: sameSex.map(d => d.value),\n text: sameSex.map(d => d.state),\n hovertemplate: \"%{text}
Same-sex married households: %{z:,}\",\n colorscale: \"Viridis\",\n marker: {line: {color: \"white\", width: 1}},\n colorbar: {title: {text: \"Households\"}}\n };\n\n const layout = {\n title: {text: \"Same-Sex Married Couple Households by State (2021)\", x: 0.5, font: {size: 20}},\n geo: {scope: \"usa\"},\n margin: {t: 50, b: 0, l: 0, r: 0}\n };\n\n Plotly.newPlot(div, [trace], layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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**: No, this is not an appropriate way to showcase the status of same-sex married households across states, because the raw counts mainly reflect population size. The states with higher values will always be the most populous ones, followed by less populous states. This makes sense to me, since this map is strongly correlated with the choropleth of states by population.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"3. Create a choropleth that shows the ratio of “Married couple households Same-sex” out of the “Married couple households” data column.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"ratioData = married\n .map(d => {\n const total = parseInt(d[\"Married couple households\"].replace(/,/g, \"\"));\n const same = parseInt(d[\"Married couple households Same-sex\"].replace(/,/g, \"\"));\n return {\n state: d[\"State name\"].trim(),\n code: stateCodes[d[\"State name\"].trim()],\n same: same,\n total: total,\n pct: 100 * same / total\n };\n })\n .filter(d => d.code !== undefined && !isNaN(d.pct))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"ratioMap = {\n const div = html`

`;\n\n const trace = {\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: ratioData.map(d => d.code),\n z: ratioData.map(d => d.pct),\n zmin: 0,\n zmax: 2.5,\n text: ratioData.map(d => d.state),\n customdata: ratioData.map(d => [d.same, d.total]),\n hovertemplate: \"%{text}
Same-sex share: %{z:.2f}%\",\n colorscale: \"Viridis\",\n marker: {line: {color: \"white\", width: 1}},\n colorbar: {title: {text: \"% of married
couple households\"}}\n };\n\n const layout = {\n title: {text: \"Same-Sex Married Couple Households by State (2021)\", x: 0.5, font: {size: 20}},\n geo: {scope: \"usa\"},\n margin: {t: 50, b: 0, l: 0, r: 0}\n };\n\n Plotly.newPlot(div, [trace], layout);\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"4. 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**: Yes, this is an appropriate way to showcase the status of same-sex married households across US states. Dividing by the number of married couple households removes the effect of population, so now smaller states can be recognized more easily if same-sex couples make up a larger share of their married couples. The highest shares appear in the Northeast and on the West Coast, and the lowest shares appear in parts of the South and Midwest. The overall range is small, and same-sex married households are about as common in any state as in any other state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"5. Explain your styling decisions for the choropleth charts\n\na. What base map did you use?\\\n**Answer**: I used Plotly's US map that shows the 50 states and DC because all of the data is at the state level, and a plain outline is sufficient to show this data. I also set the scope to the USA only, since we are only concerned with data from the US.\n\nb. What color scale did you use?\\\n**Answer**: I used the Viridis color scale, which has a light-to-dark gradient built in. In the ratio map, the scale was also fixed from 0 to 2.5, since the largest value (DC) is not a state and therefore not relevant to the data.\n\nc. What additional information (such as a title) did you add?\\\n**Answer**: I added a title to each map. I also added a color bar with a title to each map, giving the units of the gradient scale. I also added hover information with the state name and the amount/ratio of same-sex households that are present in each state.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"6. What additional information (if any) would you need to create a bubble map for this data? Would that be a better visual encoding for the data?\n\n**Answer**: If I wanted to create a bubble map, I would need coordinates for each state to place the bubble. Then, the bubble size would represent the count of households, and the bubble color would represent the ratio of households to the total number of households. I think bubble maps are better for showing raw counts, since the bubble size, instead of state colors, could better represent raw counts, but choropleth maps are better for showing ratios, since bubbles in a crowded area can overlap and hide each other. A combination of both could probably work well in this scenario.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 32:"$31:body"