html 1989 Berners-Lee

mémo de 10 pages (Vague but exciting ...)

CSS

Hakon Wium Lie released the first draft of “Cascading HTML Style Sheets” in October 1994.

SVG

The first public draft of SVG was introduced in 1999 and it didn’t become a working draft until a few months later. A year and a half after first introducing SVG, the W3C issued SVG as a candidate recommendation in August 2000.

Quelques mots sur js

Un petit langage de script bricolé en 10 jours par Brendan Eich en 1995 chez Mozilla pour le Navigator Netscape. Heureusement que l'Université lui avait donné des cours de LISP...

Les fonctions sont des objets de première classe. Une variable est à la fois un objet et une fonction.

JSON (2000)

Devenu un standard d'échanges/ stockage de données

  {"firstName": "John",
      "lastName": "Smith",
      "isAlive": true,
      "age": 25,
      "address": {
        "streetAddress": "21 2nd Street",
        "city": "New York",
        "state": "NY",
        "postalCode": "10021-3100"
      },
      "phoneNumbers": [
        {
          "type": "home",
          "number": "212 555-1234"
        },
        {
          "type": "office",
          "number": "646 555-4567"
        },
        {
          "type": "mobile",
          "number": "123 456-7890"
        }
      ],
      "children": [],
      "spouse": null
}

Par exemple

d3.select('.text')
  .style('background','red');

d3.select('svg')
  .attr('height', '100')
  .attr('width', '200');

d3.selectAll('#diagram')
  .data(data)
  .enter()
    .append('circle');

select

var circle1 = d3.select('circle');

d3.select('circle')
  .style('fill', 'red')
  .attr('r', 30);

selectAll

var circles = 
  d3.selectAll('circle')
    .style('fill', 'blue')
    .attr('r', 30);

data

circles
  .data([32,57,112]);

circles
  .attr('r', d => Math.sqrt(d));

enter

circles =
  d3.select('svg')
    .selectAll('circle')
    .data([32,57,112,293]);

circles.enter() //= 1 cercle
  .append('circle')
  .attr("cy", 60)
  .attr("cx", 160)
  .attr('r', 20)
  .style('fill', 'red');

exit

circles =
  d3.select('svg')
    .selectAll('circle')
    .data([32,57]);

circles.exit() // = 1 cercle
  .remove();

All together

var data = [32,57,112,293];

var circles = 
  d3.select('svg')
    .selectAll('circle')
      .data(data);

circles
  .enter()
    .append('circle')
    .attr("cy", 60)
    .attr("cx", (d, i) => i * 100 + 30)
    .attr("r", d => Math.sqrt(d));

circles
  .attr("cy", 60)
  .attr("cx", (d, i) => i * 100 + 30)
  .attr("r", d => Math.sqrt(d));

circles
  .exit()
  .remove();