slides.coffee

empty_svg = ->
  d3.select('div.output')
    .append('svg')

rect1 = ->
  svg = d3.select('div.output')
    .append('svg')

  svg.append("rect")
    .attr("x", 150)
    .attr("y", 100)
    .attr("width", 60)
    .attr("height", 300)


rect3 = ->
  svg = d3.select('div.output')
    .append('svg')

  svg.append("rect")
    .attr("x", 200)
    .attr("y", 300)
    .attr("width", 40)
    .attr("height", 50)

  svg.append("rect")
    .attr("x", 100)
    .attr("y", 20)
    .attr("width", 30)
    .attr("height", 50)

  svg.append("rect")
    .attr("x", 10)
    .attr("y", 200)
    .attr("width", 25)
    .attr("height", 90)

# ----------------------------------------------------

slide.title "First, some JavaScript"

slide.code "Functions are objects", null, """
// In JS functions are first class citizens.
// This is a very powerful concept!
function sq1(x) {
  return x * x
}

var sq2 = function(x) {
  return x * x
}

console.log("sq1(4) ==", sq1(4)) // == 16
console.log("sq2(4) ==", sq2(4)) // == 16

sq1.foo = 8
sq2.bar = 3

console.log("Trippy:", sq1(sq1.foo + sq2.bar))
"""

slide.code "Closures bake in state", null, """
// Functions can be used to 'bake in' state

var formatter = function(prefix, fixed) {
  if (prefix == null) { prefix = '' }
  if (fixed == null) { fixed = 2 }
  return function(number) {
    return prefix + number.toFixed(fixed)
  }
}

var currency = formatter('$', 2)
var roughly = formatter('~', 1)
var roughlyDefault = formatter('~') // no 2nd param!
var defaultFormat = formatter() // no params!

console.log("currency(31/3) ==", currency(31/3))
console.log("roughly(31/3) ==", roughly(31/3))
console.log("roughlyDefault(31/3) ==", roughlyDefault(31/3))
console.log("defaultFormat(31/3) ==", defaultFormat(31/3))
"""

slide.code "Configurable functions", null, """
// D3 has many helper methods
// d3.scaleLinear() returns a function that
// will map the given domain to the given
// range linearly.

// D3 v4 change: d3.scaleLinear was 
// d3.scale.linear in v3
var w = 640, h = 320

// x is a function!
var x = d3.scaleLinear()
  .domain([-1, 1])
  .range([0, w])

// y is also a function!
var y = d3.scaleLinear()
  .domain([0, 1])
  .range([0, h])

console.log("x(0) ==", x(0)) // == w/2
console.log("y(3) ==", y(3)) // == 3*h
"""

slide.title "Core D3"

# -----------------------------------------------
slide.code_title title = ".select()"

slide.code title, rect1, """
var svg = d3.select("div.output svg")


var myRect = svg.select("rect")
myRect.attr("width", 100)
myRect.attr("height", 100)
myRect.style("fill", "steelblue")
"""

slide.code title, rect1, """
var svg = d3.select("div.output svg")

// Chain style
svg.select("rect")
  .attr("width", 100)
  .attr("height", 100)
  .style("fill", "steelblue")
"""

# -----------------------------------------------
slide.code_title title = ".selectAll()"

slide.code title, rect3, """
var svg = d3.select("div.output svg")

svg.select("rect")
  .attr("width", 100)
  .attr("height", 100)
  .style("fill", "steelblue")
"""

slide.code title, rect3, """
var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .attr("width", 100)
  .attr("height", 100)
  .style("fill", "steelblue")
"""

slide.code title, rect3, """
// Each D3 attr/style function passes two params:
//   1. d: a data item
//   2. i: the index of the data item

var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .attr("x", 0)
  .attr("y", function(d,i) { return i*90+50 })
  .attr("width", function(d,i) {
      return i*150+100;
    })
  .attr("height", 20)
  .style("fill", "steelblue")
"""

slide.code "Arrow Functions", rect3, """
// Two ways to write anonymous functions
//   1. function(d,i) { return i*90+50; }
//   2. (d,i) => i*90+50
// Arrow functions are more succinct

var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", (d,i) => i*150+100)
  .attr("height", 20)
  .style("fill", "steelblue")
"""


# -----------------------------------------------
slide.code_title title = ".data()"

slide.code title, rect3, """
var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .data([127, 61, 256])
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", (d,i) => d) // or d => d
  .attr("height", 20)
  .style("fill", "steelblue")
"""

# -----------------------------------------------
slide.code_title title = ".enter()"

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61, 256, 71])

selection
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", d => d)
  .attr("height", 20)
  .style("fill", "steelblue")
"""

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61, 256, 71])

selection
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", d => d)
  .attr("height", 20)
  .style("fill", "steelblue")

selection.enter().append("rect")
  .attr("x", 10) // let's just put it somewhere
  .attr("y", 10)
  .attr("width", 30)
  .attr("height", 30)
  .style("fill", "green")
"""

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61, 256, 71])

// update existing items
selection
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", d => d)
  .attr("height", 20)
  .style("fill", "steelblue")

// add (enter) new
selection.enter().append("rect")
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", d => d)
  .attr("height", 20)
  .style("fill", "steelblue")
"""

title = ".merge()"

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61, 256, 71])

// Shorter
// Merge merges the enter selection
// with the update selection
selection.enter().append("rect")
  .merge(selection)
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
"""

title = ".join()"

slide.code title, rect3, """
// Join does enter/append automatically

var svg = d3.select("div.output svg");

svg.selectAll("rect")
    .data([127, 61, 256, 71]).join("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue");
"""

title = ".enter() // a common pattern"
slide.code title, empty_svg, """
var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .data([127, 61, 256])
  .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
"""

title = ".enter() // using join"
slide.code title, empty_svg, """
var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .data([127, 61, 256])
  .join("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
"""


# -----------------------------------------------
slide.code_title title = ".exit()"

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61])

selection
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", d => d)
  .attr("height", 20)
  .style("fill", "steelblue")
"""

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61])

selection
  .attr("x", 0)
  .attr("y", (d,i) => i*90+50)
  .attr("width", d => d)
  .attr("height", 20)
  .style("fill", "steelblue")

selection.exit()
  .remove()
"""

title = ".join()"

slide.code title, rect3, """
// .join removes exit part automatically
var svg = d3.select("div.output svg");

svg.selectAll("rect")
    .data([127, 61]).join("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue");
"""

# -----------------------------------------------
slide.code_title title = ".transition()"

slide.code title, rect3, """
var svg = d3.select("div.output svg")

svg.selectAll("rect")
  .data([127, 61, 256])
  .transition()
  .duration(3000) // 3 seconds
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
"""

slide.code title, rect3, """
var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([127, 61, 256, 71])

selection.enter().append("rect")
    .attr("x", 200)
    .attr("y", 200)
    .attr("width", 10)
    .attr("height", 10)
    .style("fill", "red")
  .merge(selection)
    .transition()
    .duration(3000)
      .attr("x", 0)
      .attr("y", (d,i) => i*90+50)
      .attr("width", d => d)
      .attr("height", 20)
      .style("fill", "steelblue")
      .transition()
      // delays relative to previous transition
      .duration(3000)
        .style("fill", "green")
        .attr("width", d => d*1.5)

selection.exit()
  .attr("opacity", 1)
  .transition()
  .duration(3000)
    .attr("opacity", 0)
    .remove()
"""

slide.code title, rect3, """
  var svg = d3.select("div.output svg");
  const t = svg.transition()
        .duration(3000);

  function update_bars(s) {
      s.transition(t)
      .attr("x", 0)
      .attr("y", (d,i) => i*90+50)
      .attr("width", d => d)
      .attr("height", 20)
      .style("fill", "steelblue")
      .transition()
      .duration(3000)
        .style("fill", "green")
        .attr("width", d => d*1.5)
  }

  var selection = svg.selectAll("rect")
    .data([127, 61]) // add more [256, 71]
    .join(enter => enter.append("rect")
           .attr("x", 200)
           .attr("y", 200)
           .attr("width", 10)
           .attr("height", 10)
           .style("fill", "red")
           .call(update_bars),
         update => update.call(update_bars),
         exit => exit.attr("opacity", 1)
           .transition()
           .duration(3000)
           .attr("opacity", 0)
           .remove());
"""

# -----------------------------------------------
slide.code_title title = ".data(..., join)"

init_svg = ->
  svg = d3.select("div.output").append("svg")

  svg.selectAll("rect")
    .data([127, 61, 256])
    .enter().append("rect")
      .attr("x", 0)
      .attr("y", (d,i) -> i*90+50)
      .attr("width", (d,i) -> d)
      .attr("height", 20)
      .style("fill", "steelblue")

slide.code title, init_svg, """
var svg = d3.select("div.output svg")

// Let's say we start here:
/*
svg.selectAll("rect")
  .data([127, 61, 256])
  .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
*/

// And then we do this:
var selection = svg.selectAll("rect")
  .data([61, 256, 71]) // <- incomplete?

selection.enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
  .merge(selection)
    .transition()
    .duration(3000)
      .attr("x", 0)
      .attr("y", (d,i) => i*90+50)
      .attr("width", d => d)
      .attr("height", 20)
      .style("fill", "steelblue")

selection.exit()
  .remove()
"""

slide.code title, init_svg, """
// Start the same as before

var svg = d3.select("div.output svg")

var selection = svg.selectAll("rect")
  .data([61, 256, 71], d => d)

selection.enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => (i+1)*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue")
    .style("opacity", 0)
  .merge(selection)
    .transition()
    .duration(3000)
      .attr("y", (d,i) => i*90+50)
      .attr("height", 20)
      .style("opacity", 1)

selection.exit()
  .transition()
  .duration(3000)
    .attr("y", (d,i) => (i-1)*90+50)
    .style("opacity", 0)
    .remove()
"""

# -----------------------------------------------
slide.title title = "Nested Selections"

slide.code title, empty_svg, """
var myData = [
  [15, 20],
  [40, 10],
  [30, 27]
]

var svg = d3.select("div.output svg")

// First selection (within svg)
var selA = svg.selectAll("g")
  .data(myData)
  .join("g")
  .attr("transform", (d, i) => `translate(70,${i*100+50})`)
  // backticks (``) denote template literal
  // normal strings except that text inside ${...}
  // is evaluated (can be js expression)!

// Second selection (within first selection)
var selB = selA.selectAll('circle')
  .data(d => d)
  .join("circle")
  .attr("cx", (d, i) => i*80)
  .attr("r", (d,i) => d)
"""

# -----------------------------------------------
slide.title title = "Scales"

slide.code title, empty_svg, """
// via A. Lex (dataviscourse.net)
var data = [0.3, 0.01, 0.8];

var svg = d3.select("div.output svg")
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => d)
    .attr("height", 20)
    .style("fill", "steelblue");
"""

slide.code title, empty_svg, """
// via A. Lex (dataviscourse.net)
var data = [0.3, 0.01, 0.8];

// the scale function
var s = function (input) {
    return input * 500;
}

var svg = d3.select("div.output svg")
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => s(d))
    .attr("height", 20)
    .style("fill", "steelblue");

"""

slide.code title, empty_svg, """
// via A. Lex (dataviscourse.net)
var data = [0.3, 0.01, 0.8];

// the scale function
var xScale = d3.scaleLinear()
// var xScale = d3.scaleLog() // check domain...
    .domain([0,d3.max(data)])
    .range([0,300]);

var svg = d3.select("div.output svg")
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => xScale(d))
    .attr("height", 20)
    .style("fill", "steelblue");
"""

# -----------------------------------------------
slide.title title = "Axes"

slide.code title, empty_svg, """
var data = [0.3, 0.01, 0.8];

// the scale function
var xScale = d3.scaleLinear()
    .domain([0,d3.max(data)])
    .range([0,300]);

var xAxis = d3.axisBottom(); // axisTop()
xAxis.scale(xScale);

var svg = d3.select("div.output svg")
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => xScale(d))
    .attr("height", 20)
    .style("fill", "steelblue");

svg.append("g").call(xAxis);

"""

slide.code title, empty_svg, """
var data = [0.3, 0.01, 0.8];

// the scale function
var xScale = d3.scaleLinear()
    .domain([0,d3.max(data)])
    .range([0,300]);

var xAxis = d3.axisBottom();
xAxis.scale(xScale);

var svg = d3.select("div.output svg")
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", 0)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => xScale(d))
    .attr("height", 20)
    .style("fill", "steelblue");

svg.append("g")
    .attr("transform", "translate(0, 300)")
    .call(xAxis);
"""

slide.code title, empty_svg, """
var data = [0.3, 0.01, 0.8];

// the scale function
var xScale = d3.scaleLinear()
    .domain([0,d3.max(data)])
    .range([0,300]);

var xAxis = d3.axisBottom();
xAxis.scale(xScale);

var svg = d3.select("div.output svg")
svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", 10)
    .attr("y", (d,i) => i*90+50)
    .attr("width", d => xScale(d))
    .attr("height", 20)
    .style("fill", "steelblue");

svg.append("g")
    .attr("transform", "translate(10, 300)")
    .call(xAxis);

"""

slide.code title, empty_svg, """
var data = [0.3, 0.01, 0.8];

// the scale function
var xScale = d3.scaleLinear()
  .domain([0,d3.max(data)])
  .range([0,300]);

var yScale = d3.scaleBand()
  .domain([...data.keys()])
  .range([0,300])
  .padding(0.7)

var xAxis = d3.axisBottom();
xAxis.scale(xScale);

var svg = d3.select("div.output svg")
svg.selectAll("rect")
  .data(data)
  .enter().append("rect")
  .attr("x", 10)
  .attr("y", (d,i) => yScale(i))
  .attr("width", d => xScale(d))
  .attr("height", yScale.bandwidth())
  .style("fill", "steelblue");

svg.append("g")
  .attr("transform", "translate(10, 300)")
  .call(xAxis);
"""

# -----------------------------------------------
slide.title "Useful Examples"

slide.code "Shuffle", empty_svg, """
var cards = [
  "J\\u2665", "J\\u2666", "J\\u2663", "J\\u2660",
  "K\\u2665", "K\\u2666", "K\\u2663", "K\\u2660",
  "Q\\u2665", "Q\\u2666", "Q\\u2663", "Q\\u2660",
  "A\\u2665", "A\\u2666", "A\\u2663", "A\\u2660"]

cards.sort(function() {return Math.random()-.5})

var svg = d3.select("div.output svg")

var selection = svg.selectAll("text")
  .data(cards, String)

selection
  .transition()
  .duration(1000)
    .attr("y", (d,i) => i*35+40)

selection.enter().append("text")
  .attr("x", 30)
  .attr("y", (d,i) => i*35+40)
  .style("fill", function(d) {
      return "\\u2665\\u2666".indexOf(d[1]) < 0 ?
        "black" : "red";
    })
  .style("font", "20px monospace")
  .text(String)
"""

slide.code "Shuffle (v2)", empty_svg, """
var cards = [
  "J\\u2665", "J\\u2666", "J\\u2663", "J\\u2660",
  "K\\u2665", "K\\u2666", "K\\u2663", "K\\u2660",
  "Q\\u2665", "Q\\u2666", "Q\\u2663", "Q\\u2660",
  "A\\u2665", "A\\u2666", "A\\u2663", "A\\u2660"]

cards.sort(function() {return Math.random()-.5})

var svg = d3.select("div.output svg")

var selection = svg.selectAll("text")
  .data(cards, String)

selection
  .transition().duration(500)
  .attr("x", (d,i) => (i%8)*30+30)
  .transition().duration(500)
  .attr("y", (d,i) => i*35+40)
  .transition().duration(500)
  .attr("x", 30)

selection.enter().append("text")
  .attr("x", 30)
  .attr("y", (d,i) => i*35+40)
  .style("fill", function(d) {
      return "\\u2665\\u2666".indexOf(d[1]) < 0 ?
        "black" : "red";
    })
  .style("font", "20px monospace")
  .text(String)
"""

# -----------------------------------------------
slide.code "Drawing lines", empty_svg, """
var svg = d3.select("div.output svg")

svg.append("path")
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 2)
  .attr("d", "M 10 10 L 200 200 "+
             "L 200 400 L 300 100 L 400 150")
"""

slide.code "Drawing lines", empty_svg, """
var points = [
  { x: 10,  y: 10  },
  { x: 200, y: 200 },
  { x: 200, y: 400 },
  { x: 300, y: 100 },
  { x: 400, y: 150 }
]

var lineFn = d3.line()
  .x(d => d.x)
  .y(d => d.y)
  //.curve(d3.curveCardinal)

var svg = d3.select("div.output svg")

svg.append("path")
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 2)
  .attr("d", lineFn(points))
"""

slide.code "Drawing lines", empty_svg, """
var pointsSin = d3.range(21).map(function(i) {
  return {x: i, y: Math.sin(i/3) }
})
var pointsCos = d3.range(21).map(function(i) {
  return {x: i, y: Math.cos(i/3) }
})


var w = 480
var h = 300
var x = d3.scaleLinear()
          .domain([0, 20]).range([0, w])
var y = d3.scaleLinear()
          .domain([-1, 1]).range([h, 0])

var lineFn = d3.line()
  .x(d => x(d.x))
  .y(d => y(d.y))

var svg = d3.select("div.output svg")

svg.selectAll("path")
  .data([pointsSin, pointsCos])
  .enter().append("path")
  .style("fill", "none")
  .style("stroke", "black")
  .style("stroke-width", 2)
  .attr("d", lineFn)
"""