Skip to content
Branch: master
Clone or download
ignoreintuition Merge pull request #8 from ignoreintuition/dependabot/npm_and_yarn/we…
…bpack-bundle-analyzer-3.3.2

Bump webpack-bundle-analyzer from 2.11.1 to 3.3.2
Latest commit df04631 May 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Initial Commit Mar 26, 2018
config Updated readme Mar 30, 2018
src Added scatterplots May 3, 2018
static Initial Commit Mar 26, 2018
.babelrc Initial Commit Mar 26, 2018
.editorconfig Initial Commit Mar 26, 2018
.gitignore Initial Commit Mar 26, 2018
.postcssrc.js Initial Commit Mar 26, 2018
LICENSE Create LICENSE Apr 19, 2018
README.md Update README.md Sep 16, 2018
index.html Initial Commit Mar 26, 2018
package-lock.json Bump webpack-bundle-analyzer from 2.11.1 to 3.3.2 May 24, 2019
package.json Bump webpack-bundle-analyzer from 2.11.1 to 3.3.2 May 24, 2019

README.md

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

D3 + Vue: a D3 Plugin for VueJS

logo

D3 integration with Vue.js

d3vue

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

# 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 and docs for vue-loader.

You can’t perform that action at this time.