2c:null 2d:["$","title",null,{"children":"PSET 8 | rlluo1 | Observable"}] 32:T527,md`## Linking Multiple D3 Visualizations We emphasize code readability and reusability over performance. Code performance can be measured in many different ways, and is by no means the focus of this course, however, we expect your code to be non-repetitive, clean, and efficient enough to deal with medium-to-large datasets. In this problem set, we will be combining charts and maps, and creating some interaction between them. We will make a paired graphic that implements some user interaction whick will select the neighborhoods on a map that will change the bar chart that is displayed. You'll need to use the [boston.json](https://gist.githubusercontent.com/cesandoval/09b2e39263c748fbcb84b927cecc7c46/raw/ab71d3638efd2545ec99c2651c6f2ddcea9d2a07/boston.json) TopoJSON file and the [boston_311_totals.csv](https://gist.githubusercontent.com/cesandoval/046a91586ae76889aeb5b3e9db53016e/raw/ffb0c410ce8503c8c839cde01235bafb39cb14ad/bostosn_311.csv) file. For inspiration, you should look at PSET 6 and PSET 7, as well as these examples: [example 1](https://observablehq.com/@mbostock/coordinated-imports), and [example 2](https://observablehq.com/@d3/histogram). ## Submission Instructions Submit the link of your assignment on Stellar. \n **Remember to publish your notebook so it is publicly accesible!** \n `33:T4c6,viewof neighborhood = html``34:T6f6,//building off the Mike Bostock code from https://observablehq.com/@mbostock/u-s-population-by-age/2 chart = { const svg = (this ? d3.select(this) : d3.create("svg")) .attr("width", width) .attr("height", height) .attr("viewBox", `-70 0 ${width} ${height}`); if (!this) { svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data) .enter().append("rect") .attr("class", "bar") .attr("width", 0); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(data) .enter().append("text") .attr("class", "label") .attr("dy", "0.35em") .attr("x", x(0) - 4); svg.append("g") .attr("class", "x-axis"); svg.append("g") .attr("class", "y-axis"); } svg.selectAll(".bar") .data(data, d => d.variable) .attr("x", x(0)) .attr("y", d => y(d.variable)) .attr("height", y.bandwidth()) .transition() .delay((d, i) => i * 20) .attr("width", d => x(d.value) - x(0)); svg.selectAll(".label") .data(data, d => d.variable) .attr("y", d => y(d.variable) + y.bandwidth() / 2) .text(d => d.value.toLocaleString()) .transition() .delay((d, i) => i * 20) .attr("x", d => x(d.value) - 4); svg.select(".x-axis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(g => g.transition().call(d3.axisBottom(x).ticks(width / 80, "s"))) .call(g => g.select(".domain").remove()); svg.select(".y-axis") .attr("transform", `translate(${margin.left},0)`) .call(g => g.transition().call(d3.axisLeft(y).tickSizeOuter(0))); return svg.node(); }35:T496,//https://observablehq.com/@mbostock/u-s-state-map viewof bostonMap = { const width = 960; const height = 600; let value = null; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") const g = svg.append("g") g.selectAll("path") .data(topojson.feature(boston, boston.objects.boston_neigh).features) // Bind TopoJSON data elements .enter().append("path") .attr("d", bos_geoPath) .attr("transform","translate(50,200)") .style("fill", d => color(Math.log(tot311[d.properties.OBJECTID]['total']))) .style("stroke", "black") .on("click", d => { const node = svg.node(); node.value = value = value === d.properties.OBJECTID ? null : d.properties.OBJECTID; node.dispatchEvent(new CustomEvent("input")); outline.attr("d", value ? bos_geoPath(d) : null); }); svg.append("g") .attr("transform","translate(700,500)") .attr("fill", "#ccc") .call(legend); const outline = svg.append("path") .attr("fill", "none") .attr("stroke", "yellow") .attr("transform","translate(50,200)") return Object.assign(svg.node(), {value: null}); }36:T703,//building off the Mike Bostock code from https://observablehq.com/@mbostock/u-s-population-by-age/2 chart2 = { const svg = (this ? d3.select(this) : d3.create("svg")) .attr("width", width) .attr("height", height) .attr("viewBox", `-70 0 ${width} ${height}`); if (!this) { svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data2) .enter().append("rect") .attr("class", "bar") .attr("width", 0); svg.append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "12px sans-serif") .selectAll("text") .data(data2) .enter().append("text") .attr("class", "label") .attr("dy", "0.35em") .attr("x", x2(0) - 4); svg.append("g") .attr("class", "x-axis"); svg.append("g") .attr("class", "y-axis"); } svg.selectAll(".bar") .data(data2, d => d.variable) .attr("x", x2(0)) .attr("y", d => y2(d.variable)) .attr("height", y2.bandwidth()) .transition() .delay((d, i) => i * 20) .attr("width", d => x2(d.value) - x(0)); svg.selectAll(".label") .data(data2, d => d.variable) .attr("y", d => y2(d.variable) + y2.bandwidth() / 2) .text(d => d.value.toLocaleString()) .transition() .delay((d, i) => i * 20) .attr("x", d => x2(d.value) - 4); svg.select(".x-axis") .attr("transform", `translate(0,${height - margin.bottom})`) .call(g => g.transition().call(d3.axisBottom(x).ticks(width / 80, "s"))) .call(g => g.select(".domain").remove()); svg.select(".y-axis") .attr("transform", `translate(${margin.left},0)`) .call(g => g.transition().call(d3.axisLeft(y).tickSizeOuter(0))); return svg.node(); }37:T497,//https://observablehq.com/@mbostock/u-s-state-map viewof bostonMap2 = { const width = 960; const height = 600; let value = null; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") const g = svg.append("g") g.selectAll("path") .data(topojson.feature(boston, boston.objects.boston_neigh).features) // Bind TopoJSON data elements .enter().append("path") .attr("d", bos_geoPath) .attr("transform","translate(50,200)") .style("fill", d => color(Math.log(tot311[d.properties.OBJECTID]['total']))) .style("stroke", "black") .on("click", d => { const node = svg.node(); node.value = value = value === d.properties.OBJECTID ? null : d.properties.OBJECTID; node.dispatchEvent(new CustomEvent("input")); outline.attr("d", value ? bos_geoPath(d) : null); }); svg.append("g") .attr("transform","translate(700,500)") .attr("fill", "#ccc") .call(legend); const outline = svg.append("path") .attr("fill", "none") .attr("stroke", "yellow") .attr("transform","translate(50,200)") return Object.assign(svg.node(), {value: null}); }38:[] 30:{"id":"0133f4ef964b629c","slug":"pset-8","title":"PSET 8","thumbnail":"74398ae6643b6d0e3e28f1d20aed9ba041b4f7db87ae3746cdba7811b3a6dbe7","access_level":"public","create_time":"$D2019-04-20T15:05:23.031Z","update_time":"$D2019-04-30T03:41:30.221Z","view_time":null,"first_public_time":"$D2019-04-20T15:05:30.742Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"10cbf6aece7b1ac0","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":"starter_2024"},"version":327,"publish_version":327,"role":null,"authored":false,"authors":[{"type":"individual","id":"be1cceaa90e2dfbd","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":null}],"members":[{"type":"individual","id":"be1cceaa90e2dfbd","login":"rlluo1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7a6a1a90a41b4c8bff4fdd1fd552869b31666211002b67794fd27ec4b9d55cc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1b23e9665a1eeead","slug":"psets_11-454","title":"Psets_11.454","owner":{"id":"10cbf6aece7b1ac0","login":"rlluo1","name":""}},"type":"notebook","body":{"titling":"auto","title":"PSET 8","cells":[{"id":0,"value":"md`# PSET 8`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## 1. Bar Charts\nCreate a bar chart that initially displays the total 311 requests of all the neighborhoods by submission method.\n- Every bar should display a different type of submission methods. We will have one bar for 311 requests submitted through twitter, one for self-service ones, etc. \n- Add a dropdown menu that selects a different neighborhood in Boston, and modifies the bar chart values.\n\nYour final result could look like this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"\nhtml`

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"//import d3 library\nd3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"z = require('https://bundle.run/zebras@0.0.11')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"//import 311 data and parse values as numbers\nb311 = d3.csv(\"https://gist.githubusercontent.com/cesandoval/046a91586ae76889aeb5b3e9db53016e/raw/ffb0c410ce8503c8c839cde01235bafb39cb14ad/bostosn_311.csv\")//({id,Name,Citizens_Connect_App,City_Worker_App,Constituent_Call,Employee_Generated,twitter,Self_Service,tot_count}) => ({id: +id, Name: Name, Citizens_Connect_App: +Citizens_Connect_App, City_Worker_App: +City_Worker_App, Constituent_Call: +Constituent_Call, Employee_Generated: +Employee_Generated, twitter: +twitter, Self_Service: +Self_Service, tot_count: +'tot_count \t\t\t'}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":" b311Clean = {\n return z.parseNums([\"id\",\"Citizens_Connect_App\",\"City_Worker_App\",\n \"Constituent_Call\",\"Employee_Generated\",\"twitter\",\"Self_Service\",\"tot_count \t\t\t\"], b311)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"//thanks to Yichun for the reduce function used here!\ndata = { \n var temp=[]\n \n if(neighborhood==\"All\"){\n for(var i=0; i < b311.columns.slice(2,8).length; i++){\n temp.push({\n \"variable\":b311.columns.slice(2,8)[i],\n \"value\": z.getCol(b311.columns.slice(2,8)[i], b311Clean).reduce((a, b) => a + b)\n })\n }\n return temp\n }\n \n var filterData=z.filter(r=> r.Name==neighborhood, b311Clean)\n for(var i=0; i < b311.columns.slice(2,8).length; i++){\n temp.push({\n \"variable\":b311.columns.slice(2,8)[i],\n \"value\":z.getCol([b311.columns.slice(2,8)[i]],filterData)[0]\n })\n }\n return temp\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"x = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([margin.left, width - margin.right-80])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.variable))\n .range([height - margin.bottom, margin.top])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"height = data.length * 40 + margin.top + margin.bottom ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"margin = ({top: 10, right: 0, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md `## 2. Interactive map\nCreate an interactive choropleth map of Boston that colors the neighborhoods based on their total number of 311 reports.\n- Use d3.schemePurples[9] from [d3-scale-quantize()](https://github.com/d3/d3-scale/blob/master/README.md#quantize-scales) to set colors.\n- Be projected using [d3.geoAlbers()](https://github.com/d3/d3-geo/blob/master/README.md#geoAlbers).\n- Allows the user to select each one of the neighborhoods by clicking on them. \n- When a neighborhood is selected, the outline of the neighborhood should turn red.\n\nYour final result could look like this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"\nhtml`

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"// import Boston topojsons\nboston = d3.json('https://gist.githubusercontent.com/cesandoval/09b2e39263c748fbcb84b927cecc7c46/raw/ab71d3638efd2545ec99c2651c6f2ddcea9d2a07/boston.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// project using Albers\nbosAlbers = d3.geoAlbers()\n .scale( 190000 )\n .rotate( [71.057,0] )\n .center( [0, 42.313] )\n .translate( [width/2,height/2] )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"// use D3 function to turn lat-long into positions on a screen\nbos_geoPath = d3.geoPath()\n .projection( bosAlbers );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"tot311 = {\n \n// Create empty object for holding dataset\nconst tot311ByNeigh = {};\nb311Clean.forEach(d => \n tot311ByNeigh[d.id] = {total: d['tot_count \t\t\t']})\nreturn tot311ByNeigh;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// create appropriate purple color scale for chloropleth\ncolor = d3.scaleQuantize()\n .domain([1, 12])\n .range(d3.schemePurples[9]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"\nlegend = g => {\n \n //scale for size of legend box\n const x = d3.scaleLinear()\n .domain(d3.extent(color.domain()))\n .rangeRound([0, 250]);\n\n // colored gradient box for the legend\n g.selectAll(\"rect\")\n .data(color.range().map(d => color.invertExtent(d)))\n .join(\"rect\")\n .attr(\"height\", 8)\n .attr(\"x\", d => x(d[0]))\n .attr(\"width\", d => x(d[1]) - x(d[0]))\n .attr(\"fill\", d => color(d[0]));\n\n // legend title; shifted down along y axis so that it shows up on the SVG\n g.append(\"text\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", 50)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"311s per neighborhood (log scale)\");\n\n // add on labeled tickmarks \n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickFormat(d => d3.format(\".2n\")(d))\n .tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))\n .select(\".domain\")\n .remove();\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md `## 3. Putting it all together\nCombine the bar charts with the map interaction. Everytime the user selects a neighborhood, the bar charts should get updated to reflect the values of the selected neighborhood, instead of the sum of all neighborhoods. \n- You can place the chart and the map in different cells if you'd like.\n\nYour final result could look like this:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"//thanks to Yichun for the reduce function used here!\ndata2 = { \n var temp=[]\n \n if(bostonMap2==null){\n for(var i=0; i < b311.columns.slice(2,8).length; i++){\n temp.push({\n \"variable\":b311.columns.slice(2,8)[i],\n \"value\": z.getCol(b311.columns.slice(2,8)[i], b311Clean).reduce((a, b) => a + b)\n })\n }\n return temp\n }\n \n var filterData=z.filter(r=> r.id==bostonMap2, b311Clean)\n for(var i=0; i < b311.columns.slice(2,8).length; i++){\n temp.push({\n \"variable\":b311.columns.slice(2,8)[i],\n \"value\":z.getCol([b311.columns.slice(2,8)[i]],filterData)[0]\n })\n }\n return temp\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"x2 = d3.scaleLinear()\n .domain([0, d3.max(data2, d => d.value)])\n .range([margin.left, width - margin.right-80])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"y2 = d3.scaleBand()\n .domain(data2.map(d => d.variable))\n .range([height - margin.bottom, margin.top])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"