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).

Percentage charts

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

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

// 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!

// 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");

// 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");

// 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()

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

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

Hierarchical visualizations (limited support)

There is currently limited support for both treemaps and circle pack charts in DuckPlot. You can specify a single column for the size (y), color (color), and text label (text). Aggregation is supported, in that each group will be aggregated (e.g., to each color or text category). The proportion represented by each group is displayed in the tooltip. Note, legend filtering works as expected, and the displayed proportion will update accordingly.

Implementation is based on this notebook.

// Aggregate by color
// Treemap of closing price aggregated by symbol
duckPlot.table("stocks").y("Close").color("Symbol").mark("treemap");

// No aggregation
// Circle pack of the last 30 days closing price
duckPlot
  .query(`select * from stocks ORDER BY Date DESC LIMIT 30`)
  .table("stocks")
  .y("Close")
  .mark("treemap");

// Aggregate by color and text
// CirclePack of closing price aggregated by symbol and month
duckPlot
  .query(
    `select month(Date) as Month, Symbol, sum(Close) as Close
          from stocks
          where year(Date) = 2017
          group by month(Date), Symbol`
  )
  .table("stocks")
  .y("Close")
  .color("Symbol")
  .mark("circlePack")
  .text("Month");

// Continuous legend
// Circle pack of the last 100 highest closing prices
duckPlot
  .query(`select * from stocks ORDER BY Close DESC LIMIT 100`)
  .table("stocks")
  .y("Close")
  .color("Close")
  .mark("treemap");

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.

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