epubjs

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg"><head><title>Chapter 3. Technology Fundamentals</title><link rel="stylesheet" type="text/css" href="core.css"/><meta name="generator" content="DocBook XSL Stylesheets V1.76.1"/><link rel="up" href="index.html" title="Interactive Data Visualization for the Web"/><link rel="prev" href="ch02.html" title="Chapter 2. Introducing D3"/><link rel="next" href="ch04.html" title="Chapter 4. Setup"/></head><body><section class="chapter" title="Chapter 3. Technology Fundamentals" epub:type="chapter" id="technology_fundamentals"><div class="titlepage"><div><div><h2 class="title">Chapter 3. Technology Fundamentals</h2></div></div></div><p>Solid familiarity with the following concepts will make your time with D3 a lot less frustrating and a lot more rewarding. Consider this a brief refresher course on Web-Making 101.</p><div class="warning" title="Warning" epub:type="warning"><h3 class="title">Warning</h3><p>Beware! This is a pretty dense chapter, packed with years’ worth of web development knowledge, and nothing in here is specific to D3. I recommend skimming just the sections on information that is new to you, and skipping the rest. You can always reference this chapter later as questions arise.</p></div><div class="sect1" title="The Web"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_the_web">The Web</h2></div></div></div><p>If you’re brand new to making web pages, you will now have to think about things that regular people blissfully disregard every day, such as this: How does the Web actually work?<a id="I_indexterm3_id288530" class="indexterm"/></p><p>We think of the Web as a bunch of interlinked pages, but it’s really a collection of conversations between web servers and web clients (browsers).</p><p>The following scene is a dramatization of a typical such conversation that happens whenever you or anyone else clicks a link or types an address into your browser (meaning, this brief conversation is had about 88 zillion times every day):</p><div class="blockquote"><blockquote class="blockquote"><p>CLIENT: I’d really like to know what’s going on over at <span class="emphasis"><em>somewebsite.com</em></span>. I better call over there to get the latest info. [Silent sound of Internet connection being established.]</p><p>SERVER: Hello, unknown web client! I am the server hosting <span class="emphasis"><em>somewebsite.com</em></span>. What page would you like?</p><p>CLIENT: This morning, I am interested in the page at <span class="emphasis"><em>somewebsite.com/news/</em></span>.</p><p>SERVER: Of course, one moment.</p><p><span class="emphasis"><em>Code is transmitted from SERVER to CLIENT.</em></span></p><p>CLIENT: I have received it. Thank you!</p><p>SERVER: You’re welcome! Would love to stay on the line and chat, but I have other requests to process. Bye!</p></blockquote></div><p>Clients contact servers with <span class="emphasis"><em>requests</em></span>, and servers respond with data. But what is a server and what is a client?<a id="I_indexterm3_id288599" class="indexterm"/><a id="I_indexterm3_id288605" class="indexterm"/><a id="I_indexterm3_id288614" class="indexterm"/></p><p><span class="emphasis"><em>Web servers</em></span> are Internet-connected computers running server software, so called because they <span class="emphasis"><em>serve</em></span> web documents as requested. Servers are typically always on and always connected, but web developers often also run <span class="emphasis"><em>local</em></span> servers, meaning they run on the same computer that you’re working on. <span class="emphasis"><em>Local</em></span> means here; <span class="emphasis"><em>remote</em></span> means somewhere else, on any computer but the one right in front of you.<a id="I_indexterm3_id288643" class="indexterm"/><a id="I_indexterm3_id288650" class="indexterm"/></p><p>There are lots of different server software packages, but Apache is the most common. Web server software is not pretty, and no one ever wants to look at it.<a id="I_indexterm3_id288660" class="indexterm"/></p><p>In contrast, web <span class="emphasis"><em>browsers</em></span> can be very pretty, and we spend a lot of time looking at them. Regular people recognize names like Firefox, Safari, Chrome, and Internet Explorer, all of which are browsers or <span class="emphasis"><em>web clients</em></span>.<a id="I_indexterm3_id288680" class="indexterm"/></p><p>Every web page, in theory, can be identified by its URL (Uniform Resource Locator) or URI (Uniform Resource Identifier). Most people don’t know what <span class="emphasis"><em>URL</em></span> stands for, but they recognize one when they see it. By obsolete convention, URLs commonly begin with <span class="emphasis"><em>www</em></span>, as in <a class="ulink" href="http://www.calmingmanatee.com" target="_top">http://www.calmingmanatee.com</a>, but with a properly configured server, the <span class="emphasis"><em>www</em></span> part is wholly unnecessary.<a id="I_indexterm3_id288713" class="indexterm"/></p><p>Complete URLs consist of four parts:</p><div class="itemizedlist"><ul class="itemizedlist"><li class="listitem"> An indication of the <span class="emphasis"><em>communication protocol</em></span>, such as HTTP or HTTPS </li><li class="listitem"> The <span class="emphasis"><em>domain name</em></span> of the resource, such as <span class="emphasis"><em>calmingmanatee.com</em></span> </li><li class="listitem"> The <span class="emphasis"><em>port number</em></span>, indicating over which port the connection to the server should be attempted </li><li class="listitem"> Any additional locating information, such as the path of the requested file, or any query parameters<a id="I_indexterm3_id288771" class="indexterm"/><a id="I_indexterm3_id288779" class="indexterm"/><a id="I_indexterm3_id288786" class="indexterm"/><a id="I_indexterm3_id288791" class="indexterm"/> </li></ul></div><p>A complete URL, then, might look like this: <a class="ulink" href="http://alignedleft.com:80/tutorials/d3/" target="_top">http://alignedleft.com:80/tutorials/d3/</a>.</p><p>Typically, the port number is excluded, as web browsers will try to connect over port 80 by default. So the preceding URL is functionally the same as the following: <a class="ulink" href="http://alignedleft.com/tutorials/d3/" target="_top">http://alignedleft.com/tutorials/d3/</a></p><p>Note that the protocol is separated from the domain name by a colon and two forward (regular) slashes. Why two slashes? No reason. The inventor of the Web <a class="ulink" href="http://nyti.ms/Xaol4j" target="_top">regrets the error</a>.</p><p>HTTP stands for Hypertext Transfer Protocol, and it’s the most common protocol for transferring web content from server to client. The “S” on the end of HTTPS stands for <span class="emphasis"><em>Secure</em></span>. HTTPS connections are used whenever information should be encrypted in transit, such as for online banking or e-commerce.<a id="I_indexterm3_id288842" class="indexterm"/></p><p>Let’s briefly step through the process of what happens when a person goes to visit a website.<a id="I_indexterm3_id288853" class="indexterm"/></p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"> User runs the web browser of her choice, then types a URL into the address bar, such as <span class="emphasis"><em>alignedleft.com/tutorials/d3/</em></span>. Because she did not specify a protocol, HTTP is assumed, and “http://” is prepended to the URL. </li><li class="listitem"> The browser then attempts to connect to the server behind <span class="emphasis"><em>alignedleft.com</em></span> across the network, via port 80, the default port for HTTP. </li><li class="listitem"> The server associated with <span class="emphasis"><em>alignedleft.com</em></span> acknowledges the connection and is taking requests. (“I’ll be here all night.”) </li><li class="listitem"> The browser sends a request for the page that lives at <span class="emphasis"><em>/tutorials/d3/</em></span>. </li><li class="listitem"> The server sends back the HTML content for that page. </li><li class="listitem"> As the client browser receives the HTML, it discovers references to <span class="emphasis"><em>other files</em></span> needed to assemble and display the entire page, including CSS stylesheets and image files. So it contacts the same server again, once per file, requesting the additional information. </li><li class="listitem"> The server responds, dispatching each file as needed. </li><li class="listitem"> Finally, all the web documents have been transferred over. Now the client performs its most arduous task, which is to <span class="emphasis"><em>render</em></span> the content. It first parses through the HTML to understand the structure of the content. Then it reviews the CSS selectors, applying any properties to matched elements. Finally, it plugs in any image files and executes any JavaScript code. </li></ol></div><p>Can you believe that all that happens every time you click a link? It’s a lot more complicated than most people realize, but it’s important to understand that client/server conversations are fundamental to the Web.</p></div><div class="sect1" title="HTML"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_html">HTML</h2></div></div></div><p>Hypertext Markup Language is used to structure content for web browsers. HTML is stored in plain text files with the <span class="emphasis"><em>.html</em></span> suffix. A simple<a id="ix_HTML" class="indexterm"/> HTML document looks like this:</p><a id="I_programlisting3_id288991"/><pre class="programlisting"><code class="cp"><!DOCTYPE html></code> <code class="nt"><html></code> <code class="nt"><head></code> <code class="nt"><title></code>Page Title<code class="nt"></title></code> <code class="nt"></head></code> <code class="nt"><body></code> <code class="nt"><h1></code>Page Title<code class="nt"></h1></code> <code class="nt"><p></code>This is a really interesting paragraph.<code class="nt"></p></code> <code class="nt"></body></code> <code class="nt"></html></code></pre><p>HTML is a complex language with a rich history. This overview will address only the current iteration of HTML (formerly known as HTML5) and will touch on only what is immediately relevant for our practice with D3.</p><div class="sect2" title="Content Plus Structure"><div class="titlepage"><div><div><h3 class="title" id="_content_plus_structure">Content Plus Structure</h3></div></div></div><p>The core function of HTML is to enable you to “mark up” content, thereby<a id="I_indexterm3_id289016" class="indexterm"/> giving it structure. Take, for example, this raw text:</p><pre class="screen">Amazing Visualization Tool Cures All Ills A new open-source tool designed for visualization of data turns out to have an unexpected, positive side effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms: fevers chills general malaise It achieves this end with a patented, three-step process. Load in data. Generate a visual representation. Activate magic healing function.</pre><p>Reading between the lines, we can infer that this is a very exciting news story. But as unstructured content, it is very hard to read. By adding structure, we can differentiate between the headline, for example, and the body of the story.</p><div class="blockquote"><blockquote class="blockquote"><p><span class="strong"><strong>Amazing Visualization Tool Cures All Ills</strong></span></p><p>A new open-source tool designed for visualization of data turns out to have an unexpected, positive side effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms:</p><div class="itemizedlist"><ul class="itemizedlist"><li class="listitem"> fevers </li><li class="listitem"> chills </li><li class="listitem"> general malaise </li></ul></div><p>It achieves this end with a patented, three-step process.</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"> Load in data. </li><li class="listitem"> Generate a visual representation. </li><li class="listitem"> Activate magic healing function. </li></ol></div></blockquote></div><p>That has the same raw text content, but with a <span class="emphasis"><em>visual structure</em></span> that makes the content more accessible.<a id="I_indexterm3_id289124" class="indexterm"/></p><p>HTML is a tool for specifying <span class="emphasis"><em>semantic structure</em></span>, or attaching hierarchy, relationships, and <span class="emphasis"><em>meaning</em></span> to content. (HTML doesn’t address the visual representation of a document’s structure—that’s CSS’ job.) Here is our story with each chunk of content replaced by a <span class="emphasis"><em>semantic description</em></span> of what that content is.<a id="I_indexterm3_id289152" class="indexterm"/></p><div class="blockquote"><blockquote class="blockquote"><p><span class="strong"><strong>Headline</strong></span></p><p>Paragraph text</p><div class="itemizedlist"><ul class="itemizedlist"><li class="listitem"> Unordered list item </li><li class="listitem"> Unordered list item </li><li class="listitem"> Unordered list item </li></ul></div><p>Paragraph text</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"> Numbered list item </li><li class="listitem"> Numbered list item </li><li class="listitem"> Numbered list item </li></ol></div></blockquote></div><p>This is the kind of structure we specify with HTML markup.</p></div><div class="sect2" title="Adding Structure with Elements"><div class="titlepage"><div><div><h3 class="title" id="_adding_structure_with_elements">Adding Structure with Elements</h3></div></div></div><p>“Marking up” is the process of adding <span class="emphasis"><em>tags</em></span> to create <span class="emphasis"><em>elements</em></span>. HTML tags begin with <code class="literal"><</code> and end with <code class="literal">></code>, as in <code class="literal"><p></code>, which is the tag indicating a paragraph of text. Tags usually occur in pairs, in which case adding an opening and closing pair of tags creates a new <span class="emphasis"><em>element</em></span> in the document structure.<a id="I_indexterm3_id289276" class="indexterm"/><a id="I_indexterm3_id289285" class="indexterm"/><a id="I_indexterm3_id289291" class="indexterm"/></p><p>Closing tags are indicated with a slash that closes or ends the element, as in <code class="literal"></p></code>. Thus, a paragraph of text may be marked up like the following:</p><a id="I_programlisting3_id289306"/><pre class="programlisting"><code class="nt"><p></code>This is a really interesting paragraph.<code class="nt"></p></code></pre><p>Some elements can be <span class="emphasis"><em>nested</em></span>. For example, here we use the <code class="literal">em</code> element to add <span class="emphasis"><em>emphasis</em></span>.</p><a id="I_programlisting3_id289328"/><pre class="programlisting"><code class="nt"><p></code>This is a <code class="nt"><em></code>really<code class="nt"></em></code> interesting paragraph.<code class="nt"></p></code></pre><p>Nesting elements introduces hierarchy to the document. In this case, <code class="literal">em</code> is a child of <code class="literal">p</code> because it is contained by <code class="literal">p</code>. (Conversely, <code class="literal">p</code> is <code class="literal">em</code>’s parent.)</p><p>When elements are nested, they cannot overlap closures of their parent elements, as doing so would disrupt the hierarchy. For example:</p><a id="I_programlisting3_id289362"/><pre class="programlisting"><code class="nt"><p></code>This could cause <code class="nt"><em></code>unexpected<code class="nt"></p></code> <code class="nt"><p></code>results<code class="nt"></em></code>, and is best avoided.<code class="nt"></p></code></pre><p>Some tags never occur in pairs, such as the <code class="literal">img</code> element, which references an image file. Although HTML no longer requires it, you will sometimes see such tags written in <span class="emphasis"><em>self-closing</em></span> fashion, with a trailing slash before the closing bracket:</p><a id="I_programlisting3_id289383"/><pre class="programlisting"><code class="nt"><img</code> <code class="na">src=</code><code class="s">"photo.jpg"</code> <code class="nt">/></code></pre><p>As of HTML5, the self-closing slash is optional, so the following code is equivalent to the preceding code:</p><a id="I_programlisting3_id289394"/><pre class="programlisting"><code class="nt"><img</code> <code class="na">src=</code><code class="s">"photo.jpg"</code><code class="nt">></code></pre></div><div class="sect2" title="Common Elements"><div class="titlepage"><div><div><h3 class="title" id="_common_elements">Common Elements</h3></div></div></div><p>There are hundreds of different HTML elements. Here are some of the most common. We’ll cover additional elements in later chapters. (Reference the excellent <a class="ulink" href="https://developer.mozilla.org/en/HTML/Element" target="_top">Mozilla Developer Network documentation</a> for a complete listing.)<a id="I_indexterm3_id289420" class="indexterm"/></p><div class="variablelist"><dl><dt><span class="term"> <code class="literal"><!DOCTYPE html></code> </span></dt><dd> The standard document type declaration. Must be the first thing in the document. </dd><dt><span class="term"> <code class="literal">html</code> </span></dt><dd> Surrounds all HTML content in a document. </dd><dt><span class="term"> <code class="literal">head</code> </span></dt><dd> The document <code class="literal">head</code> contains all metadata about the document, such as its <code class="literal">title</code> and any references to external stylesheets and scripts. </dd><dt><span class="term"> <code class="literal">title</code> </span></dt><dd> The title of the document. Browsers typically display this at the top of the browser window and use this title when bookmarking a page. </dd><dt><span class="term"> <code class="literal">body</code> </span></dt><dd> Everything not in the <code class="literal">head</code> should go in the <code class="literal">body</code>. This is the primary visible content of the page. </dd><dt><span class="term"> <code class="literal">h1</code>, <code class="literal">h2</code>, <code class="literal">h3</code>, <code class="literal">h4</code> </span></dt><dd> These let you specify headings of different levels. <code class="literal">h1</code> is a top-level heading, <code class="literal">h2</code> is below that, and so on. </dd><dt><span class="term"> <code class="literal">p</code> </span></dt><dd> A paragraph! </dd><dt><span class="term"> <code class="literal">ul</code>, <code class="literal">ol</code>, <code class="literal">li</code> </span></dt><dd> Unordered lists are specified with <code class="literal">ul</code>, most often used for bulleted lists. Ordered lists (<code class="literal">ol</code>) are often numbered. Both <code class="literal">ul</code> and <code class="literal">ol</code> should include <code class="literal">li</code> elements to specify list items. </dd><dt><span class="term"> <code class="literal">em</code> </span></dt><dd> Indicates emphasis. Typically rendered in <span class="emphasis"><em>italics</em></span>. </dd><dt><span class="term"> <code class="literal">strong</code> </span></dt><dd> Indicates additional emphasis. Typically rendered in <span class="strong"><strong>boldface</strong></span>. </dd><dt><span class="term"> <code class="literal">a</code> </span></dt><dd> A link. Typically rendered as underlined, blue text, unless otherwise specified. </dd><dt><span class="term"> <code class="literal">span</code> </span></dt><dd> An arbitrary <code class="literal">span</code> of text, typically within a larger containing element like <code class="literal">p</code>. </dd><dt><span class="term"> <code class="literal">div</code> </span></dt><dd> An arbitrary <span class="emphasis"><em>division</em></span> within the document. Used for grouping and containing related elements. </dd></dl></div><p>Our earlier example could be given semantic structure by marking it up using some of these element’s tags:</p><a id="I_programlisting3_id289768"/><pre class="programlisting"><code class="nt"><h1></code>Amazing Visualization Tool Cures All Ills<code class="nt"></h1></code> <code class="nt"><p></code>A new open-source tool designed for visualization of data turns out to have an unexpected, positive side effect: it heals any ailments of the viewer. Leading scientists report that the tool, called D3000, can cure even the following symptoms:<code class="nt"></p></code> <code class="nt"><ul></code> <code class="nt"><li></code>fevers<code class="nt"></li></code> <code class="nt"><li></code>chills<code class="nt"></li></code> <code class="nt"><li></code>general malaise<code class="nt"></li></code> <code class="nt"></ul></code> <code class="nt"><p></code>It achieves this end with a patented, three-step process.<code class="nt"></p></code> <code class="nt"><ol></code> <code class="nt"><li></code>Load in data.<code class="nt"></li></code> <code class="nt"><li></code>Generate a visual representation.<code class="nt"></li></code> <code class="nt"><li></code>Activate magic healing function.<code class="nt"></li></code> <code class="nt"></ol></code></pre><p>When viewed in a web browser, that markup is rendered as shown in <a class="xref" href="ch03.html#Typical_default_rendering_of_simple_HTML" title="Figure 3-1. Typical default rendering of simple HTML">Figure 3-1</a>.</p><div class="figure"><a id="Typical_default_rendering_of_simple_HTML"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject3_id289795"/><img src="httpatomoreillycomsourceoreillyimages1614712.png" alt="Typical default rendering of simple HTML"/></div></div><div class="figure-title">Figure 3-1. Typical default rendering of simple HTML</div></div><p>Notice that we specified only the <span class="emphasis"><em>semantic</em></span> structure of the content; we didn’t specify any visual properties, such as color, type size, indents, or line spacing. Without such instructions, the browser falls back on its <span class="emphasis"><em>default styles</em></span>, which, frankly, are not too exciting.</p></div><div class="sect2" title="Attributes"><div class="titlepage"><div><div><h3 class="title" id="_attributes">Attributes</h3></div></div></div><p>All HTML elements can be assigned <span class="emphasis"><em>attributes</em></span> by including property/value pairs in the opening tag.<a id="I_indexterm3_id289848" class="indexterm"/><a id="I_indexterm3_id289856" class="indexterm"/></p><a id="I_programlisting3_id289866"/><pre class="programlisting"><code class="nt"><tagname</code> <code class="na">property=</code><code class="s">"value"</code><code class="nt">></tagname></code></pre><p>The name of the property is followed by an equals sign, and the value is enclosed within double quotation marks.</p><p>Different kinds of elements can be assigned different attributes. For example, the <code class="literal">a</code> link tag can be given an <code class="literal">href</code> attribute, whose value specifies the URL for that link. (<code class="literal">href</code> is short for “HTTP reference.”)</p><a id="I_programlisting3_id289892"/><pre class="programlisting"><code class="nt"><a</code> <code class="na">href=</code><code class="s">"http://d3js.org/"</code><code class="nt">></code>The D3 website<code class="nt"></a></code></pre><p>Some attributes can be assigned to <span class="emphasis"><em>any</em></span> type of element, such as <code class="literal">class</code> and <code class="literal">id</code>.</p></div><div class="sect2" title="Classes and IDs"><div class="titlepage"><div><div><h3 class="title" id="_classes_and_ids">Classes and IDs</h3></div></div></div><p>Classes and IDs are extremely useful attributes, as they can be<a id="I_indexterm3_id289927" class="indexterm"/><a id="I_indexterm3_id289937" class="indexterm"/> referenced later to identify specific pieces of content. Your CSS and JavaScript code will rely heavily on classes and IDs to identify elements. For example:</p><a id="I_programlisting3_id289950"/><pre class="programlisting"><code class="nt"><p></code>Brilliant paragraph<code class="nt"></p></code> <code class="nt"><p></code>Insightful paragraph<code class="nt"></p></code> <code class="nt"><p</code> <code class="na">class=</code><code class="s">"awesome"</code><code class="nt">></code>Awe-inspiring paragraph<code class="nt"></p></code></pre><p>These are three very uplifting paragraphs, but only one of them is truly awesome, as I’ve indicated with <code class="literal">class="awesome"</code>. The third paragraph becomes part of a <span class="emphasis"><em>class</em></span> of <span class="emphasis"><em>awesome</em></span> elements, and it can be selected and manipulated along with other class members. (We’ll get to that in a moment.)</p><p>Elements can be assigned multiple classes, simply by separating them with a space:</p><a id="I_programlisting3_id289976"/><pre class="programlisting"><code class="nt"><p</code> <code class="na">class=</code><code class="s">"uplifting"</code><code class="nt">></code>Brilliant paragraph<code class="nt"></p></code> <code class="nt"><p</code> <code class="na">class=</code><code class="s">"uplifting"</code><code class="nt">></code>Insightful paragraph<code class="nt"></p></code> <code class="nt"><p</code> <code class="na">class=</code><code class="s">"uplifting awesome"</code><code class="nt">></code>Awe-inspiring paragraph<code class="nt"></p></code></pre><p>Now, all three paragraphs are <code class="literal">uplifting</code>, but only the last one is both <code class="literal">uplifting</code> <span class="emphasis"><em>and</em></span> <code class="literal">awesome</code>.</p><p>IDs are used in much the same way, but there can be only one ID per<a id="I_indexterm3_id290005" class="indexterm"/> element, and each ID value can be used only once on the page. For example:</p><a id="I_programlisting3_id290015"/><pre class="programlisting"><code class="nt"><div</code> <code class="na">id=</code><code class="s">"content"</code><code class="nt">></code> <code class="nt"><div</code> <code class="na">id=</code><code class="s">"visualization"</code><code class="nt">></div></code> <code class="nt"><div</code> <code class="na">id=</code><code class="s">"button"</code><code class="nt">></div></code> <code class="nt"></div></code></pre><p>IDs are useful when a single element has some special quality, like a <code class="literal">div</code> that functions as a button or as a container for other content on the page.<a id="I_indexterm3_id290028" class="indexterm"/><a id="I_indexterm3_id290036" class="indexterm"/></p><p>As a general rule, if there will be only <span class="emphasis"><em>one</em></span> such element on the page, you can use an <code class="literal">id</code>. Otherwise, use a <code class="literal">class</code>.</p><div class="warning" title="Warning" epub:type="warning"><h3 class="title">Warning</h3><p>Class and ID names cannot begin with numerals; they must begin with alphabetic characters. So <code class="literal">id="1"</code> won’t work, but <code class="literal">id="item1"</code> will. The browser will not give you any errors; your code simply won’t work, and you will go crazy trying to figure out why.</p></div></div><div class="sect2" title="Comments"><div class="titlepage"><div><div><h3 class="title" id="_comments">Comments</h3></div></div></div><p>As code grows in size and complexity, it is good practice to include comments. These are friendly notes that you leave for yourself to remind you why you wrote the code the way you did. If you are like me, you will revisit projects only weeks later and have lost all recollections of it. Commenting is an easy way to reach out and provide guidance and solace to your future (and very confused) self.<a id="I_indexterm3_id290087" class="indexterm"/><a id="I_indexterm3_id290095" class="indexterm"/></p><p>In HTML, comments are written in the following format:</p><a id="I_programlisting3_id290106"/><pre class="programlisting"><code class="c"></code></pre><p>Anything between the <code class="literal"></code> will be ignored by the web browser.<a id="I_indexterm3_id290123" class="indexterm"/></p></div></div><div class="sect1" title="DOM"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_dom">DOM</h2></div></div></div><p>The term Document Object Model refers to the hierarchical structure of<a id="I_indexterm3_id290145" class="indexterm"/><a id="I_indexterm3_id290154" class="indexterm"/><a id="I_indexterm3_id290163" class="indexterm"/><a id="I_indexterm3_id290169" class="indexterm"/><a id="I_indexterm3_id290175" class="indexterm"/><a id="I_indexterm3_id290181" class="indexterm"/><a id="I_indexterm3_id290187" class="indexterm"/> HTML. Each pair of bracketed tags (or, in some cases, a single tag) is an <span class="emphasis"><em>element</em></span>, and we refer to elements’ relative relationships to each other in human terms: parent, child, sibling, ancestor, and descendant. For example, in this HTML:</p><a id="I_programlisting3_id290200"/><pre class="programlisting"><code class="nt"><html></code> <code class="nt"><body></code> <code class="nt"><h1></code>Breaking News<code class="nt"></h1></code> <code class="nt"><p></p></code> <code class="nt"></body></code> <code class="nt"></html></code></pre><p><code class="literal">body</code> is the parent element to both of its children, <code class="literal">h1</code> and <code class="literal">p</code> (which are siblings to each other). All elements on the page are descendants of <code class="literal">html</code>.</p><p>Web browsers parse the DOM to make sense of a page’s content. As coders building visualizations, we care about the DOM, because our code must navigate its hierarchy to apply styles and actions to its elements. We don’t want to make <span class="emphasis"><em>all</em></span> the <code class="literal">div</code> elements blue; we need to know how to select just the <code class="literal">div</code>s of the class <code class="literal">sky</code> and make <span class="emphasis"><em>them</em></span> blue.</p></div><div class="sect1" title="Developer Tools"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="developer_tools_3">Developer Tools</h2></div></div></div><p>In the olden days, the web development process went like this:</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem"> Write some code in a text editor.<a id="ix_devtool" class="indexterm"/><a id="ix_webtool" class="indexterm"/> </li><li class="listitem"> Save the files. </li><li class="listitem"> Switch to a browser window. </li><li class="listitem"> Reload the page, and see if your code worked. </li><li class="listitem"> If it didn’t work, take a guess at what went wrong inside the magical black box of the web browser, then go back to step 1. </li></ol></div><p>Browsers were notoriously secretive about what went on <span class="emphasis"><em>inside</em></span> the rendering engine, which made debugging a total nightmare. (Seriously, in the late 1990s and early 2000s, I literally had nightmares about this.) Fortunately, we live in a more enlightened age, and every modern-day browser has built-in <span class="emphasis"><em>developer tools</em></span> that expose the inner workings of the beast and enable us to poke around under the hood (to mix incompatible metaphors).</p><p>All this is to say that developer tools are a big deal and you will rely on them heavily to both test your code and, when something breaks, figure out what went wrong.</p><p>Let’s start with the simplest possible use of the developer tools: viewing the raw<a id="I_indexterm3_id290359" class="indexterm"/> source code of an HTML page (see <a class="xref" href="ch03.html#plain_source_view_window" title="Figure 3-2. Looking at the source code in a new window">Figure 3-2</a>).</p><p>Every browser supports this, although different browsers hide this option in different places. In Chrome 23.0, it’s under View→Developer→View Source. In Firefox 17.0, look under Tools→Web Developer→Page Source. In Safari 6.0, it’s under Develop→Show Page Source (although you must first set the “Develop” menu to display under Safari→Preferences→Advanced). Going forward, I’m going to assume that you’re using the newest version of whatever browser you choose.<a id="I_indexterm3_id290378" class="indexterm"/><a id="I_indexterm3_id290384" class="indexterm"/><a id="I_indexterm3_id290390" class="indexterm"/></p><div class="figure"><a id="plain_source_view_window"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject3_id290406"/><img src="httpatomoreillycomsourceoreillyimages1614713.png" alt="Looking at the source code in a new window"/></div></div><div class="figure-title">Figure 3-2. Looking at the source code in a new window</div></div><p>That gets you the raw HTML, but if any D3 or JavaScript code has been executed, the current DOM may be vastly different.<a id="I_indexterm3_id290427" class="indexterm"/></p><p>Fortunately, your browser’s developer tools enable you to see the current state of the DOM. And, again, the developer tools are different in every browser. In Chrome, find them under View→Developer→Developer Tools. In Firefox, try Tools→Web Developer. In Safari, first enable the developer tools (in Safari→Preferences→Advanced). Then, in the Develop menu, choose Show Web Inspector. In any browser, you can also use the corresponding keyboard shortcut (as shown adjacent to the menu item) or right-click and choose “inspect element” or something similar.</p><p>Until recently, Safari and Chrome shared the same developer tools, but with Safari 6.0, Apple completely redesigned their dev tools, much to the dismay of many web-developing Safari fans. (The new tools are very hard to navigate, and I don’t think I’m the only one who feels that way.) Whichever browser you use might look a bit different from my screenshots, but the functionality will be very similar.</p><p><a class="xref" href="ch03.html#Safari_web_inspector" title="Figure 3-3. Chrome’s web inspector">Figure 3-3</a> shows the Elements tab of Chrome’s web inspector. Here we can see the current state of the DOM. This is useful because your code will modify DOM elements dynamically. In the web inspector, you can watch elements as they change.</p><div class="figure"><a id="Safari_web_inspector"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject3_id290468"/><img src="httpatomoreillycomsourceoreillyimages1614714.png" alt="Chrome’s web inspector"/></div></div><div class="figure-title">Figure 3-3. Chrome’s web inspector</div></div><p>If you look closely, you’ll already see some differences between the raw HTML and the DOM, including the fact that Chrome generated the required <code class="literal">html</code>, <code class="literal">head</code>, and <code class="literal">body</code> elements. (I was lazy and didn’t include them in my original HTML.)</p><p>One more thing: why am I focusing on Chrome, Firefox, and Safari? Why not Internet Explorer, Opera, or the many other browsers out there? For one, it’s best to develop your projects using a browser with the broadest support for web standards. Internet Explorer made huge progress with versions 9 and 10, but Chrome, Firefox, and Safari are understood to have the broadest standards support, and they are updated more frequently.</p><p>Second, you’re going to spend a lot of time using the developer tools, so you should develop with a browser that has tools you enjoy using. I was pretty devoted to Safari until the 6.0 update changed everything. Now I’m going back and forth between Chrome and Firefox’s new dev tools. I recommend you try them all and decide what works best for you.<a id="I_indexterm3_id290518" class="indexterm"/><a id="I_indexterm3_id290524" class="indexterm"/></p></div><div class="sect1" title="Rendering and the Box Model"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_rendering_and_the_box_model">Rendering and the Box Model</h2></div></div></div><p><span class="emphasis"><em>Rendering</em></span> is the process by which browsers, after parsing the HTML and generating the DOM, apply visual rules to the DOM contents and draw those pixels to the screen.<a id="I_indexterm3_id290551" class="indexterm"/><a id="I_indexterm3_id290558" class="indexterm"/></p><p>The most important thing to keep in mind when considering how browsers render content is this: to a browser, everything is a box.</p><p>Paragraphs, <code class="literal">div</code>s, <code class="literal">span</code>s—all are boxes in the sense that they are two-dimensional rectangles, with properties that any rectangle can have, such as width, height, and positions in space. Even if something looks curved or irregularly shaped, rest assured, to the browser, it is merely another rectangular box.<a id="I_indexterm3_id290582" class="indexterm"/><a id="I_indexterm3_id290588" class="indexterm"/><a id="I_indexterm3_id290596" class="indexterm"/></p><p>You can see these boxes with the help of the web inspector. Just mouse over any element, and the box associated with that element is highlighted in blue, as shown in <a class="xref" href="ch03.html#Inspector_with_element_box_highlighted" title="Figure 3-4. Inspector with element box highlighted">Figure 3-4</a>.</p><div class="figure"><a id="Inspector_with_element_box_highlighted"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject3_id290621"/><img src="httpatomoreillycomsourceoreillyimages1614715.png" alt="Inspector with element box highlighted"/></div></div><div class="figure-title">Figure 3-4. Inspector with element box highlighted</div></div><p>There’s a lot of information about the <code class="literal">ul</code> unordered list here. Note that the list’s total dimensions (width and height) are shown in the yellow box at the element’s lower-left corner. Also, the list’s position in the DOM hierarchy is indicated in the lower-left corner of the inspector: <code class="literal">html > body > ul</code>.<a id="I_indexterm3_id290651" class="indexterm"/></p><p>The box for the <code class="literal">ul</code> expands to fill the width of the entire window because it is a <span class="emphasis"><em>block-level</em></span> element. (Note how under “Computed Style” is listed <code class="literal">display: block</code>.) This is in contrast to <span class="emphasis"><em>inline</em></span> elements, which rest <span class="emphasis"><em>in line</em></span> with each other, not stacked on top of each other like blocks. Common inline elements include <code class="literal">strong</code>, <code class="literal">em</code>, <code class="literal">a</code>, and <code class="literal">span</code>.<a id="I_indexterm3_id290699" class="indexterm"/><a id="I_indexterm3_id290705" class="indexterm"/></p><p>By default, block-level elements expand to fill their container elements and force any subsequent sibling elements further down the page. Inline elements do not expand to fill extra space, and happily exist side by side, next to their fellow inline neighbors. (Discussion question: what kind of element would you rather be?)</p></div><div class="sect1" title="CSS"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_css">CSS</h2></div></div></div><p>Cascading Style Sheets are used to style the visual presentation of DOM<a id="ix_CSS" class="indexterm"/><a id="I_indexterm3_id290743" class="indexterm"/> elements. A simple CSS stylesheet looks like the following:</p><a id="I_programlisting3_id290753"/><pre class="programlisting"><code class="nt">body</code> <code class="p">{</code> <code class="k">background-color</code><code class="o">:</code> <code class="nb">white</code><code class="p">;</code> <code class="k">color</code><code class="o">:</code> <code class="nb">black</code><code class="p">;</code> <code class="p">}</code></pre><p>CSS styles consist of <span class="emphasis"><em>selectors</em></span> and <span class="emphasis"><em>properties</em></span>. Selectors are<a id="I_indexterm3_id290770" class="indexterm"/><a id="I_indexterm3_id290779" class="indexterm"/><a id="I_indexterm3_id290785" class="indexterm"/> followed by properties, grouped in curly brackets. A property and its value are separated by a colon, and the line is terminated with a semicolon, like the following:</p><a id="I_programlisting3_id290795"/><pre class="programlisting"><code class="nt">selector</code> <code class="p">{</code> <code class="n">property</code><code class="o">:</code> <code class="n">value</code><code class="p">;</code> <code class="n">property</code><code class="o">:</code> <code class="n">value</code><code class="p">;</code> <code class="n">property</code><code class="o">:</code> <code class="n">value</code><code class="p">;</code> <code class="p">}</code></pre><p>The same properties can be applied to multiple selectors at once by separating the selectors with a comma, as in the following:</p><a id="I_programlisting3_id290805"/><pre class="programlisting"><code class="nt">selectorA</code><code class="o">,</code> <code class="nt">selectorB</code><code class="o">,</code> <code class="nt">selectorC</code> <code class="p">{</code> <code class="n">property</code><code class="o">:</code> <code class="n">value</code><code class="p">;</code> <code class="n">property</code><code class="o">:</code> <code class="n">value</code><code class="p">;</code> <code class="n">property</code><code class="o">:</code> <code class="n">value</code><code class="p">;</code> <code class="p">}</code></pre><p>For example, you might want to specify that both <code class="literal">p</code> paragraphs and <code class="literal">li</code> list items should use the same font size, line height, and color.</p><a id="I_programlisting3_id290823"/><pre class="programlisting"><code class="nt">p</code><code class="o">,</code> <code class="nt">li</code> <code class="p">{</code> <code class="k">font-size</code><code class="o">:</code> <code class="m">12px</code><code class="p">;</code> <code class="k">line-height</code><code class="o">:</code> <code class="m">14px</code><code class="p">;</code> <code class="k">color</code><code class="o">:</code> <code class="nb">orange</code><code class="p">;</code> <code class="p">}</code></pre><p>Collectively, this whole chunk of code (selectors and bracketed properties) is called a <span class="emphasis"><em>CSS rule</em></span>.<a id="I_indexterm3_id290837" class="indexterm"/></p><div class="sect2" title="Selectors"><div class="titlepage"><div><div><h3 class="title" id="_selectors">Selectors</h3></div></div></div><p>D3 uses CSS-style selectors to identify elements on which to operate, so it’s important to understand how to use them.</p><p>Selectors identify specific elements to which styles will be applied. There are several different kinds of selectors. We’ll use only the simplest ones in this book.</p><div class="variablelist"><dl><dt><span class="term"> Type selectors </span></dt><dd> These are the simplest. They match DOM elements with the same<a id="I_indexterm3_id290884" class="indexterm"/> name: </dd></dl></div><a id="I_programlisting3_id290898"/><pre class="programlisting"><code class="nt">h1</code> <code class="c">/* Selects all level 1 headings */</code> <code class="nt">p</code> <code class="c">/* Selects all paragraphs */</code> <code class="nt">strong</code> <code class="c">/* Selects all strong elements */</code> <code class="nt">em</code> <code class="c">/* Selects all em elements */</code> <code class="nt">div</code> <code class="c">/* Selects all divs */</code></pre><div class="variablelist"><dl><dt><span class="term"> Descendant selectors </span></dt><dd> These match elements that are contained by (or “descended from”) another element. We will rely heavily on descendant<a id="I_indexterm3_id290921" class="indexterm"/> selectors to apply styles: </dd></dl></div><a id="I_programlisting3_id290933"/><pre class="programlisting"><code class="nt">h1</code> <code class="nt">em</code> <code class="c">/* Selects em elements contained in an h1 */</code> <code class="nt">div</code> <code class="nt">p</code> <code class="c">/* Selects p elements contained in a div */</code></pre><div class="variablelist"><dl><dt><span class="term"> Class selectors </span></dt><dd> These match elements of any type that have been assigned a<a id="I_indexterm3_id290954" class="indexterm"/> specific class. Class names are preceded with a period, as shown here: </dd></dl></div><a id="I_programlisting3_id290966"/><pre class="programlisting"><code class="nc">.caption</code> <code class="c">/* Selects elements with class "caption" */</code> <code class="nc">.label</code> <code class="c">/* Selects elements with class "label" */</code> <code class="nc">.axis</code> <code class="c">/* Selects elements with class "axis" */</code></pre><p>Because elements can have more than one class, you can target elements with multiple classes by stringing the classes together, as in the following:</p><a id="I_programlisting3_id290978"/><pre class="programlisting"><code class="nc">.bar.highlight</code> <code class="c">/* Could target highlighted bars */</code> <code class="nc">.axis.x</code> <code class="c">/* Could target an x-axis */</code> <code class="nc">.axis.y</code> <code class="c">/* Could target a y-axis */</code></pre><p><code class="literal">.axis</code> could be used to apply styles to both axes, for example, whereas <code class="literal">.axis.x</code> would apply only to the x-axis.</p><div class="variablelist"><dl><dt><span class="term"> ID selectors </span></dt><dd> These match the single element with a given ID. (Remember, IDs can be<a id="I_indexterm3_id291010" class="indexterm"/> used only once each in the DOM.) IDs are preceded with a hash mark. </dd></dl></div><a id="I_programlisting3_id291023"/><pre class="programlisting"><code class="nf">#header</code> <code class="c">/* Selects element with ID "header" */</code> <code class="nf">#nav</code> <code class="c">/* Selects element with ID "nav" */</code> <code class="nf">#export</code> <code class="c">/* Selects element with ID "export" */</code></pre><p>Selectors get progressively more useful as you combine them in different ways to target specific elements. You can string selectors together to get very specific results. For example:</p><a id="I_programlisting3_id291042"/><pre class="programlisting"><code class="nt">div</code><code class="nc">.sidebar</code> <code class="c">/* Selects divs with class "sidebar", but</code> <code class="c"> not other elements with that class */</code> <code class="nf">#button</code><code class="nc">.on</code> <code class="c">/* Selects element with ID "button", but</code> <code class="c"> only when the class "on" is applied */</code></pre><p>Remember, because the DOM is dynamic, classes and IDs can be added and removed, so you might have CSS rules that apply only in certain scenarios.</p><p>For details on additional selectors, see the <a class="ulink" href="http://mzl.la/V27Mcr" target="_top">Mozilla Developer Network</a>.</p></div><div class="sect2" title="Properties and Values"><div class="titlepage"><div><div><h3 class="title" id="_properties_and_values">Properties and Values</h3></div></div></div><p>Groups of property/value pairs cumulatively form the<a id="I_indexterm3_id291076" class="indexterm"/><a id="I_indexterm3_id291085" class="indexterm"/><a id="I_indexterm3_id291091" class="indexterm"/> styles:</p><a id="I_programlisting3_id291102"/><pre class="programlisting"><code class="nt">margin</code><code class="o">:</code> <code class="nt">10px</code><code class="o">;</code> <code class="nt">padding</code><code class="o">:</code> <code class="nt">25px</code><code class="o">;</code> <code class="nt">background-color</code><code class="o">:</code> <code class="nt">yellow</code><code class="o">;</code> <code class="nt">color</code><code class="o">:</code> <code class="nt">pink</code><code class="o">;</code> <code class="nt">font-family</code><code class="o">:</code> <code class="nt">Helvetica</code><code class="o">,</code> <code class="nt">Arial</code><code class="o">,</code> <code class="nt">sans-serif</code><code class="o">;</code></pre><p>At the risk