What are the prerequisites?
Even if you live in a remote village of India, you should be able to take this course. All you need to take this course is an internet connection, a computer or mobile, time to invest in learning, and English language skills.
Do I need to know React already?
No, I’m gonna teach React as a part of this course.
How many hours per week do I need to put in?
Well, about 2:00 to 10:00. It’s a really a case of you get out what you put in.
How long is this course gonna be?
I’m thinking at least 12 weeks and it could go all year.
How many videos?
I’m thinking about three per week, and at least fifty in total.
I’d say they’re twofold — mainly and that is the component model that’s built into React, and also the State management infrastructure. These are things that are necessary when you start to develop more complex interactive data visualizations, but it may not be clear now why you need these at all. Let me give you some examples.
Here’s an interactive choropleth map from the 2018 version of my course. You can click on entries in this color legend to filter the selected class of region on the map.
Let me show you how this works under the hood. This is built just using D3, and nothing from React. It does use some notion of components – for example, the color legend component – it’s called as a function passing in this object of properties or parameters. This color legend component is defined as a function that takes as input a D3 selection and an object of properties. This works to some extent, but it’s just kind of a janky thing that I made up and nobody else uses, so it’s by no means an industry standard.
I think React does a much better job of allowing you to define components. And then there’s State management – for example, changing the state of the selected color in this example. It’s again, like a hand-rolled solution where when you click on one of these entries in the color legend, it just sets a local variable, and then calls this render function that renders the entire app again. This works, but it’s something that I kind of made up, and with this pattern there’s no real way to optimize it. Like, I haven’t figured out the equivalent in this world to the things that React gives you for free, for optimization, like useMemo, for example. So these are a couple of reasons why React would be a better approach.
What about Python or Tableau and Power BI?
Why wouldn’t you use those tools to teach a data visualization course? Well, these tools are limited by what I like to think as the “abstraction barrier” These are all high-level tools, meaning they’re at a high level of abstraction. They provide components that you can instantiate, or things that you can just drag and drop, and then configure. Because of that, there is an abstraction barrier that you just can’t penetrate. If the developer of the tool didn’t foresee a certain thing that you want to do, a certain feature, then you just can’t do it in those tools. That’s not to say that they’re not useful or not beneficial, they are. You can do amazing things with these tools, but they’re essentially limited they’re limited in terms of the interactions that you can implement with them, and they’re limited in terms of how much you can customize your visualizations.
If you build something from scratch using D3 and React on the other hand, you have control over each and every detail. So the interactions that you can implement and the customizations that you can do are not limited. They’re unlimited. That’s one of the major reasons why I’m not using any of these tools to teach this course.
That brings us to our first assignment.
Find visualizations relating to current events share them in our course Slack or on Twitter with the hashtag #datavis2020. Also please comment on someone else’s share.
Review & Recap:
- What is the DOM?
- What are the advantages of using D3 over an application like Tableau? Try to explain in your own words.