Socket
Socket
Sign inDemoInstall

abstract-chart

Package Overview
Dependencies
2
Maintainers
0
Versions
54
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

abstract-chart


Version published
Maintainers
0
Install size
5.70 MB
Created

Readme

Source

abstract-chart

npm version code style: prettier MIT license

Drawing charts using multiple unit of measure axes as coordinate system

Introduction

When drawing complex scientific charts, regular line/bar/pie chart libraries are not very useful. This aim of this library is to enable any chart to be drawn, no matter how complex. This is achieved by treating the chart as a canvas where you can draw anything, but in constract to a regular canvas, the chart has a coordinate system specified by axes that can be of different units of measure. You can have multiple coordinate systems overlayed in the same chart by adding more axes to the chart.

The chart is created as an abstract representation which can then be converted to an abstract-image which then in turn can be realised into different concrete formats such as .png, .svg etc.

Installation

npm install --save abstract-chart

The library is compiled to ES5 and no polyfills are required.

Usage

Example of chart XKCD 1612, "The worst part of colds".

import * as React from "react";
import * as AbstractChart from "abstract-chart";
import * as AbstractImage from "abstract-image";

const svg = AbstractImage.createSvg(AbstractChart.renderChart(generateLineChart()));

function generateLineChart(): AbstractChart.Chart {
  const series = [
    AbstractChart.createChartLine({
      points: [
        { x: 0, y: 0 },
        { x: 1, y: 2 },
        { x: 2, y: 4 },
        { x: 3, y: 1.5 },
        { x: 4, y: 1 },
        { x: 5, y: 0 },
        { x: 6, y: 0 },
        { x: 7, y: 0 },
        { x: 8, y: 0 },
      ],
      color: AbstractImage.red,
      label: "How bad you feel",
      xAxis: "bottom",
      yAxis: "left",
    }),
    AbstractChart.createChartLine({
      points: [
        { x: 0, y: 0 },
        { x: 1, y: 0 },
        { x: 2, y: 0 },
        { x: 3, y: 1 },
        { x: 4, y: 2 },
        { x: 5, y: 3 },
        { x: 6, y: 2.8 },
        { x: 7, y: 2 },
        { x: 8, y: 1.5 },
      ],
      color: AbstractImage.blue,
      label: "How bad you sound",
      xAxis: "bottom",
      yAxis: "left",
    }),
  ];

  const [xMin, xMax] = getLineRange(series, (point) => point.x);
  const [yMin, yMax] = getLineRange(series, (point) => point.y);

  const chart = AbstractChart.createChart({
    chartLines: series,
    xAxisesBottom: [AbstractChart.createLinearAxis(xMin, xMax, "Days with cold")],
    yAxisesLeft: [AbstractChart.createLinearAxis(yMin, yMax + 1, "Badness")],
    labelLayout: "center",
  });

  return chart;
}

function getLineRange(
  series: AbstractChart.ChartLine[],
  axisSelector: (point: AbstractImage.Point) => number
): [number, number] {
  const axisValues = series
    .map((serie) => serie.points.map(axisSelector))
    .reduce((soFar, current) => {
      return [...soFar, ...current];
    }, [] as ReadonlyArray<number>);
  return [Math.min(...axisValues), Math.max(...axisValues)];
}

FAQs

Last updated on 08 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc