Vs

Vue Visualisation Package using d3.js and leaflet. See also:

• LayoutGrid : Creating a powerful dashboard using Vs and vue-grid-layout

Installation

npm i -S d3-vs

Usage

import Vs from 'd3-vs';

// install globally all components
Vue.use(Vs);

// import only the components that you need and register it manually
import {
    // Flow Of transition
    d3SankeyCircular,

    // Time Serie
    d3Timelion,
    d3Timeline,

    // Basic
    d3Pie,
    d3Line,
    d3Metric,
    d3MultiLine,
    d3HorizontalBar,
    d3VerticalBar,
    d3GroupedArea,
    d3Area,
    d3Circle,

    // Functional
    d3Player,
    d3HorizontalSlider,
    d3VerticalSlider,

    // Layout
    d3Sunburst,
    d3Tree,
    d3Pack,
    d3Cluster,
    d3ICicleVertical,
    d3ICicleHorizontal,

    // Leaflet
    d3LChoropleth,
    d3LHeat
} from 'd3-vs';

Basic

###d3Metric

This component is for showing simple scientific data. It accepts the type Number as data.

template

<d3-metric
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-metric>

options

###d3Circle

This component is for showing simple percentage data. It accepts the type Number as data. The data must be in the range [0, 1].

template

<d3-circle
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-circle>

options

###d3Pie

This component can be a pie chart or a donut chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}. key will be used in tooltip, value will be used to calculate the angle needed.

template

<d3-pie
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-pie>

options

###d3VerticalBar

This component is for showing scientific data in vertical bar chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}, key will be used in tooltip, value will be used to calculate the height needed. By default when every key is of type Date or Number, brush will be enabled. You can choose a new range by using the brush or by clicking a bar if options.axisXInterval has been settled.

template

<d3-vertical-bar
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    height="300px">
</d3-vertical-bar>

options

events

###d3HorizontalBar

This component is for showing scientific data in horizontal bar chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}, key will be used in tooltip, value will be used to calculate the width needed. By default when every key is of type Date or Number, brush will be enabled. You can chose a new range by using the brush or by clicking a bar if options.axisYInterval has been settled.

template

<d3-horizontal-bar
    :data="data"
    :options="options"
    :margin="margin"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    width="100%"
    height="300px">
</d3-horizontal-bar>

options

events

###d3Line

This component is for showing scientific data in line chart. It takes an array of elements like {key : 'String|Date|Number', value : 'Number'}, key will be used in tooltip, value will be used to calculate the width needed. By default when every key is of type Date or Number, brush will be enabled. You can chose a new range by using the brush.

template

<d3-line
    :data="data"
    :options="options"
    :margin="margin"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    width="100%"
    height="300px">
</d3-line>

options

events

###d3Area

This components is for show big date_histogram data, It takes an array of elements like {key : 'Date', value : 'Number'}.

template

<d3-area
    :data="data"
    :options="options"
    :margin="margin"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    width="100%"
    height="300px">
</d3-area>

options

###d3MultiLine

This component is for showing multiple lines together. It takes an array of elements like {group: 'string', key : 'String|Date|Number', value: 'Number'}.

template

<d3-multi-line
    :data="data"
    :options="options"
    :margin="margin"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    width="100%"
    height="300px">
</d3-multi-line>

options

###d3GroupedArea

This component is for showing multiple lines together. It takes an array of elements like {group: 'string', key : 'String|Date|Number', value: 'Number'}.

template

<d3-grouped-area
    :data="data"
    :options="options"
    :margin="margin"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    width="100%"
    height="300px">
</d3-grouped-area>

options

Flow Of Transitions

###d3SankeyCircular

This component is for showing the flow of transitions between zones. It takes an array nodes to represent all the zones, and it takes an array of elements like:

{
    source: `String`,
    target: `String`,
    value: 'Number'
}

template

<d3-sankey-circular
    :nodes="nodes"
    :links="links"
    :options="options"
    :nodeTitle="nodeTitle"
    :linkTitle="linkTitle"
    @max-period-updated="(period) => yourMethod(period)"
    width="100%"
    height="300px">
</d3-sankey-circular>

nodeTitle

Tooltip of zone. Default to d => ${d.name}<br>${d.value}.

linkTitle

Tooltip of link. Default to d => ${d.source.name} → ${d.target.name}<br>${d.value}.

options

Time Series

###d3Timelion

This component is similar to kibana timelion with a interval select box. It accepts an array of elements like { key : 'Date', value: 'Number'}.

template

<d3-timelion
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px"
    @range-updated="(dateTimeStart, dateTimeEnd) => fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)"
    @interval-updated="interval => fetchDataWithInterval(interval)">
</d3-timelion>

options

events

###d3Timeline

This component is for showing time entries. We have two type entries in d3Timeline, they are Point and Interval. It takes an array of entries as data.

To specify an entry Point:

{
   at: 'Date',
   // tooltip
   title: 'String',
   group: 'String',
   // internally we have 4 className, they are 'entry--point--default', 'entry--point--success', 'entry--point--warn', 'entry--point--info'
   // you can also specify your own class and add it to SPA. The class shouldn't be in scoped style
   className: 'String',
   // it supports 7 symbols, they are 'symbolCircle', 'symbolCross', 'symbolDiamond', 'symbolSquare', 'symbolStar', 'symbolTriangle', 'symbolWye'
   symbol: 'String'
}

To specify an entry 'Interval':

{
    from : 'Date',
    to: 'Date',
    // tooltip
    title: 'String',
    label: 'String',
    group: 'String',
    // internally we have 4 className, they are 'entry--point--default', 'entry--point--success', 'entry--point--warn', 'entry--point--info'
    // you can also specify your own class and add it to SPA. The class shouldn't be in scoped style
    className: 'String'
}

template

<d3-timeline
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px"
    @range-updated="(dateTimeStart, dateTimeEnd) => yourMethod(dateTimeStart, dateTimeEnd)">
</d3-timeline>

options

events

Functional

###d3Player

This component is like d3Timeline. The difference is that d3Player has no support for group and is designed to simulate trajectories and to replay trajectories, . It will also trigger an event to tell us the dateTime of the cursor and the entries it is now passing.

template

<d3-player
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px"
    @range-updated="(dateTimeStart, dateTimeEnd) => yourMethod(dateTimeStart, dateTimeEnd)"
    @reference-updated="(dateTimeRange, entries) => yourMethod(dateTimeRange, entries)">
</d3-player>

options

events

###d3HorizontalSlider

This component is make it more simple to choose a value in a range. This range can be a range of color, date or number. It takes a min and max as data.

template

<d3-horizontal-slider
    :min="min"
    :max="max"
    :margin="margin"
    :options="options"
    @input="(val) => yourMethod(val)"
    width="100%"
    height="100%">
</d3-horizontal-slider>

options

###d3VerticalSlider

This component is make it more simple to choose a value in a range. This range can be a range of color, date or number. It takes a min and max as data.

template

<d3-vertical-slider
    :min="min"
    :max="max"
    :margin="margin"
    :options="options"
    @input="(val) => yourMethod(val)"
    width="100%"
    height="100%">
</d3-vertical-slider>

options

Layout

###d3Tree

This component is for showing tree layout which is recursive. It takes an object of Hierarchical layouts as data.

hierarchical layout object

{
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

template

<d3-tree
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-tree>

options

###d3Cluster

This component is like d3-tree but with all leaf nodes are at the same height. It takes an object of Hierarchical layouts as data.

hierarchical layout object

{
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

template

<d3-cluster
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-cluster>

options

###d3ICicleHorizontal

This component is for show icicle horizontal layout which is recursive. It takes an object of Hierarchical layouts as data.

template

<d3-icicle-horizontal
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-icicle-horizontal>

options

###d3ICicleVertical

This component is for show icicle vertical layout which is recursive. It takes an object of Hierarchical layouts as data.

template

<d3-icicle-vertical
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-icicle-vertical>

options

###d3Sunburst

This component is for showing sunburst layout. It takes an object of Hierarchical layouts as data.

hierarchical layout object

{
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

template

<d3-sunburst
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-sunburst>

options

###d3Pack

This component is for showing pack layout. It takes an object of Hierarchical layouts as data.

hierarchical layout object

{
  "name": "A1",
  "children": [
    {
      "name": "B1",
      "children": [
        {
          "name": "C1",
          "value": 100
        },
        {
          "name": "C2",
          "value": 300
        },
        {
          "name": "C3",
          "value": 200
        }
      ]
    },
    {
      "name": "B2",
      "value": 200
    }
  ]
}

template

<d3-pack
    :data="data"
    :options="options"
    :margin="margin"
    width="100%"
    height="300px">
</d3-pack>

options

ToDo

• d3ColorPicker
• d3Gantt
• d3Gauge
• d3Goal
• d3HeatMap
• d3RadialBar
• d3RadialSector
• d3RadialLine
• d3ScatterPlot
• d3Table
• d3WordCloud
• d3Markdown
• d3JsonViewer
• d3LReplay

License

MIT