HTML

comments:

<!-- this is a comment. -->

open an element / html tag:

 </element>

close an element / html tag:

 <element>

html file setup:

<!DOCTYPE html>
<html>
         
   <!-- header: -->
    <head>
   <!-- link here to stylesheets and external javascript libraries: -->
    </head>

   <!-- body: -->
    <body>
   <!-- everything that you want to see on your page goes here: -->

    </body>

</html>

Other html elements:

div, h1, em, span, …

To inspect your styles is the browser right click on any element on your webpage and click “Inspect”.

Terms you can google:

html elements | html tags

link to list of elements

CSS

inline style in html file:

<!-- change one style -->
<element style="color:blue"></element>
<!-- change multiple styles at once -->
<element style="color:blue; font-size:1em"></element>

better style: have a separate style file “styles.css” and link in your html file header:

<head> 
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

give the element you want to style a class:

<element class="title"></element>

style all elements with the same class in ‘styles.css’:

.title{
   color: blue;
   font-size: 1em;
}

comments in ‘.css’ file:

/* this is a comment */

To inspect your styles is the browser right click on any element on your webpage and click “Inspect”. Then find the ‘styles’ tab.

Other things to style:

background-color, width, height, font, fill, stroke

Terms you can google:

css | html style | css properties

link to css reference sheet

Images and SVGs

include an image from your directory (‘.jpg’, ‘.gif’, or any other image format):

<img src="cat.jpg">

include an image from the internet:

<img src="https://media.giphy.com/media/xEByv651MhOYo/giphy.gif">

create a scalable vector graphic (good for any element you want to change using code):

<svg>
  <circle cx="25" cy="25" r="15" class="circ1"></circle>
</svg>

Other SVG elements:

ellipse, rect

Terms you can google:

html image tag | SVG elements

link to svg reference sheet

JavaScript

intro

comments in JavaScript:

// this is a comment

write JavaScript code in the html document, using the ‘script’ element:

<script>
  // write javascript code in between the html tags

</script>

better style: have a separate style file “main.js” and link in your html file:

<body> 
  <!-- if your code relies on html elements or other scripts, they need to be implemented or linked to before --> including your script.
   <script src="main.js"></script>
</body>

It is important to note that code is executed sequentially. If your script relies on anything else in your code, your script needs to be linked to last.

you can also include a script from an online source (like D3.js):

<body> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
   <!-- code that depends on D3 being loaded needs to come after D3 is included. -->
</body>

printing to the console

console.log('hello world');

creating a pop-up window

alert('hello world');

creating a variable:

var my_number = 42;

making a function:

function my_function(arguments){
    // do things here... 

}

to execute the function, call it, don’t forget the brackets:

my_function();

interactivity

Interactivity happens in three steps:

Assign an ID to the html element
Get html element(s) you want to interact with
Add an event listener (what triggers the action?) and execute code

assigning id to html element:

<img id="cat" src="cat.jpg">

linking to the html element:

var cat_image = document.getElementById('cat');

adding an event listener and executing a function

cat_image.addEventListener("click", meow);
// the function needs to be written, too

function meow() {
        alert("Meow!");
    };

alternative way for functions that are only executed in this context and don’t need to be available in other parts of the code (anonymous functions)

cat_image.addEventListener("click", function() {
        alert("Meow!");
    };

most common data types:

strings:

var my_string = "hello world";
var also_a_string = 'hello world';
// javascript doesn't care about which quotes you use, as long as they are consistent

numbers:

var my_number = 42;

adding strings to numbers returns a string:

var adding_things_1 = "hello world" + 42;
// returns: "hello world42"

var adding_things_2 = "41" + 42;
// returns: "4142"

var adding_things_3 = 41 + 42;
// returns: 83

arrays:

// initialise 

var my_array = [1, 2, 3];

// access

my_array[0]   // returns: 1

my_array[2]   // returns: 3


// append an array

my_array.push(4); // my_array = [1,2,3,4]

objects:

// initialise

var my_dog = {
    name: "fido",
    weight: "100",
    previous_weights: [80, 90, 95, 100, 110],
    attribute: "value"
    }
// access

my_dog.name // returns: "fido"

// add new attributes after creation

my_dog.happiness = 42;

You can make an array of objects and objects can contain arrays… or arrays of objects with arrays of objects.

copying, maps, and filters:

copy an array:

var old_array   = [1,2,3];
var new_array = old_array.map(function(old_array_element){
    return old_array_element;
});

map array onto a new array (adding 10 to every value):

var old_array   = [1,2,3];
var new_array = old_array.map(function(old_array_element){
    return old_array_element + 10;
});

filter an array:

var filtered_array = old_array.filter(function(old_array_element){
   return old_array_element > 1;
}); 
// filtered_array =  [2, 3]

Terms you can google:

list of event listeners

functions to be used with arrays

javascript objects

D3

include the D3 script in html file:

<body> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
   // code that depends on D3 being loaded needs to come after D3 is included.
</body>

adding an html element to the page:

var new_svg_element = present_div_element.append("svg");
var new_circle = new_svg_element.append("circle");

will result in:

<div> 
   <svg>
      <circle>
      </circle>
   </svg>
</div>

changing attributes of elements:

c1.attr("r", 40);
c1.attr("cx", 40)
c1.attr("cy", 40);
c1.attr("stroke", "black");
c1.attr("fill", "green");

setting up a scale and axes and appending it to the page:

var xScale = d3.scale.linear() 
   // setting up a linear scale

   .domain([10, 85]) 
   // data is between 10 and 85

   .range([0, scale_width]); 
   // data needs to be mapped to an element on the page with the width 'scale_width'


var sAxis_generator = d3.svg.axis() 
   // setting up the axis as an svg element

   .scale(xScale) 
   // using our predefined scale

   .orient("bottom"); 
   // orienting the ticks at the bottom


html_element.append("g") 
   // append a group to an already existing html element

    .call(xAxis_generator) 
   // create the axis by calling the generator function

Magical D3 functions:

To link/bind our data to our graphical objects we use the ‘.data()’ function from D3
To handle new data in our data set we use the ‘.enter()’ function to add graphical objects
To handle deleted data from our data set we use the ‘.exit()’ function to remove graphics objects
To handle changes in the values in our data we use the ‘.transition()’ function to update graphical objects

example code for data binding:

var magical_d3_thing = data_canvas.selectAll(".dot")  
// keeps an eye on everything that has or will have the class 'dot' 

   .data(data_that_we_want_to_show, function(data_element){return data_element.unique_id});

example code for enter():

magical_d3_thing.enter()
   .append("circle") 
   // add one circle per new data element

   .attr("class","dot") 
   // assign it the class we are keeping an eye on

   .style("fill", function(data_element) { return colorScale(data_element.region); }) 
   // give it all attributes that don't change dynamically (everything else will be assigned in .transition())

example code for exit():

magical_d3_thing.exit()
   .remove(); 
   // remove the circle corresponding to the data we choose to not display

example code for transition():

magical_d3_thing.transition()
   .ease("linear") 
   // transition between points in a linear way

   .duration(200) 
   // each transition takes 200 ms

   
   // then change attributes according to the data

   .attr("cx", function(data_element) { return xScale(data_element.income[year_idx]); }) 
   .attr("cy", function(data_element) { return yScale(data_element.lifeExpectancy[year_idx]); })
   .attr("r", function(data_element) { return rScale(data_element.population[year_idx]); });