Creating a graphic using the SVG format really teaches us how SVG draws things. D3 is going to make use of these graphics extensively, so take a look at how you could regenerate a few of our primitives using d3.
- [Instructor] In the last video,…we created an SVG graphic manually.…In this movie, I'm going to show you how to use…the SVG commands we've been learning to create…some of these primitives using D3.…So the way that you do this is pretty simple,…you create an element and then you target that element…by using D3's selection methods.…Once we have that element, you can use methods…like append or insert to add items into that element.…So you add an SVG element and then inside that,…you can add additional elements and then use…the attribute methods or the style methods in D3…to control how those elements look.…
So let's go ahead and move over here…and I'll show you that right now our index,…that html file looks a little bit different…than we had in the last video.…We have removed the SVG graphic…and right now I've created this div…with an id of viz that we're going to use…to place our graphics inside.…So if we go back into the script that you'll notice…that is completely empty.…And what we need to do is use the D3 command…
- What is D3.js?
- Controlling HTML within selections
- Binding data to the DOM
- Drawing SVG graphics with D3
- Using ordinal scales
- Adding events and transitions
- Working with data