From the course: D3.js Essential Training for Data Scientists

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Adding rectangles

Adding rectangles - D3.js Tutorial

From the course: D3.js Essential Training for Data Scientists

Start my 1-month free trial

Adding rectangles

“

- [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…

Contents