Canvas

• Used for drawing graphics
• Pixel-based (bitmap of rgba image data)
• Procedural
• Immediate Mode

JavaScript Core Skills

• Number, String, Boolean
• Array [❤️,❤️,❤️]
• Object
• Function
• map, filter, forEach

A Blank Canvas

We need a canvas element to draw on:

<canvas id='painting' width=960 height=500></canvas>

And a canvas context to render to:

<script type='text/javascript'>
  var canvas = document.getElementById('painting')
  var context = canvas.getContext('2d')
  // make art with pixels here
</script>

Filling Rects

<script type='text/javascript'>
  var canvas = document.getElementById('painting')
  var context = canvas.getContext('2d')
  context.fillStyle = "mediumseagreen"
  context.fillRect(500,20,200,600)   // x, y, width, height
  context.fillStyle = "darkorchid"
  context.fillRect(200,200,600,60)
  context.fillStyle = "deepskyblue"
  context.fillRect(400,180,60,300)
</script>

Filling Circles

context.fillStyle = "crimson"
context.beginPath()
context.arc(800,250,450,0,2*Math.PI)
context.fill()
context.fillStyle = "steelblue"
context.beginPath()
context.arc(50,250,50,0,2*Math.PI)
context.fill()

Creating words

function circle(x,y,radius,color) {
  context.fillStyle = color
  context.beginPath()
  context.arc(x,y,radius,0,2*Math.PI)
  context.fill()
}

Filling Circles

circle(800,250,450,"crimson")
circle(800,250,450,"steelblue")

Science Satellites

d3.timer(function(elapsed) {
  // run time at 151x speed
  var time = new Date(now.getTime() + 150*elapsed)
  data.forEach(function(d) {
    plotSatellite(d, time)
  })
})
function plotSatellite(d, time) {
  var position = satellite.propagate(sat, time).position
  var groundPosition = satellite.geodetic(position, time)
  drawSat(sat, groundPosition)
}

Exoplanets Parallel Coordinates

Progressive Rendering

Once you put something down, it doesn't cost anything to keep it around.

There is no memory cost for rendering to canvas.

Render chunks of data incrementally to keep interactions snappy.

Particle Trails

Clearing the canvas by filling a transparent rect can be used to create a whimsical trail effect

d3.timer(function() {
  context.fillStyle = 'rgba(255,255,255,0.3)';
  context.fillRect(0, 0, canvas.width, canvas.height);
  // redraw all the things!
})

Source: Developer Roadmap

SVG Challenges to Learning

• Inconsistences between SVG/HTML
• Confusion between attributes, styles and CSS
• Path strings have their own little language
• Managing a DOM hierarchy
• D3 General Update pattern involves complex method chaining
  • Type of returned object shifts during pattern
  • .selectAll() → .data() → enter() → append() → merge()
  • Selections saved to variables may be stale
• Slow with large number of elements (1000+)

... but there are a ton of tutorials and examples!

If we have a setback or a problem, or if we behave in a way that we determine is inappropriate or immoral, we may feel stupid, embarrassed, or unlovable.

In these cases self-awareness may become burdensome. And even if nothing particularly bad is happening at the moment, self-awareness may still feel unpleasant because we have fears about what might happen to us or about mistakes that we might make in the future.

//open.lib.umn.edu/intropsyc/chapter/5-3-altering-consciousness-without-drugs/

Canvas Challenges

• Drawn objects are not retained
• Interactions with visual marks don't come for free
• Canvas usually needs to be entirely re-rendered, even for minor changes
• Lack of beginner examples and tutorials with D3
• No accessibility fallback for visually impaired users
• Looks fuzzy by default on high-density displays

... but it's an easy-to-use API that's all JavaScript!

CDC WONDER

Choropleths

var path = d3.geoPath()
    .projection(d3.geoAlbersUsa())
    .context(context);
context.strokeStyle = "#fff";
context.lineWidth = 0.3;
countGeojson.forEach(function(d) {
    context.fillStyle = color(d["Crude Rate"]);
    context.beginPath();
    path(d);
    context.fill();
    context.stroke();
});

Retina Support

var devicePixelRatio = window.devicePixelRatio || 1
var canvas = d3.select("body").append("canvas")
    .attr("width", width * devicePixelRatio)
    .attr("height", height * devicePixelRatio)
    .style("width", width + "px")
    .style("height", height + "px").node()
var context = canvas.getContext("2d")
context.scale(devicePixelRatio, devicePixelRatio)

Hidden Canvas Lookups

Using getImageData to lookup data using rgb values off a second canvas.
See Yannick's blog post

Quadtree

• Subdivides data in two spatial dimensions
• Commonly used to find closest point
• Can create the same interaction surface as Voronoi

d3.forceSimulation

Get the closest graph node to a position (such as the cursor):

simulation.find(d3.event.x, d3.event.y)

d3.path

Makes available the following canvas methods and can generate SVG path strings.

• moveTo
• lineTo
• closePath
• quadraticCurveTo
• BezierCurveTo
• arcTo
• arc
• rect
• toString

Shapes

With V4, these are built on d3.path. So they support both Canvas and SVG.

• Arcs
• Pies
• Lines
• Areas
• Curves
• Symbols
• Stacks