vue-d3-charts

Install

npm i vue-d3-charts --save

Introduction

vue-d3-charts is a charts library build with reusability in mind. It has evolved from a personal bl.ocks collection to a modular charts system, to allow quick implementation and customatization.

vue-d3-charts is built on top of d3.js and vue.js and is an open source project started by Saigesp under GNU General Public License v3.0. See contribution guide if you want to contribute.

How to use

First import your desired charts:

import { D3BarChart } from 'vue-d3-charts';

export default {
  name: 'LoremIpsumComponent',
  components: {
    D3BarChart,
  },
  // ...
};

And then use it on your project, passing them a configuratioin object and a data array:

<D3BarChart :config="chart_config" :datum="chart_data"></D3BarChart>

Each chart has it's own configuration options. For example, the bar chart has these:

chart_config = {
  key: 'name',
  value: 'total',
  color: {current:'#41B882'},
  transition: {ease: 'easeBounceOut', duration: 1000}
}

Charts

BarChart

LineChart

PieChart

SlicesChart

SlopeChart

Sunburst

WordsCloud

Common features

Each chart has its own features, but these are across all charts:

Data update

Simply change your binding data as you want:

<template>
  <div>
      <D3SlopeChart :config="chart_config" :datum="chart_data"></D3SlopeChart>
      <button @click="addData()">Add</button>
      <button @click="removeData()">Remove</button>
  </div>
</template>

import { D3SlopeChart } from 'vue-d3-charts';

export default {
  components: {
    D3SlopeChart,
  },
  data() {
    return {
      chart_config: {
        key: 'name',
        color: {
          scheme: 'schemeCategory10'
        },
        transition: {
          ease: 'easeBounceOut',
          duration: 1000
        }
      },
      chart_data: [
          { start: 2355, end: 5855, name: "Lorem" },
          { start: 4260, end: 6510, name: "Ipsum" },
          { start: 5029, end: 5138, name: "Dolor" }
      ],
      count: 0
    }
  },
  methods: {
    addData(){
      const start = Math.floor(Math.random() * 20000);
      const end = Math.floor(Math.random() * 20000);
      const name = 'new #'+this.count++;
      this.chart_data.push({start, end, name})
    },
    removeData(){
      if(!this.chart_data.length)
        return;
      const random_index = Math.floor(Math.random() * this.chart_data.length)
      this.chart_data.splice(random_index, 1);
    }
  }
}

Reactive elements

Your title goes here

Your source goes here

<template>
  <div class="my-app">
    
    <!-- chart -->
    <D3BarChart
      :config="chart_config"
      :datum="chart_data"
      :title="chart_title"
      :source="chart_source"
    ></D3BarChart>

    <!-- value control -->
    <select v-model="config.values">
      <option :value="[d]" v-for="d in ['hours', 'production']">{{d}}</option>
    </select>

    <!-- current control -->
    <select v-model="config.currentKey">
      <option :value="d.year" v-for="d in data">{{d.year}}</option>
    </select>

    <!-- title control -->
    <input type="text" v-model="chart_title">

    <!-- source control -->
    <input type="text" v-model="chart_source">

  </div>
</template>

import { D3BarChart } from 'vue-d3-charts';

export default {
  components: {
    D3BarChart,
  },
  data() {
    return {
      chart_title: 'Your title goes here',
      chart_source: 'Your source goes here',
      chart_data: [
        //...
        {hours: 1648, production: 9613, year: '2007'},
        {hours: 2479, production: 6315, year: '2008'},
        {hours: 3200, production: 2541, year: '2009'}
      ],
      chart_config: {
        key: 'year',
        currentKey: '2004',
        values: ['hours'],
        axis: {
          yTicks: 3
        },
        color: {
          default: '#222f3e',
          current: '#41B882'
        }
      }
    }
  }
}