Mapping with D3 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'll be building a choropleth map of the percentage of 311 requests made through Twitter by Boston neighborhood. The map will also include a legend and an interactive tooltip. You should be able to use much of the code from our in-class session on mapping and barcharts - the latter will be useful when you're producing a tooltip! Submission Instructions Submit the link of your assignment on Stellar. Remember to publish your notebook so it is publicly accesible!
1. Produce a Choropleth Map In Part 1 of this problem set, you will produce a choropleth map of Boston Neighborhoods, which are shaded according to the percentage of 311 requests that are made using Twitter. You'll need to use the boston.json TopoJSON file and the boston_311_totals.csv file. Your map should: Use d3.schemePurples from d3-scale-quantize() to set colors. Be projected using d3.geoAlbers().
// your code here
2. Add a Tooltip Now we'll want to add some user interaction. We will add the specific percentage of Twitter reporting associated with a given neighborhood. Let's add a tooltip that will display the name of the neighborhood and its percentage when a user mouses over its geometry! Your tooltip should: Have a white background color. Have 5 pixels of padding around the text. Be 60% opaque. All three of these properties should be set using .style() methods! You should also display only two decimal places of any given numeric value. Hint: You can use the .ToFixed() method to define the decimal places.
// your code here;
3. Add a Legend We will add a legend to allow the uses to reference the shading of the neighborhoods. Create a legend in D3, in a similar way of other D3 graphics. You will be drawing rectangles that will be shaded like the geometries and an axis that displays the range to which each rectangle corresponds. *Hints: this example can be a useful reference. To make the legend visible you might have to experiment with the legend's width, and your map's height. Also make sure that your variables are scoped correctly. *