{"id":13481369,"url":"https://github.com/0x8f701/Vs","last_synced_at":"2025-03-27T12:30:49.246Z","repository":{"id":57211332,"uuid":"127124931","full_name":"0x8f701/Vs","owner":"0x8f701","description":"Vue Visualisation Package using d3.js and leaflet.","archived":false,"fork":false,"pushed_at":"2020-10-21T13:13:41.000Z","size":53643,"stargazers_count":169,"open_issues_count":2,"forks_count":29,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-24T20:05:11.274Z","etag":null,"topics":["d3v4","data-visualization","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0x8f701.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-28T10:37:29.000Z","updated_at":"2025-03-22T10:47:46.000Z","dependencies_parsed_at":"2022-08-30T13:11:46.394Z","dependency_job_id":null,"html_url":"https://github.com/0x8f701/Vs","commit_stats":null,"previous_names":["0x8f701/vs","gopherj/vs"],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x8f701%2FVs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x8f701%2FVs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x8f701%2FVs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0x8f701%2FVs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0x8f701","download_url":"https://codeload.github.com/0x8f701/Vs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844807,"owners_count":20681782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3v4","data-visualization","vuejs2"],"created_at":"2024-07-31T17:00:51.275Z","updated_at":"2025-03-27T12:30:46.759Z","avatar_url":"https://github.com/0x8f701.png","language":"Vue","readme":"# Vs\n\nVue Visualisation Package using `d3.js` and `leaflet`. See also:\n\n- [LayoutGrid](https://github.com/GopherJ/LayoutGrid)  :  Creating a powerful dashboard using `Vs` and `vue-grid-layout`\n\n\n\n## Installation\n\n```javascript\nnpm i -S d3-vs\n```\n\n\n\n## Usage\n\n```javascript\nimport Vs from 'd3-vs';\n\n// install globally all components\nVue.use(Vs);\n\n// import only the components that you need and register it manually\nimport {\n    // Flow Of transition\n    d3SankeyCircular,\n\n    // Time Serie\n    d3Timelion,\n    d3Timeline,\n\n    // Basic\n    d3Pie,\n    d3Line,\n    d3Metric,\n    d3MultiLine,\n    d3HorizontalBar,\n    d3VerticalBar,\n    d3GroupedArea,\n    d3Area,\n    d3Circle,\n\n    // Functional\n    d3Player,\n    d3HorizontalSlider,\n    d3VerticalSlider,\n\n    // Layout\n    d3Sunburst,\n    d3Tree,\n    d3Pack,\n    d3Cluster,\n    d3ICicleVertical,\n    d3ICicleHorizontal,\n\n    // Leaflet\n    d3LChoropleth,\n    d3LHeat\n} from 'd3-vs';\n```\n\n\n\n## Basic\n\n\n*###d3Metric*\n\nThis component is for showing simple scientific data. It accepts the type `Number` as data.\n\n![d3Metric](./images/d3-metric.PNG)\n\n`template`\n\n```vue\n\u003cd3-metric\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-metric\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`axisXLabel`|`horizontal label which will be put above the data`|`string OR null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`12`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`400`|\n|`axisLabelFontOpacity`|`label font opacity`|`number ([0, 1])`|`0.5`|\n|`metricLabelColor`|`metric color`|`string (rgb, hex, rgba, hsl...)`|`#000000`|\n|`metricLabelFontSize`|`metric font size`|`number`|`120`|\n|`metricLabelFontWeight`|`metric font weight`|`number`|`900`|\n|`metricLabelFontOpacity`|`metric font opacity`|`number ([0, 1])`|`0.5`|\n|`metricTitle`|`metric tooltip`|`function`|`d =\u003e d`|\n|`metricPrecision`|`metric precision`|`number`|`2`|\n\n\n\n*###d3Circle*\n\nThis component is for showing simple percentage data. It accepts the type `Number` as data. The data must be in the range `[0, 1]`.\n\n![d3Circle](./images/d3-circle.PNG)\n\n`template`\n\n```vue\n\u003cd3-circle\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-circle\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`innerRadiusRatio`|`innerRadius / outerRadius`|`number`|`0.8`|\n|`circleBackground`|`circle background color`|`string (rgb, hex, rgba, hsl...)`|`rgb(230, 237, 244)`|\n|`circleForeground`|`circle foreground color`|`string (rgb, hex, rgba, hsl...)`|`rgb(0, 181, 241)`|\n|`labelColor`|`label color`|`string (rgb, hex, rgba, hsl...)`|`rgb(0, 181, 241)`|\n|`labelFontSize`|`label font size`|`number`|`50`|\n|`labelFontWeight`|`label font weight`|`number`|`900`|\n|`labelFontOpacity`|`label font opacity`|`number`|`0.5`|\n|`precision`|`precision of data`|`number`|`2`|\n|`animationDuration`|`duration of animation`|`number`|`1000`|\n|`delay`|`delay of animation (milliseconds)`|`number`|`50`|\n\n\n\n*###d3Pie*\n\nThis 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\nin tooltip, `value` will be used to calculate the angle needed.\n\n![d3Pie](./images/d3-pie.PNG)\n\n`template`\n\n```vue\n\u003cd3-pie\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-pie\u003e\n```\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`innerRadius`|`inner radius`|`number`|`50`|\n|`cornerRadius`|`corner radius`|`number`|`0`|\n|`padAngle`|`pad angle (percentage)`|`number`|`0.01`|\n|`arcTitle`|`tooltip`|`function`|`d =\u003e d.data.key + '\u003cbr\u003e' + d.data.value`|\n|`arcLabel`|`label will be shown in arcs`|`string OR null`|`null`|\n|`axisXLabel`|`label of axis x`|`string OR null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|` abel font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number ([0, 1])`|`1`|\n|`arcLabelFontSize`|`label font size of arcs`|`number`|`9`|\n|`arcLabelFontWeight`|` abel font weight of arcs`|`number`|`400`|\n|`arcLabelFontOpacity`|`label font opacity of arcs`|`number ([0, 1])`|`0.5`|\n|`animationDuration`|`duration of animation`|`number`|`1000`|\n|`defaultColor`|`color will be used when there is only one item in array`|`string (rgb, hex, rgba, hsl...)`|`rgb(175, 240, 91)`|\n\n\n*###d3VerticalBar*\n\nThis 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\nused 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\nby using the brush or by clicking a bar if `options.axisXInterval` has been settled.\n\n![d3VerticalBar](./images/d3VerticalBar.gif)\n\n\n`template`\n\n```vue\n\u003cd3-vertical-bar\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    height=\"300px\"\u003e\n\u003c/d3-vertical-bar\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`fill`|`bar internal color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`stroke`|`bar edge color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`fillOpacity`|`bar internal color opacity`|`number`|`0.6`|\n|`strokeOpacity`|`bar edge color opacity`|`number`|`1`|\n|`barTitle`|`tooltip`|`function`|`d =\u003e d.value`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXLaneHeight`|`lane height of axis x`|`number`|`60`|\n|`axisYLaneWidth`|`lane width of axis y`|`number`|`35`|\n|`axisXInterval`|`used when data is of type date_histogram, it will be used to calculate the date format of axis x. (unit: ms)`|`number OR null`|`null`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`animationDuration`|`duration of animation`|`number`|`1000`|\n|`delay`|`delay of animation (milliseconds)`|`number`|`50`|\n|`axisYTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n|`yAxisRuler`|`if the ruler of the axis y should be enabled`|`boolean`|`true`|\n\n\n`events`\n\n|name|description|arguments|\n|:---|:---|:---|\n|`range-updated`|`new range has been chosen by using the brush or by clicking a bar`|`(dateTimeStart, dateTimeEnd)`|\n\n\n\n*###d3HorizontalBar*\n\nThis 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\nused 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\nby using the brush or by clicking a bar if `options.axisYInterval` has been settled.\n\n![d3HorizontalBar](./images/d3HorizontalBar.gif)\n\n`template`\n\n```vue\n\u003cd3-horizontal-bar\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-horizontal-bar\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`fill`|`bar internal color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`stroke`|`bar edge color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`fillOpacity`|`bar internal color opacity`|`number`|`0.6`|\n|`strokeOpacity`|`bar edge color opacity`|`number`|`1`|\n|`barTitle`|`tooltip`|`function`|`d =\u003e d.value`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXLaneHeight`|`lane height of axis x`|`number`|`35`|\n|`axisYLaneWidth`|`lane width of axis y`|`number`|`120`|\n|`axisYInterval`|`used when data is of type date_histogram, it will be used to calculate the date format of axis y. (unit: ms)`|`number OR null`|`null`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`animationDuration`|`duration of animation`|`number`|`1000`|\n|`delay`|`delay of animation (milliseconds)`|`number`|`50`|\n|`axisXTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n\n\n`events`\n\n|name|description|arguments|\n|:---|:---|:---|\n|`range-updated`|`new range has been chosen by using the brush or by clicking a bar`|`(dateTimeStart, dateTimeEnd)`|\n\n\n\n*###d3Line*\n\nThis 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\nused 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\nby using the brush.\n\n![d3Line](./images/d3Line.gif)\n\n`template`\n\n```vue\n\u003cd3-line\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-line\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`stroke`|`line edge color`|`string (rgb, hex, rgba, hsl...)`|`rgb(188, 82, 188)`|\n|`strokeWidth`|`line edge width`|`number`|`2`|\n|`axisXLaneHeight`|`lane height of the axis x`|`number`|`60`|\n|`axisYLaneWidth`|`lane width of the axis y`|`number`|`35`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number`|`1`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`circleRadius`|`emphasis circle radius`|`number`|`5`|\n|`circleColor`|`emphasis circle color`|`number`|`rgb(188, 82, 188)`|\n|`circleTitle`|`emphasis circle tooltip`|`function`|`d =\u003e d.value`|\n|`curve`|`curve algorithm`|`string`|`curveCardinal`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXInterval`|`used when data is of type date_histogram, it will be used to decide the date format of axis x`|`number OR null`|`null`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`axisXTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n|`yAxisRuler`|`if the ruler of the axis y should be enabled`|`boolean`|`true`|\n\n\n`events`\n\n|name|description|arguments|\n|:---|:---|:---|\n|`range-updated`|`new range has been chosen by using the brush|`(dateTimeStart, dateTimeEnd)`|\n\n\n*###d3Area*\n\nThis components is for show big date_histogram data, It takes an array of elements like `{key : 'Date', value : 'Number'}`.\n\n![d3Area](./images/d3Area.gif)\n\n`template`\n\n```vue\n\u003cd3-area\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-area\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`fill`|`area path internal color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`fillOpacity`|`area path internal color opacity`|`number`|`0.6`|\n|`stroke`|`area path edge color`|`string (rgb, hex, rgba, hsl...)`|`rgb(188, 82, 188)`|\n|`strokeOpacity`|`area path edge color opacity`|`number`|`1`|\n|`areaTitle`|`tooltip`|`function`|`d =\u003e d.value`|\n|`axisXLaneHeight`|`lane height of the axis x`|`number`|`35`|\n|`axisYLaneWidth`|`lane width of the axis y`|`number`|`60`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number`|`1`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`curve`|`curve algorithm`|`string`|`curveLinear`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`yAxisRuler`|`if the ruler of the axis y should be enabled`|`boolean`|`true`|\n\n\n\n*###d3MultiLine*\n\nThis component is for showing multiple lines together. It takes an array of elements like `{group: 'string', key : 'String|Date|Number', value: 'Number'}`.\n\n![d3MultiLine](./images/d3-multi-line.PNG)\n\n`template`\n\n```vue\n\u003cd3-multi-line\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-multi-line\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`strokeWidth`|`line edge width`|`number`|`2`|\n|`axisXLaneHeight`|`lane height of the axis x`|`number`|`60`|\n|`axisYLaneWidth`|`lane width of the axis y`|`number`|`35`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number`|`1`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`circleRadius`|`emphasis circle radius`|`number`|`5`|\n|`circleTitle`|`emphasis circle tooltip`|`function`|`d =\u003e d.value`|\n|`crossWidth`|`legend cross line edge width`|`number`|`2`|\n|`crossColor`|`legend cross line color`|`string (rgb, hex, rgba, hsl...)`|`white`|\n|`curve`|`curve algorithm`|`string`|`curveCardinal`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXInterval`|`used when data is of type date_histogram, it will be used to decide the date format of axis x. (unit: ms)`|`number OR null`|`null`|\n|`axisXTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`yAxisRuler`|`if the ruler of the axis y should be enabled`|`boolean`|`false`|\n|`axisXGroupLabelLaneHeight`|`group lane height`|`number`|`20`|\n|`axisXGroupLabelFillColorOpacity`|`group legend internal color opacity`|`number`|`1`|\n|`axisXGroupLabelBorderColorOpacity`|`group legend edge color opacity`|`number`|`0.6`|\n|`axisXGroupLabelGap`|`group legend gap`|`number`|`10`|\n\n\n\n\n\n*###d3GroupedArea*\n\nThis component is for showing multiple lines together. It takes an array of elements like `{group: 'string', key : 'String|Date|Number', value: 'Number'}`.\n\n![d3GroupedArea](./images/d3GroupedArea.gif)\n\n`template`\n\n```vue\n\u003cd3-grouped-area\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-grouped-area\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`fill`|`area path internal color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`axisXLaneHeight`|`lane height of the axis x`|`number`|`35`|\n|`axisYLaneWidth`|`lane width of the axis y`|`number`|`60`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number`|`1`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`circleRadius`|`emphasis circle radius`|`number`|`5`|\n|`groupedAreaTitle`|`emphasis circle tooltip`|`function`|`d =\u003e d.value`|\n|`crossWidth`|`legend cross line edge width`|`number`|`2`|\n|`crossColor`|`legend cross line color`|`string (rgb, hex, rgba, hsl...)`|`white`|\n|`curve`|`curve algorithm`|`string`|`curveLinear`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXInterval`|`used when data is of type date_histogram, it will be used to decide the date format of axis x. (unit: ms)`|`number OR null`|`null`|\n|`axisXTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`yAxisRuler`|`if the ruler of the axis y should be enabled`|`boolean`|`true`|\n|`axisXGroupLabelLaneHeight`|`group lane height`|`number`|`20`|\n|`axisXGroupLabelFillColorOpacity`|`group legend internal color opacity`|`number`|`1`|\n|`axisXGroupLabelBorderColorOpacity`|`group legend edge color opacity`|`number`|`0.6`|\n|`axisXGroupLabelGap`|`group legend gap`|`number`|`10`|\n\n\n\n## Flow Of Transitions\n\n*###d3SankeyCircular*\n\nThis 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\nlike:\n\n\n```javascript\n{\n    source: `String`,\n    target: `String`,\n    value: 'Number'\n}\n```\n\n![d3SankeyCircular](./images/d3SankeyCircular.gif)\n\n\n`template`\n\n```vue\n\u003cd3-sankey-circular\n    :nodes=\"nodes\"\n    :links=\"links\"\n    :options=\"options\"\n    :nodeTitle=\"nodeTitle\"\n    :linkTitle=\"linkTitle\"\n    @max-period-updated=\"(period) =\u003e yourMethod(period)\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-sankey-circular\u003e\n```\n\n`nodeTitle`\n\nTooltip of zone. Default to `d =\u003e ${d.name}\u003cbr\u003e${d.value} `.\n\n`linkTitle`\n\nTooltip of link. Default to `d =\u003e ${d.source.name} → ${d.target.name}\u003cbr\u003e${d.value}`.\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`nodeWidth`|`node width`|`number`|`20`|\n|`nodeTextFontSize`|`node text font size`|`number`|`12`|\n|`nodeTextFontWeight`|`node text font weight`|`number`|`600`|\n|`nodeTextFontOpacity`|`node text font opacity`|`number`|`1`|\n|`circularLinkGap`|`circular link gap`|`number`|`4`|\n|`circularLinkColor`|`circularLinkColor`|`string (rgb, hex, rgba, hsl...)`|`red`|\n|`linkColor`|`link color`|`string (rgb, hex, rgba, hsl...)`|`black`|\n|`gapLength`|`gap length`|`number`|`150`|\n|`arrowLength`|`arrow length`|`number`|`10`|\n|`arrowHeadSize`|`arrow head size`|`number`|`4`|\n|`axisXSelectBoxLabel`|`select box label`|`string`|`Max interval among the same trajectory`|\n|`axisXSelectBoxLabelFontSize`|`select box label font size`|`number`|`12`|\n|`axisXSelectBoxLabelFontWeight`|`select box label font weight`|`number`|`400`|\n|`axisXSelectBoxLabelFontOpacity`|`select box label font opacity`|`number`|`0.5`|\n|`axisXLabel`|`label of axis x`|`string OR null`|`null`|\n|`axisXLabelFontSize`|`label font size of axis x`|`number`|`14`|\n|`axisXLabelFontWeight`|`label font weight of axis x`|`number`|`600`|\n|`axisXLabelFontOpacity`|`label font opacity`|`number`|`1`|\n\n\n\n## Time Series\n\n\n*###d3Timelion*\n\nThis component is similar to `kibana timelion` with a interval select box. It accepts an array of elements like `{ key : 'Date', value: 'Number'}`.\n\n![d3Timelion](./images/d3Timelion.gif)\n\n`template`\n\n```vue\n\u003cd3-timelion\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e fetchDataWithCurrentInterval(dateTimeStart, dateTimeEnd)\"\n    @interval-updated=\"interval =\u003e fetchDataWithInterval(interval)\"\u003e\n\u003c/d3-timelion\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`fill`|`bar internal color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`stroke`|`bar edge color`|`string (rgb, hex, hsl...)`|`#6eadc1`|\n|`fillOpacity`|`bar internal color opacity`|`number`|`0.6`|\n|`strokeOpacity`|`bar edge color opacity`|`number`|`1`|\n|`barTitle`|`tooltip`|`function`|`d =\u003e d.value`|\n|`tickSize`|`tick height/width of axis`|`number`|`10`|\n|`tickPadding`|`tick padding`|`number`|`8`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisYLabel`|`label of axis y`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`axisXLaneHeight`|`lane height of axis x`|`number`|`60`|\n|`axisYLaneWidth`|`lane width of axis y`|`number`|`60`|\n|`axisXInterval`|`used when data is of type date_histogram, it will be used to calculate the date format of axis x. (unit: ms)`|`number OR null`|`null`|\n|`isAxisPathShow`|`if the axis path will be shown`|`boolean`|`true`|\n|`isAxisTickShow`|`if the axis tick will be shown`|`boolean`|`true`|\n|`animationDuration`|`duration of animation`|`number`|`1000`|\n|`delay`|`delay of animation (milliseconds)`|`number`|`50`|\n|`axisYTickFormat`|`d3-format support`|`string`|`.2s`|\n|`negative`|`the axis y should start at 0 or not`|`boolean`|`false`|\n|`nice`|`the tick number of axis should be rounded or not`|`boolean`|`false`|\n|`timeRangeLabelFontSize`|`time range label font size`|`number`|`12`|\n|`timeRangeLabelFontWeight`|`time range label font weight`|`number`|`400`|\n|`timeRangeLabelFontOpacity`|`time range label font opacity`|`number`|`0.5`|\n|`yAxisRuler`|`if the ruler of the axis y should be enabled`|`boolean`|`true`|\n\n`events`\n\n|event|description|arguments|\n|:---|:---|:---|\n|`range-updated`|`user has chosen a new time range by using the brush`|`(dateTimeStart, dateTimeEnd)`|\n|`interval-updated`|`user has changed the time interval by using the select box`|`(interval)`|\n\n\n\n*###d3Timeline*\n\nThis 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.\n\n![d3Timline](./images/d3Timeline.gif)\n\nTo specify an entry `Point`:\n\n```javascript\n{\n   at: 'Date',\n   // tooltip\n   title: 'String',\n   group: 'String',\n   // internally we have 4 className, they are 'entry--point--default', 'entry--point--success', 'entry--point--warn', 'entry--point--info'\n   // you can also specify your own class and add it to SPA. The class shouldn't be in scoped style\n   className: 'String',\n   // it supports 7 symbols, they are 'symbolCircle', 'symbolCross', 'symbolDiamond', 'symbolSquare', 'symbolStar', 'symbolTriangle', 'symbolWye'\n   symbol: 'String'\n}\n```\n\nTo specify an entry 'Interval':\n\n```javascript\n{\n    from : 'Date',\n    to: 'Date',\n    // tooltip\n    title: 'String',\n    label: 'String',\n    group: 'String',\n    // internally we have 4 className, they are 'entry--point--default', 'entry--point--success', 'entry--point--warn', 'entry--point--info'\n    // you can also specify your own class and add it to SPA. The class shouldn't be in scoped style\n    className: 'String'\n}\n```\n\n\n`template`\n\n```vue\n\u003cd3-timeline\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e yourMethod(dateTimeStart, dateTimeEnd)\"\u003e\n\u003c/d3-timeline\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`intervalCornerRadius`|`corner radius of Interval entry `|`number`|`4`|\n|`symbolSize`|`symbol size of Point entry `|`number`|`400`|\n|`groupLabelFontSize`|`group label font size`|`number`|`12`|\n|`groupLabelFontWeight`|`group label font weight`|`number`|`400`|\n|`groupLabelFontOpacity`|`group label font opacity`|`number`|`1`|\n|`groupLaneWidth`|`group lane width`|`number`|`200`|\n|`tickSize`|`tick size of axis`|`number`|`10`|\n|`tickPadding`|`tick size padding`|`number`|`8`|\n|`axisXLaneHeight`|`lane height of axis x`|`number`|`40`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisLabelFontSize`|`label font size`|`number`|`14`|\n|`axisLabelFontWeight`|`label font weight`|`number`|`600`|\n|`axisLabelFontOpacity`|`label font opacity`|`number`|`1`|\n|`backgroundColor`|`background color`|`string (rgb, hex, rgba, hsl...)`|`rgba(255, 255, 255, 0.125)`|\n|`borderRadius`|`border radius`|`number`|`0`|\n|`borderWidth`|`border width`|`number`|`2`|\n|`borderColor`|`border color`|`string (rgb, hex, rgba, hsl...)`|`rgba(0, 0, 0, .125)`|\n|`boundingLineWidth`|`bounding line width`|`number`|`2`|\n|`boundingLineColor`|`bounding line color`|`string (rgb, hex, rgba, hesl...)`|`rgba(0, 0, 0, .125)`|\n|`currentTimeLineWidth`|`current time line width`|`number`|`2`|\n|`currentTimeLineColor`|`current time line color`|`string (rgb, hex, rgba, hsl...)`|`rgba(255, 56, 96, 1)`|\n|`liveTimer`|`if live timer reference line should be enabled`|`boolean`|`true`|\n|`liveTimerTick`|`live time reference line move interval`|`number (unit: ms)`|`250`|\n|`scaleExtent`|`the zoom range`|`Array`|`[0.5, Infinity]`|\n\n`events`\n\n|event|description|arguments|\n|:---|:---|:---|\n|`range-updated`|`new range selected`|`(dateTimeStart, dateTimeEnd)`|\n\n\n\n## Functional\n\n*###d3Player*\n\nThis component is like `d3Timeline`. The difference is that `d3Player` has no support for group and is designed to simulate trajectories and to replay trajectories,\n. It will also trigger an event to tell us the dateTime of the cursor and the entries it is now passing.\n\n![d3Player](./images/d3Player.gif)\n\n`template`\n\n```vue\n\u003cd3-player\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\n    @range-updated=\"(dateTimeStart, dateTimeEnd) =\u003e yourMethod(dateTimeStart, dateTimeEnd)\"\n    @reference-updated=\"(dateTimeRange, entries) =\u003e yourMethod(dateTimeRange, entries)\"\u003e\n\u003c/d3-player\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`intervalCornerRadius`|`corner radius of Interval entry `|`number`|`4`|\n|`symbolSize`|`symbol size of Point entry `|`number`|`400`|\n|`tickSize`|`tick size of axis`|`number`|`10`|\n|`tickPadding`|`tick size padding`|`number`|`8`|\n|`axisXLaneHeight`|`lane height of axis x`|`number`|`40`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n|`backgroundColor`|`background color`|`string (rgb, hex, rgba, hsl...)`|`rgba(255, 255, 255, 0.125)`|\n|`borderRadius`|`border radius`|`number`|`0`|\n|`borderWidth`|`border width`|`number`|`2`|\n|`borderColor`|`border color`|`string (rgb, hex, rgba, hsl...)`|`rgba(0, 0, 0, .125)`|\n|`boundingLineWidth`|`bounding line width`|`number`|`2`|\n|`boundingLineColor`|`bounding line color`|`string (rgb, hex, rgba, hesl...)`|`rgba(0, 0, 0, .125)`|\n|`referenceLineWidth`|`reference time line width`|`number`|`4`|\n|`referenceLineColor`|`reference time line color`|`string (rgb, hex, rgba, hsl...)`|`rgba(255, 56, 96, 1)`|\n|`overlayWidth`|`cursor overlay rectangle width`|`number`|`30`|\n\n`events`\n\n|event|description|arguments|\n|:---|:---|:---|\n|`reference-updated`|`reference cursor move`|`(dateTimeRange, entries)`|\n|`range-updated`|`new range selected`|`(dateTimeStart, dateTimeEnd)`|\n\n\n*###d3HorizontalSlider*\n\nThis 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`\nas data.\n\n![d3HorizontalSlider](./images/d3HorizontalSlider.gif)\n\n`template`\n\n```vue\n\u003cd3-horizontal-slider\n    :min=\"min\"\n    :max=\"max\"\n    :margin=\"margin\"\n    :options=\"options\"\n    @input=\"(val) =\u003e yourMethod(val)\"\n    width=\"100%\"\n    height=\"100%\"\u003e\n\u003c/d3-horizontal-slider\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`trackStroke`|`track edge color`|`string (rgb, hex, rgba, hsl...)`|`#000`|\n|`trackStrokeWidth`|`track edge width`|`number`|`10`|\n|`trackStrokeOpacity`|`track edge opacity`|`number`|`0.3`|\n|`trackRounded`|`track round or not`|`boolean`|`true`|\n|`trackInsetStroke`|`inset track edge color`|`string (rgb, hex, rgba, hsl...)`|`#ddd`|\n|`trackInsetStrokeOpacity`|`inset track edge color opacity`|`number`|`1`|\n|`trackInsetStrokeWidth`|`inset track edge width`|`number`|`8`|\n|`circleFill`|`circle handler internal color`|`string (rgb, hex, rgba, hsl...)`|`#fff`|\n|`circleStroke`|`circle handler edge color`|`string (rgb, hex, rgba, hsl...)`|`#000`|\n|`circleStrokeOpacity`|`circle handler edge color opacity`|`number`|`0.5`|\n|`circleStrokeWidth`|`circle handler edge width`|`number`|`1.25`|\n\n\n\n\n\n*###d3VerticalSlider*\n\nThis 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`\nas data.\n\n![d3VerticalSlider](./images/d3VerticalSlider.gif)\n\n`template`\n\n```vue\n\u003cd3-vertical-slider\n    :min=\"min\"\n    :max=\"max\"\n    :margin=\"margin\"\n    :options=\"options\"\n    @input=\"(val) =\u003e yourMethod(val)\"\n    width=\"100%\"\n    height=\"100%\"\u003e\n\u003c/d3-vertical-slider\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`trackStroke`|`track edge color`|`string (rgb, hex, rgba, hsl...)`|`#000`|\n|`trackStrokeWidth`|`track edge width`|`number`|`10`|\n|`trackStrokeOpacity`|`track edge opacity`|`number`|`0.3`|\n|`trackRounded`|`track round or not`|`boolean`|`true`|\n|`trackInsetStroke`|`inset track edge color`|`string (rgb, hex, rgba, hsl...)`|`#ddd`|\n|`trackInsetStrokeOpacity`|`inset track edge color opacity`|`number`|`1`|\n|`trackInsetStrokeWidth`|`inset track edge width`|`number`|`8`|\n|`circleFill`|`circle handler internal color`|`string (rgb, hex, rgba, hsl...)`|`#fff`|\n|`circleStroke`|`circle handler edge color`|`string (rgb, hex, rgba, hsl...)`|`#000`|\n|`circleStrokeOpacity`|`circle handler edge color opacity`|`number`|`0.5`|\n|`circleStrokeWidth`|`circle handler edge width`|`number`|`1.25`|\n\n\n## Layout\n\n*###d3Tree*\n\nThis component is for showing `tree` layout which is recursive. It takes an object of `Hierarchical layouts` as data.\n\n![d3Tree](./images/d3-tree.PNG)\n\n`hierarchical layout object`\n\n```javascript\n{\n  \"name\": \"A1\",\n  \"children\": [\n    {\n      \"name\": \"B1\",\n      \"children\": [\n        {\n          \"name\": \"C1\",\n          \"value\": 100\n        },\n        {\n          \"name\": \"C2\",\n          \"value\": 300\n        },\n        {\n          \"name\": \"C3\",\n          \"value\": 200\n        }\n      ]\n    },\n    {\n      \"name\": \"B2\",\n      \"value\": 200\n    }\n  ]\n}\n```\n\n`template`\n\n```vue\n\u003cd3-tree\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-tree\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`nodeTitle`|`tooltip`|`function`|`d =\u003e d.data.key + '\u003cbr\u003e' + 'd.data.value'`|\n|`nodeFill`|`tree node internal color`|`string (rgb, hex, rgba, hsl...)`|`#6eadc1`|\n|`nodeStroke`|`tree node edge color`|`string (rgb, hex, rgba, hsl...)`|`#6eadc1`|\n|`nodeFillOpacity`|`tree node internal color opacity`|`number`|`0.6`|\n|`nodeStrokeOpacity`|`tree node edge color opacity`|`number`|`1`|\n|`linkStroke`|`link edge color`|`string (rgb, hex, rgba, hsl...)`|`#6eadc1`|\n|`linkStrokeWidth`|`link edge width`|`number`|`1`|\n|`linkStrokeOpacity`|`link edge color opacity`|`number`|`1`|\n|`nodeRadius`|`tree node circle radius`|`number`|`10`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n\n\n*###d3Cluster*\n\nThis component is like `d3-tree` but with all leaf nodes are at the same height. It takes an object of `Hierarchical layouts` as data.\n\n![d3Cluster](./images/d3-cluster.PNG)\n\n`hierarchical layout object`\n\n```javascript\n{\n  \"name\": \"A1\",\n  \"children\": [\n    {\n      \"name\": \"B1\",\n      \"children\": [\n        {\n          \"name\": \"C1\",\n          \"value\": 100\n        },\n        {\n          \"name\": \"C2\",\n          \"value\": 300\n        },\n        {\n          \"name\": \"C3\",\n          \"value\": 200\n        }\n      ]\n    },\n    {\n      \"name\": \"B2\",\n      \"value\": 200\n    }\n  ]\n}\n```\n\n`template`\n\n```vue\n\u003cd3-cluster\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-cluster\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`nodeTitle`|`tooltip`|`function`|`d =\u003e d.data.name + '\u003cbr\u003e' + 'd.data.value'`|\n|`nodeFill`|`tree node internal color`|`string (rgb, hex, rgba, hsl...)`|`#6eadc1`|\n|`nodeStroke`|`tree node edge color`|`string (rgb, hex, rgba, hsl...)`|`#6eadc1`|\n|`nodeFillOpacity`|`tree node internal color opacity`|`number`|`0.6`|\n|`nodeStrokeOpacity`|`tree node edge color opacity`|`number`|`1`|\n|`linkStroke`|`link edge color`|`string (rgb, hex, rgba, hsl...)`|`#6eadc1`|\n|`linkStrokeWidth`|`link edge width`|`number`|`1`|\n|`linkStrokeOpacity`|`link edge color opacity`|`number`|`1`|\n|`nodeRadius`|`tree node circle radius`|`number`|`10`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n\n\n*###d3ICicleHorizontal*\n\nThis component is for show `icicle horizontal` layout which is recursive. It takes an object of `Hierarchical layouts` as data.\n\n![d3ICicleHorizontal](./images/d3-icicle-horizontal.PNG)\n\n`template`\n\n```vue\n\u003cd3-icicle-horizontal\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-icicle-horizontal\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`rectTitle`|`tooltip`|`function`|`d =\u003e d.data.value`|\n|`padding`|`partition padding`|`number`|`0`|\n|`fillOpacity`|`partition internal color opacity`|`number`|`0.6`|\n|`strokeOpacity`|`partition edge color opacity`|`number`|`1`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n\n\n\n*###d3ICicleVertical*\n\nThis component is for show `icicle vertical` layout which is recursive. It takes an object of `Hierarchical layouts` as data.\n\n![d3ICicleVertical](./images/d3-icicle-vertical.PNG)\n\n`template`\n\n```vue\n\u003cd3-icicle-vertical\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-icicle-vertical\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`rectTitle`|`tooltip`|`function`|`d =\u003e d.data.value`|\n|`padding`|`partition padding`|`number`|`0`|\n|`fillOpacity`|`partition internal color opacity`|`number`|`0.6`|\n|`strokeOpacity`|`partition edge color opacity`|`number`|`1`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n\n\n\n*###d3Sunburst*\n\nThis component is for showing `sunburst` layout. It takes an object of `Hierarchical layouts` as data.\n\n![d3Sunburst](./images/d3-sunburst.PNG)\n\n`hierarchical layout object`\n\n```javascript\n{\n  \"name\": \"A1\",\n  \"children\": [\n    {\n      \"name\": \"B1\",\n      \"children\": [\n        {\n          \"name\": \"C1\",\n          \"value\": 100\n        },\n        {\n          \"name\": \"C2\",\n          \"value\": 300\n        },\n        {\n          \"name\": \"C3\",\n          \"value\": 200\n        }\n      ]\n    },\n    {\n      \"name\": \"B2\",\n      \"value\": 200\n    }\n  ]\n}\n```\n\n`template`\n\n```vue\n\u003cd3-sunburst\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-sunburst\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`arcTitle`|`tooltip`|`function`|`d =\u003e d.data.value`|\n|`padding`|`partition padding`|`number`|`0`|\n|`fillOpacity`|`partition internal color opacity`|`number`|`0.6`|\n|`strokeOpacity`|`partition edge color opacity`|`number`|`1`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n\n*###d3Pack*\n\nThis component is for showing `pack` layout. It takes an object of `Hierarchical layouts` as data.\n\n![d3Pack](./images/d3-pack.PNG)\n\n`hierarchical layout object`\n\n```javascript\n{\n  \"name\": \"A1\",\n  \"children\": [\n    {\n      \"name\": \"B1\",\n      \"children\": [\n        {\n          \"name\": \"C1\",\n          \"value\": 100\n        },\n        {\n          \"name\": \"C2\",\n          \"value\": 300\n        },\n        {\n          \"name\": \"C3\",\n          \"value\": 200\n        }\n      ]\n    },\n    {\n      \"name\": \"B2\",\n      \"value\": 200\n    }\n  ]\n}\n```\n\n`template`\n\n```vue\n\u003cd3-pack\n    :data=\"data\"\n    :options=\"options\"\n    :margin=\"margin\"\n    width=\"100%\"\n    height=\"300px\"\u003e\n\u003c/d3-pack\u003e\n```\n\n`options`\n\n|key|description|type|default|\n|:---|:---|:---|:---|\n|`circleTitle`|`tooltip`|`function`|`d =\u003e d.data.key + '\u003cbr\u003e' + d.data.value`|\n|`circleFillOpacity`|`partition circle internal color opacity`|`number`|`0.6`|\n|`circleStrokeOpacity`|`partition circle edge color opacity`|`number`|`1`|\n|`axisXLabel`|`label of axis x`|`string or null`|`null`|\n|`axisFontSize`|`axis text font size`|`number`|`12`|\n|`axisFontWeight`|`axis text font weight`|`number`|`400`|\n|`axisFontOpacity`|`axis text font opacity`|`number ([0, 1])`|`0.5`|\n\n\n\n## ToDo\n\n- `d3ColorPicker`\n- `d3Gantt`\n- `d3Gauge`\n- `d3Goal`\n- `d3HeatMap`\n- `d3RadialBar`\n- `d3RadialSector`\n- `d3RadialLine`\n- `d3ScatterPlot`\n- `d3Table`\n- `d3WordCloud`\n- `d3Markdown`\n- `d3JsonViewer`\n- `d3LReplay`\n\n\n\n## License\nMIT\n","funding_links":[],"categories":["Charts","Vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0x8f701%2FVs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0x8f701%2FVs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0x8f701%2FVs/lists"}