Skip to content

Latest commit

 

History

History
214 lines (165 loc) · 5.19 KB

Readme.md

File metadata and controls

214 lines (165 loc) · 5.19 KB
Raw

@devinit/charts

Build Status Codacy Badge Dependency Status

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