@devinit/charts
This library is undergoing some major refactoring, so current implementation in the readme file is for previous old code which you can find at https://github.com/freelyformd/charts
configurable d3 charts from csv like data
Install
Firstly, install @devinit/charts
npm install @devinit/charts
Developing
run yarn --ignore-scripts for installing dependencies
To start contributing, clone this repository and run npm start
Browse to localhost:8080, to see some charts
Usage
This library exposes a draw function that takes an object with the following properties;
- element: a DOM node
- config: a configuration object
- data: a list of entries
The function returns an object with the following methods
- update(data: Array): updates visualised data
Example:
draw({
element: document.getElementById('area_chart'),
config: {
title: 'Area Chart',
type: 'area',
colors: ['#ba0c2f', '#93328e', '#b7bf10', '#004862'],
linearAxis: {
showAxis: true,
showGridlines: true,
axisLabel: 'Country',
},
categoryAxis: {
showAxis: true,
axisLabel: 'Area',
}
},
data: [
{"Area": 100, "Country": "Uganda"},
{"Area": 200, "Country": "Kenya"},
{"Area": 120, "Country": "Tanzania"},
{"Area": 270, "Country": "Rwanda"},
{"Area": 230, "Country": "Burundi"},
]
})With that you get an area chart inside the element with an id of area-chart. The configuration fields depend on the chart type.
Configuration
The following sections outline the accepted configuration fields for each supported chart type
Linear vs Category Charts
These consist of a linear axis and a category axis
Chart types
- area
- bar
- line
- stacked-bar
- stacked-area
- full-stacked-bar
- full-stacked-area
- clustered-bar
const config = {
title: 'Line Chart',
// title alignment: left/center/right,
titleAlignment: 'left',
// orientation: vertical/horizontal,
orientation: 'vertical',
linearAxis: {
// Whether or not to show axis component
showAxis: false,
// Whether or not to show grid lines
showGridlines: false,
// Data field for this axis
axisLabel: 'Area',
// Minimum axis value
axisMinimum: null,
// Maximum axis value
axisMaximum: null,
},
categoryAxis: {
// Whether or not to show axis component
showAxis: false,
// Data field for this axis
axisLabel: 'Countries',
// Padding between categories
innerPadding: 0,
// Padding between axes and end data categories
outerPadding: 0
},
legend: {
// Whether or not to show legend
showLegend: false,
// Align of label items; left/center/right
alignment: 'left',
// Position of legend on chart: bottom/right
position: 'bottom',
// Shape of legend indicators:
// circle/square/cross/diamond/triangle/star/wye
symbol: 'square',
// Maximum entries per row
rowSpan: 1
}
}Circular Charts
Circular charts include pie and donut charts
const data = {
type: 'pie',
title: 'Donut Chart',
titleAlignment: 'center',
colors: ['#ba0c2f', '#93328e', '#b7bf10', '#004862'],
circular: {
// Data field for label sectors
label: 'Country',
// Data field for sector values
value: 'Population',
// Inner radius for donut charts
innerRadius: 100,
// Stroke width and color around each sector
strokeWidth: 5,
strokeColor: '#fff',
},
// See previous section
legend: {
showLegend: true,
position: 'bottom',
alignment: 'center'
}
}Hierarchy Charts
Hierachy charts represent tree data e.g tree-map, partition, grouped-vertical-stack. Each series needs a parent identifier.
Chart types
- treemap
- partition
Configuration
const config = {
title: 'Partition Chart',
type: 'partition',
orientation: 'horizontal',
tree: {
// unique node reference field
id: 'label',
// node parent reference field
parent: 'parent',
// node value field
value: 'value',
// Maximum visible node depth
depth: Infinity,
},
// applies to type = treemap
treemap: {
// Tiling algorithm:
// binary/dice/slice/sliceDice/squarify/resquarify
tile: 'sliceDice',
},
}3D Charts (TODO)
3D charts represent three dimensional data
