Rhyme

Appearance

Tables ​

Rhyme can display tabular data in a variety of formats. These include various forms of pivot tables, bar charts, and combinations.

Table with Custom Cells ​

To demonstrate some of the possibilities, below is a simple two-tab component that displays either a table with an embedded bar chart, or a structural view of some other object.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Pivot Table ​

Based on the previous simple example, we show how to construct a pivot table of a simple dataset, grouped by and aggregated along several dimensions.

Note the two different styles of grouping, and how the computeEntry subquery function is reused in multiple places.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

Bar Chart Race ​

To demonstrate the interative features, we show an implementation of the popular 'Bar Chart Race' visualization. Drag the slider along to see the largest cities swap places as time changes.

It would not be difficult to animate the process.

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox