ReviewOS

stacks/ts-charts

public
Clone

Push over the same URL. A password will not work: create a token under access tokens and use it in place of one.

main
· 7 branches · 82 commits

Mirrored from stacksjs/ts-charts · syncing is switched off

README.md

Social Card of this repo

npm version GitHub Actions Commitizen friendly

ts-charts

A complete TypeScript rewrite of D3.js — fully typed, zero dependencies, Bun-first.

All 30 D3.js packages, rewritten from the ground up in TypeScript with isolatedDeclarations support. Ships as a single umbrella package or 30+ individually installable sub-packages.

Features

  • 🔷 Fully Typed — strict TypeScript with isolatedDeclarations: true, no any leaks
  • 📦 Zero Dependencies — no external runtime dependencies, everything inlined
  • Bun-First — optimized for Bun, works in all modern browsers
  • 🌳 Tree-Shakeable — ESM-only, import only what you need
  • 🧪 3,500+ Tests — comprehensive test suite ported from D3, all passing
  • 🎯 D3 API Compatible — drop-in replacement for D3.js

Install

# install the umbrella package (everything)
bun add ts-charts

# or install individual packages
bun add @ts-charts/scale
bun add @ts-charts/selection
bun add @ts-charts/shape

Usage

// import everything
import { scaleLinear, line, select } from 'ts-charts'

// or import from individual packages
import { scaleLinear } from '@ts-charts/scale'
import { line } from '@ts-charts/shape'
import { select } from '@ts-charts/selection'

// create a linear scale
const x = scaleLinear()
  .domain([0, 100])
  .range([0, 960])

// create a line generator
const myLine = line()
  .x((d: [number, number]) => x(d[0]))
  .y((d: [number, number]) => d[1])

Packages

PackageDescription
@ts-charts/arrayArray manipulation, statistics, histograms, bisection
@ts-charts/axisSVG axis generators for scales
@ts-charts/brush1D and 2D brush selections
@ts-charts/chordChord diagram layout and ribbon generator
@ts-charts/colorColor spaces: RGB, HSL, Lab, HCL, Cubehelix
@ts-charts/contourContour polygons and density estimation
@ts-charts/delaunayDelaunay triangulation and Voronoi diagrams
@ts-charts/dispatchNamed event dispatching
@ts-charts/dragDrag-and-drop interaction
@ts-charts/dsvCSV and TSV parsing and formatting
@ts-charts/easeEasing functions for transitions
@ts-charts/fetchConvenience wrappers for the Fetch API
@ts-charts/forceForce-directed graph layout
@ts-charts/formatNumber formatting (SI, fixed, currency, etc.)
@ts-charts/geoGeographic projections and path generators
@ts-charts/graphNode-link graphs: force-directed rendering, plus a layered (Sugiyama) layout via @ts-charts/graph/layered
@ts-charts/hierarchyTree, treemap, pack, and partition layouts
@ts-charts/interpolateValue interpolation for animations
@ts-charts/pathSVG path serialization
@ts-charts/polygonPolygon area, centroid, convex hull
@ts-charts/quadtree2D spatial indexing
@ts-charts/randomRandom number generators for various distributions
@ts-charts/scaleScales: linear, log, ordinal, time, etc.
@ts-charts/scale-chromaticColor schemes: sequential, diverging, categorical
@ts-charts/selectionDOM selection and manipulation
@ts-charts/shapeShape generators: line, area, arc, pie, stack
@ts-charts/timeTime intervals and rounding
@ts-charts/time-formatDate/time parsing and formatting
@ts-charts/timerEfficient animation scheduling via requestAnimationFrame
@ts-charts/transitionAnimated transitions on selections
@ts-charts/zoomPan and zoom interaction

Testing

bun test

Changelog

Please see our releases page for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Stacks Discord Server

Postcardware

"Software that is free, but hopes for a postcard." We love receiving postcards from around the world showing where Stacks is being used! We showcase them on our website too.

Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎

Sponsors

We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.

License

The MIT License (MIT). Please see LICENSE for more information.

Made with 💙

[codecov-href]: https://codecov.io/gh/stacksjs/ts-charts -->