Working with D3 requires an appreciation of the following concepts.
Hypertext Markup Language is used to structure content for web browsers. The simplest HTML page looks like this:
The Document Object Model refers to the hierarchical structure of HTML. Each bracketed tag is an element, and we refer to elements’ relative relationships to each other in human terms: parent, child, sibling, ancestor, and descendant. In the HTML above,
body is the parent element to both of its children,
p (which are siblings to each other). All elements on the page are descendants of
Web browsers parse the DOM in order to make sense of a page’s content.
Cascading Style Sheets are used to style the visual presentation of HTML pages. A simple CSS stylesheet looks like this:
CSS styles consist of selectors and rules. Selectors identify specific elements to which styles will be applied:
Rules are properties that, cumulatively, form the styles:
We connect selectors and rules using curly brackets:
D3 uses CSS-style selectors to identify elements on which to operate, so it’s important to understand how to use them.
CSS rules can be included directly within the
head of a document, like so
or saved in an external file with a
.css suffix, and then referenced in the document’s
Scripts can be included directly in HTML, between two
or stored in a separate file, and then referenced somewhere the HTML (commonly in the
Be familiar with your browser’s developer tools. In a WebKit browser (like Safari or Chrome), you can open the web inspector, which looks something like this:
D3 is at its best when rendering visuals as Scalable Vector Graphics. SVG is a text-based image format. Meaning, you can specify what an SVG image should look like by writing simple markup code, sort of like HTML tags. In fact, SVG code can be included directly within any HTML document. Web browsers have supported the SVG format for years (except for Internet Explorer), but it never quite caught on, until now.
Here’s a little circle that I just coded into this page:
Go ahead — right-click on it: it’s not an image! Zoom your browser and you’ll see it scales up and down smoothly, as a vector graphic should.
You’re not required to use SVG with D3, but you’ll soon find that SVG provides a range of visual opportunities that aren’t possible with regular HTML elements.
Next up: Setup →