Creating Temperature Chart of Pittsburgh and San Francisco with D3.js

2014 San Francisco temperature (left), 2014 Pittsburgh temperature (right)

Try Temperature Chart from Here

As a person who went through 4 seasons in Pittsburgh, Pennsylvania, and recently moved into the San Francisco Bay Area, the weather was one big thing that everyone was asking me about. Whenever I was telling people here in San Francisco that I was from Pittsburgh, most of the conversations were started with, “Ooh winter must be harsh there, right?”

However, when I started to face the wind and rain in the beginning of fall here, for me it was just as cold as Pittsburgh’s autumn. So I started to wonder, is the temperature really that different? Or if it’s going to be different how big the difference will be? That’s how I decided to create a temperature map of these two cities.

Data with numbers and commas

Gathering data was fairly easy. Weather related data is one of the easiest dataset to collect. Daily, timely data is available everywhere. I went to National Oceanic and Atmospheric Administration’s National Weather Service and Weather Underground to grab 2014’s daily temperature data and converted them into .csv file using Mr. Data Converter

Sketching out the first draft

Then I started designing how the dataset will be displayed as a group. Horizontal bar chart, line chart, area chart… there were many different ways that I could present the data. My goal for the chart was to show the overall shape and color of a year, and at the same time, to present daily details as well.

I sketched out several different approaches based on these thoughts, as well as searching for references and inspirations.

Pedro Monteiro — What Type of Events Affects Oil Prices?

After I saw the reference above, I could easily imagine how the data will be grouped in months like a calendar. This way, the data could be in chunks for readability and for comparability.

Rotating the svg rects

I used svg rect for each bar and manipulated transformation orientation as the center of the svg and rotated them in 360 degrees divided by 31 days to create a circular bar chart.

Colors of winter and summer

First color set that was implemented

Using D3.js, I assigned the domain of the color with a range of red and blue for the hottest and coldest temperature of 2014 in Pittsburgh and San Francisco. When I applied the first red and blue to the graph, it was more towards warmer color than representing both warm and cold temperatures. This gave me an impression that San Francisco’s winter is going to be hot and warm, which was very different from what I felt from the evenings of autumn. Playing with different tones of red and blue, I finally settled with the current set of color for the chart. The blue was providing the right feel of cold I experienced in Pittsburgh and red was representing the hot and dry temperature that I just experienced in Bay Area.

Explored color gradient

Tooltips are here to help you

The next step was to add more information onto the graph. It was important that the map was easy to navigate and was providing the feel of the temperature. However, without the actual data being presented, the map could be interpreted in various ways, differ from person to person. Therefore, I needed to add some type of tooltip that show actual numbers of each bar.

My first approach was, as I saw in many different tooltips, just adding the tooltip at the end of the bar. However, this turned out not to be the best practice. It was unnecessarily taking too much space for showing a simple dataset, squeezing the bars too small and collapsing with other months’ charts. As I was building the tooltip, the solution for this was easily found. When I started building them, the data were positioned in an absolute position inside the svg tag and I remembered that I had a fixed empty space in the middle of each monthly circle. By simply exchanging the name of the month to daily dataset when hovered, the space issue was solved.

Winter jackets to the deep in the closet

The result was pretty interesting. Before going through actual winter in San Francisco, I could approximate how the temperature would be in the winter here by simply comparing the colors and shapes of the temperature map of Pittsburgh winter. I laughed quite hard, surprised from the big difference of Pittsburgh and San Francisco’s temperature. Then I put my winter jacket that I bought in Pittsburgh somewhere deep in my closet.

What’s next?

Adding ticks with dates This could add more information showing which date of a bar that viewers are looking at. Especially because right now, 1st of each month starts from the middle of the right side of the circles.

Adding more cities This case, I probably will re-think the color domain of the bars, as the coldest and the hottest temperature of the year might change.

Adding today’s datum Going further, it would be possible for the chart to be drawn automatically by binding daily dataset from data providers.

Consolidating Wind and Precipitation data Often times I find myself feeling colder than what it was shown on the weather broadcast. Usually the wind is the reason for a big difference, especially when it is rainy and windy and the same time. I believe that it is important to consolidate this information for the better representation of temperature.

Links and references

To see the temperature map click here, To the image reference I used click here

To the image reference I used click here

To Mr. Data Converter click here

To National Oceanic and Atmospheric Administration’s National Weather Service, click here

To Weather Underground, click here