2c:null 2d:["$","title",null,{"children":"HW 3 - ICS 484 | Kate Hamada | Observable"}] 32:T59b,### 3. Styling Choices Explanation \ a. What is a good base map?\ I think carto-voyager is a good base map because its familiar since it looks similar to google maps which makes it easier to recognize where the stations go.\ \ b. What line/point/text style works for this data?\ I think line + marker style works best for this data because the line + marker + text was too much and you couldn't really read the text anyway so I just removed it since you can just hover over it to see the name of the station. I also made it red to bring your attention to it since there are other colors on the map.\ \ c. How should you frame the map? (how much and what do we see when it first appears)\ I think that the map should be focused on the stations rather than the whole island because the rail only covers a small portion of the island so it would be useless to zoom out to the whole island. So the default view on the map is good because there's enough padding so that you have a sense of where you are on Oahu and not get confused. Because personally when I tried to zoom in more, it was difficult to have a good grasp of where the rails are on the island even though I already know where they are.\ \ d. What additional information (such as a title) did you add?\ I added "HART Rail Stations" to indicate what each dot is and to indicate that the line is the path from one end of the rail system to the other.33:Tc91,let marriedData = await d3.csv("https://raw.githubusercontent.com/nuritk/data/main/married.csv"); // US state names to abbreviations let codes = [{"name":"Alabama","abbreviation":"AL"},{"name":"Alaska","abbreviation":"AK"},{"name":"Arizona","abbreviation":"AZ"},{"name":"Arkansas","abbreviation":"AR"},{"name":"California","abbreviation":"CA"},{"name":"Colorado","abbreviation":"CO"},{"name":"Connecticut","abbreviation":"CT"},{"name":"Delaware","abbreviation":"DE"}, {"name":"Florida","abbreviation":"FL"},{"name":"Georgia","abbreviation":"GA"},{"name":"Hawaii","abbreviation":"HI"},{"name":"Idaho","abbreviation":"ID"},{"name":"Illinois","abbreviation":"IL"},{"name":"Indiana","abbreviation":"IN"},{"name":"Iowa","abbreviation":"IA"},{"name":"Kansas","abbreviation":"KS"},{"name":"Kentucky","abbreviation":"KY"},{"name":"Louisiana","abbreviation":"LA"},{"name":"Maine","abbreviation":"ME"},{"name":"Maryland","abbreviation":"MD"},{"name":"Massachusetts","abbreviation":"MA"},{"name":"Michigan","abbreviation":"MI"},{"name":"Minnesota","abbreviation":"MN"},{"name":"Mississippi","abbreviation":"MS"},{"name":"Missouri","abbreviation":"MO"},{"name":"Montana","abbreviation":"MT"},{"name":"Nebraska","abbreviation":"NE"},{"name":"Nevada","abbreviation":"NV"},{"name":"New Hampshire","abbreviation":"NH"},{"name":"New Jersey","abbreviation":"NJ"},{"name":"New Mexico","abbreviation":"NM"},{"name":"New York","abbreviation":"NY"},{"name":"North Carolina","abbreviation":"NC"},{"name":"North Dakota","abbreviation":"ND"},{"name":"Ohio","abbreviation":"OH"},{"name":"Oklahoma","abbreviation":"OK"},{"name":"Oregon","abbreviation":"OR"},{"name":"Pennsylvania","abbreviation":"PA"},{"name":"Rhode Island","abbreviation":"RI"},{"name":"South Carolina","abbreviation":"SC"},{"name":"South Dakota","abbreviation":"SD"},{"name":"Tennessee","abbreviation":"TN"},{"name":"Texas","abbreviation":"TX"},{"name":"Utah","abbreviation":"UT"},{"name":"Vermont","abbreviation":"VT"},{"name":"Virginia","abbreviation":"VA"},{"name":"Washington","abbreviation":"WA"},{"name":"West Virginia","abbreviation":"WV"},{"name":"Wisconsin","abbreviation":"WI"},{"name":"Wyoming","abbreviation":"WY"}]; codes.push( { name: "District of Columbia", abbreviation: "DC" }, { name: "Puerto Rico", abbreviation: "PR" } ); let lookup = Object.fromEntries(codes.map(d => [d.name, d.abbreviation])); let abv_names = marriedData.map(item => lookup[item["State name"].trim()]); // get rid of comma for thousands, plotly isn't able to read it correctly let ss_couples = marriedData.map(item => (item["Married couple households Same-sex"]).replace(/,/g, "")); // print statements // display(marriedData); // display(abv_names); // display(ss_couples); let data = [{ type: 'choropleth', locationmode: 'USA-states', locations: abv_names, z: ss_couples, text: marriedData.map(item => item["State name"]), autocolorscale: false, colorscale: "Greys", colorbar: { title: "Ratio" }, reversescale: true }]; let layout = { title: { text: "Number of Same-Sex Married Households", x: 0, pad: { l: 10 }, }, geo:{ scope: 'usa', } }; const div = DOM.element('div'); Plotly.newPlot(div, data, layout); display(div);34:Tda2,let marriedData = await d3.csv("https://raw.githubusercontent.com/nuritk/data/main/married.csv"); // US state names to abbreviations let codes = [{"name":"Alabama","abbreviation":"AL"},{"name":"Alaska","abbreviation":"AK"},{"name":"Arizona","abbreviation":"AZ"},{"name":"Arkansas","abbreviation":"AR"},{"name":"California","abbreviation":"CA"},{"name":"Colorado","abbreviation":"CO"},{"name":"Connecticut","abbreviation":"CT"},{"name":"Delaware","abbreviation":"DE"}, {"name":"Florida","abbreviation":"FL"},{"name":"Georgia","abbreviation":"GA"},{"name":"Hawaii","abbreviation":"HI"},{"name":"Idaho","abbreviation":"ID"},{"name":"Illinois","abbreviation":"IL"},{"name":"Indiana","abbreviation":"IN"},{"name":"Iowa","abbreviation":"IA"},{"name":"Kansas","abbreviation":"KS"},{"name":"Kentucky","abbreviation":"KY"},{"name":"Louisiana","abbreviation":"LA"},{"name":"Maine","abbreviation":"ME"},{"name":"Maryland","abbreviation":"MD"},{"name":"Massachusetts","abbreviation":"MA"},{"name":"Michigan","abbreviation":"MI"},{"name":"Minnesota","abbreviation":"MN"},{"name":"Mississippi","abbreviation":"MS"},{"name":"Missouri","abbreviation":"MO"},{"name":"Montana","abbreviation":"MT"},{"name":"Nebraska","abbreviation":"NE"},{"name":"Nevada","abbreviation":"NV"},{"name":"New Hampshire","abbreviation":"NH"},{"name":"New Jersey","abbreviation":"NJ"},{"name":"New Mexico","abbreviation":"NM"},{"name":"New York","abbreviation":"NY"},{"name":"North Carolina","abbreviation":"NC"},{"name":"North Dakota","abbreviation":"ND"},{"name":"Ohio","abbreviation":"OH"},{"name":"Oklahoma","abbreviation":"OK"},{"name":"Oregon","abbreviation":"OR"},{"name":"Pennsylvania","abbreviation":"PA"},{"name":"Rhode Island","abbreviation":"RI"},{"name":"South Carolina","abbreviation":"SC"},{"name":"South Dakota","abbreviation":"SD"},{"name":"Tennessee","abbreviation":"TN"},{"name":"Texas","abbreviation":"TX"},{"name":"Utah","abbreviation":"UT"},{"name":"Vermont","abbreviation":"VT"},{"name":"Virginia","abbreviation":"VA"},{"name":"Washington","abbreviation":"WA"},{"name":"West Virginia","abbreviation":"WV"},{"name":"Wisconsin","abbreviation":"WI"},{"name":"Wyoming","abbreviation":"WY"}]; codes.push( { name: "District of Columbia", abbreviation: "DC" }, { name: "Puerto Rico", abbreviation: "PR" } ); let lookup = Object.fromEntries(codes.map(d => [d.name, d.abbreviation])); let abv_names = marriedData.map(item => lookup[item["State name"].trim()]); // get rid of comma for thousands, plotly isn't able to read it correctly // then turned the values to ints to do calculations let ss_couples = marriedData.map(item => parseInt((item["Married couple households Same-sex"]).replace(/,/g, ""))); let total = marriedData.map(item => parseInt((item["Married couple households"]).replace(/,/g, ""))); let ratio = ss_couples.map((item, i) => item / total[i]); // print statements // display(marriedData); // display(ss_couples); // display(total); // display(ratio); let data = [{ type: 'choropleth', locationmode: 'USA-states', locations: abv_names, z: ratio, // changed this to ratio text: marriedData.map(item => item["State name"]), autocolorscale: false, colorscale: "Greys", colorbar: { title: "Ratio" }, reversescale: true }]; let layout = { title: { text: "Ratio of Same-Sex Couples to All Married Households", x: 0, pad: { l: 10 }, }, geo:{ scope: 'usa', } }; const div = DOM.element('div'); Plotly.newPlot(div, data, layout); display(div); 35:T9f7,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?\ I would say this is an appropriate way to showcase the status of same-sex married households across the states because it's accurate in the sense of most states have the same percentage of same-sex married households regardless of political standing since gay marriage was legalized across all states. It seems like the blues state might have higher values and red states have lower values but it's kind of hard to discern which ones have a higher or lower value. 6. Explain your styling decisions for the choropleth charts\ \ a. What base map did you use? \ I just used a blank base map that has an outline of all of the states so that you can clearly see the color representing each state. I tried using a choroplethmap of the US states with the countries/oceans surrounding it but to be honest the surrounding land/ocean just made it overwhelming so I didn't go with it.\ \ b. What color scale did you use? \ I thought that grey scale was the best to use because it was more evident as to where there was higher vs lower values, also to avoid the blue vs red political bias.\ \ c. What additional information (such as a title) did you add?\ I made the titles different between the two maps, for the pure number of same-sex married households I used "Number of Same-Sex Married Households" while I used "Ratio of Same-Sex Couples to All Married Households" for the ratio of same-sex to all married households. The title essentially indicated what the difference between the two maps.\ \ 8. 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?\ Technically I would need latitude and longitude data because with the choropleth maps you can just use the USA-States one in order for the locations to be used for each state. So once you move to a bubble map we would need the latitude and longitude of each state. Although it would be interesting to also use colors to indicate the different sizes of each state to see the pattern of population size to the amount of same-sex marriage households. In the sense that there would be like buckets for different population sizes for each state. I think that a better visual encoding for the data would be a bubble cloud but somehow put it on a map like a bubble map like below: 36:[{"id":"a3d835c2fefef771074619a58d25dc74dcbc5ec9e7ded542b384d1beb4e52df5d2269a88b9b616cb0a5a697e7ad54817eae6d85d30b4d2dec14ae603b15c9daf","href":"https://static.observableusercontent.com/files/a3d835c2fefef771074619a58d25dc74dcbc5ec9e7ded542b384d1beb4e52df5d2269a88b9b616cb0a5a697e7ad54817eae6d85d30b4d2dec14ae603b15c9daf","name":"HART_Stations.geojson","type":"application/octet-stream","lastModified":1790882801544,"size":5671},{"id":"a74cc51cabc357afbbded31f61aa0d71ce41caeb6d4f4903e4378417df92655091ede1cc26bfa96dfd95b2154011e413b583d604d28ae3d472e213ffc174221b","href":"https://static.observableusercontent.com/files/a74cc51cabc357afbbded31f61aa0d71ce41caeb6d4f4903e4378417df92655091ede1cc26bfa96dfd95b2154011e413b583d604d28ae3d472e213ffc174221b","name":"image.png","type":"image/png","lastModified":1791320900908,"size":545546},{"id":"a74cc51cabc357afbbded31f61aa0d71ce41caeb6d4f4903e4378417df92655091ede1cc26bfa96dfd95b2154011e413b583d604d28ae3d472e213ffc174221b","href":"https://static.observableusercontent.com/files/a74cc51cabc357afbbded31f61aa0d71ce41caeb6d4f4903e4378417df92655091ede1cc26bfa96dfd95b2154011e413b583d604d28ae3d472e213ffc174221b","name":"bubble_graph.png","type":"image/png","lastModified":1791320862583,"size":545546}] 30:{"id":"ebba3fe32a8e6714","slug":"hw-3-ics-484","title":"HW 3 - ICS 484","thumbnail":"bccab90593e47af54571428427398db9818b835ea86165593f8f9bdc0038f9c3","access_level":"public","create_time":"$D2026-10-01T19:02:51.137Z","update_time":"$D2026-10-06T21:18:58.741Z","view_time":null,"first_public_time":"$D2026-10-06T21:19:24.452Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b3dbe8e18c461ebd","login":"kate-hamada","name":"Kate Hamada","avatar_url":"https://avatars-next.observableusercontent.com/8772ddc6a496c4b68568603f4dde3d9126156ea70661bae4f4ad6b786c1ac38c","tier":"free_2026","bio":""},"version":323,"publish_version":323,"role":null,"authored":false,"authors":[{"type":"individual","id":"0628d981a422ecae","login":"kate-hamada","name":"Kate Hamada","avatar_url":"https://avatars-next.observableusercontent.com/8772ddc6a496c4b68568603f4dde3d9126156ea70661bae4f4ad6b786c1ac38c","tier":null,"bio":""}],"members":[{"type":"team","id":"b3dbe8e18c461ebd","login":"kate-hamada","name":"Kate Hamada","avatar_url":"https://avatars-next.observableusercontent.com/8772ddc6a496c4b68568603f4dde3d9126156ea70661bae4f4ad6b786c1ac38c","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":"HW 3 - ICS 484","cells":[{"id":1,"value":"# HW 3 - ICS 484\nKate Hamada","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"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":12,"value":"## HART Rail Stations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"### 1. Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"let railStations = await d3.json(\"https://raw.githubusercontent.com/nuritk/data/refs/heads/main/HART_Stations.geojson\");\n\n// coordinates are [long, lat]\nlet long = railStations.features.map(d => d.geometry.coordinates[0]);\n\nlet lat = railStations.features.map(d => d.geometry.coordinates[1]);\n\nlet stations = railStations.features.map(d => d.properties.STATION);\n\n// print statements\n// display(railStations);\n// display(lat);\n// display(long);\n// display(stations);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"### 1. Arrays Explanation\n\nThis is the format of each railStation object.\n\n```\nObject {\n type: \"FeatureCollection\"\n crs: Object {\n type: \"name\"\n properties: Object {name: \"EPSG:4326\"}\n}\n features: Array(21) [0: Object {\n type: \"Feature\"\n id: 1\n geometry: Object {\n type: \"Point\",\n coordinates: Array(2)}\n properties: Object {\n OBJECTID: 1,\n ID: 1,\n STATION: \"Kualakaʻi Station\",\n GlobalID: \"924f7617-51b1-473e-acea-33044c546fd9\",\n station_name_FEIS: \"East Kapolei Station\"}\n}\n````\n\nSo to get the coordinates data which has both latitude and longitude in this format: [lat, long], you would need to do features -> geometry -> coordinates[] to get one of the coordinates. Same concept but for station names but its -> features -> properties -> STATION.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"### 2. Visualizing the Arrays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":" let data = [{\n type: 'scattermap',\n mode: 'lines+markers',\n lon: long,\n lat: lat,\n marker: {\n size: 8, // slightly bigger than default\n color: \"red\"\n },\n text: stations,\n hoverinfo: \"text\", // gets rid of the coordinates when hovering\n }];\n\n let layout = {\n title: {\n text: \"HART Rail Stations\",\n // I preferred the title being left aligned\n x: 0,\n pad: { l: 10 },\n },\n map: {\n style: \"carto-voyager\",\n // center: { lon: -157.95, lat: 21.35 },\n // zoom: 11, // the zoom is too much\n },\n margin: { r: 0, t: 40, b: 0, l: 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Married Household USA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"### 1. Choropleth Map (raw numbers)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":true,"hidden":false,"mode":"ts","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?\nI don't think that this is an appropriate way to showcase the status of same-sex marriage because it's not normalized in the sense that it's just a pure number rather than a ratio to the population of that state which would better indicate the amount of same-sex married couples in each state.\\\n\\\nWhich states have the higher values, which have the lower values, does that\nmake sense to you?\\\nCalifornia, Texas, and Florida have the higher values and states that are kind of more mid-west like Montana, Wyoming, North Dakota, etc. have lower values. This doesn't make sense to me because this map could also be construed as an indicator of the population size of each state which is why California, Texas, and Florida have higher numbers of same-sex married couples.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"### 3. Choropleth Map (ratio)\nCreate a choropleth that shows the ratio of “Married couple households Same-sex” out of\nthe “Married couple households” data column.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"FileAttachment(\"bubble_graph.png\").image()","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"But I also think that it's hard to determine a better way to display the data because who is going to see it and why do we want people to see it. If it's because you want to show that blue states realistically don't have a higher amount of same-sex married households then I think showing percentages with the choropleth works pretty well at showing that it's pretty much the same across the board since they exist everywhere after it's been legalized in the whole country.","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"