This video explains how to add circles, including mandatory attributes.
- [Narrator] Now let's add some circles.…We're gonna add one circle for each data point…using the same array as before, data array.…We're going to add the circles in a horizontal line…making them bigger or smaller, depending on the data.…We use the same SVG again, in fact,…we can just copy and paste the first three lines,…so let's copy that, and then Atom gives us…some weird indentation which I'm gonna remove.…Give that a new line, and we just change…rect into circle.…Circles have three mandatory attributes,…so I'm gonna add three placeholders here.…
This indentation that I'm doing here…is just convention, because it shows me…that the attributes relate to the circle.…That's why I line then up under the circle…but you don't have to do that if that doesn't work for you.…Finish that off with a semicolon.…So, the mandatory attributes here are cx, cy, and r.…I think of cx and cy as the x and y coordinates…of the center of the circle.…I don't know if that's what Mike Bostock…had in mind when he used the word c,…but that's how I remember it.…
- 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
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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.