Introduction

[00:00:00]
>> Today, I'm hoping to get through two primary goals for this workshop. The first is that you'll be able to walk away with a very solid understanding of SVG, or Scalar Vector Graphics. And that you'll be able to use it to draw your own custom shapes in the browser, and then also be able to feel comfortable reading and understanding the syntax.

[00:00:26]
And the second one is D3, and so S3 is probably the de facto JavaScript library for creating data visualizations in the web. And that's really great because it has a lot of modules, and functions. And it has pretty much almost everything I've ever imagined having to create data visualizations on the web, it has support for.

[00:00:53]
but that also means that it's really comprehensive, and it's really a lot, and it can get really overwhelming to try and look through the library. And so today instead of trying and probably failing to teach you all the models in D3 and what they do, I wanna teach you some of the most fundamental parts of the library.

[00:01:18]
So that by the end of the workshop, you'll have a good understanding of those core principles, and be able to kinda take that and apply that to the rest of the library. So I'm going to be teaching out of this workshop, sorry this notebook today, it is an observable notebook and hopefully you'll have the link to it in the chat.

[00:01:44]
But if not, you can find it at observablehq.com/@sxywu, and it should hopefully be under the collection, workshop introduction to D3. And it'd be pretty important to have this workshop so that we can go through it together. There's a lot of exercises in here and kind of like hands on play.

[00:02:20]
And you can either just play directly with the notebooks I've provided or you can also you can sign on with your GitHub account, and then forking and then I think and then you can play with it that way I think. I haven't tried the forking, but that should work.

[00:02:44]
Before we get on with the course, I wanted to introduce myself a little bit. Hi, my name is Shirley, I call myself an independent creator of data visualizations, and what that means is just that I'm self employed and I work with a variety of clients, to help them tell stories with their data.

[00:03:11]
So I almost always work with them through the whole process, usually they'll have some sort of a dataset that they're looking to either tell a story with visually, or try to make sense of. So I'll work with them to do the data analysis, and the design and prototyping, and finally the code.

[00:03:37]
But my background where I have the most of my training is in software engineering. I've been using D3 since 2012, and I've been using D3 with various different frameworks. For that same amount of time I started with backbone went to react, and now I use view with D3.

[00:04:01]
And I've also been teaching D3 and data visualization courses since 2014. So, I have a few other different workshops that I'll elaborate on at the end of this workshop as possible next steps so yeah. So for today, what I want us to do together is, I always think it's really, really fun when we have this overarching project that we can do together.

[00:04:38]
So, this is a project that I have called film flowers and the original project, Looks like this. And it is the top summer blockbusters of the past two and a half decades, reimagined as flowers. So, each of these flowers represent a movie and, the petal shapes are parental guidance ratings.

[00:05:11]
The colors are genres, and the number of petals is the number of votes on IMDb. And the size of the flower is the IMDb rating out of 10. And I always, always show this every time but, some of my favorites in here is like, I think Dark Knight Rises is really pretty, I love Harry Potter, there's Inception.

[00:05:45]
And then we show this at every conference that I give this talk, or that I show this project, but my absolute favorite is Batman and Robin 1997 Batman and Robin because of how tiny and cute it is. Yeah so this is the project that we're going to recreate in part today.

[00:06:09]
And so, this is the summer blockbuster movies, and so I recommend you try and click on the carrot open up some of these objects, take a look at what the data looks like. This is a little bit of a cleaned up version of the raw data I had, but it includes all of the data that we need for today.

[00:06:39]
And then, this is the visualization of flowers that we're going to get to. And you can see that for themes we have a mapping, like I said earlier of parental guidance readings to the type of flower petal. Number of IMDb votes to the number of petals, and rating out of 10 to the size and the movie genre to the color of petals.

[00:07:10]
And the only slight bit of difference is that whereas in my project I show all of the movie genres, today we're going to only be coloring by, the first to list in the new genre. So that would be the only difference between the project I just showed, and what we're going to do today.