This video explains how to add lines, including mandatory attributes.
- You might think a line needs no introduction,…but an SVG line has a specific definition.…A line in SVG is a straight line only,…starting at one point, and ending at another.…It is not curved or wiggly, and it does not have…different sections going at different angles.…That is a polyline in SVG terms.…A line can go at any angle, though,…it doesn't need to be horizontal or vertical.…The line shape has four mandatory attributes:…X1 and Y1, X2 and Y2.…The first pair set the start position,…and the second pair set the end position.…
We're going to add three horizontal lines,…with the data determining their width.…You could have the data determine the thickness,…or the angle, or the strength of color, if you prefer.…So let's copy and paste the previous code,…replacing ellipse with line.…And I copy that,…and paste it,…and then change the indentation.…Change newX to 900, ellipse to line.…And we can remove this class here,…because there aren't any other lines on the page,…so the browser's not going to get confused.…
So these attributes down here we need to change,…
- 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.