Data Visualization for React Developers

Going from Data to SVG Exercise

Shirley Wu

Shirley Wu

Data Sketches
Data Visualization for React Developers

Check out a free preview of the full Data Visualization for React Developers course

The "Going from Data to SVG Exercise" Lesson is part of the full, Data Visualization for React Developers course featured in this preview video. Here's what you'd learn in this lesson:

The audience is asked to apply D3 scales to create a bar chart.

Preview
Close

Transcript from the "Going from Data to SVG Exercise" Lesson

[00:00:00]
>> Shirley Wu: I want us to calculate the data using D3 skills to make that bar chart. So the starter notebook is the same one, the same one we were looking at before. And I want us to up here, there's kind of some suggestions or hints on how to create the bar chart.

[00:00:21]
Which scales to use, what to map it to, et cetera. Here's, I have already loaded it in the data for you right here and so this is in the global variable data right here. And then I've defined within height. So if in the bar chart you can return me an array of objects where each object has an x, y within height to draw the bars.

[00:00:51]
If you do it right it will magically show up here. And then you can do all of your javascript code in where I have the dot dot dot. A few more things about the observable notebook. So there is a question about whether you can access d3 in one of these JavaScript blocks.

[00:01:13]
And so d3 is loaded down here as one of the external libraries. So this is observable. It is actually by the creator of d3, Mike Bostock, and as far as I can tell, it's kinda like Jupiter Notebook, but for what? But, also, I was told the thing that's different about it is that you can the order of your dependencies don't matter.

[00:01:43]
So you can define like your external libraries down here or other things that you might not want people to have to read through down here and then it still works everywhere. And that's I've been told something that Jupyter Notebook doesn't have. And so that's one of the things I wanted to mention that D3 is loaded down there so that you can use it in your And one these cells in your code.

[00:02:09]
And also, probably important to mention is the de-scale api, which is right here d3-scale. If you want to Google that, and then I just wanted to show you some of the scales we talked about earlier the continuous scales. And so, it tells you how to do domain and range.

[00:02:35]
And then as well, as you can look at scale linear and scale time and also kind of the ordinal and quanties, and the other options there are. So please look through the API and that should be probably very helpful in the exercise.

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