https://github.com/kendopunk/stencil-vizzle
Customizable visualization web components built with Stencil and D3.
https://github.com/kendopunk/stencil-vizzle
charts d3js stencil stencil-components tsx webcomponents
Last synced: 3 months ago
JSON representation
Customizable visualization web components built with Stencil and D3.
- Host: GitHub
- URL: https://github.com/kendopunk/stencil-vizzle
- Owner: kendopunk
- License: mit
- Created: 2019-07-06T18:19:51.000Z (about 7 years ago)
- Default Branch: develop
- Last Pushed: 2023-01-04T03:48:47.000Z (over 3 years ago)
- Last Synced: 2026-03-30T09:13:13.381Z (4 months ago)
- Topics: charts, d3js, stencil, stencil-components, tsx, webcomponents
- Language: TypeScript
- Homepage:
- Size: 1.81 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# stencil-vizzle
Reusable, easy-to-use visualization web components built with Stencil and D3.js
### Motivation
I've been using D3.js since 2012 — almost as long as it's been out — and have built highly configurable, reusable charting functions/classes within a variety of frameworks, namely ExtJS, AngularJS, and React.
As much as I tried to make the charts "universal" in terms of porting across frameworks, there have always been library idiosyncrasies standing in the way, most notably in terms of DOM manipulation, data binding and render lifecycles.
As the Custom Elements specification has matured and browser support has improved, I felt I finally had the opportunity to create true "write once, run anywhere" visualization web components and so here we are.
### Inspiration
`stencil-vizzle` takes its cue from the core tenet of `D3.js`, e.g. *Data-Driven Documents* and is influenced by frameworks like [RAW/RAWGraphs](https://rawgraphs.io) i.e., ad-hoc mapping of data properties to attributes in your custom element.
### Features
- Framework agnostic
- No third party libaries required
- In general, requires little to no transformation of your data prior to use.
- Highly customizable
- Show or hide chart features like axes, legend, gridlines, and/or axis labels.
- Adjustable margins, stroke, stroke width and font sizes
- `inverse` support for use on darker backgrounds.
### Quick Example w/ Unpkg `````` Tag
A simple, customizable bar chart using user-specified property -> attribute mappings. See the individual READMEs for information on available attributes and how to use them. Additional ready-to-use examples can be found in the [examples folder](./examples).
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>stencil-vizzle</title>
<script type="module" src="https://unpkg.com/stencil-vizzle@0.0.2/dist/stencil-vizzle/stencil-vizzle.esm.js">
body {
padding: 20px;
font-family: "Arial", "Helvetica", sans-serif;
}
document.addEventListener('stv-bar-chart-loaded', function() {
var data = [
{contestant: 'A', name: 'Mark', score: 1000},
{contestant: 'B', name: 'Fred', score: 750},
{contestant: 'C', name: 'Walter', score: 1250}
]
document.querySelector('stv-bar-chart').chartData = data
})