Skip to content

D3/dimple.js visualization using Python cleaned data for the mean number of rainy days by month in Seattle (1948 to 2017).

Notifications You must be signed in to change notification settings

kacox/d3-seattle-rain

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

d3-seattle-rain

Repository for D3 Seattle Rain Visualization

See the visualization directly here: https://kacox.github.io/d3-seattle-rain/

Summary

This visualization shows the average number of rainy days in Seattle, Washington per month. Summer months experience less rain than the winter months. Using Python (Pandas), I distilled this information from a larger dataset. The original dataset contains weather information for 25,551 consecutive days spanning from 1948 to 2017 collected at the Seattle-Tacoma International Airport (SeaTac, Washington, U.S., just south of Seattle).

Design

I considered two different types of bar plots when developing this visualization. I initially thought of using a bar chart with two grouped bars per month, one representing the number of rain days and the other the number of non-rain days. For my first visualization draft I instead made a stacked bar chart. I thought that would be more effective at emphasizing the proportion rather than absolute number of days. My first feedback volunteer was not impressed by the stacked bar chart, so I reverted to my original design idea.

By suggestion from my second feedback volunteer, I added footers to give more information about the data, e.g. what counts as a rainy day.

Substantial design changes occurred after my third round of feedback. My feedback giver suggested making bars appear highlighted when hovered over, rather than only having a tooltip appear. This change greatly improved the feel of my visualization.

The tooltip went through multiple changes as the project progressed. Initially I had overridden the default with simple text above the bars representing the y value of that bar. The third commenter's ideas got me thinking about including a third layer of information. I tried that, but found that it didn't add anything but confusion. Something good that came of that exploration, however, was making a box with a solid background color to enclose the desired hover information. This was better than simply having plain text. The final tooltip, then, was a hybrid: the y value of a given bar contained within a framed, white-background box.

Feedback

Feedback #1
What do you think is the main takeaway from this visualization?
Seattle has less rain in the summer months. Seattle generally seems like a wet location: even in the driest month, there are 5 rain days, about 1 per week.

What questions do you have about the data?
What constitutes a rainy day?

Things to improve:
Reword the first sentence of the Summary, it is confusing.
Have a blurb saying how to see the visualization directly as a web page.
Change the tooltip; having "rain: Rain" is redundant.

Suggestions:
I'm not convinced that a stacked bar chart is better than a side by side bar chart.

Feedback #2
What do you notice in the visualization?
We notice that there's a clear trend between the time of the month and how much rain we see in Seattle.

What questions do you have about the data?
Based on the visualization alone, it's hard to know, what constitutes a rainy day? I assume it's likely based on the amount of precipitation in a day.

I'm also interested in knowing what the original dataset looks like and how many data points do we have in a day.

What relationships do you notice?
We notice that Seattle sees more rain in winter months as compared to summer.

What do you think is the main takeaway from this visualization?
That we see more rain in winter as compared to summer

Is there something you don’t understand in the graphic?
No, the visualization is quite clear.

Suggestions:
Give more details on what the dataset looks like and how many data points are present in a day.

Indicate what classifies as a rainy vs non-rainy day.

Feedback #3
What do you notice in the visualization?
From what I observe, this visualization communicates the number of days it rained and it didn't every month in the city of Seattle. The relationship between the month and the number of days it rained/didn't is pretty clear to me.

What questions do you have about the data?
One question I would have or something which would have been a good addition would be seeing a deeper reveal of information on interaction. It could maybe highlight the day it rained the most in the active (on hover) bar and the day it rained the least. There could also be potential use of color to distinguish between the active bar in contrast with the other bars in the chart. This would add another layer to this visualization.

Is there something you don’t understand in the graphic?
There is nothing that I don't understand in the graphic except maybe the number appearing at the top of the bar on interaction. It took me a few seconds to understand that given it seems a little repetitive and unnecessary as the y axis scale is small enough to gauge the exact number of days by looking at the level of the bar. This interaction could instead be used an excellent opportunity to add a third level of information to the graph as mentioned earlier.

Overall, I think the visualization is effective and does a great job of communicating the relationship between the average number of days it rained during the time frame of an year in Seattle between 1948 - 2017.

Resources

http://seaborn.pydata.org/
https://pandas.pydata.org/pandas-docs/stable/index.html
http://dimplejs.org/examples_viewer.html?id=bars_vertical_stacked
https://stackoverflow.com/questions/25478673/add-colors-to-dimple-js-bar-chart-based-on-value-and-add-goal-line
https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart
https://developer.mozilla.org/
https://stackoverflow.com/questions/23291200/dimple-js-how-can-i-change-the-labels-of-a-chart-axis-without-changing-the-data
https://stackoverflow.com/questions/30090642/customizing-colors-on-dimple-js-charts
http://annapawlicka.com/pretty-charts-with-dimple-js/
https://stackoverflow.com/questions/36314656/selecting-a-section-of-data-from-csv-in-d3-js

Data Source:

https://www.kaggle.com/rtatman/did-it-rain-in-seattle-19482017

Columns:
DATE = the date of the observation in the format (Year-Month-Day)
PRCP = the amount of precipitation, in inches (decimal)
TMAX = the maximum temperature for that day, in degrees Fahrenheit
TMIN = the minimum temperature for that day, in degrees Fahrenheit
RAIN = TRUE if rain was observed on that day, FALSE if it was not

About

D3/dimple.js visualization using Python cleaned data for the mean number of rainy days by month in Seattle (1948 to 2017).

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published