Get Started!

GoFish is a JavaScript library for making bespoke graphics.

1. Install GoFish

npm install gofish-graphics

2. Create a chart!

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

chart(seafood)
  .flow(spread("letter", { dir: "x" }))
  .mark(rect({ h: "frequency" }))
  .render(root, {
    w: 500,
    h: 300,
    axes: true,
  });

3. Anatomy of a GoFish specification

A basic GoFish spec has four pieces: chart, flow, mark, and render.

chart: Data

The chart function is how you start your specification. It's where you put your data.

chart(alphabet);

flow: Graphical Operators

The flow method is where you specify graphical operators. Graphical operators transform your dataset (usually by applying a groupBy) and specify layout.

.flow(spread("letter", { dir: "x" }))

Here we're using the spread operator to create one group per letter and we arrange them horizontally thanks the dir: x option.

mark: Shapes

Lastly we call the mark method to specify the shapes we place in each of the regions created by the spread operator.

.mark(rect({ h: "frequency" }))

In this case, we created some rectangles whose heights correspond to the frequency values of the different letters. Since we didn't define the width of the rectangle, the spread operator and rect shape work together to infer it for us!

Rendering

  .render(root, { w: 500, h: 300, axes: true });

The render method draws our chart to the screen! We give it a DOM container to render into (root in this case) and some options. We've specified the width and height of our chart with w and h (just like on rect). We've also told GoFish to create some axes, labels, and legends for us automatically with 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