DHSI - Javascript & D3 Day 2

1 minute read



Meassuring by percentage 75% of the DOM tree.

line-height: 1.5em; is a good default for readability, roughly equal to 1.5 spaced lines

The ‘Cascade’ in Cascading Style Sheets

Usually biggest part of the DOM that can be styled is the body.

The cascade is the order of precedence for CSS rules.

Genetics and Inheritance


Smaller boxes can override a parent’s definition or style.

Differences between Block and Inline Elements

<i> and <b> is replaced by <em> and <strong> which are more accessible and separate the display from the semantic function. <em> emphasizes for whatever reason. Images are inline elements by default, to modify it has to be changed to block (css).

id names are unique, classes can be used multiple times.

id’s and classes can be stylized with special syntax.

#footnotes {font-size:smaller;} is an example of an id selector. /*id selector*/

.warning {color: red;} is an example of a class selector. /*class selector*/


Made of line and fills, scaled because they don’t lose resolution because it’s not based on pixels. Created in xml within the html document, and validates same as html. D3 draws graphics with svg, SVG is XML

Folder with files for day 2

Javascript objects

Objects are a collection of properties. Properties are key-value pairs.

person = {
'first': 'William',
'last': 'Shakespeare',
'birth': 1564,
'death': 1616,
'citizenship': 'English'

Arrays in js is a type of object. They’re a collection of values, not key-value pairs. They’re indexed, and the index starts at 0. Python lists are similar to js arrays.

Javascript objects are similar to python dictionaries with curley braces, key-value pairs, key is a string, and the value can be any type of object.

Javascript functions

Functions are declared with ‘function’ and then the name of the function, parenthesis, and curly brackets.