2c:null 2d:["$","title",null,{"children":"TJ Acasio: Assignment 3 | Tyler Jordan Acasio | Observable"}] 32:T71c,const short = names.map(n => n.replace(" Station", "")); const hover = stationData.features.map((f, i) => `${f.properties.STATION}
Formerly: ${f.properties.station_name_FEIS}
Stop ${i + 1} of ${names.length}`); const even = (_, i) => i % 2 === 0; const odd = (_, i) => i % 2 === 1; const traces = [ { type: "scattermap", mode: "lines", lat: lats, lon: lons, line: { width: 5, color: "#0b6e4f" }, hoverinfo: "skip" }, { type: "scattermap", mode: "markers", lat: lats, lon: lons, marker: { size: 13, color: "#0b6e4f" }, hoverinfo: "skip" }, { type: "scattermap", mode: "markers", lat: lats, lon: lons, marker: { size: 7, color: "white" }, hovertext: hover, hoverinfo: "text" }, { type: "scattermap", mode: "text", lat: lats.filter(even), lon: lons.filter(even), text: short.filter(even), textposition: "top center", textfont: { size: 11, color: "#222", family: "Arial" }, hoverinfo: "skip" }, { type: "scattermap", mode: "text", lat: lats.filter(odd), lon: lons.filter(odd), text: short.filter(odd), textposition: "bottom center", textfont: { size: 11, color: "#222", family: "Arial" }, hoverinfo: "skip" } ]; const layout = { title: { text: "HART Skyline: Kualakaʻi to Kālia", subtitle: { text: "21 stations from East Kapolei to Ala Moana · hover for former station names" } }, map: { style: "carto-positron", center: { lat: 21.345, lon: -157.948 }, zoom: 10.8 }, height: 580, margin: { l: 0, r: 0, t: 70, b: 30 }, showlegend: false, annotations: [{ text: "Data: HART_Stations.geojson (EPSG:4326)", showarrow: false, xref: "paper", yref: "paper", x: 0, y: -0.04, font: { size: 10, color: "#666" } }] }; const div = document.createElement("div"); Plotly.newPlot(div, traces, layout); display(div);33:T5ae,## Styling Choices ### a. Base map I used `carto-positron` because it's light and simple. It still shows the coastline, Pearl Harbor, and major roads, so it's easy to tell where the rail is on Oʻahu, and the gray background lets the rail line stand out. I didn't use `open-street-map` because it has too many colors and labels, and satellite imagery made the line and text harder to see. ### b. Line, point and text style I styled the map like a typical transit map. The rail is a thick green line drawn underneath the stations, and each station is a white dot with a green ring. Since `scattermap` markers can't have outlines, I made the ring by placing a small white dot on top of a larger green one. ### c. Framing I centered the map around ʻAiea and Pearl Harbor and set the zoom to 10.8 so the whole route is visible when the map first loads. At this zoom you can see the line run from Kapolei, around Pearl Harbor, past the airport, and into Ala Moana. Zooming in more would cut off part of the route, and zooming out would mostly add ocean. The downtown stations are still a little crowded, but you can zoom in to see them better. ### d. Added information I added a title and a subtitle that gives the number of stations and the two ends of the line. The hover text shows each station's current name, its former name, and its stop number. I also added a small note crediting the data source. I left out a legend since there's only one route.34:T56e,const 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" }; const toNum = str => parseInt(String(str).replace(/,/g, "")); const married = raw .filter(d => stateCodes[d["State name"]]) // drops Puerto Rico .map(d => ({ name: d["State name"], code: stateCodes[d["State name"]], households: toNum(d["Married couple households"]), sameSex: toNum(d["Married couple households Same-sex"]) })); const codes = married.map(d => d.code); const sameSex = married.map(d => d.sameSex); const stNames = married.map(d => d.name);35:T5d7,## Styling Choices for the Choropleths ### a. Base map By using Plotly's built-in `geo` map with `scope: "usa"`, which draws the states with the Albers USA projection. This projection moves Alaska and Hawaii into insets near the lower 48, so every state shows up without leaving a lot of empty ocean on the map. ### b. Color scale I used the `Purples` scale on both maps. It's a single-hue sequential scale that goes from light to dark, so lighter states have lower values and darker states have higher values. This fits the data, since the values only go from low to high and there's no middle point to split around. A single hue is also easier to read than a rainbow scale and works better for people with color blindness. Using the same scale on both maps makes them easier to compare. On the ratio map, I set the scale to run from 0.4% to 2%. DC is at 6%, and without the cap almost every state would end up the same pale color, which would hide the differences between them. ### c. Additional information Each map has a title that says what is being shown and that the data is from 2021. The ratio map also has a subtitle explaining that the color scale is capped at 2% and that DC is actually 6.0%. The color bars have labels, and the ratio map shows a percent sign on its tick values. The hover text shows the state name and its value, and on the ratio map it also shows the actual number of same-sex and total married households, so viewers can see the counts behind each percentage.36:[{"id":"c04dbc08b7a77fd2fb35ef38cf1eedf043124c24625633d3dfa43ac577f4199792fd2ff412d06f40c2df7a342ddc85d0dfcc1a582a497def3a155f8cebad98ca","href":"https://static.observableusercontent.com/files/c04dbc08b7a77fd2fb35ef38cf1eedf043124c24625633d3dfa43ac577f4199792fd2ff412d06f40c2df7a342ddc85d0dfcc1a582a497def3a155f8cebad98ca","name":"HART_Stations.geojson","type":"application/geo+json","lastModified":1791427221083,"size":5671},{"id":"81f9ca3bde2dcfff241382c31955fbfadb7b0ba7d9ae07e9952863dbb5a47bb0ceef66dfda948d1f4fd4af4da7524d3998f5db9762edbbe9b542f99fa91664fa","href":"https://static.observableusercontent.com/files/81f9ca3bde2dcfff241382c31955fbfadb7b0ba7d9ae07e9952863dbb5a47bb0ceef66dfda948d1f4fd4af4da7524d3998f5db9762edbbe9b542f99fa91664fa","name":"married.csv","type":"text/csv","lastModified":1791504286078,"size":2839}] 30:{"id":"5e42306c80a82fbe","slug":"tj-acasio-assignment-3","title":"TJ Acasio: Assignment 3","thumbnail":"80e871a809ce9eb601341c031714fa948741c88325a9c3d057009b4c88da916f","access_level":"public","create_time":"$D2026-10-08T02:39:59.006Z","update_time":"$D2026-10-09T08:45:12.232Z","view_time":null,"first_public_time":"$D2026-10-09T04:13:07.678Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"097d1added7e3ca8","login":"tyler-jordan-acasio","name":"Tyler Jordan Acasio","avatar_url":"https://avatars-next.observableusercontent.com/d16d5f61ff4df3645e1bea461ec28b6315a7e201282394a7876e18c8b31b48d5","tier":"free_2026","bio":""},"version":113,"publish_version":113,"role":null,"authored":false,"authors":[{"type":"individual","id":"f200503d43213b14","login":"tyler-jordan-acasio","name":"Tyler Jordan Acasio","avatar_url":"https://avatars-next.observableusercontent.com/d16d5f61ff4df3645e1bea461ec28b6315a7e201282394a7876e18c8b31b48d5","tier":null,"bio":""}],"members":[{"type":"team","id":"097d1added7e3ca8","login":"tyler-jordan-acasio","name":"Tyler Jordan Acasio","avatar_url":"https://avatars-next.observableusercontent.com/d16d5f61ff4df3645e1bea461ec28b6315a7e201282394a7876e18c8b31b48d5","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":"TJ Acasio: Assignment 3","cells":[{"id":1,"value":"# TJ Acasio: Assignment 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"# HART Rail Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## Exploring the GeoJSON\n\nThe file is a FeatureCollection with a `features` array that holds one object for each of the 21 stations. Each feature has a `geometry` with the coordinates and a `properties` object with the station names. GeoJSON stores coordinates as [longitude, latitude], so I used index 1 for latitude and index 0 for longitude. I used `.map()` on the features array to pull out three arrays for latitude, longitude, and station name. All three are in the same order, so the same index always refers to the same station.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"const stationData = await FileAttachment(\"HART_Stations.geojson\").json();\ndisplay(stationData);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"stationData.type","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"stationData.features.length","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"const lats = stationData.features.map(f => f.geometry.coordinates[1]);\nconst lons = stationData.features.map(f => f.geometry.coordinates[0]);\nconst names = stationData.features.map(f => f.properties.STATION);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import Plotly from \"https://cdn.jsdelivr.net/npm/plotly.js-dist-min/+esm\";","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"const div = document.createElement(\"div\");\n\nconst rail = {\n type: \"scattermap\",\n mode: \"markers+text+lines\", // dots + labels + connecting line\n lat: lats,\n lon: lons,\n text: names.map(n => n.replace(\" Station\", \"\")),\n textposition: \"top right\",\n textfont: { size: 11, color: \"#1a1a1a\", family: \"Arial\" },\n marker: { size: 9, color: \"#c8102e\" },\n line: { width: 4, color: \"#4a4a4a\" },\n hovertext: stationData.features.map(f =>\n `${f.properties.STATION}
(${f.properties.station_name_FEIS})`),\n hoverinfo: \"text\"\n};\n\nconst layout = {\n title: { text: \"HART Skyline Rail Stations\" },\n map: {\n style: \"carto-positron\",\n center: { lat: 21.35, lon: -157.95 },\n zoom: 10.3\n },\n height: 600,\n margin: { l: 0, r: 0, t: 50, b: 0 },\n showlegend: false\n};\n\nPlotly.newPlot(div, [rail], layout);\ndisplay(div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$32","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","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 path represent the rail?\n\nThe line shows the general shape of the route, but it isn't the real track. The GeoJSON only has the 21 station locations, so Plotly draws straight lines between them. The real guideway curves along roads like Kamehameha Highway and Dillingham Boulevard, so the straight lines cut corners. This is most noticeable where stations are far apart, like the 3.7 km gap between Waiawa and Kalauao.\n\n## What additional information would be needed?\n\nThe main thing missing is the actual track, stored as a LineString with points along the guideway. That would show the real curves and give an accurate track length. It would also help to know which parts of the line are open and which are still under construction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"# Married Household USA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"const raw = await FileAttachment(\"married.csv\").csv();","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$34","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"const div = document.createElement(\"div\");\n\nPlotly.newPlot(div, [{\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: codes,\n z: sameSex,\n text: stNames,\n colorscale: \"Purples\",\n colorbar: { title: { text: \"Households\" } },\n hovertemplate: \"%{text}
%{z:,} same-sex married households\"\n}], {\n title: { text: \"Same-Sex Married Couple Households by State (2021)\" },\n geo: { scope: \"usa\" },\n height: 500,\n margin: { l: 0, r: 0, t: 50, b: 0 }\n});\n\ndisplay(div);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## Is this an appropriate way to show the data?\n\nNot really. The map shows raw counts, so it mostly reflects population. California has the most same-sex married households, followed by Texas, Florida, and New York. The lowest are Montana, Wyoming, and Alaska and South Dakota. These are mostly the largest and smallest states by population, so the map looks a lot like a population map. It makes sense that bigger states have more households, but it doesn't tell us whether same-sex marriages are more common in one state than another. To compare states fairly, the counts need to be divided by each state's total married households.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"const ratio = married.map(d => d.sameSex / d.households * 100);\n\nconst div3 = document.createElement(\"div\");\n\nPlotly.newPlot(div3, [{\n type: \"choropleth\",\n locationmode: \"USA-states\",\n locations: codes,\n z: ratio,\n zmin: 0.4,\n zmax: 2,\n text: stNames,\n customdata: married.map(d => [d.sameSex, d.households]),\n colorscale: [\n [0, \"#f2f0f7\"],\n [0.25, \"#cbc9e2\"],\n [0.5, \"#9e9ac8\"],\n [0.75, \"#756bb1\"],\n [1, \"#54278f\"]\n ],\n colorbar: { title: { text: \"% of married
households\" }, ticksuffix: \"%\" },\n hovertemplate: \"%{text}
%{z:.2f}% same-sex
%{customdata[0]:,} of %{customdata[1]:,} married households\"\n}], {\n title: {\n text: \"Same-Sex Couples as a Share of Married Households (2021)
^{Color scale capped at 2%. DC is 6.0%}\"\n },\n geo: { scope: \"usa\" },\n height: 500,\n margin: { l: 0, r: 0, t: 70, b: 0 }\n});\n\ndisplay(div3);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"## What would be needed for a bubble map?\n\nA bubble map needs a location for each bubble, usually the latitude and longitude of each state's center. This file only has state names, so I would need to add those coordinates. In Plotly, `scattergeo` can also place bubbles directly from the state codes.\n\n## Would it be a better visual encoding?\n\nFor the raw counts, yes. On a choropleth, large states like Montana stand out even though they have very few households, while small states like Rhode Island are hard to see. With bubbles, the size of each mark matches the number of households, not the size of the state. The downside is that bubbles in the Northeast would overlap.\n\nFor the ratio, the choropleth works better, since it shows how common same-sex marriages are within each state on the same scale. Bubble sizes would be hard to compare when the values only range from about 0.4% to 2%.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2"}} 31:"$30:body"