Chord, Funnel, Pictorial, Venn and Word Cloud Charts

Directed chord diagram

A directed chord diagram shows how much flows between categories and in which direction. A to B and B to A stay two separate ribbons, each wide where it leaves its source and narrowing toward its target, or closing into an arrow head. Use it for parcels between depots, money between accounts, or traffic between services, anywhere the two directions are different numbers and the difference matters. A node’s arc can show what it sends or what it sends and receives, colours follow the source, and the tooltip names the direction and the value.

createChart({
  grid,
  container,
  type: 'chord',
  source: 'from',
  target: 'to',
  y: 'v',
  directed: { style: 'arrow' },
  title: 'Parcels between depots (k)',
});

Options used: type: 'chord', directed

({
  columns: [
    { field: 'from', title: 'From' },
    { field: 'to', title: 'To' },
    { field: 'v', title: 'Parcels (k)', type: 'number' },
  ],
  rows: [
    ['London', 'Leeds', 48], ['Leeds', 'London', 21], ['London', 'Bristol', 36],
    ['Bristol', 'London', 30], ['Leeds', 'Glasgow', 24], ['Glasgow', 'Leeds', 12],
    ['Bristol', 'Glasgow', 9], ['Glasgow', 'London', 27],
  ].map(([from, to, v], i) => ({ id: i, from, to, v })),
})

Funnel pyramid chart

A funnel pyramid cuts ordered stages out of one triangle, so the narrowing from the first stage to the last reads as a single shape. It is a natural fit for a sales or sign-up funnel, a hiring pipeline or any process where each stage keeps only part of the one before. Slice height follows the value, or the area if you prefer, and each slice is labelled with its stage, value and share, inside where it fits and beside it where it does not. Turn it apex down for the classic funnel, and a click selects the stage’s rows.

Try it. Click a slice to select the rows for that stage in the grid.

createChart({
  grid,
  container,
  type: 'pyramid',
  x: 'stage',
  y: 'n',
  stages: { inverted: true },
  selection: true,
  title: 'Sign-up funnel',
});

Options used: type: 'pyramid', stages, selection

({
  columns: [
    { field: 'stage', title: 'Stage' },
    { field: 'n', title: 'Accounts', type: 'number' },
  ],
  rows: [
    { id: 1, stage: 'Visited', n: 1200 },
    { id: 2, stage: 'Signed up', n: 640 },
    { id: 3, stage: 'Started a trial', n: 310 },
    { id: 4, stage: 'Paid', n: 120 },
  ],
})

Pictorial chart

A pictorial chart tells a quantity with a picture, which makes a number easier to feel than to read. In repeat mode it draws a row of icons for each category, with one icon standing for a fixed amount and the last one clipped to the fraction left over. In fill mode it splits one silhouette into bands sized by value. Use it in reports and dashboards for audiences who want the point at a glance: vans per depot, homes passed, people served. The shape can be an icon name or your own path.

createChart({
  grid,
  container,
  type: 'pictorial',
  x: 'depot',
  y: 'vans',
  pictorial: {
    mode: 'repeat',
    shape: 'M5 0L10 5H8V10H2V5H0Z',
    unit: 5,
  },
  title: 'Vans per depot (one icon is 5)',
});

Options used: type: 'pictorial', pictorial

({
  columns: [
    { field: 'depot', title: 'Depot' },
    { field: 'vans', title: 'Vans', type: 'number' },
  ],
  rows: [
    { id: 1, depot: 'Colchester', vans: 24 },
    { id: 2, depot: 'Ipswich', vans: 17 },
    { id: 3, depot: 'Norwich', vans: 11 },
    { id: 4, depot: 'Cambridge', vans: 7 },
  ],
})

Venn diagram

A Venn chart counts how your rows overlap across two or three sets. Give it boolean columns, such as which channels each customer has opted into, and it draws circles sized to the sets with the count of every region written inside. It answers questions a table makes hard: how many people use both, which are only on one, and how many sit outside all of them. Clicking a region filters the grid to exactly that region’s rows. The two-set overlap is exact and the three-set layout is a close fit that reports how far off it is.

Try it. Click a region to filter the grid to exactly the rows in it.

createChart({
  grid,
  container,
  type: 'venn',
  sets: ['email', 'sms', 'push'],
  title: 'Who is reachable on which channel',
});

Options used: type: 'venn', sets

({
  columns: [
    { field: 'user', title: 'User' },
    { field: 'email', title: 'Email', type: 'boolean' },
    { field: 'sms', title: 'SMS', type: 'boolean' },
    { field: 'push', title: 'Push', type: 'boolean' },
  ],
  rows: [
    [14, 1, 0, 0], [9, 0, 1, 0], [11, 0, 0, 1], [8, 1, 1, 0],
    [6, 1, 0, 1], [5, 0, 1, 1], [4, 1, 1, 1], [3, 0, 0, 0],
  ].flatMap(([n, email, sms, push], g) => Array.from({ length: n }, (_, i) => ({
    id: g * 100 + i, user: 'user-' + (g * 100 + i), email: !!email, sms: !!sms, push: !!push,
  }))),
})

Word cloud chart

A word cloud turns a column of free text into a picture of what people keep saying. Point it at a comment column and it splits the text into words, drops the common ones, and sizes each word by how often it appears, packed so that none overlap. It is a quick way into survey answers, support tickets or reviews before you read them. Clicking a word filters the grid to the rows that contain it, so the cloud is also a way into the detail. If a word cannot fit, the chart counts it and says so rather than dropping it silently.

Try it. Click a word to filter the grid to the comments that contain it.

createChart({
  grid,
  container,
  type: 'wordCloud',
  text: 'comment',
  rotate: [0, 90],
  seed: 3,
  title: 'What customers say',
});

Options used: type: 'wordCloud', text, seed

({
  columns: [
    { field: 'comment', title: 'Customer comment' },
  ],
  rows: [
    'Fast delivery and the packaging was excellent',
    'Excellent support, the team fixed it fast',
    'Delivery was late but support were helpful',
    'Great price and fast delivery',
    'Support answered quickly, very helpful',
    'Packaging damaged, support replaced it fast',
    'Helpful team, great price',
    'Easy returns and fast refund',
    'Fast refund, easy returns, helpful support',
    'Late delivery again, poor packaging',
    'Great quality, fast delivery',
    'Price was great and delivery was fast',
  ].map((comment, i) => ({ id: i, comment })),
})