Get Started!

GoFish is a JavaScript library for making bespoke graphics.

1. Install GoFish

npm install gofish-graphics

2. Create a chart! Make sure to create or select a DOM element to render it.

const alphabet = [
  { letter: "A", frequency: 28 },
  { letter: "B", frequency: 55 },
  { letter: "C", frequency: 43 },
  { letter: "D", frequency: 91 },
  { letter: "E", frequency: 81 },
  { letter: "F", frequency: 53 },
  { letter: "G", frequency: 19 },
  { letter: "H", frequency: 87 },
  { letter: "I", frequency: 52 },
];

const root = document.createElement("div");

StackX(
  { spacing: 4, alignment: "end", sharedScale: true },
  For(alphabet, (d) => Rect({ w: 30, h: v(d.frequency) }))
).render(root, { width: 688, height: 400, axes: true });

3. Anatomy of a GoFish specification

// `StackX` is a *graphical operator* that puts shapes in a horizontal stack
StackX(
  { spacing: 4, alignment: "end", sharedScale: true },
  // `For` creates an array of shapes
  For(alphabet, (d) =>
    // `Rect` is a basic shape
    // `v` tells GoFish it's a data value that should be scaled
    Rect({ w: 30, h: v(d.frequency) })
  )
  // finally, we render the chart!
).render(root, { width: 688, height: 400, axes: true });

4. Next steps

Go through our tutorial, check out some examples, or play with the live editor below!

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox