Data Visualization for React Developers

Data to SVG Shapes 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 "Data to SVG Shapes 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 instructed to inspect SVG charts in an an attempt to become familar with the format.


Transcript from the "Data to SVG Shapes Exercise" Lesson

>> Shirley Wu: So we're gonna do something. In particular, we're gonna play with the all the SVG elements. So if you have the slides open, please click on the notebook. And once you click on the notebook, it will take you here. And all I want us to do for, let's say in the next five or ten minutes, just look at how these are made in SVG.

So, if you hover over this line chart, if you hover over the side, it will let you open it and then you can look at the SVG that it takes to create those elements. Look at how they're made, try deleting some things and see what happens, or try editing some of the numbers and see what happens.

Maybe something breaks, but then that'll be really fun. I just want us to get a good grasp of how to draw these things using SVG. Obviously, this looks a little bit different from the other visualizations, and that's because it's only the first month of 2017. I didn't want to give you 365 rectangles to have to wade through, so this is only 31.

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