30:T539,//Code Based On https://observablehq.com/@d3/state-choropleth map = { const svg = d3.create("svg").attr("viewBox", [0, -100, 975, height]); //Legend svg .append("g") .attr("transform", "translate(0,-100)") .append(() => legend({ color, title: "Total Population by State in 2017", width: 900 }) ); //Creates States svg .append("g") .selectAll("path") .data(topojson.feature(counties, counties.objects.states).features) .join("path") .attr("fill", d => { const color_value = newData.find(state => state.name == d.properties.name) .value; return color(color_value); }) .attr("d", path) .append("title") .text(d => { const pop_value = d.properties.name + " : " + newData.find(state => state.name == d.properties.name).value; return pop_value; }); //State Borders svg .append("path") .datum(topojson.mesh(counties, counties.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("d", path); //Title svg .append("text") .attr("x", width / 2) .attr("y", 40) .style("text-anchor", "middle") .style("font-family", "Montserrat") .text("Population of Each State in 2017"); return svg.node(); }31:T5fd,//Code Partially Adapted from https://observablehq.com/@d3/bubble-map chart = { const svg = d3.create("svg").attr("viewBox", [0, -100, 975, height]); //Creates States svg .append("g") .selectAll("path") .data(topojson.feature(counties, counties.objects.states).features) .join("path") .attr("fill", "#ccc") .attr("d", path) .append("title") .text(d => { const pop_value = d.properties.name + " : " + newData.find(state => state.name == d.properties.name).value; return pop_value; }); //State Borders svg .append("path") .datum(topojson.mesh(counties, counties.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); //Title svg .append("text") .attr("x", width / 2) .attr("y", 40) .style("text-anchor", "middle") .style("font-family", "Montserrat") .text("Population of Each State in 2017"); //Creates Circles svg .append("g") .attr("fill", "brown") .attr("fill-opacity", 0.5) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll("circle") .data(topojson.feature(counties, counties.objects.states).features) .join("circle") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("r", d => { const pop_value = newData.find(state => state.name == d.properties.name) .value; return Math.sqrt(pop_value) / 100; }); return svg.node(); }32:[{"id":"f575086aaceb415680e1f6a9cb0956956b7c06450cd82603cba574d02b2afeb2ad84baf8ffef49be28804f03751cb42baac95d664cd9b15c0a7937d33ab7f24b","href":"https://static.observableusercontent.com/files/f575086aaceb415680e1f6a9cb0956956b7c06450cd82603cba574d02b2afeb2ad84baf8ffef49be28804f03751cb42baac95d664cd9b15c0a7937d33ab7f24b","name":"acs2017_census_tract_data.csv","type":"text/csv","lastModified":1589227435556.504,"size":14952204},{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1589230768483.477,"size":795407}] 2e:{"title":"Maps - Banusing","cells":[{"id":0,"value":"md`# Maps - Banusing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`In this assignment, you will create **two maps** and discuss their **advantages/disadvantages** using the data of your choice (you may want to use different data for each map type). You should choose between the following map options:\n- **Bubble map**: showing data that occurs at _discrete locations_\n- **Choropleth map**: showing data that applies to entire geographies\n- **Grid cartograpm**: showing data that applies to entire geographies (see [here](https://observablehq.com/@severo/grid-cartograms))\n\nYou may **import one map**, but must write the code in this notebook for the other map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing! This happens every week!\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Maps Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/maps-assignments)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"loading_data = md`## Loading Data\nAs in previous notebooks, you'll choose the dataset to work with in this assignment. The only real requirement is that the dataset has a geographic nature to it. Many datasets contain geographic locations, but keep in mind how you will match the name of each location (e.g., state abbreviation or country name) to any **shape files** (e.g., the \\`.json\\` files describing how to draw the locations).\n\nIn the cells below, please do the following:\n- Load your data (either directly from the web, or by uploading it as [File Attachment](https://observablehq.com/@observablehq/file-attachments))\n- Display a subset of the data (e.g., the first ~10 rows) using the \\`render_data_table()\\` function, which I've already imported below (see how we did that [here](https://observablehq.com/@info474/javascript-data-wrangling?collection=@info474/tutorials#loading_data))\n- Tell us a little bit about the data (just enough so we understand where the data came from, and what we're looking at).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"data = d3.csvParse(\n await FileAttachment(\"acs2017_census_tract_data.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"render_data_table(data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"md` This data set is from Kaggle, and it shows census data for counties and states across the USA in 2017. This includes income, ethnic and professional data for each location. `","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"formatting_data = md`## Formatting Data\nIn order to map your data, you'll need to somehow match the data from your dataset to your shapefile. You may want to do that by iterating through your shapefile and **adding a property** to each location of your data value. You may also want to take this opportunity to create a color or radius **scale**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"newData = d3\n .nest()\n .key(dataTable => dataTable.State)\n .rollup(dataTable => d3.sum(dataTable, d => d.TotalPop))\n .entries(data)\n .map(dataTable => {\n return {\n name: dataTable.key,\n value: dataTable.value\n };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"color = d3.scaleQuantize([minAmount, maxAmount], d3.schemeReds[7])","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"maxAmount = d3.max(newData.map(d => d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":169,"value":"minAmount = d3.min(newData.map(d => d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"maps = md`## Maps\nIn the section below, create **two maps** and discuss their **advantages/disadvantages** using the data of your choice. You may **import one map**, but must write the code in this notebook for the other map.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"counties = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"topojson.feature(counties, counties.objects.states).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`The map above is a choropleth map. The advantage of it is that it's easy to understand the gist of the visualization since the colors clearly show how one node fares in comparison to the other. Its primary disadvantage is when designers want to communicate very specific information or when the nodes have values that are quite close to one another; in those scenarios, it will be hard to tell the differences. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`The map above is a bubble map. The advantage of it is that it clearly shows how \"big\" something is in one place compared to another, making comparative observations easier. A disadvantage it could have is also in terms of perception in that some things may appear smaller than they actually are compared to the other nodes due to the perception of scale.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {\n displayCaution,\n render_data_table,\n table_styles\n} from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"path = d3.geoPath()","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"_ = require(\"lodash@4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"format = d => `${d}%`","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"table_styles","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}