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 an SVG

Adding an SVG - D3.js Tutorial

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

Start my 1-month free trial

Adding an SVG

“

- [Instructor] The place to start is your javascript document, shapes.js. The first thing we need to do is create some data. Let's create a data array, var dataArray and we'll put some numbers in it, five, 11 and 18, and round that off with a semicolon. This bit's regular javascript, not d3. The next thing we're going to do is add an SVG element to our HTML page. The SVG can be thought of as a canvas, to which we add all our shapes and text as discussed in chapter one. The basic method with d3 is to select an element that already exists in the dom, and add or append a new element to it. For now we don't have any elements within the body tags. So we're going to append to the body itself. To do this type d3.select("body").append("svg"). Give that a semicolon and save it. So now you need to go to Firefox and load up your d3.html page. The first thing we're gonna do is check the dom for our SVG element. So we go HTML, <body>, and there we have an SVG element. So far, so good. Now we're…

Contents