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 TopoJSON file and the boston_311_totals.csv file. For inspiration, you should look at PSET 6 and PSET 7, as well as these examples: example 1, and example 2. Submission Instructions Submit the link of your assignment on Stellar. Remember to publish your notebook so it is publicly accesible!
1. Bar Charts Create a bar chart that initially displays the 311 requests of all the neighborhoods by submission method. 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. Add a dropdown menu that selects a different neighborhood in Boston, and modifies the bar chart values.
// your code here
2. Interactive map Create an interactive choropleth map of Boston that colors the neighborhoods based on their total number of 311 reports. Use d3.schemePurples from d3-scale-quantize() to set colors. Be projected using d3.geoAlbers(). Allows the user to select each one of the neighborhoods by clicking on them. When a neighborhood is selected, the outline of the neighborhood should turn red.
3. Putting it all together Combine 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. You can place the chart and the map in different cells if you'd like.