sparrow's Introduction

🦜 Sparrow

Sparrow is a tiny plot library based on the grammar of graphics for learning purpose. It aims at helping people to better understand visualization and making it easier for them to choose the the suitable visualization library for their analysis task.

📎 Links

✨ Features

The name sparrow comes from an old Chinese proverb: "Though sparrow is small, but it has all organs". As its name, Sparrow has the following features:

Small: The code is less than 2000 lines in total with zero dependencies.
Elegant: It can plot in both normal and sketchy, hand-drawn-like, style.
Complete: It can plot most of charts in common use.

📦 Installation

$ npm i @sparrow-vis/sparrow

🔨 Get Started

Specifies chart by JavaScript Object.

import { plot } from "@sparrow-vis/sparrow";

const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
];

const chart = plot({
  data,
  type: "interval",
  encodings: {
    x: "genre",
    y: "sold",
    fill: "genre",
  },
});

document.getElementById("container").appendChild(chart);

Plot in a sketchy, hand-drawn-like, style.(@sparrow-vis/rough-renderer)

$ npm i @sparrow-vis/rough-renderer

import { plot } from "@sparrow-vis/sparrow";
import { createPlugin } from "@sparrow-vis/rough-renderer";

const data = [
  { genre: "Sports", sold: 275 },
  { genre: "Strategy", sold: 115 },
  { genre: "Action", sold: 120 },
  { genre: "Shooter", sold: 350 },
  { genre: "Other", sold: 150 },
];

const chart = plot({
  data,
  type: "interval",
  renderer: createPlugin(),
  encodings: {
    x: 'genre',
    y: 'sold',
    fill: 'genre'
  },
});

document.getElementById("container").appendChild(chart);