This cholorpeth map shows the destribution of affordable housing between supervisor districts. The red gradient encodes the amount of affordable units in the district (the brighter the color, the more units are stored). The visualization is highly interactive, we can hover over each district to see its number and notable neighborhoods; we can also hover over the pie chart to filter the data by the unit type (1bedroom, 2bedroom, etc.). Moreover, if we click on the pie chart, the data will stay filtered when we mouseover, allowing us to further explore the visualization.
Just by looking at this map, we can easily tell that the majority of affordable housing goes to "supervisor district 6" (Sunset, JapanTown, Fillmore), which makes sense, since those are the areas where the most construction is taking place right now. However, filtering by the unit type shows me that only one bedroom units are prevalent in Filmore, so if you're looking for a bigger but affordable appartment, you might need to consider "district 10" (Mission District, Bernal Heights)
This visualization involved a lot of data processing. In order to use the map, I had to download district.geojson from SFOpenData, since it's the only location data that matched with the original dataset (supervisor districts were the same). After drawing the map, I had to use d3.nest to sort the original dataset by district and calculate the sum of each unit type for the constantly updating colorscale. In order to draw a pie chart, I first calculated the sum of each unit type in excel, and then I created a separate CSV, where I entered this data.