DuckPlot

Appearance

Specialized charts ​

There are a handful of charts that are unique to DuckPlot (or a bit tricky to specify, so it's worth describing them).

Partial charts ​

If a chart is only partially specified (e.g., missing an x or y column), DuckPlot will render a partial chart, which is to say the specified axes and legend without any marks.

js
duckPlot.table("stocks").x("Date").color("Symbol").mark("barY");

Percentage charts ​

DuckPlot handles percentage computations at the database level. To create a stacked chart by percentage, set .config({ percent: true }).

js
// Pecentage stacked bar chart
duckPlot
  .table("stocks_wide")
  .x("Date")
  .y(["GOOG", "AMZN", "IBM", "AAPL"])
  .config({ percent: true })
  .mark("barY");
js
// Pecentage stacked area chart
duckPlot
  .table("stocks_wide")
  .x("Date")
  .y(["GOOG", "AMZN", "IBM", "AAPL"])
  .config({ percent: true })
  .mark("areaY");

Grouped bar charts ​

Based on this example, a grouped bar chart leverages faceting in the horizontal (fx) direction. There are a few ways you can create a grouped bar chart, either by specifying multiple y columns, a color column, or both!

js
// Specify multiple y columns and an fx column
duckPlot
  .query(
    "select * from stocks_wide where year(Date) = 2017 AND month(Date) = 1"
  )
  .table("stocks_wide")
  .fx("Date")
  .y(["AAPL", "GOOG"])
  .mark("barY");
js
// Specify a y column, a color column, and an fx column
duckPlot
  .query("select * from stocks where year(Date) = 2017 AND month(Date) = 1")
  .table("stocks")
  .fx("Date")
  .y("Open")
  .x("Symbol") // make sure to specify the x column
  .color("Symbol")
  .mark("barY");
js
// Specify multiple y columns, a color column, and an fx column
duckPlot
  .query("select * from stocks where year(Date) = 2017 AND month(Date) = 1 ")
  .table("stocks")
  .fx("Date")
  .y(["Low", "High"])
  .color("Symbol")
  .mark("barY");

Multiple marks ​

To create a chart with multiple marks, you can pass an array of marks to .options()

js
duckPlot
  .table("stocks")
  .x("Date")
  .y("High")
  .color("Symbol")
  .mark("line")
  .options({ marks: [Plot.ruleY([1000])] });

This example is obviously contrived, but it demonstrates how you can pass additional marks to the plot.