Data Encoding: The y-axis is
encoded with the San Francisco neighborhoods and the x-axis is
encoded with the total number of new builiding permits that have the
intention to build a new building, as opposed to modifications/upgrades.
Each bar is encoded with a color scale. The color scale legend is
positioned above the map of San Francisco. The lowest value is two
new building permits and the highest encoding value was 2025. The
higher values are encoded with the darkest green and the smaller values
are encoded with a lighter green color.
Interaction: The user can hover
over all the bars and a tooltip box will display and show the neighborhood
name for the bar being hovered over, what percentage this neighborhood
takes up of the total new building permits, and the total number of
new building permits. Above the bar chart there are three options in
a menu form. The user can select 'Sort Alphabetical' to sort the y-axis
alphabetically by the neighborhood name. The user can also select
'Sort Descending' to sort the bars in descending order by the total number
of new building permits for each neighborhood and vice versa with the
'Sort Ascending' option. The user can also click each individual bar and
all other bars will be greyed out leaving only the clicked bar highlighted.
Once the user clicks on a bar, the other two visualizations will reflect this as
well and highlight the corresponding neighborhood on the map and in the line chart.
Findings: From this visualization
the user can learn that Bayview/Hunters Point has had the most total
new building permits in the range of 1973 - 2019 and that with 2,025
total new building permits, that neighborhood is triple any other neighborhood
over the same range.
Visualization - Line Chart
Data Encoding: The y-axis is
encoded with the number of new building permits filed and the x-axis
is encoded with the year from 1973 - 2019. Each line on the line graph
represents an individual neighborhood encoded by color using the color
scale above the map of San Francisco as it relates to total new builidng
permits.
Interaction: The user can hover
over all the bars and a tooltip box will display and show the neighborhood
name for the bar being hovered over, what percentage this neighborhood
takes up of the total new building permits, and the total number of
new building permits. Another option is to click each individual line
on the line chart. Once the user clicks a line the other two visualizations
will highlight only the corresponding neighborhood and all other will be greyed out.
Findings: From this visualization
the user can learn that Bayview/Hunters Point has had the highest
peak in any individual year followed by Visitation Valley. The idea for
this visualization is to allow the user to see if the bar chart value
for new building permits was consistent over all the years or if there
were specific high/low times. In the mid 80's and the late 90's there
was a boom in the number of new builidng permits and a dramatic fall in 2007 - 2010
which is due to the huge housing crash due to mortgage backed securities
defaulting.
Visualization - San Francisco Choropleth Map
Data Encoding: Each
neighborhood is encoded with a color using the color scale above the choropleth map.
The color is determined by the total number of new housing permits
in the range from 1973 - 2019 where the lower neighborhoods have a lighter green
and neighborhoods with more permits have a darker green.
Interaction: The user can hover
over all the neighborhoods and a tooltip box will display and show the neighborhood
name for the bar being hovered over, what percentage this neighborhood
takes up of the total new building permits, and the total number of
new building permits. Another option is to click each individual neighborhood
on the map. Once the user clicks a neighbrhood the other two visualizations
will highlight only the corresponding neighborhood and all other will be greyed out.
Findings: From this visualization
the user can learn that Bayview/Hunters Point has had the highest
amount of new housing permits. This map also shows that the middle of the city
which is already heavily populated has had the lower amount of new
housing permits. The city has been developing towards the southern
portion the most from the range of 1973 - 2019.
Credit
Bar Chart: I used
the following website to learn about filtering of D3 data to filter
my bar graph by descending, ascending, and alphabetical.
Link
Bar Chart: I used
the following website to learn about using a tooltip on hover.
Link
Line Chart: I used
the following website to learn how to implement multiple lines in a line
chart and how to distribute the years on the x-axis.
Link
Choropleth Map: I used professor Engle's bl.ocks
example is loading the map and to learn about loading JSON and GEOJSON files.
Link
Choropleth Map: I also used the following stack overflow
post to learn about promises which is new in D3 V5. I learned how to synchronize and
wait for the loading to complete to call functions.
Link