Check out a free preview of the full Building Custom Data Visualizations course

The "Chart Brainstorming Solution, Part 4" Lesson is part of the full, Building Custom Data Visualizations course featured in this preview video. Here's what you'd learn in this lesson:

Shirley reviews another student's brainstorming sketch and transforms the idea into a Vega-Lite line chart.

Preview
Close

Transcript from the "Chart Brainstorming Solution, Part 4" Lesson

[00:00:00]
>> Shirley Wu: Let's move on to the next one, which I think was either a line chart or a area chart of the genres over the years. So let's do that together, and so what that would be is. So for this one, we're trying to do the x axis is year, and the y axis is it was popularity, right?

[00:00:37]
So popularity in this case, should we just go with metascore again for the popularity? Okay,
>> Shirley Wu: Wait,
>> Shirley Wu: And then it's going to be colored by different genres. Is color, one of the things I do want to ask you that we need to take into consideration is if you notice genres.

[00:01:20]
>> Shirley Wu: Usually there are three genres together. How do you want to deal with that? Do you want to enumerate all of the genres, or do you only want to take the first one, yeah?
>> Speaker 2: We just chose the first one.
>> Shirley Wu: Let's go with the easy one. [LAUGH] That's great, let's just go with the easy one.

[00:01:36]
So in that case what we want to do is let's go through this together. So each of the marks are?
>> Shirley Wu: Lines, thank you. And then coding is that the x axis will be,
>> Shirley Wu: Type is temporal, the field is a year, and there's no other things we need, right?

[00:02:17]
And then y is,
>> Shirley Wu: The type is quant and the metascore is the field.
>> Shirley Wu: Metascore, and then with color we want to say that type because genre is categorical we wanna say it's nominal. And the field is the genre.
>> Shirley Wu: So let's give that a try together.

[00:03:05]
>> Shirley Wu: So the very first thing we have to do is clean the data a little bit again. So this one is, let's say year. I'm really not that great with naming, but let's say yearScoreGenre.
>> Shirley Wu: And this one we want to get for each of the data, let us do return.

[00:03:37]
So we decided we want years, well so, I have a question for you. Which is we have this string, that's just the year. And if we were to use this, we would have to use type quantitative, because it's not a date object. Or we can use released, and then tell it the, and then tell it its temporal.

[00:04:02]
Should we try it released with the temporal? Yeah, and see what happens.
>> Shirley Wu: So that was date is new Date(d.Released), score is just d.Metascore turned into an integer. And genre we decided to just take the very first genre. But because it's currently in a string, I need to split it by the commas and a white space, and then take the very first one.

[00:04:43]
So if we do that.
>> Shirley Wu: d.genre or is that split? Cannot do split of undefined.
>> Shirley Wu: There are undefined genres. Let's take a look at what that might be.
>> Shirley Wu: Actually I'll just do, it will be if there are genres then will split them and if there aren't, let's just give it an empty string for the sake of this exercise.

[00:05:22]
Okay, so this is the data processing, and let's look at the data really quickly, so. Wait, no, no, no, it's just genre, there's no genres. So it's just Genre.
>> Shirley Wu: Perfect, so now let's try plugging this in to vegalite.
>> Shirley Wu: And see what happens. So again, we can do, and let me.

[00:06:04]
>> Shirley Wu: Let me pin this code. Okay so let's try vegalite again.
>> Shirley Wu: And again the data is the newly calculated one which we call yearScoreGenre. The mark is line, and the encodings we have, was it encoding or encodings? Let me just see.
>> Shirley Wu: Just encoding, okay. Encoding, and we have three of them this time.

[00:06:41]
The x we wanted to be the type is temporal.
>> Shirley Wu: And then the field is date. That should be it. Y we said the type is quantitative. The field is the score. And finally the color we set the type is nominal, and the field is genre.
>> Shirley Wu: And then we need to put this into quotes.

[00:07:23]
>> Shirley Wu: Invalid field type undefined?
>> Shirley Wu: We have an undefined field type? Can anyone see-
>> Speaker 2: Quantitative is misspelled.
>> Shirley Wu: Thank you so much. [LAUGH] Quantitative, whoa.
>> Shirley Wu: That's not what we were expecting. Just for to make a little bit easier to read width, I'm gonna start to a little bit bigger, let's say 800 and see what happens.

[00:07:54]
Or maybe just 600, so it fits, and then let's bring it up. Not quite what we were hoping for, is it? [LAUGH]
>> Shirley Wu: And that's fine, sometimes you're exploration turns out really well and sometimes it just doesn't quite give you back what you were hoping for. If we had a bit more time what we might try to do is, actually let's try and see if we an make this into an area chart.

[00:08:30]
That's also really interesting in a really hard to read sort of way. So yeah.
>> Speaker 2: It looks more like generative art.
>> Shirley Wu: Actually, yeah this is hard to read. And this is actually a really good example of like, the reason why we're doing this is so that we can quickly go through and also check out different visualizations that might be good or bad.

[00:08:57]
And now we can rule this out as like, we probably shouldn't do an area chart [LAUGH]. Or if we do an area chart or a line chart or something similar, we are going to have to be really careful to make sure it's easy to read. Because, yeah, right now this is like, it's really hard to get anything out of it.

[00:09:21]
But again, if we have a bit more time, maybe it's that we can try a different, we can try modifying this a little bit more. Maybe we only look at a certain time range that we dig into, or-
>> Speaker 2: Can you do a scatter plot?
>> Shirley Wu: Scatter plots,

[00:09:40]
>> Shirley Wu: I don't know if scatter plot would be the right way for this one, we can try. Just cuz one temporal and one is quantitative, and I actually don't know what vegalite would do with it. But we can give it a try. Look at that.
>> Shirley Wu: But scatterplots are usually you try and look for correlations with it and then this case it's really hard.

[00:10:05]
Like it's really hard to see really any correlation with it other than you know there are movies. [LAUGH] With scores and genres [LAUGH]. So we can either conclude that there is more work that should be done here to massage it. Or we can conclude that there's just not anything interesting to show here.

[00:10:38]
And for the sake of today's workshop, let's just conclude that maybe this is one of those dead ends. So, [LAUGH] but this is a really great example of a dead end.
>> Speaker 2: It does seem like there's less comedies as you move to the right.
>> Shirley Wu: [LAUGH]
>> Speaker 2: [LAUGH] And animations only started to gain popularity in 2003.

[00:11:01]
I don't know.
>> Shirley Wu: Thank you Mark. [LAUGH] For giving this a try.
>> Speaker 2: I'm really taking a shot in the dark here.
>> Shirley Wu: I mean these are some of the things that you decide to really dig into.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now