https://github.com/vizartjs/vizart-basic
VizArt: Basic charts
https://github.com/vizartjs/vizart-basic
area bar chart corona d3 d3v4 line row scatter visualization vizart
Last synced: 11 months ago
JSON representation
VizArt: Basic charts
- Host: GitHub
- URL: https://github.com/vizartjs/vizart-basic
- Owner: VizArtJS
- License: mit
- Created: 2017-07-21T02:32:52.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-12T08:24:36.000Z (over 3 years ago)
- Last Synced: 2025-07-27T06:45:56.908Z (11 months ago)
- Topics: area, bar, chart, corona, d3, d3v4, line, row, scatter, visualization, vizart
- Language: JavaScript
- Homepage: http://VizArtJS.github.io
- Size: 1.97 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vizart-basic
* [Demo](https://vizartjs.github.io/demo.html) quick reference with source code
* [Documentation](https://github.com/VizArtJS/vizart-basic/wiki) Full option spec
## Usage:
1. Install
```
npm install vizart-basic --save
```
2. ES6 Usage
```
import 'vizart-basic/dist/vizart-basic.css';
import { bar } from 'vizart-basic';
const chart = bar(_domId, options)....
```
## Three steps to use a chart
1. initialize a chart with domId and declarative options
```
const opt = {
...
};
const chart = chord('#chart', opt)
```
You only need to provide essential options. [Demo](https://vizartjs.github.io/demo.html) is a good place to check essential options for all charts. You may check up Documentation of each component for full option spec so as to control more chart behaviours.
2. Render a chart with data
```
chart.render(data) // this should be called only once
```
3. Change a chart on the fly (with options in a minimum)
```
// copy and update full options
const opt = chart.options();
opt.plots.opacityArea = o.4
// or in minimum
const opt = { plots: {opacityArea: 0.2 }};
// update options and redraw chart
chart.options(opt);
chart.update();
```
## Development
1. Clone repository
2. Run commands
```
npm install // install dependencies
npm run dev // view demos in web browser at localhost:3005
npm run build // build
npm run test // run tests only
npm run test:cover // run tests and view coverage report
```
## API
* [Bar](https://github.com/VizArtJS/vizart-basic/wiki/bar)
* [Area](https://github.com/VizArtJS/vizart-basic/wiki/area)
* [Line](https://github.com/VizArtJS/vizart-basic/wiki/line)
* [Pie](https://github.com/VizArtJS/vizart-basic/wiki/pie)
* [Row](https://github.com/VizArtJS/vizart-basic/wiki/row)
* [Scatter](https://github.com/VizArtJS/vizart-basic/wiki/scatter)
* [Corona](https://github.com/VizArtJS/vizart-basic/wiki/corona)
* [Stacked Area](https://github.com/VizArtJS/vizart-basic/wiki/stacked-area)
* [Stream](https://github.com/VizArtJS/vizart-basic/wiki/stream)
* [Grouped Bar](https://github.com/VizArtJS/vizart-basic/wiki/grouped-bar)
* [Multi Line](https://github.com/VizArtJS/vizart-basic/wiki/multi-line)
## Credits
My work is based on or inspired by other people's works
* Corona is modified from Nadieh Bremer's [A redsign of radar chart](https://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart.html)
* Rose is based on Athan kgryte's [Nightingale's Rose](http://bl.ocks.org/kgryte/5926740)
* Row chart is based on Nadieh Bremer's [Brushable & interactive bar chart in d3.js](https://www.visualcinnamon.com/2016/07/brush-bar-chart-d3.html)
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details