Rhyme

Appearance

SVG ​

In addition to HTML components, Rhyme can produce other DOM nodes as well. Here, we show how to use Rhyme to produce SVG drawings.

Basic SVG Geoms ​

Generating basic SVG shapes or "geoms" works the same as generating HTML nodes.

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

SVG Plots ​

Using Rhyme queries, we can produce shapes based on data to draw custom plots.

In this example, notice how we use the same facilities to draw a collection of rects or circles, one per data point, or a polyline, which is a single SVG node covering an entire list of data points. Note also how the code for the individual plots is reused between the all-in-one and the side-by-side views.

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

Data-Driven Drawings ​

Of course we are not limited to traditional plots, but we can produce a variety of other data-driven drawings.

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