GoFish Graphics
Internals

First Steps ​

GoFish is a JavaScript library for making bespoke graphics.

1. Install GoFish ​

bash
npm install gofish-graphics@nightly

Why the nightly build?

GoFish is moving fast, and the published stable release lags well behind active development. While the library is in early development we recommend early adopters install the nightly build (shown above) to get the latest features and fixes. Nightlies are published whenever main changes; pin a specific one with gofish-graphics@<version> once you find a build you like.

The stable release on npm is far behind and will not match these docs, so do not drop the @nightly tag.

2. Create a chart! ​

ts
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(alphabet, { axes: true })
  .flow(spread({ by: "letter", dir: "x" }))
  .mark(rect({ h: "frequency" }))
  .render(root, {
    w: 500,
    h: 300,
  });

3. Play with it ​

Change the code below and watch the chart update.

Where next ​

The tutorials take you from this first chart to finished work.

  • Basics is the shared starting point: shapes, graphical operators, and how the two fit together.
  • Then pick whichever you like, in either order: Charts builds a bar chart up into a polar ribbon, and Diagrams builds a diagram out of the same pieces.
  • Later on, Reactivity & Interaction makes a visualization respond to the pointer, and GoTree draws trees.