This video discusses mandatory attributes for shapes and how to set them.
- [Instructor] All SVG elements,…such as rectangles and circles,…require a basic set of attributes.…These differ by element.…A circle, for example,…must have x y coordinates and a radius…or it simply will not appear on the page.…For a rectangle,…we need x, y, width and height as a minimum.…We could also use rx and ry for rounded corners…but we're not gonna use that now.…Those attributes are optional.…Let's add some mandatory attributes to our rectangles here.…Delete the semi-colon and then dot attr for attribute.…
And the first parameter tells the three…what we want to change.…And the second parameter changes it to a value.…And I'm gonna copy that and paste it four times…because I've got four attributes.…Then we're gonna have…height, width, x and y as our attributes.…For the rectangles, let's give them a height of 200.…And the browser, incidentally, will assume we mean pixels.…And give it a width of 50,…x value of 20, and y value of 100.…Save that.…
Go to Firefox and there we have a bar.…Now you may have been expecting three bars,…
- 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.