![]() 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.In the early 2000s, a new field of climate-science research emerged that began to explore the human fingerprint on extreme weather, such as floods, heatwaves, droughts and storms. 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. 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. I don't see it used too much, but it is a really beautiful way to show temperature across a year. Maybe I just don't really look at weather visualizations. > 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. So this is by Suzzy Loo whose work we'll use a little bit later today, but like there's some of these. But there are some really beautiful like radial chart weather that people have done. I made this more, because I wanted something pretty for us to make. > Shirley Wu: Yeah, we don't really use them too often. > Speaker 2: It's really cool, never thought of using a radial chart. Really straightforward, really quite straightforward how these are made. And then of course, the fill is the average temperature. 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. ![]() And down here, it makes sense that this is summer time and comes back here for 2017. But yeah, so I think this starts out as January. So in actual production, you should label the dates and months too somehow. I realize after I made this that l labeled the temperatures and I forgot to label the dates and months. I think starting from up here is January. And for each one of the slices, the angle that slice is at is the day in the year. 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. But they're actually made out of 365 SVG path elements. And finally, for this one, each of these slices might look like they're bars or rectangles. This is how we're drawing this line chart. 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. ![]() 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. 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. And I mentioned before that for path, we have to give it a d attribute. > Shirley Wu: And then this line chart is basically two path elements. So the lower temperature minus the higher temperature and then the fill for this one is just the average temperature of the day. 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 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. Because the x, y-coordinate for the top left is the date and basically where this is. It's the temperature and in this particular bar chart, it's the higher temperature. Does anyone one wanna make a guess about the y-axis? You can shout it out, it's okay. ![]() But maybe you can see is the date of the temperature. And so the x-axis, maybe it's a little bit small. > Shirley Wu: It's quite early in the morning, I guess. 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. And so if you look at this, this is 365 rectangle elements. > Shirley Wu: Let's talk about how a bar chart is made. Transcript from the "Weather Data Chart Examples" Lesson
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |