Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ignoreintuition/d3vue
A D3 Plugin for VueJS
https://github.com/ignoreintuition/d3vue
d3 d3v4 data data-visualization javascript vue vuejs vuejs2
Last synced: about 1 month ago
JSON representation
A D3 Plugin for VueJS
- Host: GitHub
- URL: https://github.com/ignoreintuition/d3vue
- Owner: ignoreintuition
- License: mit
- Created: 2018-03-26T02:06:35.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T23:58:03.000Z (over 1 year ago)
- Last Synced: 2024-03-21T18:20:44.362Z (2 months ago)
- Topics: d3, d3v4, data, data-visualization, javascript, vue, vuejs, vuejs2
- Language: JavaScript
- Homepage: http://resurgencewebdesign.com/d3-vue-example/index.html
- Size: 1020 KB
- Stars: 91
- Watchers: 9
- Forks: 8
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (UI Components / Charts)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (UI Components / Charts)
- awesome-vue - d3vue ★70 - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (UI Components / Charts)
- awesome-vue - d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS (Components & Libraries / UI Components)
README
**If you are currently using d3vue we are halting updates on this project. We have created a new plugin that more deeply integrates with Vue using a standalone component. Check out our Github page for [v-chart-plugin](https://github.com/ignoreintuition/v-chart-plugin)**
# D3 + Vue: a D3 Plugin for VueJS
> D3 integration with Vue.js
d3vue is a plugin for VueJS 2 that allows you to take data from your Vue instance and bind that data to a D3 v4 data visualization. d3vue uses the v4 merge syntax so when you can call the same function in your lifecycle events (i.e. mounted, beforeUpdate). The function signature is:
```
this.$helpers.chart.barChart(this.$d3, this.dataSet, this.options);
```
- this.$d3 is a reference to the d3 instances
- this.dataSet is an array of objects from your instances
- this.options includes
- options.selector: selector name to place the graph.
- options.metric: value you are measuring.
- options.dim: value you will be categorizing the data by.
- options.width: width of the chart.
- options.height: height of the chart.
- options.title: chart title
Other functions are:
```
this.$helpers.chart.pieChart(...)
this.$helpers.chart.lineGraph(...)
this.$helpers.chart.scatterPlot(...)
```
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).