Motion Chart

Using Observable JavaScript in Quarto, I have worked to build an example motion chart of the World Bank Data similar to those in this example.

Setup

mydata = FileAttachment("WorldBankData.csv").csv({ typed: true })

import {Scrubber} from "@mbostock/scrubber"

viewof YEAR = Inputs.range(
  [2000, 2020], 
  {value: 2000, step: 1, label: "Year:"}
)

Motion Chart of Life Expectancy by GDP from World Bank Data

viewof YEAR = Scrubber(d3.range(2000, 2020), {delay: 1000})

Plot.plot({
  grid: true,
  color: {legend: false},
  symbol: {legend: true},
  x: { type: "log" },
  marks: [
    Plot.dot(mydata.filter(mydata=> mydata.year === YEAR), 
      {x: "GDP", 
      y: "life_expectancy", 
      fill: "region", 
      r: "population", 
      channels: {name: "country", year: "year"}, 
      tip: true}),
    Plot.linearRegressionY(mydata.filter(mydata=> mydata.year === YEAR), 
      { x: "GDP", y: "life_expectancy", stroke: "red" })

  ]
})

viewof YEAR2 = Inputs.range(
  [2000, 2020], 
  {value: 2000, step: 1, label: "Year:"}
)

Plot.plot({
  grid: true,
  color: {legend: false},
  symbol: {legend: true},
  x: {domain: [2000, 2020]},
  marks: [
    Plot.dot(mydata.filter(mydata=> mydata.year === YEAR2), 
      {x: "year", 
      y: "life_expectancy", 
      fill: "region", 
      r: "population", 
      channels: {name: "country"}, 
      tip: true})
  ]
})