This video explains how to add rectangles to the DOM using D3.
- [Narrator] Now we're gonna make our lives easier…by creating a shortcut.…Let's create a variable to refer to our SVG…and we'll call it SVG.…And pop that back to one line…just so that we're making a bit better use of the space.…When we use the SVG variable,…it's not going to run the append code again…or reset the height and width.…SVG when we use it from now on just refers…to the SVG element that's been added to the HTML.…So, now we're gonna add some rectangles to our SVG.…SVG.selectAll("rect").…
And rect means rectangle, as you may have guessed.….data(dataArray)….enter().append()…Append is gonna be "rect" as well.…And in fact, for now, that's the lot.…People always find this phrasing confusing to begin with.…So we begin by selecting the rectangles,…but we haven't added any rectangles yet.…So, people always ask, quite legitimately,…"How can I select something I haven't added?"…The next section is dedicated to explaining this code…after we've added a few more lines to it,…so don't worry if you don't get it the first time.…
- 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.