This video explains why these shapes are owned by SVG not D3.
- [Instructor] In the previous chapter, we saw how to add rectangles, and learned that the mandatory attributes for rectangles are x, y, width, and height. There are several other shapes available to you when you use D3, and each has a different set of mandatory attributes. You can see in the left-hand column that the rectangle element requires x, y, width, and height, the attributes in blue. Other attributes, given in gray, are optional. Moving on, we have circle, which has cx, cy, and r for radius. Then we have ellipse, with cx, cy, and an x and y radius.
D3 just allows you to add the shapes dynamically, based on data. Adding 2,000 shapes manually would be 2,000 lines of code. Adding 2,000 shapes with D3 is one line of code. There are eight basic SVG shape elements. They are rectangle, circle, ellipse, line, polyline, polygon, path, and text. D3 coders don't generally use polygon or polyline, because it's quicker to use path. That's where they're not shown up here. While we're on the subject, path is a kind of line, which can be wiggly or straight, open or closed.
With path, you can step beyond triangles and hexagons, and draw the human body, or a flower, if you like. In the rest of this chapter, we're going to look at each of these elements in turn.
- Making a simple bar chart with D3
- Understanding SVG graphics
- Drawing basic shapes
- Adding text
- Using generators and the path element
- Creating a scale and axes
- Importing data into D3
- Creating trees and Voronoi tessellations
- Preparing your data for advanced graphics
- Adding interactivity and transitions
- Choosing the right graphic
- Finding D3.js plugins
Skill Level Intermediate
Data Visualization for Data Analystswith Bill Shander1h 31m Beginner
2. Making a Simple Bar Chart with D3
3. Basic Shapes, Courtesy of SVG
4. Advanced Shapes, with D3 and Path
5. Scales and Axes
6. Importing Data into D3
7. Additional Graphics with D3 Layout
8. Preparing Your Data for Advanced Graphics
10. Picking the Right Graphic
- 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.