Technology Fundamentals

1.Common Elements

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
html
head
title
body
ul, ol, li
em/strong
a
span
div

2. Attributes

All HTML elements can be assigned attributes by including property/value pairs in the opening tag.

1
<tagname property="value"></tagname>

Different kinds of elements can be assigned different attributes.

1
<a href="http://d3js.org/">The D3 website</a>

3. Classes and IDs

Classes and IDs are extremely useful attributes, as they can be referenced later to identify specific pieces of content. 

1
2
3
4
5
6
7
8
9
10
<p>Brilliant paragraph</p>
<p class="uplifting">Insightful paragraph</p>
<p class="uplifting awesome">Awe-inspiring paragraph</p>

<div id="content">
    <div id="visualization"></div>
    <div id="button"></div>
</div>

<!-- Your comment here -->

4. DOM

The term Document Object Model refers to the hierarchical structure of HTML. 代表element间的相关关系(父子/兄弟、祖先/子孙).

1
2
3
4
5
6
<html>
    <body>
        <h1>Breaking News</h1>
        <p></p>
    </body>
</html>

5. CSS

Cascading Style Sheets are used to style the visual presentation of DOM elements. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
    background-color: white;
    color: black;
}
# CSS styles consist of selectors and properties. 
selector {
    property: value;
    property: value;
    property: value;
}
# The same properties can be applied to multiple selectors at once.
selectorA,
selectorB,
selectorC {
   property: value;
   property: value;
   property: value;
}
# eg
p,
li {
    font-size: 12px;
    line-height: 14px;
    color: orange;
}

6. Selectors

Selectors identify specific elements to which styles will be applied. There are several different kinds of selectors.

6.1 Type selectors

They match DOM elements with the same name:

1
2
3
4
5
h1          /* Selects all level 1 headings           */
p           /* Selects all paragraphs                 */
strong      /* Selects all strong elements            */
em          /* Selects all em elements                */
div         /* Selects all divs                       */
6.2 Descendant selectors

These match elements that are contained by (or “descended from”) another element. 

1
2
h1 em       /* Selects em elements contained in an h1 */
div p       /* Selects p elements contained in a div  */
6.3 Class selectors

These match elements of any type that have been assigned a specific class. 

1
2
3
.caption    /* Selects elements with class "caption"  */
.label      /* Selects elements with class "label"    */
.axis       /* Selects elements with class "axis"     */

Because elements can have more than one class, you can target elements with multiple classes by stringing the classes together, as in the following:

1
2
3
.bar.highlight  /* Could target highlighted bars      */
.axis.x         /* Could target an x-axis             */
.axis.y         /* Could target a y-axis              */

.axis could be used to apply styles to both axes, for example, whereas .axis.x would apply only to the x-axis.

6.4 ID selectors

These match the single element with a given ID. (Remember, IDs can be used only once each in the DOM.) IDs are preceded with a hash mark.

1
2
3
#header     /* Selects element with ID "header"       */
#nav        /* Selects element with ID "nav"          */
#export     /* Selects element with ID "export"       */

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:

1
2
3
4
div.sidebar /* Selects divs with class "sidebar", but
               not other elements with that class     */
#button.on  /* Selects element with ID "button", but
               only when the class "on" is applied    */

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.

7. Properties and Values

7.1 color
1
2
3
4
5
6
7
8
9
10
# 1. Named colors: 
color: orange;
# 2. Hex values: 
color: #3388aa; 
#or 
color: #38a;
# 3. RGB values: 
color: rgb(10, 150, 20);
# 4. RGB with alpha transparency: 
color: rgba(10, 150, 20, 0.5);

8. Referencing Styles

8.1 Embed the CSS in your HTML.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <style type="text/css">

            p {
                font-size: 24px;
                font-weight: bold;
                background-color: red;
                color: white;
            }

        </style>
    </head>
    <body>
        <p>If I were to ask you, as a mere paragraph, would you say that I
        have style?</p>
    </body>
</html>
8.2 Reference an external stylesheet from the HTML.
1
2
3
4
5
6
7
8
9
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>If I were to ask you, as a mere paragraph, would you say that
        I have style?</p>
    </body>
</html>
8.3 Attach inline styles.
1
<p style="color: blue; font-size: 48px; font-style: italic;">Inline styles are kind of a hassle</p>

9. SVG

1
2
3
<svg width="50" height="50">
    <circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>
9.1 Simple Shapes
1
2
3
4
5
6
7
8
9
10
11
12
13
#    rect
<rect x="0" y="0" width="500" height="50"/>        
#    circle 
<circle cx="250" cy="25" r="25"/>       
#    ellipse
<ellipse cx="250" cy="25" rx="100" ry="25"/>        
#    line 
<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>       
#    text
<text x="250" y="25">Easy-peasy</text>
<text x="250" y="25" font-family="serif" font-size="25"
 fill="gray">Easy-peasy</text>        
#    path
9.2 Styling SVG Elements

fill -> A color value.
stroke -> A color value.
stroke-width -> A numeric measurement (typically in pixels).
opacity -> 0.0 (completely transparent) ~ 1.0 (completely opaque)
font-family -> for text
font-size -> for text 

1
2
3
4
5
6
7
8
<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"/>
#    css
<circle cx="25" cy="25" r="22" class="pumpkin"/>
.pumpkin {
    fill: yellow;
    stroke: orange;
    stroke-width: 5;
 }
9.3 Transparency
1
2
3
4
5
6
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>
i

References

processing

jsbin

Interactive Data Visualization for the Web By Scott Murray

Comments