GoFish Graphics
Internals
Croissant chart: a normal curve cut into five equal-probability slices, each with a dot at its mediana croissant chart
Bubble treemap: circles packed into nested blobs, one color per groupa bubble treemap
Bottle fill chart: four wine bottles filled to 30, 60, 75 and 100 percenta bottle fill chart
Flower chart: flowers on stems of different heights, with petals sized by valuea flower chart
Pulley diagram: two weights hanging from a system of three pulleysa pulley diagram
Scatterplot of countries with the Sub-Saharan Africa points enclosed in a labeled regiona region annotation
Python Tutor memory diagram: a global frame with arrows into nested tuples on the heapa Python Tutor memory diagram

GoFishv0.1.0

an open-source visualization library for JavaScript and Python

Get StartedExamplesAPI Reference
Croissant chart: a normal curve cut into five equal-probability slices, each with a dot at its mediana croissant chart
Bubble treemap: circles packed into nested blobs, one color per groupa bubble treemap
Bottle fill chart: four wine bottles filled to 30, 60, 75 and 100 percenta bottle fill chart
Flower chart: flowers on stems of different heights, with petals sized by valuea flower chart
Pulley diagram: two weights hanging from a system of three pulleysa pulley diagram
Scatterplot of countries with the Sub-Saharan Africa points enclosed in a labeled regiona region annotation
Python Tutor memory diagram: a global frame with arrows into nested tuples on the heapa Python Tutor memory diagram

see all examples →

Simple when you want, complex when you need

Bar chart of fish catch by lakea bar chart
Stacked bar chart of fish catch by lake and speciesa stacked bar chart
Ribbon chart of fish catch by lake, with species reordered at each lakea ribbon chart
Polar ribbon chart of the same fish catch, bent around a circlea polar ribbon chart

Because graphics are all made of the same stuff 

import { chart, layer, selectAll, field } from "gofish-graphics";

layer({ h: 400 }, [
  chart(seafood)
    .flow(
      spread({ by: "lake", dir: "x", spacing: 64 }),
      stack({ by: field("species").sort("count"), dir: "y" })
    )
    .mark(rect({ h: "count", fill: "species" }).name("bars")),
  chart(selectAll("bars"))
    .flow(group({ by: "species" }))
    .mark(ribbon({ opacity: 0.8 })),
]).render(el);
from gofish import chart, layer, select_all, field

layer([
    chart(seafood)
    .flow(
        spread(by="lake", dir="x", spacing=64),
        stack(by=field("species").sort("count"), dir="y"),
    )
    .mark(rect(h="count", fill="species").name("bars")),
    chart(select_all("bars"))
    .flow(group(by="species"))
    .mark(ribbon(opacity=0.8)),
], h=400).render()
Get StartedExamplesAPI Reference
made withat