https://github.com/zachleat/artificial-chart
An SVG charting library based on D3.js
https://github.com/zachleat/artificial-chart
Last synced: 30 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 (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-04T14:05:10.000Z (almost 3 years ago)
- Last Synced: 2025-05-23T04:43:44.076Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 29.3 KB
- Stars: 16
- Watchers: 2
- 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",
});
```