This video explains how to add ellipses, including mandatory attributes.
- [Instructor] Now for an ellipse.…An ellipse is an oval shape,…symmetrical horizontally and vertically.…It's not an egg shape.…An ellipse has four mandatory attributes in D3:…Cx and Cy, which position the center of the shape,…and Rx and Ry.…Rx is the horizontal radius and Ry is the vertical radius.…Let's start by copying the circle code…and changing newX to 600.…So I just copied that, and you can see…that that has indented weirdly, so let's remove that.…
And change newX to 600 and save.…So now you'd think if we checked Firefox,…we ought to be able to see six circles, right?…'Cause we've got two batches of code adding circles.…But I've just gone to Firefox and refreshed,…and I can still only see three.…And if I look for them in the DOM,…which is always the first port of call,…you can see there's only three been added,…the three that we had before.…They're not even added as sort of semi elements,…as we might expect.…So let's have a look at what's going on here.…Let's bring this up a bit.…In this line of code here,…
- 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.