The SVG D3.js based charting solution used for the Jamstack Community Survey.
npm install artificial-chartThe SVG D3.js based charting solution used for the Jamstack Community Survey.
All of the charts are viewable on https://jamstack.org/survey/2021/
* 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.
* v2.0.0 swap to ESM
``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",
});
``