2c:null 2d:["$","title",null,{"children":"Assignment 3: Geospatial Visualizations | Justin Kugiyama | Observable"}] 32:T6a0,**Styling Choices for HART Visualization** A good base map for this visualization would be a zoomed-in view of the southern side of Oʻahu because the rail system stretches from the southwest to the south-central region, specifically from Kapolei to Ala Moana. Including other areas of the island would draw attention away from the main focus, which is the rail system, and make it harder to distinguish individual stations due to clustering. For this data, I initially thought that using markers with text labels would work best, as it would show both the locations and names of the stations. However, after trying this approach, the map became cluttered, making it difficult to read each station's name. Because of this, I decided to use a hover feature that displays the station's name when the user hovers over its respective marker. The map should be framed so that the beginning of the rail system is visible on the left side and the end is visible on the right. I also wanted to flatten the overall view of the map to focus more on the rail stations themselves rather than the surrounding areas. Although it is not necessarily additional information, I included the station names through a hover feature to provide more context without cluttering the map with text labels. **How well does the path represent the path of the rail? What additional information would you need?** The map does a fairly good job of representing the general path of the rail system. However, it may be confusing for viewers who are unfamiliar with the layout of Oʻahu and its roads. One improvement would be to include a line connecting the stations, making the rail route easier to follow and understand.33:T7b9,{ const num = (s) => +String(s).replace(/,/g, ""); const abbr = new Map(codes.map((d) => [d.State, d.Abbreviation])); const rows = marriage .filter((d) => abbr.has(d["State name"])) .map((d) => ({ state: d["State name"], code: abbr.get(d["State name"]), sameSex: num(d["Married couple households Same-sex"]) })); // 4 categories split at the quartiles of the raw counts (rounded to nearest 500) const sorted = rows.map((d) => d.sameSex).sort(d3.ascending); const cuts = [0.25, 0.5, 0.75].map((q) => Math.round(d3.quantile(sorted, q) / 500) * 500); const bin = (v) => cuts.filter((c) => v >= c).length; const f = d3.format(","); const labels = [ `Under ${f(cuts[0])}`, `${f(cuts[0])}–${f(cuts[1])}`, `${f(cuts[1])}–${f(cuts[2])}`, `${f(cuts[2])}+` ]; const colors = ["#ffd60a", "#fb8500", "#d00000", "#3a0ca3"]; const data = [{ type: "choropleth", locationmode: "USA-states", locations: rows.map((d) => d.code), z: rows.map((d) => bin(d.sameSex)), text: rows.map((d) => d.state), customdata: rows.map((d) => [d.sameSex]), hovertemplate: "%{text}
%{customdata[0]:,} same-sex married couple households", zmin: -0.5, zmax: 3.5, colorscale: [ [0, colors[0]], [0.25, colors[0]], [0.25, colors[1]], [0.5, colors[1]], [0.5, colors[2]], [0.75, colors[2]], [0.75, colors[3]], [1, colors[3]] ], marker: {line: {color: "white", width: 0.8}}, colorbar: { title: "Same-sex married couple
households", tickmode: "array", tickvals: [0, 1, 2, 3], ticktext: labels, thickness: 14, len: 0.6 } }]; const layout = { title: { text: "Same-Sex Married Couple Households by State (Raw Totals)", x: 0.5, xanchor: "center" }, geo: {scope: "usa"}, dragmode: false }; const div = DOM.element("div"); Plotly.newPlot(div, data, layout); display(div); }34:T7fe,{ const num = (s) => +String(s).replace(/,/g, ""); const abbr = new Map(codes.map((d) => [d.State, d.Abbreviation])); const rows = marriage .filter((d) => abbr.has(d["State name"])) .map((d) => ({ state: d["State name"], code: abbr.get(d["State name"]), sameSex: num(d["Married couple households Same-sex"]), pct: (100 * num(d["Married couple households Same-sex"])) / num(d["Married couple households"]) })); // 4 categories split at the quartiles of the percentage const cuts = [0.25, 0.5, 0.75].map((q) => +d3.quantile(rows.map((d) => d.pct).sort(d3.ascending), q).toFixed(1)); const bin = (p) => cuts.filter((c) => p >= c).length; const labels = [ `Under ${cuts[0]}%`, `${cuts[0]}–${cuts[1]}%`, `${cuts[1]}–${cuts[2]}%`, `${cuts[2]}%+` ]; const colors = ["#ffd60a", "#fb8500", "#d00000", "#3a0ca3"]; // distinct hues const data = [{ type: "choropleth", locationmode: "USA-states", locations: rows.map((d) => d.code), z: rows.map((d) => bin(d.pct)), text: rows.map((d) => d.state), customdata: rows.map((d) => [d.sameSex, d.pct, labels[bin(d.pct)]]), hovertemplate: "%{text}
%{customdata[0]:,} same-sex couples
%{customdata[1]:.2f}% of married couples", zmin: -0.5, zmax: 3.5, colorscale: [ [0, colors[0]], [0.25, colors[0]], [0.25, colors[1]], [0.5, colors[1]], [0.5, colors[2]], [0.75, colors[2]], [0.75, colors[3]], [1, colors[3]] ], marker: {line: {color: "white", width: 0.8}}, colorbar: { title: "% of married couple
households that are same-sex", tickmode: "array", tickvals: [0, 1, 2, 3], ticktext: labels, thickness: 14, len: 0.6 } }]; const layout = { title: { text: "Same-Sex Married Couple Households by State (Ratio)", x: 0.5, xanchor: "center" }, geo: {scope: "usa"}, dragmode: false } const div = DOM.element("div"); Plotly.newPlot(div, data, layout); display(div); }35:Tcaf,**Is using raw totals an appropriate way to showcase same-sex married households across the US?** No, I feel that using raw totals is not an appropriate way to showcase the distribution of same-sex married households across the US because it can lead to misconceptions about the data. For example, viewers may assume that states with higher counts of same-sex marriages also have a higher percentage of same-sex married households. It appears that states with larger populations generally have higher counts of same-sex married households, which makes sense because they have more residents. However, this does not necessarily mean they have a higher percentage. If we were to display percentages instead, the map would likely look different, particularly for more populated states. **Is using the ratio of same-sex married households to total married-couple households more appropriate?** Yes, I feel that using the ratio of same-sex married households to total married-couple households is a more appropriate way to represent this data because it accounts for differences in the number of married households across states. Rather than emphasizing states with higher raw totals, the ratio provides a better understanding of the proportion of same-sex married households. Looking at this map, we can see states such as Texas and Arizona move into lower categories, while states such as Hawaii and Nevada move into higher categories. Percentages and ratios are more informative because they show how same-sex married households compare to the total number of married-couple households, rather than simply displaying raw counts. It makes sense that states with larger populations would generally have higher marriage counts, but this does not necessarily reflect a higher proportion of same-sex marriages. **Explain your design choices for the map.** As explained in class, categorizing the data rather than using a continuous color gradient makes it easier to distinguish which states fall within specific ranges of same-sex marriage totals or percentages. I chose to use a map of the United States because the dataset covers all 50 states. For the color scheme, I did not use a specific color scale but instead selected distinct colors to make the categories easier to differentiate. I also included a legend with labels showing the different ranges of totals or percentages, allowing viewers to identify which category each state belongs to. **What additional information would be needed for a bubble map, and would it be appropriate?** One piece of additional information that could help create a bubble map would be the total population of each state. This would allow us to compare the number of married households to the overall population and better understand how these values relate to one another. However, I feel that a bubble map would be more useful for comparing selected states, the national average, or overall marriage counts across the US. Displaying bubbles for all 50 states could become overwhelming, especially if the bubbles overlap, making it difficult for viewers to interpret the data. Because of this, I believe the categorized map is more appropriate for comparing same-sex married household ratios across states.36:[] 30:{"id":"7abf21d3555246bc","slug":"assignment-3-geospatial-visualizations","title":"Assignment 3: Geospatial Visualizations","thumbnail":"ebd431c54c0e67cfa303f593af4e3008514fc01637539590cc9ffbed5e64f18e","access_level":"public","create_time":"$D2026-10-01T20:02:41.798Z","update_time":"$D2026-10-08T21:06:08.368Z","view_time":null,"first_public_time":"$D2026-10-08T21:04:49.744Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1a3cb77b5f17b0ef","login":"justin-kugiyama","name":"Justin Kugiyama","avatar_url":"https://avatars-next.observableusercontent.com/61927ab74a24a4a8bfd3a2bc20066987d3f5b86fd4f0d51478bf70d7982fa3ed","tier":"starter_2024","bio":""},"version":103,"publish_version":103,"role":null,"authored":false,"authors":[{"type":"individual","id":"c154d217a5012681","login":"justin-kugiyama","name":"Justin Kugiyama","avatar_url":"https://avatars-next.observableusercontent.com/61927ab74a24a4a8bfd3a2bc20066987d3f5b86fd4f0d51478bf70d7982fa3ed","tier":null,"bio":""}],"members":[{"type":"team","id":"1a3cb77b5f17b0ef","login":"justin-kugiyama","name":"Justin Kugiyama","avatar_url":"https://avatars-next.observableusercontent.com/61927ab74a24a4a8bfd3a2bc20066987d3f5b86fd4f0d51478bf70d7982fa3ed","tier":"starter_2024","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":"const hartData = d3.json(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\");","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"display(hartData.features[0])","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const lons = hartData.features.map(d => d.geometry.coordinates[0]);\nconst lats = hartData.features.map(d => d.geometry.coordinates[1]);\nconst names = hartData.features.map(d => d.properties.STATION);\ndisplay({count: names.length, lats, lons, names});","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"**Processing the HART Data**\n\nUpon examining the GeoJSON file, the latitude and longitude coordinates are stored in a coordinates array within each feature's geometry object. To extract these values, we can use the map() function to iterate through each feature and retrieve its coordinates. Since GeoJSON stores coordinates in longitude-latitude order, coordinates\\[0\\] represents longitude, while coordinates\\[1\\] represents latitude. Similarly, we can use the map() function to retrieve the station names by accessing the STATION field within each feature's properties object. This allows us to create separate arrays containing the latitude coordinates, longitude coordinates, and station names for all 21 stations.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import Plotly from \"npm:plotly.js-dist-min\";\n\nconst hart = [\n {\n type: \"scattermap\",\n mode: \"markers\",\n name: \"Stations\",\n lon: lons,\n lat: lats,\n text: names,\n hoverinfo: \"text\",\n marker: {size: 10, color: \"red\", opacity: 0.7}\n }\n];\n\nconst hartLayout = {\n title: \"HART Rail Stations\",\n map: {\n style: \"carto-positron\",\n center: {lon: d3.mean(lons), lat: d3.mean(lats)},\n zoom: 10.5\n },\n height: 500,\n margin: {r: 0, t: 40, b: 0, l: 0}\n};\n\nconst hartDiv = DOM.element(\"div\");\nPlotly.newPlot(hartDiv, hart, hartLayout);\ndisplay(hartDiv);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"const marriage = 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":13,"value":"display(marriage)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"const codes = await d3.csv(\"https://cdn.jsdelivr.net/gh/jasonong/List-of-US-States/states.csv\");","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$33","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$35","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"