https://github.com/zachleat/artificial-chart

An SVG charting library based on D3.js
https://github.com/zachleat/artificial-chart

Last synced: 2 days ago
JSON representation

An SVG charting library based on D3.js

• Host: GitHub
• URL: https://github.com/zachleat/artificial-chart
• Owner: zachleat
• Created: 2021-11-01T15:33:32.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-08-04T14:05:10.000Z (over 2 years ago)
• Last Synced: 2024-11-01T19:52:36.318Z (9 days ago)
• Language: JavaScript
• Homepage:
• Size: 29.3 KB
• Stars: 16
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# artificial-chart

The SVG D3.js based charting solution used for the Jamstack Community Survey.

## [Demo](https://zachleat.github.io/artificial-chart/demo.html)

All of the charts are viewable on https://jamstack.org/survey/2021/

## Features

* Responsive Web Design friendly charts

* Progressive-enhancement friendly, draws data from HTML tables. Warning: does not include a No-JS visual view.

* Horizontal and vertical bar chart type

  * Supports grouped data visualized side by side or stacked.

  * Supports proportional data (scaling to 100%)

  * Option to show inline labels inside or outside of the bars.

* Bubble chart type

* Styles nicely with gradients

* Customizable margins

* Wrapping on axis labels

* Supports customized label precision

* Supports auto-generated HTML legends (outside of the SVG).

* Uses IntersectionObserver and ResizeObserver (when available) for better performance on initialization and resize.

## Changelog

* `v2.0.0` swap to ESM

## Usage

```js

import "https://d3js.org/d3.v7.min.js";

import { HorizontalBar, VerticalBar, Bubble } from "./artificial-chart.js";

new VerticalBar("chart-id", "source-table-id", {

  showInlineBarValues: "outside",

});

```