Web.txt

@@@@@@@@@@  Information Visualization: Programming with D3.js  @@@@@@
Intro to HTML and CSS

Intro to D3

Visualization Steps
---
1) Transform Data
2) Map data to image space
3) Compute layout
4) Draw the chart


D3 APIs
---
- Every API of D3 starts with d3.something
- For: Transform Data
    d3.cross, d3.max
- For: Map data to image space
    d3.scaleLinear, d3.scaleTime
- Compute layout
    d3.path, d3.treemap
- Draw the chart
    d3.select, d3.append


D3 Selections
---
- Basic API of D3
- Can be used to select elements on our HTML and then manipulate them to assign
  data to them.

- d3.select(selector)   <- any selector that's used in CSS can be used here too.
- If there are multiple selectors on HTML page, first one is selected.

    d3.select("p").select("main")   <- chaining selection

    let selection = de.select("p")
                      .select("main")

- d3.selectAll(selector)    <- select all elements. You can chain them too.







@@@@@@@@@@@@@@@@  HTML5, CSS & Javascript for Web Developers   @@@@@@@@@@@@

// starting browser-sync
$ browser-sync start --server --directory --files "*"

- HTML elements and tags are same. Used interchangeably.
- Tags have attributes (name-value pairs)
    <p id="myId"> ... </p>
- Attributes have their own requirements. For ex. id attribute must be unique
  across HTML document.

HTML Content Models: (1) Block-Level Elements (2) Inline Elements
- HTML5 has 7 types of elements

- Semantic HTML5 tags
    - May help SEO ranking. But varying opinions

- HTML5 Lists: Ordered and Unordered Lists

Character Entity Reference:
---
<   use '&lt;' instead
>   use '&gt;' instead
&   use '&amp;' instead
- There are many more (like copyright symbol etc)

Links
-----
- Internal links
    <a href="">
    // value in href is absolute or relative url
- In HTML5, <a> tag is both block and inline tag (flow and phrasing content).
  So, we can take a <a> tag and have <div> tag within it.

- <a href="#section1"> text </a>
  ...
  <section id="section1"> more text </section>

- <img src="" width="" height="" alt=""> &quot; text



Intro to CSS3
------
- Every browser comes with default style. CSS rules override it.

Anatomy of CSS Rule:
------
    p {
        color: blue;
    }

p = selector
CSS declaration --> color: blue;
color = Property
blue = Value

- Collection of CSS rules is a Style Sheet

Element, Class and ID Selectors
------
Element Selector - we select element name (like 'p' above)
Class Selector -
    .blue {     <!-- note the . in front -->
        color: blue;
    }

    - we create a 'blue' CSS class above

- How is Class Selector used?

    <p class='blue'> ... </p>
    <div class='blue'> ... </div>

ID Selector

    #name {     <!-- note the pound sign   -->
        color: blue;
    }

    <p id='name'> ... </p>
    <div id='name'> ... </div>


Grouping Selectors with commas

    div, .blue {
        color: blue;
    }

    <p class='blue'> ... </p>
    <p> ... </p>    <!-- no effect -->
    <div> ... </div>


- id attribute is least reusable as it can appear only once in the document

Combining Selectors
----

[1]
    p.big {
        font-size: 20pm;
    }

    <p class='big'> ... </p>    <!-- rule applied>
    <div class='big'> ... </div> <!-- rule NOT applied>

[2] Child Selector: Every 'p' that's direct child of 'article'

    article > p {   <!-- p is DIRECT child of article element -->
        color: blue;
    }

    <article>
        <p> ... </p>
    </article>

    <article>
        <div> <p> ... </p> </div>   <!-- unaffected -->
    </article>

[3] Descendant Selector: Every 'p' inside (at any level) of 'article'

    article p {
        color: blue;
    }

    <article>
        <div> <p> ... </p> </div>   <!-- rule applied -->
    </article>

[4]
- 1, 2, 3 are not limited to Element Selectors. It can be applied to class and
  id selectors

    <!-- every 'p' inside (at any level) an elem with class='colored'  -->
    .colored p {
        color: blue;
    }

    <!-- every elem with class='colored' that's DIRECT child of 'article' elem
    -->
    article > .colored {
        color: blue;
    }


[5] Adjacent Sibling Selector

    selector + selector

[6] General Sibling Selector

    selector ~ selector



Pseudo Class Selectors
------

    selector:pseudo-class {
        ...
    }

- Many pseudo-class selectors exists, but we cover following 5:
    :link
    :visited
    :hover
    :active
    :nth-child(...)

// TODO
- Pseudo-class selectors are very powerful. Watch Lesson 15 to get a feel.
  More reading is necessary for this.


Style Placement
------
- Have external style file and use it in all HTML files

Conflict Resolution
------
- 4 concepts come in to play to resolve conflict
    [1] Origin Precedence: Last declaration wins
    [2] Declarations Merge: Two declaration (non-conflicting) refering to same
        element gets merged. Both rules will be applied to the element.
    [3] Inheritance: DOM Tree
        A rule declared on a parent is inherited on all it's children
    [4] Specificity: Most specific selector combination wins
        - inline 'style' is highest score
        - !important ---> overrides all other CSS rules. Avoid using this.


                Specificity Score

    inline Style |  ID   |  Class, pseudo-class,   |    # of elements
                 |       |      attribute          |
     -----------------------------------------------------------------
                 |       |                         |

- Calculate the scores above and in conflict, highest score wins.

Styling
-------
- Lots of CSS properties that affect styling

    font-family: "Times New Roman", Times, serif, San Serif;
    color: #0000FF;     // RGB specification
    font-style: italic;
    font-weight: bold;
    font-size: 24px;    // its diff than points
    text-transform: lowercase;  // uppercase and others
    text-align: center;     // many more alignments

    // em = width of 'm'. It's relative font-size


//TODO: Listen to Lecture 18 Part 2, Styling Text. Instructor talks about
//cumulative doubling of font-size

The Box Model
-------------
- Around the content, 3 terms are used:
    * Padding
    * Border
    * Margin



                            (page  layout)
        +----------------------------------------------------+
        |                                                    |
        |    +==========================================+    | ---
        |    |                                          |    |  ^
        |    |    +-------------------------------+     |    |  |
        |    |    |                               |     |    |  |
        |    |    |                               |     |    |  |
        |    |    |                               |     |    |
        |    |    |           CONTENT             |     |    |height
        |    |    |                               |     |    |
        |    |    |                               |     |    |  |
        |    |    |                               |     |    |  |
        |    |    +-------------------------------+  ^  |    |  |
        |    |                                       |  |    |  v
        |    +=======================================|==+    | ---
        |  ^                    ^                    |       |
        +--|--------------------|--------------------|-------+
           |                    |                    |
        margin               border               padding

             |<-----------     width   ----------------->|



- Margins DO NOT define width of the box
- CDT (Chrome Dev Tools) have all these details

Star Selector
------
- Universal selector. Select "every" elem and apply the rule

    * {
        property: value;
        // box-sizing: border-box;
    }

- Margins are cumulative. If 2 boxes are adjacent to each other, then margin
  between the boxes add up.
- It's not same for 2 boxes, top and bottom. Larger margin takes effect.

- 'box-sizing: border-box' - prefered CSS property.
- 'width' property applies to just the content. With 'box-sizing: border-box'
  it is applied to entire box.



- Content overflow
    - 'overflow' property: 'auto', 'hidden', 'visible', 'scroll'
    - Lookup to understand
    - Users do not prefer 'double scrolling': Having two scroll bars in a
      browser.


Background Properties
------
    background-color: blue;
    background-image: url("");
    background-repeat: no-repeat; // other options
    background-position: bottom right;  // other options

    background: url("") no-repeat right center; // all properties in one
    // background overrides all other individual properties since it's listed
    // last?

Position Elems by Floating
----
    float: right;
    clear: left;    // nothing should float to left of this elem
    // It's all getting confusing and messy. Must listen few more times to
    // this lecture.

- Floats can produce flexible layouts

2 Column Layout
----

Relative Positioning
    CSS offset properties: top, bottom, left, right
- Elem is positioned relative to its position in normal doc flow
- Elem is NOT taken out of normal doc flow. Even if moved, its original spot
  is preserved ex:

        position: relative;
        top: 50px;  // negative values allowed
        left: 50px;

- html elem is ALWAYS relative=positioned
- Absolute positioning depends on closest ancestor elem whose positioning is
  set to non-static value.

Media Queries
-----

    @media (max-width: 700px) {
        p {
            color: blue;
        }
    }

- If media feature (in this case "max-width: 700px") is true, the styles
  within curly braces apply.

- max-width and min-width are most common.
- media features can be combined with 'and' and comma operators.
    Ex:
    @media (min-width: 768px) and (max-width: 991px) {...}

- Comma is treated as OR
    Ex:
    @media (min-width: 768px), (max-width: 991px) {...}


Responsive Design
------
- Site designed to adapt its layout to viewing environment by using fluid,
  proportion-based grids, flexible images, and CSS3 media queries.

- 12 column grid responsive layout is most common layout
    * 12 is used because of it's factors: 1, 2, 3, 4, 6, 12
    * To achieve fluid width, use %
- Viewport meta tag is used to turn off default mobile zooming.
    - Mobile phones zoom out the page and display it

    <meta name="viewport" content="width=device-width, initial-scale=1">
    - This tells browser to consider the width of device as real width of
      screen and set zoom level to 1 (100%)


Twitter Bootstrap
------
- Bootstrap is the most popular HTML, CSS and JS framework for developing
  responsive, mobile first projects on web

- Bootstrap grid system basics

    <div class="container">
        <div class="row">
            <div class="col-md-4"> Col 1</div>
            ...
        </div>
    </div>

    - Instead of 'div', can use other elems too
    - "container" or 'container-fluid" classes must be at top
    - All columns inside .row class
    - "row" class has negative width to align with rest of the regular
      content. Listen to Lecture 26 Part 1 for details

- col-SIZE-SPAN
    - SIZE: Screen width range identifier. Columns will collapse on each other
      (they'll stack) if width is less than SIZE
    - SPAN: How many columns the elem must span (1 to 12)








References:
[1] jsfiddle.net
[2] css-tricks.com
[3] codepen.io
[4] caniuse.com // Keeps track of changes to HTML5/CSS etc
[5] w3c.org
[6] validator.w3c.org
[7] csszengarden.com
[8] HTML5, CSS and JS course from Coursera (John Hopkins, Yaakov Chaikin)

===============================================================================
Object Oriented Java (Coursera Course)

Map Providers:
1) http://unfoldingmaps.org/javadoc/
2) https://processing.org/reference/ - Flexible software sketchbook. Amazing
software for visual arts.
3)
http://unfoldingmaps.org/javadoc/de/fhpotsdam/unfolding/providers/package-summary.html

===============================================================================
Web Development with Steve Huffman (Udacity Course)

HTML Tags:
---
<b></b> - bold tag
<em></em> - italics

HTML Tag Attributes:
---

Resources:
[1] www.udacity.com/html_playground
===============================================================================
Web Dev (Udemy course) - Rob Percival

HTML Tags:

Header:         h1, h2, ... h6
Self closing:   <br />
Line break:     <br>
Horizontal rule: <hr />
Bold: <strong>. Earlier, it was <b>, but it's deprecated
Italics: <em>. Can also use <i>
Underline: <u>
Strike through: <strike>

Unordered Lists:
    <ul>
        <li> Pizza </li>
        <li> Chocolate </li>
        <li> Curry </li>
    </ul>

Ordered Lists:
    <ol>
        <li> Jeans </li>
        <li> Shirt </li>
        <li> Socks </li>
    </ol>

Images:
    <img src="images/example.jpg" />
    <img src="URL" width="200" height="200"/>   <--this is 200px wide/height

Forms: Lots of options within form tag
    <form>
        <input type="text" value="example" />
        <input type="email" />
        <input type="text" placeholder="type here ..." />

        <br /><br />

        <textarea> My content goes here </textarea>

        <select>
            <option> Select an option </option>
            <option> 1 </option>
            <option> 2 </option>
            <option> 3 </option>
        </select>

        <br /><br />

        // name="something" groups the radio input in to one
        // then you take only one input
        <input type="radio" name="color" /> Red
        <input type="radio" name="color" /> Green

        <br /><br />

        <input type="checkbox" name="color" /> Dog
        <input type="checkbox" name="color" /> Fish
        <input type="checkbox" name="color" /> Cat

        <br /><br />

        <input type="submit" value="Click Me" />

    </form>

Links:
    <p> <a href="https://www.google.com"> Google </a> </p>

    <a name="top"> </a>
    <a href="#top"> Back to top </a>

Tables:
    <tr> // table row tag
    <th> // table header tag. Each tag will be a column
    <td> // Cells of a table


    <table>
        <tr> <th>Names</th> <th>Age</th> <th>Gender</th> </tr>
        <tr> <td>Rob</td> <td>30</td> <td>M</td> </tr>

    </table>