Introduction to D3.js | Realcode4you

Before start D3.js first you:

are familiar with HTML, the DOM, and CSS
have a little programming experience already
have even heard of jQuery or written some JavaScript before
aren’t scared by unknown initialisms like CSV, SVG, or JSON
want to make useful, interactive visualizations

HTML

Hypertext Markup Language is used to structure content for web browsers. The simplest HTML page looks like this:

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>Page Title</h1>
        <p>This is a really interesting paragraph.</p>
    </body>
</html>

DOM

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, h1 and p (which are siblings to each other). All elements on the page are descendants of html.

Web browsers parse the DOM in order to make sense of a page’s content.

CSS

Cascading Style Sheets are used to style the visual presentation of HTML pages. A simple CSS stylesheet looks like this:

body {
    background-color: white;
    color: black;
}

CSS styles consist of selectors and rules. Selectors identify specific elements to which styles will be applied:

h1          /* Selects level 1 headings              */
p           /* Selects paragraphs                    */
.caption    /* Selects elements with class "caption" */
#subnav     /* Selects element with ID "subnav"      */

Rules are properties that, cumulatively, form the styles:

color: pink;
background-color: yellow;
margin: 10px;
padding: 25px;

We connect selectors and rules using curly brackets:

p {
    font-size: 12px;
    line-height: 14px;
    color: black;
}

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

<head>
    <style type="text/css">
        p {
            font-family: sans-serif;
            color: lime;
        }
    </style>
</head>

or saved in an external file with a .css suffix, and then referenced in the document’s head:

<head>
    <link rel="stylesheet" href="style.css">
</head>

JavaScript

JavaScript is a dynamic scripting language that can instruct the browser to make changes to a page after it has already loaded.

Scripts can be included directly in HTML, between two script tags

<body>
    <script type="text/javascript">
        alert("Hello, world!");
    </script>
</body>

or stored in a separate file, and then referenced somewhere the HTML (commonly in the head):

<head>
    <title>Page Title</title>
    <script type="text/javascript" src="myscript.js"></script>
</head>

0 comments