Join Ray Villalobos for an in-depth discussion in this video Creating a document structure, part of Data Visualization with D3.js.
- View Offline
…So now that we have the library downloaded,…it's time to create a document structure for our exercises.…Now I want to have a nice looking HTML page, so…I want to isolate the general HTML markup from my CSS.…Now that's something I would do in every one of my projects, but I…also want to separate the CSS for my page from the CSS that I'm going to use for D3.…So this is not going to be a typical structure that I would use on a website.…Just something to make our experimentation in D3 a lot easier.…
Now, let me go ahead and start by deleting this CDN version of the library,…because I only need one right here.…So I'm going to hit Save and…what I want to do is create in my underscore folder another file.…And I'm going to call this one base.css.…So this is going to have some basic CSS styles that we're going to use on…our page.…And to get the CSS for this document, I'm going to go to this Gist right here.…And I'm going to copy all this and paste it in this base.css file.…
So if you take a look at what this does,…
- 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