30: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 `31:T4d6,viewof state = html``32:T67f,chart = { const svg = (this ? d3.select(this) : d3.create("svg")) .attr("width", width) .attr("height", height) .attr("viewBox", `0 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.type) .attr("x", x(0)) .attr("y", d => y(d.type)) .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.type) .attr("y", d => y(d.type) + 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(); }33:T6a8,chart2 = { const svg = (this ? d3.select(this) : d3.create("svg")) .attr("width", width) .attr("height", height) .attr("viewBox", `0 0 ${width} ${height}`); if (!this) { svg.append("g") .attr("fill", "steelblue") .selectAll("rect") .data(data_select) .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_select) .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(data_select, d => d.type) .attr("x", x2(0)) .attr("y", d => y2(d.type)) .attr("height", y2.bandwidth()) .transition() .delay((d, i) => i * 20) .attr("width", d => x2(d.value) - x2(0)); svg.selectAll(".label") .data(data_select, d => d.type) .attr("y", d => y2(d.type) + 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(x2).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(y2).tickSizeOuter(0))); return svg.node(); } 34:[] 2e:{"title":"PSET 8","cells":[{"id":0,"value":"md`# PSET 8`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":30,"value":"\nhtml`

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"boston311 = d3.csv('https://gist.githubusercontent.com/cesandoval/046a91586ae76889aeb5b3e9db53016e/raw/ffb0c410ce8503c8c839cde01235bafb39cb14ad/bostosn_311.csv')","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"subMethod={\n return boston311.columns.slice(2,8)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"boston311.map(d=>d.Name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"boston311_clean=boston311.slice(0,25)","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"z = require('https://bundle.run/zebras@0.0.11')","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"data = {\n if(state==\"All\"){\n var tem=boston311_clean\n var all_array=[]\n for(var i=0; i a + b) })\n }\n return all_array\n \n }else{\n var state_data=z.filter(r=> r.Name==state, boston311_clean)\n var state_array=[]\n for(var i=0; i d.value)])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.type))\n .range([height - margin.bottom, margin.top])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"height = data.length * 40 + margin.top + margin.bottom","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"margin = ({top: 10, right: 0, bottom: 20, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":34,"value":"\nhtml`

`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"width2=900","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"height2=600","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"bosProjection=d3.geoAlbers()\n .scale(190000)\n .rotate([71.057,0])\n .center([0,42.313])\n .translate([width2/2,height2/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"bos_geoPath=d3.geoPath()\n .projection(bosProjection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"color = d3.scaleQuantize()\n .domain([0,10])\n .range(d3.schemePurples[9]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"bostonTotal_data={ \n var tem=z.parseNums([\"tot_count \t\t\t\"], boston311_clean)\n var tem2=z.addCol(\"tot_count\", z.getCol(\"tot_count \t\t\t\", tem), tem)\n return tem2\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"colored_boston311={\n const colorBy311={}\n bostonTotal_data.forEach(d=>(colorBy311[d.Name]=color(Math.log(d.tot_count))))\n return colorBy311\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"{\nlet width = 960;\nlet height = 600;\nlet value = null;\n \n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\nconst g = svg.append(\"g\")\n \n \n// Bind TopoJSON data\ng.selectAll(\"path\")\n .data(topojson.feature(boston, boston.objects.boston_neigh).features) // Bind TopoJSON data elements\n .enter().append(\"path\")\n .attr(\"d\", bos_geoPath)\n .style(\"fill\", d=>colored_boston311[d.properties.Name])\n .style(\"stroke\", \"black\")\n .on(\"click\", d => {\n const node = svg.node();\n node.value = value = value === d.properties.OBJECTID ? null : d.properties.OBJECTID;\n node.dispatchEvent(new CustomEvent(\"input\"));\n outline.attr(\"d\", value ? bos_geoPath(d) : null);\n });\n \n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(700,40)\")\n .call(legend);\n \n const outline = svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"red\");\n\n\nreturn Object.assign(svg.node(), {value: null});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"legend = g => {\n const x = d3.scaleLinear()\n .domain(d3.extent(color.domain()))\n .rangeRound([0, 260]);\n\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 g.append(\"text\")\n .attr(\"x\", x.range()[0])\n .attr(\"y\", -6)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data2.title);\n\n g.call(d3.axisBottom(x)\n .tickSize(13)\n .tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))\n .select(\".domain\")\n .remove();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"data2 = Object.assign(new Map(await format), {title: \"Total Reports per neighborhood(Log Scale)\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"nameList=z.getCol([\"Name\"],bostonTotal_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"format={\n var tem=[]\n for (var i=0;i r.Name==nameList[i],bostonTotal_data)\n tem.push([nameList[i],Math.log(tem2[0][\"tot_count\"])])\n }\n return tem\n}","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":37,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"viewof state2 ={\nlet width = 960;\nlet height = 600;\nlet value = null;\n \n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\nconst g = svg.append(\"g\")\n \n \n// Bind TopoJSON data\ng.selectAll(\"path\")\n .data(topojson.feature(boston, boston.objects.boston_neigh).features) // Bind TopoJSON data elements\n .enter().append(\"path\")\n .attr(\"d\", bos_geoPath)\n .style(\"fill\", d=>colored_boston311[d.properties.Name])\n .style(\"stroke\", \"black\")\n .on(\"click\", d => {\n const node = svg.node();\n node.value = value = value === d.properties.OBJECTID ? null : d.properties.OBJECTID;\n node.dispatchEvent(new CustomEvent(\"input\"));\n outline.attr(\"d\", value ? bos_geoPath(d) : null);\n });\n \n svg.append(\"g\")\n .attr(\"transform\", \"translate(700,40)\")\n .call(legend);\n \n const outline = svg.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"red\");\n\n\nreturn Object.assign(svg.node(), {value: null});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"data_select = {\n if(state2== null){\n var tem=boston311_clean\n var all_array=[]\n for(var i=0; i a + b) })\n }\n return all_array\n \n }else{\n var state_data=z.filter(r=> r.id==state2, boston311_clean)\n var state_array=[]\n for(var i=0; i d.value)])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"y2 = d3.scaleBand()\n .domain(data_select.map(d => d.type))\n .range([height - margin.bottom, margin.top])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"import {chart as choropleth} from \"@chagel/d3-choropleth\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"boston = d3.json('https://gist.githubusercontent.com/cesandoval/09b2e39263c748fbcb84b927cecc7c46/raw/ab71d3638efd2545ec99c2651c6f2ddcea9d2a07/boston.json')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}