Join Ray Villalobos for an in-depth discussion in this video Drawing SVG graphics with D3, part of D3.js: Data Visualization.
…In the last movie we created graphics using the XML version of SVG graphics.…Now that really taught us how SVG draws things.…D3 is going to make use of these graphics extensively, so in this video I'm…going to show you how we can regenerate some of the primitives using D3.…Now, I'm going to take all the code from the previous video, so,…all this svg code, and just get rid of it.…And, in here, I'm going to put my chart ID div back.…So, I'll do a div with an ID of chart.…
And that's what we're going to program the svg graphics into.…So, I want to save this.…And then I'm going to go into my scribe.js file right now it's completely empty,…and I'm going to use the D3 library to add a few elements.…So, I'm going to say d3 first and select my chart graphic, and…then once we do that we use d3.notation to append.…And svg element, and to this we'll add an attribute of width,…and we'll set that width to 600, just like we did before.…
And then we'll add another attribute, this one will be the height, and…we'll set that one to 400.…
- What is D3.js?
- Creating a basic document structure
- Controlling HTML DOM elements
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data
- Creating and adjusting layouts
Skill Level Intermediate
1. Setting Up and Installing
What is D3.js?3m 18s
2. Learning the Basics
3. Working with SVG Graphics
4. Using D3 Methods
5. Using Data
6. Working with Layouts
Next steps2m 2s
- 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.