Join Ray Villalobos for an in-depth discussion in this video Understanding SVG primitives, part of D3.js: Data Visualization.
…We're going to take a quick diversion away from D3 to get a feeling for…how SVG graphics are coded.…It's going to allow us to be better at creating those graphics and…making them interactive in the future.…Usually the first way you get to experience a computer program is to…create a Hello World application.…So the graphic equivalent of that is to learn to draw primitives,…which are simple shapes like rectangles, ellipses and circles.…So, this time I'm going to start with our same basic template, but…I'm going to clear out the script file, as well as the CSS document.…
And let me go ahead and close those.…And then I'm going to take this D3 section right here and just get rid of this chart.…And now we're ready to get started.…So, to create an SVG graphic, you can use the svg tag,…which looks like any other HTML tag.…Now, just like with any other tag, you can assign this tag attributes.…And typically for a graphic, you specify the width and height of your canvas.…So here we can say width equals and then some sort of value.…
- 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