Weekend Project Edition — Plot

Companion site to: https://dailyfinds.hrbrmstr.dev/p/drop-250-2023-04-28-weekend-project

Observable Notebook version

ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) + 
  geom_text()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.text(
      mtcars,
      { x: "wt", y: "mpg", text: "vehicle" }
    )
  ]
})
ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) + 
  geom_text(size = 10)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.text(
      mtcars,
      { x: "wt", y: "mpg", text: "vehicle", fontSize: "14pt" }
    )
  ]
})
ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) + 
  geom_point() + 
  geom_text(hjust = 0, nudge_x = 0.05)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.dot(
      mtcars,
      { x: "wt", y: "mpg", fill: "#3a579a" }
    ),
    Plot.text(
      mtcars,
      { x: d => d.wt + 0.05, y: "mpg", text: "vehicle", textAnchor: "start" }
    )
  ]
})
ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) + 
  geom_point() + 
  geom_text(vjust = 0, nudge_y = 0.5)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.dot(
      mtcars,
      { x: "wt", y: "mpg", fill: "#3a579a" }
    ),
    Plot.text(
      mtcars,
      { x: "wt", y: d => d.mpg + 0.75, text: "vehicle", textAnchor: "middle" }
    )
  ]
})
ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) +
  geom_point() + 
  geom_text(angle = 45)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.dot(
      mtcars,
      { x: "wt", y: "mpg", fill: "#3a579a" }
    ),
    Plot.text(
      mtcars,
      { x: "wt", y: "mpg", text: "vehicle", rotate: -45}
    )
  ]
})
ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) + 
  geom_text(aes(colour = factor(cyl)))
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  color: {
    type: "ordinal",
    range: [ "#88a2bc", "#d99477", "#586c5c"],
    legend: true
  },
  marks: [
    Plot.text(
      mtcars.map(d => { d.cyl = `${d.cyl}`; return d }),
      { x: "wt", y: "mpg", text: "vehicle", fill: "cyl" }
    )
  ]
})
ggplot(mtcars, aes(wt, mpg, label = rownames(mtcars))) + 
  geom_text(aes(size = wt))
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.text(
      mtcars,
      { x: "wt", y: "mpg", text: "vehicle", fontSize: d => d.wt * 2 * Math.sqrt(d.wt) }
    )
  ]
})
ggplot(mpg, aes(class)) + 
  geom_bar()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  y: {
    grid: true,
  }, 
  marks: [
    Plot.auto(mpg, { x: "class", y: { reduce: "count" }, mark: "bar" })
  ]
})
ggplot(mpg) + 
  geom_bar(aes(y = class))
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  y: {
    grid: true,
  },
  marks: [
    Plot.auto(mpg, { y: "class", x: { reduce: "count" }, mark: "bar" })
  ]
})
ggplot(mpg, aes(class)) + 
  geom_bar(fill = drv)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  color: {
    legend: true
  },
  y: {
    grid: true,
  },
  marks: [
    Plot.auto(mpg, { x: "class", y: { reduce: "count" }, color: "drv", mark: "bar" })
  ]
})
ggplot(diamonds, aes(carat, price)) + 
  geom_point(alpha=1/10)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marginLeft: 100,
  marks: [
    Plot.dot(
      diamonds,
      { x: "carat", y: "price", opacity: 1 / 10 }
    )
  ]
})
ggplot(faithfuld, aes(waiting, eruptions)) + 
  geom_raster(aes(fill = density))
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  marks: [
    Plot.raster(
      faithfuld,
      { x: "waiting", y: "eruptions", fill: "density", interpolate: "nearest" }
    )
  ]
})
ggplot(mpg, aes(class, hwy)) + 
  geom_boxplot()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  marks: [
    Plot.boxY(
      mpg,
      { x: "class", y: "hwy" }
    )
  ]
})
ggplot(mpg, aes(displ, hwy)) + 
  geom_point() + 
  geom_smooth()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  marks: [
    Plot.dot(
      mpg,
      { x: "displ", y: "hwy" }
    ),
    Plot.linearRegressionY(
      mpg, {
      x: "displ",
      y: "hwy",
      stroke: "red",
    }),
  ],
})
ggplot(diamonds, aes(carat, price)) + 
  geom_hex()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  marginLeft: 50,
  marginBottom: 50,
  marks: [
    Plot.hexgrid(),
    Plot.dot(
      diamonds,
      Plot.hexbin(
        { r: "count" },
        { x: "carat", y: "price", fill: "currentColor" }
      )
    ),
  ],
})
ggplot(faithful, aes(x = eruptions, y = waiting)) + 
  geom_point()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  marginLeft: 50,
  marginBottom: 50,
  marks: [
    Plot.density(
      faithful,
      { x: "eruptions", y: "waiting"  }
    ),
    Plot.dot(
      faithful,
      { x: "eruptions", y: "waiting" }
    ),
  ],
})
ggplot(economics, aes(date, unemploy)) + 
  geom_line()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  marks: [
    Plot.line(
      economics,
      { x: "date", y: "unemploy" }
    )
  ],
})
ggplot(economics_long, aes(date, value01, colour = variable)) + 
  geom_line()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  color: {
    legend: true
  },
  marks: [
    Plot.line(
      economicsLong,
      { x: "date", y: "value01", stroke: "variable" }
    )
  ],
})
ggplot(economics, aes(unemploy/pop, psavert)) + 
  geom_path()
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  color: {
    legend: true
  },
  marks: [
    Plot.line(economics, {
      x: (d) => d.unemploy / d.pop,
      y: "psavert",
      z: null,
      stroke: (d) => d.date
    })
  ]
})
ggplot(mtcars, aes(wt, mpg)) +
  geom_point() +
  geom_segment(
    data = data.frame(x1 = 2.62, x2 = 3.57, y1 = 21.0, y2 = 15.0),
    aes(x = x1, y = y1, xend = x2, yend = y2, colour = "segment"
  )
)
Observable Plot code 
Plot.plot({
  style: defaultStyle,
  grid: true,
  color: {
    legend: true
  },
  marks: [
    Plot.dot(mtcars, { x: "wt", y: "mpg" }),
    Plot.link([ { x1: 2.62, x2: 3.57, y1: 21.0, y2: 15.0 } ], {
      x1: "x1",
      x2: "x2",
      y1: "y1",
      y2: "y2"
    })
  ]
})