Graphics

Time for a change

Evolution

Application in the browser are starting to become

more structured
more declarative

Evolution

This is what we used to do

$(function() {
  var list = $('#playground').append('ul');

  cities.forEach(function(city) {
    list.append('li')
      .data('city', city)
      .append('a')
      .text(city)
      .click(showIt);
  });
});

Evolution

...and also

function showIt(event) {
  var city = $(event.target).data('city');
  alert('You clicked on ' + city);
  event.preventDefault();
}

Evolution

This can become more declarative

<div id="playground">
  <ul>
    <li ng-repeat="city in cities">
      <a ng-click="print(city)">{{ city }}</a>
    </li>
  </ul>
</div>

$scope.print = function(city) {
  alert('You clicked on ' + city);
};

This has not happened for graphics

Visualization

Today we can do a lot in the browser

Visualization

Today we can do a lot in the browser

Visualization

Today we can do a lot in the browser

What has allowed this?

HTML 5!!!

We can embed SVG inside HTML

SVG tags

<svg width="800" height="500">

SVG tags

<svg width="800" height="500">
  <rect width="200" height="200" />
</svg>

SVG tags

<svg width="800" height="500">
  <rect width="200" height="200" />
  <circle cx="250" cy="250" r="40" />
</svg>

SVG tags

<svg width="800" height="500">
  <g>
    <rect width="200" height="200" />
    <circle cx="250" cy="250" r="40" />
  </g>
</svg>

SVG tags

<svg width="800" height="500">
  <g>
    <rect width="200" height="200" />
    <circle cx="250" cy="250" r="40" />
  </g>
  <line x1="300" y1="300" x2="200" y2="600" />
</svg>

SVG tags

<svg width="800" height="500">
  <g>
    <rect width="200" height="200" />
    <circle cx="250" cy="250" r="40" />
  </g>
  <line x1="300" y1="300" x2="200" y2="600" />
  <text x="0" y="15">But the most general tag is...</text>
</svg>

SVG tags

<svg width="800" height="500">
  <g>
    <rect width="200" height="200" />
    <circle cx="250" cy="250" r="40" />
  </g>
  <line x1="300" y1="300" x2="200" y2="600" />
<path d="M 110 115 A 140 140 0 0 1 57 297 L 24 255 A 60 60 0 0 0 48 163 Z"/>
</svg>

What?!?!?

SVG tags

Transforms

First, create a simple graphics, then adjust it

<svg width="800" height="500">
  <g transform="rotate(90)">
    <rect width="200" height="200" />
    <circle cx="50" cy="50" r="40" />
  </g>
  <g transform="scale(1.2) translate(100, 100)">
    <rect width="200" height="200" />
    <circle cx="50" cy="50" r="40" />
  </g>
</svg>

Path operations

What was that nonsense in path?

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

Path operations

What was that nonsense in path?

M x y
L x y
H x
V y
C x1 y1 x2 y2 x y
S x2 y2 x y2
Q x1 y1 x y
T x y
A rx ry xrot large_arc_flag sweep_flag x y
Z

Lowercase letters for relative coordinates

The current state of graphics in the browser

Ad hoc libraries (Highcharts, Flot, ...)
Customizable toolboxes (D3, ?)

Most graphics libraries are not customizable enough in:

Appearance
Animation
Interaction

The D3 approach

D3 works by pairing data and elements

The D3 approach

D3 works by pairing data and DOM elements

We can first select existing DOM elements and attach data to them...

The D3 approach

D3 works by pairing data and DOM elements

We can first select existing DOM elements and attach data to them...

...or select existing data and generate associated DOM

Example 1

d3.select("div.output svg")
  .selectAll("rect") // Three existing rectangles
  .data([127, 61, 256])
  .attr("x", 0)
  .attr("y", function(d,i) { return i*90+50 })
  .attr("width", function(d,i) { return d; }) // Function of the datum
  .attr("height", 20)
  .style("fill", "steelblue")

Example 2

d3.select("div.output svg")
  .selectAll("rect") // No existing rectangles by now
  .data([127, 61, 256])
  .enter() // what's this?
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d,i) { return i*90+50 })
  .attr("width", function(d,i) { return d; })
  .attr("height", 20)
  .style("fill", "steelblue")

Stage metaphor

var selection = d3.select("rect").data([...]);

Stage metaphor

var selection = d3.select("rect").data([...]);

The enter selection matches data not yet bound to elements

var enter = selection.enter();
enter.append("rect") // Now it has elements

Stage metaphor

var selection = d3.select("rect").data([...]);

The enter selection matches data not yet bound to elements

var enter = selection.enter();
enter.append("rect") // Now it has elements

The exit selection matches elements not yet bound to data

var exit = selection.exit();
exit.remove() // No more mismatch

The rest looks pretty much like jQuery

selection
  .transition()
  .duration(3000)
    .attr("x", 0)
    .attr("y", function(d,i) { return i*90+50 })
    .attr("width", function(d,i) { return d; })
    .attr("height", 20)
    .style("fill", "steelblue")
    .transition()
    .duration(3000)
    .delay(3000)
      .style("fill", "green")
      .attr("width", function(d,i) {
          return d*1.5;
        })