Weather Data Chart Examples

[00:00:00]
>> Shirley Wu: Let's talk about how a bar chart is made. And so if you look at this, this is 365 rectangle elements. SVG rectangle elements and then I want us to kinda work through together what the x coordinates might be, the y and what the width and height might be.

[00:00:24]
Yeah.
>> Shirley Wu: It's quite early in the morning, I guess. [LAUGH] And so the x-axis, maybe it's a little bit small. But maybe you can see is the date of the temperature. Does anyone one wanna make a guess about the y-axis? You can shout it out, it's okay. I heard you.

[00:00:47]
>> Speaker 2: Maybe temperature.
>> Shirley Wu: Thank you. It's the temperature and in this particular bar chart, it's the higher temperature. Because the x, y-coordinate for the top left is the date and basically where this is. So this is the high temperature for that day and then we're trying to make a bar that goes from the high temperature to the low temperature.

[00:01:17]
So the height of this rectangle is a difference between the low, because that's the one down here and that's the one with the bigger wide coordinate. So the lower temperature minus the higher temperature and then the fill for this one is just the average temperature of the day.

[00:01:45]
>> Shirley Wu: And then this line chart is basically two path elements. And I mentioned before that for path, we have to give it a d attribute. And for this particular one, it's a d attribute where it's a bunch of line commence that connect points where each of the points are the temperature for the date.

[00:02:08]
So yeah, for each point, the x-coordinate is the date and the y is the temperature and I'm drawing two paths, one red, one blue. So one for the y-coordinates, these are either the high temperature for the first path and the low temperature for the second path and the fill is red for high temperature and blue for the low temperature.

[00:02:34]
This is how we're drawing this line chart. And finally, for this one, each of these slices might look like they're bars or rectangles. But they're actually made out of 365 SVG path elements. And for each of the d attributes, the commands are both in line and curve commands to make up each of those slices for each of the dates.

[00:03:05]
And for each one of the slices, the angle that slice is at is the day in the year. I think starting from up here is January. I realize after I made this that l labeled the temperatures and I forgot to label the dates and months. [LAUGH] So in actual production, you should label the dates and months too somehow.

[00:03:31]
[LAUGH] But yeah, so I think this starts out as January. And down here, it makes sense that this is summer time and comes back here for 2017. So angles our days, the inner radius as kind of the inside part of the slice is the lower temperature and it goes out to the outer radius up here which is the high temperature.

[00:03:59]
And then of course, the fill is the average temperature. Really straightforward, really quite straightforward how these are made.
>> Speaker 2: It's really cool, never thought of using a radial chart.
>> Shirley Wu: Yeah, we don't really use them too often. I made this more, because I wanted something pretty for us to make.

[00:04:22]
But there are some really beautiful like radial chart weather that people have done. So this is by Suzzy Loo whose work we'll use a little bit later today, but like there's some of these.
>> Shirley Wu: These are really gorgeous and they have that same concept of the temperatures, but also if you can see some of the blue on here is the rain fall.

[00:04:54]
I don't think I see it too much. Maybe I just don't really look at weather visualizations. I don't see it used too much, but it is a really beautiful way to show temperature across a year. And we can talk a little bit about different times menu you might want to use something like something radial is great for when you have data that's continuous.

[00:05:21]
Kind of like it starts out in January and ends in December 31st, but not very appropriate if you want to be say, showing data from, I don't know 2016 to 2018 or something like that. So radial charts are really great for when you're trying to show something that's just one year or one month, one hour, etc.