Join Ray Villalobos for an in-depth discussion in this video What is SVG?, part of D3.js: Data Visualization.
…Although D3 can handle and work with either HTML or SVG graphics,…when you're working with D3 you'll often want to use SVG graphics, instead of HTML.…Now, SVG stands for Scalable Vector Graphics and…it definitely has some advantages over HTML, so let's take a look.…Now, first off, HTML lacks supports for complex shapes.…It's really good at letting us draw rectangles, and…maybe something like circles, but not so good at very complex shapes.…The main reason we pick SVG is because you can draw complex curves and…shapes with an HTML like language.…
And that's my next point.…SVG is very much like HTML.…It's an XML base format like html, so,…it also looks like you are writing html, and it uses beginning and…ending tags, plus attributes, so it's super easy to read and write.…If you are used to writing HTML then SVG will be really easy to pick up.…Now SVG can also be styled through regular CSS.…And this is really awesome,…because you access dom elements in SVG just like you would in CSS.…And you can also apply CSS like styles through regular external style sheets.…
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts
Skill Level Intermediate
1. Setting Up and Installing
What is D3.js?3m 18s
2. Learning the Basics
3. Working with SVG Graphics
4. Using D3 Methods
5. Using Data
6. Working with Layouts
Next steps2m 2s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.