Home

Awesome

Vs

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

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.

d3Metric

template

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

options

keydescriptiontypedefault
axisXLabelhorizontal label which will be put above the datastring OR nullnull
axisLabelFontSizelabel font sizenumber12
axisLabelFontWeightlabel font weightnumber400
axisLabelFontOpacitylabel font opacitynumber ([0, 1])0.5
metricLabelColormetric colorstring (rgb, hex, rgba, hsl...)#000000
metricLabelFontSizemetric font sizenumber120
metricLabelFontWeightmetric font weightnumber900
metricLabelFontOpacitymetric font opacitynumber ([0, 1])0.5
metricTitlemetric tooltipfunctiond => d
metricPrecisionmetric precisionnumber2

###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].

d3Circle

template

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

options

keydescriptiontypedefault
innerRadiusRatioinnerRadius / outerRadiusnumber0.8
circleBackgroundcircle background colorstring (rgb, hex, rgba, hsl...)rgb(230, 237, 244)
circleForegroundcircle foreground colorstring (rgb, hex, rgba, hsl...)rgb(0, 181, 241)
labelColorlabel colorstring (rgb, hex, rgba, hsl...)rgb(0, 181, 241)
labelFontSizelabel font sizenumber50
labelFontWeightlabel font weightnumber900
labelFontOpacitylabel font opacitynumber0.5
precisionprecision of datanumber2
animationDurationduration of animationnumber1000
delaydelay of animation (milliseconds)number50

###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.

d3Pie

template

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

options

keydescriptiontypedefault
innerRadiusinner radiusnumber50
cornerRadiuscorner radiusnumber0
padAnglepad angle (percentage)number0.01
arcTitletooltipfunctiond => d.data.key + '<br>' + d.data.value
arcLabellabel will be shown in arcsstring OR nullnull
axisXLabellabel of axis xstring OR nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeight abel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber ([0, 1])1
arcLabelFontSizelabel font size of arcsnumber9
arcLabelFontWeight abel font weight of arcsnumber400
arcLabelFontOpacitylabel font opacity of arcsnumber ([0, 1])0.5
animationDurationduration of animationnumber1000
defaultColorcolor will be used when there is only one item in arraystring (rgb, hex, rgba, hsl...)rgb(175, 240, 91)

###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.

d3VerticalBar

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

keydescriptiontypedefault
fillbar internal colorstring (rgb, hex, hsl...)#6eadc1
strokebar edge colorstring (rgb, hex, hsl...)#6eadc1
fillOpacitybar internal color opacitynumber0.6
strokeOpacitybar edge color opacitynumber1
barTitletooltipfunctiond => d.value
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXLaneHeightlane height of axis xnumber60
axisYLaneWidthlane width of axis ynumber35
axisXIntervalused when data is of type date_histogram, it will be used to calculate the date format of axis x. (unit: ms)number OR nullnull
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
animationDurationduration of animationnumber1000
delaydelay of animation (milliseconds)number50
axisYTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse
yAxisRulerif the ruler of the axis y should be enabledbooleantrue

events

namedescriptionarguments
range-updatednew range has been chosen by using the brush or by clicking a bar(dateTimeStart, dateTimeEnd)

###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.

d3HorizontalBar

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

keydescriptiontypedefault
fillbar internal colorstring (rgb, hex, hsl...)#6eadc1
strokebar edge colorstring (rgb, hex, hsl...)#6eadc1
fillOpacitybar internal color opacitynumber0.6
strokeOpacitybar edge color opacitynumber1
barTitletooltipfunctiond => d.value
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXLaneHeightlane height of axis xnumber35
axisYLaneWidthlane width of axis ynumber120
axisYIntervalused when data is of type date_histogram, it will be used to calculate the date format of axis y. (unit: ms)number OR nullnull
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
animationDurationduration of animationnumber1000
delaydelay of animation (milliseconds)number50
axisXTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse

events

namedescriptionarguments
range-updatednew range has been chosen by using the brush or by clicking a bar(dateTimeStart, dateTimeEnd)

###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.

d3Line

template

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

options

keydescriptiontypedefault
strokeline edge colorstring (rgb, hex, rgba, hsl...)rgb(188, 82, 188)
strokeWidthline edge widthnumber2
axisXLaneHeightlane height of the axis xnumber60
axisYLaneWidthlane width of the axis ynumber35
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber1
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
circleRadiusemphasis circle radiusnumber5
circleColoremphasis circle colornumberrgb(188, 82, 188)
circleTitleemphasis circle tooltipfunctiond => d.value
curvecurve algorithmstringcurveCardinal
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXIntervalused when data is of type date_histogram, it will be used to decide the date format of axis xnumber OR nullnull
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
axisXTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse
yAxisRulerif the ruler of the axis y should be enabledbooleantrue

events

namedescriptionarguments
range-updated`new range has been chosen by using the brush(dateTimeStart, dateTimeEnd)

###d3Area

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

d3Area

template

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

options

keydescriptiontypedefault
fillarea path internal colorstring (rgb, hex, hsl...)#6eadc1
fillOpacityarea path internal color opacitynumber0.6
strokearea path edge colorstring (rgb, hex, rgba, hsl...)rgb(188, 82, 188)
strokeOpacityarea path edge color opacitynumber1
areaTitletooltipfunctiond => d.value
axisXLaneHeightlane height of the axis xnumber35
axisYLaneWidthlane width of the axis ynumber60
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber1
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
curvecurve algorithmstringcurveLinear
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
yAxisRulerif the ruler of the axis y should be enabledbooleantrue

###d3MultiLine

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

d3MultiLine

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

keydescriptiontypedefault
strokeWidthline edge widthnumber2
axisXLaneHeightlane height of the axis xnumber60
axisYLaneWidthlane width of the axis ynumber35
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber1
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
circleRadiusemphasis circle radiusnumber5
circleTitleemphasis circle tooltipfunctiond => d.value
crossWidthlegend cross line edge widthnumber2
crossColorlegend cross line colorstring (rgb, hex, rgba, hsl...)white
curvecurve algorithmstringcurveCardinal
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXIntervalused when data is of type date_histogram, it will be used to decide the date format of axis x. (unit: ms)number OR nullnull
axisXTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
yAxisRulerif the ruler of the axis y should be enabledbooleanfalse
axisXGroupLabelLaneHeightgroup lane heightnumber20
axisXGroupLabelFillColorOpacitygroup legend internal color opacitynumber1
axisXGroupLabelBorderColorOpacitygroup legend edge color opacitynumber0.6
axisXGroupLabelGapgroup legend gapnumber10

###d3GroupedArea

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

d3GroupedArea

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

keydescriptiontypedefault
fillarea path internal colorstring (rgb, hex, hsl...)#6eadc1
axisXLaneHeightlane height of the axis xnumber35
axisYLaneWidthlane width of the axis ynumber60
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber1
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
circleRadiusemphasis circle radiusnumber5
groupedAreaTitleemphasis circle tooltipfunctiond => d.value
crossWidthlegend cross line edge widthnumber2
crossColorlegend cross line colorstring (rgb, hex, rgba, hsl...)white
curvecurve algorithmstringcurveLinear
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXIntervalused when data is of type date_histogram, it will be used to decide the date format of axis x. (unit: ms)number OR nullnull
axisXTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
yAxisRulerif the ruler of the axis y should be enabledbooleantrue
axisXGroupLabelLaneHeightgroup lane heightnumber20
axisXGroupLabelFillColorOpacitygroup legend internal color opacitynumber1
axisXGroupLabelBorderColorOpacitygroup legend edge color opacitynumber0.6
axisXGroupLabelGapgroup legend gapnumber10

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'
}

d3SankeyCircular

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

keydescriptiontypedefault
nodeWidthnode widthnumber20
nodeTextFontSizenode text font sizenumber12
nodeTextFontWeightnode text font weightnumber600
nodeTextFontOpacitynode text font opacitynumber1
circularLinkGapcircular link gapnumber4
circularLinkColorcircularLinkColorstring (rgb, hex, rgba, hsl...)red
linkColorlink colorstring (rgb, hex, rgba, hsl...)black
gapLengthgap lengthnumber150
arrowLengtharrow lengthnumber10
arrowHeadSizearrow head sizenumber4
axisXSelectBoxLabelselect box labelstringMax interval among the same trajectory
axisXSelectBoxLabelFontSizeselect box label font sizenumber12
axisXSelectBoxLabelFontWeightselect box label font weightnumber400
axisXSelectBoxLabelFontOpacityselect box label font opacitynumber0.5
axisXLabellabel of axis xstring OR nullnull
axisXLabelFontSizelabel font size of axis xnumber14
axisXLabelFontWeightlabel font weight of axis xnumber600
axisXLabelFontOpacitylabel font opacitynumber1

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'}.

d3Timelion

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

keydescriptiontypedefault
fillbar internal colorstring (rgb, hex, hsl...)#6eadc1
strokebar edge colorstring (rgb, hex, hsl...)#6eadc1
fillOpacitybar internal color opacitynumber0.6
strokeOpacitybar edge color opacitynumber1
barTitletooltipfunctiond => d.value
tickSizetick height/width of axisnumber10
tickPaddingtick paddingnumber8
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5
axisXLabellabel of axis xstring or nullnull
axisYLabellabel of axis ystring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
axisXLaneHeightlane height of axis xnumber60
axisYLaneWidthlane width of axis ynumber60
axisXIntervalused when data is of type date_histogram, it will be used to calculate the date format of axis x. (unit: ms)number OR nullnull
isAxisPathShowif the axis path will be shownbooleantrue
isAxisTickShowif the axis tick will be shownbooleantrue
animationDurationduration of animationnumber1000
delaydelay of animation (milliseconds)number50
axisYTickFormatd3-format supportstring.2s
negativethe axis y should start at 0 or notbooleanfalse
nicethe tick number of axis should be rounded or notbooleanfalse
timeRangeLabelFontSizetime range label font sizenumber12
timeRangeLabelFontWeighttime range label font weightnumber400
timeRangeLabelFontOpacitytime range label font opacitynumber0.5
yAxisRulerif the ruler of the axis y should be enabledbooleantrue

events

eventdescriptionarguments
range-updateduser has chosen a new time range by using the brush(dateTimeStart, dateTimeEnd)
interval-updateduser has changed the time interval by using the select box(interval)

###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.

d3Timline

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

keydescriptiontypedefault
intervalCornerRadiuscorner radius of Interval entry number4
symbolSizesymbol size of Point entry number400
groupLabelFontSizegroup label font sizenumber12
groupLabelFontWeightgroup label font weightnumber400
groupLabelFontOpacitygroup label font opacitynumber1
groupLaneWidthgroup lane widthnumber200
tickSizetick size of axisnumber10
tickPaddingtick size paddingnumber8
axisXLaneHeightlane height of axis xnumber40
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5
axisXLabellabel of axis xstring or nullnull
axisLabelFontSizelabel font sizenumber14
axisLabelFontWeightlabel font weightnumber600
axisLabelFontOpacitylabel font opacitynumber1
backgroundColorbackground colorstring (rgb, hex, rgba, hsl...)rgba(255, 255, 255, 0.125)
borderRadiusborder radiusnumber0
borderWidthborder widthnumber2
borderColorborder colorstring (rgb, hex, rgba, hsl...)rgba(0, 0, 0, .125)
boundingLineWidthbounding line widthnumber2
boundingLineColorbounding line colorstring (rgb, hex, rgba, hesl...)rgba(0, 0, 0, .125)
currentTimeLineWidthcurrent time line widthnumber2
currentTimeLineColorcurrent time line colorstring (rgb, hex, rgba, hsl...)rgba(255, 56, 96, 1)
liveTimerif live timer reference line should be enabledbooleantrue
liveTimerTicklive time reference line move intervalnumber (unit: ms)250
scaleExtentthe zoom rangeArray[0.5, Infinity]

events

eventdescriptionarguments
range-updatednew range selected(dateTimeStart, dateTimeEnd)

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.

d3Player

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

keydescriptiontypedefault
intervalCornerRadiuscorner radius of Interval entry number4
symbolSizesymbol size of Point entry number400
tickSizetick size of axisnumber10
tickPaddingtick size paddingnumber8
axisXLaneHeightlane height of axis xnumber40
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5
backgroundColorbackground colorstring (rgb, hex, rgba, hsl...)rgba(255, 255, 255, 0.125)
borderRadiusborder radiusnumber0
borderWidthborder widthnumber2
borderColorborder colorstring (rgb, hex, rgba, hsl...)rgba(0, 0, 0, .125)
boundingLineWidthbounding line widthnumber2
boundingLineColorbounding line colorstring (rgb, hex, rgba, hesl...)rgba(0, 0, 0, .125)
referenceLineWidthreference time line widthnumber4
referenceLineColorreference time line colorstring (rgb, hex, rgba, hsl...)rgba(255, 56, 96, 1)
overlayWidthcursor overlay rectangle widthnumber30

events

eventdescriptionarguments
reference-updatedreference cursor move(dateTimeRange, entries)
range-updatednew range selected(dateTimeStart, dateTimeEnd)

###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.

d3HorizontalSlider

template

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

options

keydescriptiontypedefault
trackStroketrack edge colorstring (rgb, hex, rgba, hsl...)#000
trackStrokeWidthtrack edge widthnumber10
trackStrokeOpacitytrack edge opacitynumber0.3
trackRoundedtrack round or notbooleantrue
trackInsetStrokeinset track edge colorstring (rgb, hex, rgba, hsl...)#ddd
trackInsetStrokeOpacityinset track edge color opacitynumber1
trackInsetStrokeWidthinset track edge widthnumber8
circleFillcircle handler internal colorstring (rgb, hex, rgba, hsl...)#fff
circleStrokecircle handler edge colorstring (rgb, hex, rgba, hsl...)#000
circleStrokeOpacitycircle handler edge color opacitynumber0.5
circleStrokeWidthcircle handler edge widthnumber1.25

###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.

d3VerticalSlider

template

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

options

keydescriptiontypedefault
trackStroketrack edge colorstring (rgb, hex, rgba, hsl...)#000
trackStrokeWidthtrack edge widthnumber10
trackStrokeOpacitytrack edge opacitynumber0.3
trackRoundedtrack round or notbooleantrue
trackInsetStrokeinset track edge colorstring (rgb, hex, rgba, hsl...)#ddd
trackInsetStrokeOpacityinset track edge color opacitynumber1
trackInsetStrokeWidthinset track edge widthnumber8
circleFillcircle handler internal colorstring (rgb, hex, rgba, hsl...)#fff
circleStrokecircle handler edge colorstring (rgb, hex, rgba, hsl...)#000
circleStrokeOpacitycircle handler edge color opacitynumber0.5
circleStrokeWidthcircle handler edge widthnumber1.25

Layout

###d3Tree

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

d3Tree

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

keydescriptiontypedefault
nodeTitletooltipfunctiond => d.data.key + '<br>' + 'd.data.value'
nodeFilltree node internal colorstring (rgb, hex, rgba, hsl...)#6eadc1
nodeStroketree node edge colorstring (rgb, hex, rgba, hsl...)#6eadc1
nodeFillOpacitytree node internal color opacitynumber0.6
nodeStrokeOpacitytree node edge color opacitynumber1
linkStrokelink edge colorstring (rgb, hex, rgba, hsl...)#6eadc1
linkStrokeWidthlink edge widthnumber1
linkStrokeOpacitylink edge color opacitynumber1
nodeRadiustree node circle radiusnumber10
axisXLabellabel of axis xstring or nullnull
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5

###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.

d3Cluster

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

keydescriptiontypedefault
nodeTitletooltipfunctiond => d.data.name + '<br>' + 'd.data.value'
nodeFilltree node internal colorstring (rgb, hex, rgba, hsl...)#6eadc1
nodeStroketree node edge colorstring (rgb, hex, rgba, hsl...)#6eadc1
nodeFillOpacitytree node internal color opacitynumber0.6
nodeStrokeOpacitytree node edge color opacitynumber1
linkStrokelink edge colorstring (rgb, hex, rgba, hsl...)#6eadc1
linkStrokeWidthlink edge widthnumber1
linkStrokeOpacitylink edge color opacitynumber1
nodeRadiustree node circle radiusnumber10
axisXLabellabel of axis xstring or nullnull
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5

###d3ICicleHorizontal

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

d3ICicleHorizontal

template

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

options

keydescriptiontypedefault
rectTitletooltipfunctiond => d.data.value
paddingpartition paddingnumber0
fillOpacitypartition internal color opacitynumber0.6
strokeOpacitypartition edge color opacitynumber1
axisXLabellabel of axis xstring or nullnull
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5

###d3ICicleVertical

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

d3ICicleVertical

template

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

options

keydescriptiontypedefault
rectTitletooltipfunctiond => d.data.value
paddingpartition paddingnumber0
fillOpacitypartition internal color opacitynumber0.6
strokeOpacitypartition edge color opacitynumber1
axisXLabellabel of axis xstring or nullnull
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5

###d3Sunburst

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

d3Sunburst

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

keydescriptiontypedefault
arcTitletooltipfunctiond => d.data.value
paddingpartition paddingnumber0
fillOpacitypartition internal color opacitynumber0.6
strokeOpacitypartition edge color opacitynumber1
axisXLabellabel of axis xstring or nullnull
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5

###d3Pack

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

d3Pack

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

keydescriptiontypedefault
circleTitletooltipfunctiond => d.data.key + '<br>' + d.data.value
circleFillOpacitypartition circle internal color opacitynumber0.6
circleStrokeOpacitypartition circle edge color opacitynumber1
axisXLabellabel of axis xstring or nullnull
axisFontSizeaxis text font sizenumber12
axisFontWeightaxis text font weightnumber400
axisFontOpacityaxis text font opacitynumber ([0, 1])0.5

ToDo

License

MIT