Sinking Slides

By James

My content is here!

My content is there (but it’s white now to make things easier to track!)

Now it’s different content entirely:

• Apples
• Bananas
• Oranges

myplot <- ggplot(diamonds) +
  aes(price, carat) +
  geom_point() +
  theme_minimal(base_size = 24) +
  theme(
    text =
      element_text(colour = "white"),
    axis.text = 
      element_text(colour = "white"),
    plot.background =
      element_rect(fill = NA, colour = NA),
    panel.background =
      element_rect(fill = NA, colour = NA),
    panel.grid =
      element_line(colour = alpha("white", 0.25))
  )

Let’s get more sophisticated with some evolving content. First, a ggplot2 graphic.

Here it is on its own…

But now we can add another aesthetic!

(It could use a legend, though…)

mydata = [
  {
    name: "Azlan",
    team: "Banana",
    value: 40
  },
  {
    name: "Vader",
    team: "Apple",
    value: 75
  },
  {
    name: "Mickey",
    team: "Orange",
    value: 15
  },
  {
    name: "Donald",
    team: "Grape",
    value: 20
  },
  {
    name: "Pluto",
    team: "Orange",
    value: 35
  }
]

Okay, that’s not super exciting. Let’s try something with D3.

One option is the revealVizScrollyteling plugin…

… but I’d really like to just let Revealjs’s auto-animate take care of it and not write animations in a super imperative way.

Let’s see if attaching data-id attributes to our D3 elements is enough!

// {
//   const svg =
//     d3.create("svg")
//       .attr("width",  "300px")
//       .attr("height", "500px")
//       .attr("viewBox", [0, 0, 300, 500])
//       .attr("style",
//         "max-width: 100%; height: auto; height: intrinsic;");

//   // X axis
//   var x = d3.scaleBand()  
//     .range([ 0, width ])
//     .domain(data.map(function(d) { return d.Country; }))
//     .padding(0.2);
//   svg.append("g")
//     .attr("transform", "translate(0," + height + ")")
//     .call(d3.axisBottom(x))
//     .selectAll("text")
//       .attr("transform", "translate(-10,0)rotate(-45)")
//       .style("text-anchor", "end");
// }

Plot.plot({
  marks: [
    Plot.barY(mydata,
      {
        x: "team",
        y: "value",
        name: "name"
      })
  ],
  style: {
    color: "white",
    backgroundColor: "transparent"
  }
})

Here’re some bars.