slides.js

// Generated by CoffeeScript 2.5.1
(function() {
  var empty_svg, init_svg, rect1, rect3, title;

  empty_svg = function() {
    return d3.select('div.output').append('svg');
  };

  rect1 = function() {
    var svg;
    svg = d3.select('div.output').append('svg');
    return svg.append("rect").attr("x", 150).attr("y", 100).attr("width", 60).attr("height", 300);
  };

  rect3 = function() {
    var svg;
    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);
    return 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 = function() {
    var svg;
    svg = d3.select("div.output").append("svg");
    return svg.selectAll("rect").data([127, 61, 256]).enter().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");
  };

  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)`);

}).call(this);

//# sourceMappingURL=slides.js.map