2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | Samantha Reed | Observable"}] 32:T99d,### Styling Choices I used a tile map (scattermap) with the carto-voyager style instead of Plotly’s built-in geo map. The geo map’s coastlines are too coarse at the scale of a single island, so Oʻahu looked blocky and there was nothing to show where the rail actually goes. Carto Voyager shows real streets, Pearl Harbor, the airport and neighborhood names. It’s also light and muted, so it gives context without competing with the rail line. A dark or very busy style would make the route harder to pick out. I also used markers+lines so the line reads as the rail and the dots read as the stations. I chose a dark navy color because it stands out against Voyager’s soft beige and pastel colors, and it looks like a transit-map line. The markers are slightly larger than the line width so each stop is easy to see. I left station names off the map itself because the stations through Kalihi, Iwilei, Chinatown and Downtown are close enough that permanent labels piled on top of each other. Instead, the names appear when you hover. For framing, I centered the map at about 21.35°N, 157.96°W with a zoom of 10.5. That way the whole line fits on screen when the map first loads, and there’s a little surrounding area for orientation. You see the route curve along the south shore past Pearl Harbor and the airport into town, without empty ocean or the North Shore taking up space. Viewers can zoom in from there to look at the crowded urban stations. I also added a title, “HART Rail Stations,” in the same navy as the line so the title and data look connected. I also cut the margins down to just enough for the title, which lets the map use most of the space. *How well does the path represent the path of the rail? What additional information would you need?* This is a rough sketch not the actual route, this line connects the stations with straight segments in the order they appear in the file, so it shows the general shape of the route. The biggest thing is the actual alignment, not just the station points. With that, I could draw the true route and use the stations only as markers. It would also help to have status information for each station or segment. As far as I know, the eastern end of the line isn’t open yet. Right now my map treats all 21 stations as equal and connected. A field for opening date or phase would let me show what’s running today versus what’s planned, for example with solid and dashed lines. 33:T88e,*Is this an appropriate way to showcase the status of same-sex married households across US states?* I think this ratio map works much better than the previous map. Dividing by each state’s married-couple households removes the population issue, so the map compares how common same-sex marriages are rather than how big each state is. California, Nevada, New York, Delaware, and Florida are some states that to rank higher, while rural states tend to rank lower. I think it makes sense as these states have some big cities with maybe more socially liberal populations. *Styling Choices* I used Plotly’s built-in US map (scope: "usa") with the Albers USA projection. I used a light-to-dark pink-purple scale. This data has a single direction (from low to high), so higher values should simply look darker. On the ratio map, I capped the scale below the highest values so it doesn’t push all the states into the same pale shade. Without the cap, you couldn’t see the difference between some of the states. I added a descriptive title with the year, a color bar with a units label and a percent sign, thin white state borders so neighboring states are easy to tell apart, and a custom hover label that shows the state name and its exact value. *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?* For a bubble map, each bubble needs a spot on the map, usually a center point (lat and lon) for each state. I think a bubble map would work better for the raw counts, because bubble size shows “how many” directly. It also gets around a choropleth problem where huge states with few people take up a lot of the map even though their numbers are small. For the ratio, I’d keep the choropleth. A percentage describes the whole state, so there’s no need to size anything. The best version might combine both: color the states by the ratio and put bubbles sized by the raw count on top. I could see the bubble map possibly causing issues though for areas of the US in the East Coast where there are many small states, so the bubbles would overlap and it would become difficult to read.34:[{"id":"a3d835c2fefef771074619a58d25dc74dcbc5ec9e7ded542b384d1beb4e52df5d2269a88b9b616cb0a5a697e7ad54817eae6d85d30b4d2dec14ae603b15c9daf","href":"https://static.observableusercontent.com/files/a3d835c2fefef771074619a58d25dc74dcbc5ec9e7ded542b384d1beb4e52df5d2269a88b9b616cb0a5a697e7ad54817eae6d85d30b4d2dec14ae603b15c9daf","name":"HART_Stations.geojson","type":"application/octet-stream","lastModified":1791494376473,"size":5671},{"id":"81f9ca3bde2dcfff241382c31955fbfadb7b0ba7d9ae07e9952863dbb5a47bb0ceef66dfda948d1f4fd4af4da7524d3998f5db9762edbbe9b542f99fa91664fa","href":"https://static.observableusercontent.com/files/81f9ca3bde2dcfff241382c31955fbfadb7b0ba7d9ae07e9952863dbb5a47bb0ceef66dfda948d1f4fd4af4da7524d3998f5db9762edbbe9b542f99fa91664fa","name":"married.csv","type":"text/csv","lastModified":1791693833371,"size":2839}] 30:{"id":"a86331b9396c2251","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"b9781482fd5badbc6ee18135a846046840505e2b2df59abb07de575ad574107f","access_level":"public","create_time":"$D2026-10-08T21:01:14.916Z","update_time":"$D2026-10-11T05:39:39.398Z","view_time":null,"first_public_time":"$D2026-10-11T05:39:58.295Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ebbefef61a395f67","login":"srreed","name":"Samantha Reed","avatar_url":"https://avatars-next.observableusercontent.com/992ad93eac3e6e74e27e948235445644cd0e97afe176acfbc16380c0ddda892e","tier":"free_2026","bio":""},"version":144,"publish_version":144,"role":null,"authored":false,"authors":[{"type":"individual","id":"6548567273f73098","login":"srreed","name":"Samantha Reed","avatar_url":"https://avatars-next.observableusercontent.com/992ad93eac3e6e74e27e948235445644cd0e97afe176acfbc16380c0ddda892e","tier":null,"bio":""}],"members":[{"type":"team","id":"ebbefef61a395f67","login":"srreed","name":"Samantha Reed","avatar_url":"https://avatars-next.observableusercontent.com/992ad93eac3e6e74e27e948235445644cd0e97afe176acfbc16380c0ddda892e","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"## HART Rail Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"const stations = FileAttachment(\"HART_Stations.geojson\").json()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"let lats = stations.features.map(f => f.geometry.coordinates[1])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"let lons = stations.features.map(f => f.geometry.coordinates[0])","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"let names = stations.features.map(f => f.properties.STATION)\ndisplay(names)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import Plotly from \"npm:plotly.js-dist-min\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"const data = {\n type: \"scattermap\",\n mode: \"markers+lines\",\n lon: lons,\n lat: lats,\n text: names,\n hovertemplate: \"%{text}\",\n line: { color: \"#00008B\", width: 3 },\n marker: { size: 10, color: \"#00008B\" }\n};\n\nconst layout = {\n title: { text: \"HART Rail Stations\", font: { size: 20, family: \"Arial\", color: \"#00008B\" } },\n width,\n height: 550,\n showlegend: false,\n map: {\n style: \"carto-voyager\",\n center: { lat: 21.35, lon: -157.96 },\n zoom: 10.5\n },\n margin: { t: 50, l: 0, r: 0, b: 0 }\n};\n\nconst div = DOM.element(\"div\");\nPlotly.newPlot(div, [data], layout);\ndisplay(div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"## Married Household USA\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"const married = d3.csv(\"https://raw.githubusercontent.com/nuritk/data/main/married.csv\")","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"let stateCodes = ({\n \"Alabama\": \"AL\", \"Alaska\": \"AK\", \"Arizona\": \"AZ\", \"Arkansas\": \"AR\", \"California\": \"CA\",\n \"Colorado\": \"CO\", \"Connecticut\": \"CT\", \"Delaware\": \"DE\", \"District of Columbia\": \"DC\",\n \"Florida\": \"FL\", \"Georgia\": \"GA\", \"Hawaii\": \"HI\", \"Idaho\": \"ID\", \"Illinois\": \"IL\",\n \"Indiana\": \"IN\", \"Iowa\": \"IA\", \"Kansas\": \"KS\", \"Kentucky\": \"KY\", \"Louisiana\": \"LA\",\n \"Maine\": \"ME\", \"Maryland\": \"MD\", \"Massachusetts\": \"MA\", \"Michigan\": \"MI\", \"Minnesota\": \"MN\",\n \"Mississippi\": \"MS\", \"Missouri\": \"MO\", \"Montana\": \"MT\", \"Nebraska\": \"NE\", \"Nevada\": \"NV\",\n \"New Hampshire\": \"NH\", \"New Jersey\": \"NJ\", \"New Mexico\": \"NM\", \"New York\": \"NY\",\n \"North Carolina\": \"NC\", \"North Dakota\": \"ND\", \"Ohio\": \"OH\", \"Oklahoma\": \"OK\", \"Oregon\": \"OR\",\n \"Pennsylvania\": \"PA\", \"Rhode Island\": \"RI\", \"South Carolina\": \"SC\", \"South Dakota\": \"SD\",\n \"Tennessee\": \"TN\", \"Texas\": \"TX\", \"Utah\": \"UT\", \"Vermont\": \"VT\", \"Virginia\": \"VA\",\n \"Washington\": \"WA\", \"West Virginia\": \"WV\", \"Wisconsin\": \"WI\", \"Wyoming\": \"WY\",\n \"Puerto Rico\": \"PR\"\n})\n","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"let toNum = str => parseInt(String(str).replace(/,/g, \"\"))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"let cleaned = married.map(d => ({\n state: d[\"State name\"],\n code: stateCodes[d[\"State name\"]],\n sameSex: toNum(d[\"Married couple households Same-sex\"]),\n marriedHouseholds: toNum(d[\"Married couple households\"])\n}))","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"{\n const data = {\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: cleaned.map(d => d.code),\n z: cleaned.map(d => d.sameSex),\n text: cleaned.map(d => d.state),\n colorscale: [\n[0, \"#feebe2\"], [0.25, \"#fbb4b9\"], [0.5, \"#f768a1\"], [0.75, \"#c51b8a\"], [1, \"#7a0177\"]\n ],\n colorbar: { title: { text: \"Households\" } },\n marker: { line: { color: \"white\", width: 0.5 } },\n hovertemplate: \"%{text}
%{z:,} same-sex married households\"\n };\n\n const layout = {\n title: { text: \"Same-Sex Married Couple Households by State (2021)\" },\n geo: { scope: \"usa\", projection: { type: \"albers usa\" }, showlakes: false },\n width,\n height: 550,\n margin: { t: 50, l: 0, r: 0, b: 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"*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\nI don't think this is the best way to showcase the amount of same-sex married couples across the US. The map shows just the counts, so it mostly reflects how many people live in each state. The darkest states are the biggest ones: California, Texas and Florida, New York and Illinois. The lightest are the smallest ones: Montana , Wyoming, Alaska, South Dakota and North Dakota. That makes sense, but it doesn’t tell us much about the status of same-sex married households, because a big state will have big numbers for almost anything. A fairer map would show same-sex households as a share of all married-couple households.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"{\n const data = {\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: cleaned.map(d => d.code),\n z: cleaned.map(d => 100 * d.sameSex / d.marriedHouseholds),\n text: cleaned.map(d => d.state),\n colorscale: [\n [0, \"#feebe2\"], [0.25, \"#fbb4b9\"], [0.5, \"#f768a1\"], [0.75, \"#c51b8a\"], [1, \"#7a0177\"]\n ],\n zmin: 0,\n zmax: 3,\n colorbar: { title: { text: \"% of married
households\" }, ticksuffix: \"%\" },\n marker: { line: { color: \"white\", width: 0.5 } },\n hovertemplate: \"%{text}
%{z:.2f}% of married-couple households are same-sex\"\n };\n\n const layout = {\n title: { text: \"Share of Married Couple Households That Are Same-Sex (2021)\" },\n geo: { scope: \"usa\", projection: { type: \"albers usa\" }, showlakes: false },\n width,\n height: 550,\n margin: { t: 50, l: 0, r: 0, b: 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"