Animated Bar & Column Chart With D3.js – animated-bars

Preview:

Description:

A JavaScript library to generate bar & column charts using d3.js that allows you to animate the horizontal bars and vertical columns by updating the data set at given intervals.

How to use it:

1. Install and import the animated-bars into the project.

# NPM
$ npm install animated-bars --save

import { AnimatedColumnChart } from "animated-bars";

2. Prepare your data sets as follows:

const data = [
  {"key": "1", "value": 0.0, "delay": 50},
  {"key": "2", "value": 0.0, "delay": 100},
  {"key": "3", "value": 0.0, "delay": 150},
  {"key": "4", "value": 0.0, "delay": 200},
  {"key": "5", "value": 0.0, "delay": 250},
  {"key": "6", "value": 0.0, "delay": 300},
  {"key": "7", "value": 0.0, "delay": 350},
  {"key": "8", "value": 0.0, "delay": 400},
  {"key": "9", "value": 0.0, "delay": 450},
  {"key": "10", "value": 0.0, "delay": 500},
  {"key": "11", "value": 0.0, "delay": 550},
  {"key": "12", "value": 0.0, "delay": 600},
  {"key": "13", "value": 0.0, "delay": 650},
  {"key": "14", "value": 0.0, "delay": 700},
  {"key": "15", "value": 0.0, "delay": 750}
];
const dataUpdate = [
  {"key": "1", "value": 70.0, "delay": 50},
  {"key": "2", "value": 60.0, "delay": 100},
  {"key": "3", "value": 50.0, "delay": 150},
  {"key": "4", "value": 40.0, "delay": 200},
  {"key": "5", "value": 30.0, "delay": 250},
  {"key": "6", "value": 20.0, "delay": 300},
  {"key": "7", "value": 10.0, "delay": 350},
  {"key": "8", "value": 1.0, "delay": 400},
  {"key": "9", "value": -10.0, "delay": 450},
  {"key": "10", "value": -20.0, "delay": 500},
  {"key": "11", "value": -30.0, "delay": 550},
  {"key": "12", "value": -40.0, "delay": 600},
  {"key": "13", "value": -50.0, "delay": 650},
  {"key": "14", "value": -60.0, "delay": 700},
  {"key": "15", "value": -70.0, "delay": 750}
];

3. Render a bar & column chart on the page.

<div id="myChart"></div>

const chart = new AnimatedColumnChart(myData, {
      element: "myChart"
});
chart.create();

4. The simplest way to change the values shown in an animated chart is to call the chart’s update method with new data. The new data should have the same keys as the initial data that was used to set up the chart, but with new values. Calling update will cause the chart to transition to the new values over an interval of time. The chart’s default transition time is set with the configuration object’s transitionTime property, but the transition time can also be set for an individual transition using an optional second argument to update. The transition time is specified in milliseconds.

chart.update(dataUpdate);

5. Charts can be updated to show new values at fixed intervals using ES6 generators. Call a chart’s run method with a generator to iterate through a set of values. Each time the generator is called it should yield a new dataset containing new values for the same set of keys that were provided in the initial data that was used to set up the chart.

chart.run(dataUpdate);

6. Possible options to customize the chart.

const chart = new AnimatedColumnChart(myData, { 
      element: "chart",
      dimensions: {
      width: 800,
      height: 450
      },
      margins: {
      top: 80,
      right: 80,
      bottom: 80,
      left: 80
      },
      colors: {
      posRgb: "#55bbee",
      negRgb: "#ee5599"
      },
      background: "",
      title: "",
      titleSize: 22,
      titleColor: "#000000",
      titleOffsetX: 20,
      titleOffsetY: 40,
      subtitle: "",
      subtitleSize: 17,
      subtitleColor: "#000000",
      subtitleOffsetX: 20,
      subtitleOffsetY: 30,
      keyLocation: "min",
      keyTitle: "Key title",
      keyTitleSize: 11,
      keyTitleColor: "#000000",
      keyTitleOffset: 50,
      keyTextSize: 11,
      keyTextColor: "#000000",
      keyLineColor: "#000000",
      keyTickSizeInner: 6,
      keyTickSizeOuter: 6,
      keyTickPadding: 3,
      valueLocation: "start",
      valueTitle: "Value title",
      valueTitleSize: 11,
      valueTitleColor: "#000000",
      valueTitleOffset: 50,
      valueMin: -100,
      valueMax: 100,
      valueTextSize: 11,
      valueTextColor: "#000000",
      valueLineColor: "#000000",
      valueTicks: 5,
      valueTickSizeInner: 6,
      valueTickSizeOuter: 6,
      valueTickPadding: 3,
      valueFormat: "",
      valuePaddingInner: 0.1,
      valuePaddingOuter: 0.1,
      shapeRendering: "auto",
      transitionTime: 1000,
      pauseTime: 1000
});

Changelog:

06/13/2020

• v0.2.4

04/19/2020

• v0.1.6

04/18/2020

• v0.1.3