25:["$","title",null,{"children":"Maps Yousuf | Spring 2020 Info Vis | Observable"}] 4c:T5eb,bubble_chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]); svg .append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ccc") .attr("d", path); svg .append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); const legend = svg .append("g") .attr("fill", "#777") .attr("transform", "translate(925,608)") .attr("text-anchor", "middle") .style("font", "10px sans-serif") .selectAll("g") .data([1e6, 5e6, 1e7]) .join("g"); legend .append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("cy", d => -radius(d)) .attr("r", radius); legend .append("text") .attr("y", d => -2 * radius(d)) .attr("dy", "1.3em") .text(d3.format(".1s")); svg .append("g") .attr("fill", "#9e0142") .attr("fill-opacity", 1) .attr("stroke", "#fff") .attr("stroke-width", 1) .selectAll("circle") .data( topojson .feature(us, us.objects.states) .features.map(d => ((d.value = b_data_map.get(d.id)), d)) .sort((a, b) => b.value - a.value) ) .join("circle") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("r", d => radius(d.value)) .append("title") .text( d => `${d.properties.name} ${bubble_format(d.value)}` ); return svg.node(); }4d:[{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1589396383499.547,"size":82031},{"id":"fff537af6f85477bd3b2cf1317d2eaf71dbe5212eb43e5c439767836711d5bfc54c25bf806c2f8d9e66fffc91d676ec548da1c3ced7203f5fe404df2231f8064","href":"https://static.observableusercontent.com/files/fff537af6f85477bd3b2cf1317d2eaf71dbe5212eb43e5c439767836711d5bfc54c25bf806c2f8d9e66fffc91d676ec548da1c3ced7203f5fe404df2231f8064","name":"state_pop.csv","type":"text/csv","lastModified":1589394340910.221,"size":957},{"id":"09a47db90ad270fedf233f94ea412c83a271c0029ece273a5bda29c78cb63a5459e7f77bd2ac3fdf9576d2f1579d980e192d05b9a992541cb0099ca924b73d25","href":"https://static.observableusercontent.com/files/09a47db90ad270fedf233f94ea412c83a271c0029ece273a5bda29c78cb63a5459e7f77bd2ac3fdf9576d2f1579d980e192d05b9a992541cb0099ca924b73d25","name":"fips_pop.csv","type":"text/csv","lastModified":1589399552890.414,"size":610}] 48:{"id":"cc4578902bd7dacd","slug":"maps-yousuf","title":"Maps Yousuf","thumbnail":"275f6c8faa67edc6ceaf199252f9c5c8919af5f2f03d4c3cf01d43fd7ef51d06","access_level":"public","create_time":"$D2020-05-11T19:55:54.076Z","update_time":"$D2020-05-13T20:07:05.438Z","view_time":null,"first_public_time":"$D2020-05-11T20:12:27.775Z","has_unpublished_edits":null,"fork":{"id":"844a04fc3e3463b3","slug":"maps","title":"Maps","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","bio":"UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues. ","followed_by_you":false,"follows_you":false},"version":233,"publish_version":233,"role":null,"authored":false,"authors":[{"type":"individual","id":"e82ff7b39f6354cf","login":"yousufj","name":"","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis","avatar_url":"https://avatars-next.observableusercontent.com/bc5856eb18c3c3e1af37bf9d0984feaa59a0adac48ed6171d34157997208d12d","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Maps Yousuf","cells":[{"id":0,"value":"md`# Maps Yousuf`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"loading_data = md`## Loading Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"FileAttachment(\"state_pop.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"c_data = {\n const text = await FileAttachment(\"state_pop.csv\").text();\n return d3.csvParse(text, ({ x, y }) => ({\n x: x,\n y: y\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"render_data_table(c_data.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"b_data = {\n const text = await FileAttachment(\"fips_pop.csv\").text();\n return d3.csvParse(text, ({ x, y }) => ({\n x: x,\n y: y\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"render_data_table(b_data.slice(0, 10))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`About the data
\nFound from [Kaggle](https://www.kaggle.com/ggiuffre/population-of-provinces-and-states-for-covid19), author is [Lucas Victor](https://www.kaggle.com/lucasvictor).
\n\nThis dataset is a simple two column set, with State name (US) and population (2010). The author notes that \"the source of this data is unofficial as the last numbers from US census bureau were available only from 2010\".\n\nI used the data set both with State names, as well as converting to State FIPS codes to use for my bubble map.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"formatting_data = md`## Formatting Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"us = FileAttachment(\"states-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"c_data_map = Object.assign(\n new Map(\n d3.csvParse(await FileAttachment(\"state_pop.csv\").text(), ({ x, y }) => [\n x,\n +y / 10000\n ])\n ),\n { title: \"Population (Ten Thousands)\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"b_data_map = Object.assign(\n new Map(\n d3.csvParse(await FileAttachment(\"fips_pop.csv\").text(), ({ y, x }) => [\n x,\n +y / 10\n ])\n ),\n { title: \"Population (Ten Thousands)\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"maps = md`## Maps`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`### Choropleth Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"md`Advantages:
\nEach state has a color (falls into a category), which can translate to a population; the data feels more holistic and appears complete.\n\nDisadvantages:
\nThe range is large, so there are many values (states) which fall into the same category (<= 449,000) while some categories have just one value, taking away from the effectiveness of the chart.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 975, 610]);\n\n svg\n .append(\"g\")\n .attr(\"transform\", \"translate(610,20)\")\n .append(() => legend({ color, title: c_data_map.title, width: 260 }));\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(us, us.objects.states).features)\n .join(\"path\")\n .attr(\"fill\", d => color(c_data_map.get(d.properties.name)))\n .attr(\"d\", path)\n .append(\"title\")\n .text(\n d => `${d.properties.name}\n${format(c_data_map.get(d.properties.name))}`\n );\n\n svg\n .append(\"path\")\n .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"color = d3.scaleQuantize([57, 3977], d3.schemeSpectral[10])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"format = d => `${d}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"md`### Bubble Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"md`Advantages:
\nThe size encoding is easy to translate to populations; you can easily see which states have high populations compared to their size (land).\n\nDisadvantages:
\nSome states do not show any dots, due to their small populations (either compared to land size or compared to other states), which makes the graph look incomplete. There is lots of white space, and the legend can be hard to conceptualize.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"radius = d3.scaleSqrt(\n [0, d3.quantile([...b_data_map.values()].sort(d3.ascending), 0.985)],\n [0, 15]\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"bubble_format = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"feedback = md`## Feedback\nOf all the assignments, I felt this one was the most manageable in terms of workload.\n\nI wanted to try implementing a cartograms, but struggled to find examples that were easy to follow/import on oservablehq.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null