release

.babelrc

@@ -1,13 +0,0 @@
-{
-  "presets": [
-    ["es2015", { "modules": false }],
-    "stage-2"
-  ],
-  "plugins": ["transform-runtime"],
-  "comments": false,
-  "env": {
-    "test": {
-      "plugins": [ "istanbul" ]
-    }
-  }
-}

.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

.github/FUNDING.yml

@@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-patreon: corpglory

.gitignore

@@ -1,4 +1,4 @@
 .DS_Store
 node_modules/
-dist/
 npm-debug.log
+dist

LICENSE.md

@@ -1,20 +0,0 @@
-Copyright (c) 2015-2017 CorpGlory Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,35 +0,0 @@
-# d3vue
-
-A list of Vue.js / D3.js [examples](https://github.com/corpglory/d3vue/tree/master/src/d3-components)
-
-https://corpglory.github.io/d3vue/
-
-## Goals
-
-* Collect best practices
-* Make edu materials for Vue.js/D3.js learners
-* Show advantages of using D3.js on top of Vue.js
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-```
-
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
-
-## License
-
-See the [LICENSE](LICENSE.md) file for license rights and limitations (MIT).
-
-## About CorpGlory Inc.
-The project developed by [CorpGlory Inc.](https://corpglory.com/), a company which provides high quality software development, data visualization, Grafana and monitoring consulting.
-
-See also https://chartwerk.io/ -- make your d3/vue visualisations reusable and run them in Grafana.
-
-Follow as on [__Twitter__](http://twitter.com/corpglory) and [__Instagram__](https://www.instagram.com/corpglory/)

build/build.js

@@ -1,40 +0,0 @@
-// https://github.com/shelljs/shelljs
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-var ora = require('ora')
-var path = require('path')
-var chalk = require('chalk')
-var shell = require('shelljs')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackConfig = require('./webpack.prod.conf')
-
-var spinner = ora('building for production...')
-spinner.start()
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-shell.rm('-rf', assetsPath)
-shell.mkdir('-p', assetsPath)
-shell.config.silent = true
-shell.cp('-R', 'static/*', assetsPath)
-shell.config.silent = false
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n\n')
-
-  console.log(chalk.cyan('  Build complete.\n'))
-  console.log(chalk.yellow(
-    '  Tip: built files are meant to be served over an HTTP server.\n' +
-    '  Opening index.html over file:// won\'t work.\n'
-  ))
-})

build/check-versions.js

@@ -1,45 +0,0 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-var versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  },
-  {
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  }
-]
-
-module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
-    }
-    console.log()
-    process.exit(1)
-  }
-}

build/dev-client.js

@@ -1,9 +0,0 @@
-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

build/dev-server.js

@@ -1,81 +0,0 @@
-require('./check-versions')()
-
-var config = require('../config')
-if (!process.env.NODE_ENV) {
-  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
-}
-
-var opn = require('opn')
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = require('./webpack.dev.conf')
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// automatically open browser, if not set will be false
-var autoOpenBrowser = !!config.dev.autoOpenBrowser
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  quiet: true
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler, {
-  log: () => {}
-})
-// force page reload when html-webpack-plugin template changes
-compiler.plugin('compilation', function (compilation) {
-  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-    hotMiddleware.publish({ action: 'reload' })
-    cb()
-  })
-})
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware(options.filter || context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-var uri = 'http://localhost:' + port
-
-devMiddleware.waitUntilValid(function () {
-  console.log('> Listening at ' + uri + '\n')
-})
-
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-
-  // when env is testing, don't need open it
-  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
-    opn(uri)
-  }
-})

build/utils.js

@@ -1,64 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loaders) {
-    var sourceLoader = loaders.map(function (loader) {
-      var extraParamChar
-      if (/\?/.test(loader)) {
-        loader = loader.replace(/\?/, '-loader?')
-        extraParamChar = '&'
-      } else {
-        loader = loader + '-loader'
-        extraParamChar = '?'
-      }
-      return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '')
-    }).join('!')
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: sourceLoader,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader', sourceLoader].join('!')
-    }
-  }
-
-  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(['css']),
-    postcss: generateLoaders(['css']),
-    less: generateLoaders(['css', 'less']),
-    sass: generateLoaders(['css', 'sass?indentedSyntax']),
-    scss: generateLoaders(['css', 'sass']),
-    stylus: generateLoaders(['css', 'stylus']),
-    styl: generateLoaders(['css', 'stylus'])
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  var output = []
-  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
-    var loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      loader: loader
-    })
-  }
-  return output
-}

build/vue-loader.conf.js

@@ -1,17 +0,0 @@
-var utils = require('./utils')
-var config = require('../config')
-var isProduction = process.env.NODE_ENV === 'production'
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: isProduction
-      ? config.build.productionSourceMap
-      : config.dev.cssSourceMap,
-    extract: isProduction
-  }),
-  postcss: [
-    require('autoprefixer')({
-      browsers: ['last 2 versions']
-    })
-  ]
-}

build/webpack.base.conf.js

@@ -1,68 +0,0 @@
-var path = require('path')
-var utils = require('./utils')
-var config = require('../config')
-var vueLoaderConfig = require('./vue-loader.conf')
-
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-module.exports = {
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    modules: [
-      resolve('src'),
-      resolve('node_modules')
-    ],
-    alias: {
-      'vue$': 'vue/dist/vue.common.js',
-      'src': resolve('src'),
-      'assets': resolve('src/assets'),
-      'components': resolve('src/components')
-    }
-  },
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        loaders: ["style", "css", "sass"]
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        query: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  }
-}

build/webpack.dev.conf.js

@@ -1,35 +0,0 @@
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-module.exports = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: '#cheap-module-eval-source-map',
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': config.dev.env
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoEmitOnErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true
-    }),
-    new FriendlyErrorsPlugin()
-  ]
-})

build/webpack.prod.conf.js

@@ -1,102 +0,0 @@
-var path = require('path')
-var utils = require('./utils')
-var webpack = require('webpack')
-var config = require('../config')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var env = config.build.env
-
-var webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? '#source-map' : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      },
-      sourceMap: true
-    }),
-    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      chunks: ['vendor']
-    })
-  ]
-})
-
-if (config.build.productionGzip) {
-  var CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.bundleAnalyzerReport) {
-  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig

config/dev.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})

config/index.js

@@ -1,38 +0,0 @@
-// see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
-
-module.exports = {
-  build: {
-    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    productionSourceMap: true,
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: 8080,
-    autoOpenBrowser: true,
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {},
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
-  }
-}

config/prod.env.js

@@ -1,3 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"'
-}

index.html

@@ -1,11 +1 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>d3vue</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+<!DOCTYPE html><html><head><meta charset=utf-8><title>d3vue</title><link href=static/css/app.ea478ad0f98c40581c472cf6cea74c24.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.0d9440aa0954c24a67c3.js></script><script type=text/javascript src=static/js/vendor.03b56a03b17565331709.js></script><script type=text/javascript src=static/js/app.bb478689be3640ebf141.js></script></body></html>

package.json

@@ -1,58 +0,0 @@
-{
-  "name": "d3vue",
-  "version": "1.0.0",
-  "description": "An educational with list of Vue.JS vs D3.js examples",
-  "author": "Alexey Velikiy [CorpGlory] <twitter.com/corpglory>",
-  "private": true,
-  "scripts": {
-    "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
-    "publish": "npm run build && git checkout gh-pages && rm -rf static; rm index.html ; mv dist/static . && mv dist/index.html . && sed -i '' 's,/static,static,g' index.html && git add . && git commit -m release && git push && git checkout master"
-  },
-  "dependencies": {
-    "d3": "^4.6.0",
-    "topojson": "^2.2.0",
-    "vue": "^2.1.10",
-    "vue-resource": "^1.2.1",
-    "vue-router": "^2.2.0"
-  },
-  "devDependencies": {
-    "autoprefixer": "^6.7.2",
-    "babel-core": "^6.22.1",
-    "babel-loader": "^6.2.10",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "babel-register": "^6.22.0",
-    "chalk": "^1.1.3",
-    "connect-history-api-fallback": "^1.3.0",
-    "css-loader": "^0.26.1",
-    "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
-    "extract-text-webpack-plugin": "^2.0.0-rc.2",
-    "file-loader": "^0.10.0",
-    "friendly-errors-webpack-plugin": "^1.1.3",
-    "function-bind": "^1.1.0",
-    "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.3",
-    "node-sass": "^4.5.0",
-    "opn": "^4.0.2",
-    "ora": "^1.1.0",
-    "sass-loader": "^6.0.3",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "url-loader": "^0.5.7",
-    "vue-loader": "^10.3.0",
-    "vue-style-loader": "^2.0.0",
-    "vue-template-compiler": "^2.1.10",
-    "webpack": "^2.2.1",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^2.6.1"
-  },
-  "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
-  }
-}

src/app.vue

@@ -1,32 +0,0 @@
-<template>
-  <div id="app">
-    <a href='#/'> <h1> D3.js vs Vue.js examples </h1> </a>
-    <h2>{{ $route.name }}</h2>
-    <top-nav />
-    <router-view></router-view>
-  </div>
-</template>
-
-<script>
-
-import topNav from './components/demos-navigation'
-
-export default {
-  name: 'app',
-  components: { topNav }
-}
-</script>
-
-<style scoped>
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  margin-top: 30px;
-}
-a {
-  color: black;
-  text-decoration: none;
-}
-</style>

src/components/demos-navigation.vue

@@ -1,97 +0,0 @@
-<template>
-  <div id="holder">
-    <div class="links">
-      <router-link v-if="prev" :to="prev.path" class="prev"> < prev </router-link>
-      <a :href="sourceHref" class="source"> source </a>
-      <router-link v-if="next" :to="next.path" class="next"> next > </router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-
-import { routes } from 'router/demos';
-const config = require('config.json');
-
-export default {
-  computed: {
-    prev: function() {
-      var index = this.findIndex();
-      if(index == -1) {
-        return undefined;
-      }
-      return index > 0 ? routes[index - 1] : undefined;
-    },
-    next: function() {
-      var index = this.findIndex();
-      if(index == -1) {
-        return undefined;
-      }
-      return index + 1 < routes.length ? routes[index + 1] : undefined;
-    },
-    sourceHref: function() {
-      var index = this.findIndex();
-      if(index == -1) {
-        return config.githubLink;
-      }
-      return routes[index].source;
-    }
-  },
-  methods: {
-    findIndex: function() {
-      var me = this.$route.name;
-      return routes.findIndex(r => r.name === me);
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-#links {
-  display: block;
-  width: 300px;
-  height: 40px;
-  position: relative;
-}
-
-a {
-  display: block;
-  position: absolute;
-  width: 100px;
-  text-decoration: none;
-  font-weight: bold;
-  color: blue;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-.prev {
-  left: 0px;
-  text-align: left;
-}
-
-.source {
-  left:100px;
-  text-align: center;
-}
-
-.next {
-  right: 0px;
-  text-align: right;
-}
-
-#holder {
-  width: 300px;
-  margin: auto;
-  position: relative;
-  height: 30px;
-  /*border-top: 1px dashed gray;*/
-  border-bottom: 1px dashed gray;
-  padding-top: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-</style>

src/components/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="hello">
-    <ul>
-      <li v-for="item in items">
-        <router-link :to="item.path">{{ item.name }}</router-link>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import { routes } from 'router/demos'
-
-export default {
-  data () {
-    return {
-      items: routes
-    }
-  }
-}
-</script>
-
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  /*list-style-type: none;*/
-  padding: 0;
-  margin: auto;
-  width: 300px;
-}
-
-li {
-  /*display: inline-block;*/
-  margin: 0 0px;
-  list-style: decimal
-}
-
-a {
-  color: blue;
-  display: block;
-  text-decoration: none;
-  text-align: left;
-}
-
-a:hover {
-  text-decoration: underline;;
-}
-</style>

src/config.json

@@ -1,4 +0,0 @@
-{
-  "githubLink": "https://github.com/corpglory/d3vue/",
-  "d3ComponentsPath": "tree/master/src/d3-components"
-}

src/d3-components/README.md

@@ -1,9 +0,0 @@
-# d3vue
-
-See live demos: [corpglory.github.io/d3vue](https://corpglory.github.io/d3vue)
-
-## Goals
-
-* Help to learn Vue.js by people who already know D3.js
-* Show advantages of using D3.js on top of Vue.js
-* Collect best practices of problem solving with good software design

src/d3-components/bars-styles.vue

@@ -1,118 +0,0 @@
-<!--
-
-Links:
-  Object attr: https://www.w3schools.com/xml/dom_attribute.asp
-  Scopes css: https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md
-  .vue files: https://vuejs.org/v2/guide/single-file-components.html
-  D3.append: https://github.com/d3/d3-selection/blob/master/src/selection/index.js
-  Installation of SASS tutorial: https://www.youtube.com/watch?v=fIpLr04f8Ms
-  SASS: http://sass-lang.com/guide
-
--->
-
-<template>
-  <svg width="500" height="300"></svg>
-</template>
-
-<script>
-const d3 = require('d3');
-
-export default {
-  mounted: function() {
-
-    var svg = d3.select(this.$el);
-    var width = +svg.attr('width');
-    var height = +svg.attr('height');
-
-    var data = [
-      {name: 'one', val: 100},
-      {name: 'two', val: 150},
-      {name: 'three', val: 200}
-    ];
-
-    var x = d3.scaleBand()
-      .rangeRound([0, width]).padding(0.1)
-      .domain(data.map(d => d.name));
-    var y = d3.scaleLinear()
-      .rangeRound([height * 0.3 - 20, 0])
-      .domain([0, d3.max(data, d => d.val)])
-
-    function addRectsWithName(elem, name) {
-      elem
-        .append('text')
-        .text(name)
-        .attr('x', width / 2)
-        .attr('y', 5)
-        .attr('text-anchor', 'middle');
-      elem.selectAll('rect')
-        .data(data)
-        .enter()
-          .append('rect')
-          // We add attr here
-          .attr('x', d => x(d.name))
-          .attr('class', d => d.name)
-          .attr('y', d =>  y(d.val))
-          .attr('width', x.bandwidth())
-          .attr('height', d => y.range()[0] - y(d.val))
-    }
-
-
-    svg
-      .append('g')
-      .attr('id', 'bars-style')
-      .attr('transform', `translate(0, 20)`)
-      .call(addRectsWithName, 'Basic styles');
-
-    // vue loader will substitute data attribute for styles
-    var STYLE_MODULE_NAME = this.$el.attributes[0].name;
-    svg
-      .append('g')
-      .attr('transform', `translate(0, ${height * 0.3 + 20})`)
-      .call(addRectsWithName, 'Scoped styles')
-      .selectAll('rect')
-      .attr(STYLE_MODULE_NAME, '')
-
-    svg
-      .append('g')
-      .attr('id', 'bars-style-sass')
-      .attr('transform', `translate(0, ${height * 0.6 + 20})`)
-      .call(addRectsWithName, 'Sass styles');
-
-  }
-}
-</script>
-
-<style>
-#bars-style .one {
-  fill: #ffc300
-}
-#bars-style .two {
-  fill: #c70039
-}
-#bars-style .three {
-  fill: #571845
-}
-
-</style>
-
-<style scoped>
-.one {
-  fill: #154890
-}
-.two {
-  fill: #e1d4c0
-}
-.three {
-  fill: #ff6600
-}
-</style>
-
-<style lang="sass">
-#bars-style-sass
-  .one
-    fill: #AA5C39
-  .two
-    fill: #5B9632
-  .three
-    fill: #2A4F6E
-</style>

src/d3-components/basic-map-tooltip/index.vue

@@ -1,98 +0,0 @@
-<!--
-
-Links:
-  Events: https://vuejs.org/v2/guide/events.html
-  Computed properties: https://vuejs.org/v2/guide/computed.html
-
-Data:
-  http://worldpopulationreview.com/states/
-
--->
-
-<template>
-  <div id="holder">
-    <div class="mapHolder">
-      <us-map
-        v-on:stateSelected="onStateSelected"
-        v-on:stateDeselected="onStateDeselected"
-      />
-    </div>
-    <tooltip
-      v-if="currentState"
-      :title="currentState.Name"
-      :description="currentStateDescription"
-    />
-  </div>
-</template>
-
-<script>
-
-var _ = require('lodash');
-
-const map = require('d3-components/basic-map-tooltip/map');
-const tooltip = require('d3-components/basic-map-tooltip/tooltip');
-
-const STATES_DATA_PATH = 'static/data/states-data.csv';
-
-// lets load with vue-resource, but parse with d3
-// just because we can
-import * as d3 from 'd3-dsv';
-
-
-export default {
-  components: {
-    usMap: map,
-    tooltip: tooltip
-  },
-  created: function() {
-    var that = this;
-
-    this.$http.get(STATES_DATA_PATH)
-      .then(function(res) {
-        this.statesData = {};
-        d3.dsvFormat(';')
-          .parse(res.data, d => {
-            var population = d["2017 Population"].split(',').join('');
-            d.value = +population;
-            that.statesData[d.STATE_ABBR] = d;
-            delete d["2017 Population"];
-            delete d["STATE_ABBR"];
-            return d;
-          });
-      })
-  },
-  data: function() {
-    return {
-      statesData: undefined,
-      currentState: undefined
-    }
-  },
-  computed: {
-    currentStateDescription: function() {
-      return "Population: " + this.currentState.value;
-    }
-  },
-  methods: {
-    onStateSelected: function(stateCode) {
-      this.currentState = this.statesData[stateCode];
-    },
-    onStateDeselected: function(stateCode) {
-      this.currentState = undefined;
-    }
-  }
-}
-
-</script>
-
-<style scoped>
-#holder {
-  position: relative;
-  height: 300px;
-  width: 500px;
-  margin: auto;
-}
-.mapHolder {
-  position: absolute;
-  margin: auto;
-}
-</style>

src/d3-components/basic-map-tooltip/map.vue

@@ -1,64 +0,0 @@
-<!--
-
-It would be great if you color the map by population using data from index.vue
-
-Based on:
-  http://bl.ocks.org/rveciana/a2a1c21ca1c71cd3ec116cc911e5fce9
-  http://bl.ocks.org/mapsam/6083585
-
-
-Links:
-
--->
-
-<template>
-  <svg width="500" height="300"></svg>
-</template>
-
-<script>
-
-const d3 = require('d3');
-const topojson = require('topojson')
-
-export default {
-  mounted: function() {
-    var v = this;
-    var svg = d3.select(this.$el);
-    var width = +svg.attr('width');
-    var height = +svg.attr('height');
-
-    var projection = d3.geoAlbersUsa();
-    var path = d3.geoPath().projection(projection);
-
-    d3.json("static/data/us.json", function(error, us) {
-      var g = svg.append('g');
-        g
-          .selectAll('.state')
-          .data(topojson.feature(us, us.objects.usStates).features)
-          .enter()
-          .append("path")
-          .attr("class", "state")
-          .attr("d", path)
-          .on('mouseover', function(d) {
-            v.$emit('stateSelected', d.properties.STATE_ABBR)
-      		})
-          .on('mouseout', function(d) {
-            v.$emit('stateDeselected', d.properties.STATE_ABBR)
-          })
-      g.attr('transform', 'scale(0.57)')
-    });
-
-  }
-  // TODO: fire events
-}
-</script>
-
-<style>
-.state {
-  fill: #ccc;
-  stroke: #fff;
-}
-.state:hover {
-  fill: steelblue;
-}
-</style>

src/d3-components/basic-map-tooltip/tooltip.vue

@@ -1,67 +0,0 @@
-<template>
-<div id="tooltipPositioner">
-  <div id="tooltip">
-    <div id="tooltipContainer">
-      <div class="title">{{title}}</div>
-      <div class="description">{{description}}</div>
-    </div>
-  </div>
-</div>
-</template>
-
-<script>
-
-  module.exports = {
-    name: 'tooltip',
-    props: ['title', 'description']
-  }
-
-</script>
-
-<style scoped>
-
-#tooltipPositioner {
-  position: relative;
-  left: 50%;
-  top: 350px;
-  width: 240px;
-}
-
-#tooltipContainer {
-  position: absolute;
-  bottom: 0;
-  width: 230px;
-  left: -125px;
-  font-size: 12px;
-  line-height: 16px;
-  padding: 10px;
-  border-radius: 3px;
-  background: rgba(255,255,255,0.9);
-  color: #000;
-  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
-  border:1px solid rgba(200,200,200,0.85);
-  text-align:center;
-}
-
-#tooltip {
-  text-align:center;
-  z-index: 1000;
-  position: absolute;
-  display: block;
-}
-
-#tooltip .description {
-  color:#666;
-  font-size: 11px;
-  text-align:center;
-  font-style:italic;
-}
-
-#tooltip .title {
-  text-align: left;
-  font-size: 13px;
-  text-align:center;
-}
-
-</style>

src/d3-components/bubbles-nested-routes/bubbles.vue

@@ -1,43 +0,0 @@
-<!--
-
-Based on:
-
-Links:
-
--->
-
-<template>
-  <svg width="600" height="500"></svg>
-</template>
-
-<script>
-
-import PH2 from './ph2/index';
-const d3 = require('d3');
-
-export default {
-  props: ['groupBy', 'data'],
-  watch: {
-    groupBy: function(groupBy) {
-      this.ph2.setLayout(groupBy);
-    },
-    data: function(data) {
-      this.ph2.setData(data);
-    }
-  },
-  mounted: function() {
-    var svg = d3.select(this.$el);
-    var width = +svg.attr('width');
-    var height = +svg.attr('height');
-
-    var that = this;
-    var bubblesG = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`)
-
-    // TODO: remove it later
-    d3.csv('static/data/earthquakes.csv', function(data) {
-      that.ph2 = new PH2(bubblesG, data, that.groupBy);
-    });
-  }
-
-}
-</script>

src/d3-components/bubbles-nested-routes/index.vue

@@ -1,102 +0,0 @@
-<!--
-
-Explanation:
-  It is not really nester routes.
-  It is magic of aliases and $watch route.
-  See /src/router/demos.js (Bubbles: nested routes part)
-  and /src/router/index.js
-
-Links:
-  Dynamic-matching: https://router.vuejs.org/en/essentials/dynamic-matching.html
-  Nested Routes: https://router.vuejs.org/en/essentials/nested-routes.html
-
--->
-
-<template>
-  <div class="holder">
-    <!-- <h4>Earthquakes in september 2012</h4> -->
-    <groupMenu :links="links" :activeLink="activeLink" />
-    <bubbles :groupBy="activeLink.layout" />
-
-  </div>
-</template>
-
-<script>
-
-const menu = require('d3-components/bubbles-nested-routes/menu');
-const bubbles = require('d3-components/bubbles-nested-routes/bubbles');
-
-const MY_URL_PREFIX = 'bubbles-nested-routes';
-const _ = require('lodash');
-
-const LINKS = [
-    {
-      name: 'None',
-      path: '',
-      layout: 'total'
-    },
-    {
-      name: 'By country',
-      path: '/country',
-      layout: 'country'
-    },
-    {
-      name: 'By day',
-      path: '/day',
-      layout: 'day'
-    }
-  ].map(d => {
-    d.path = '#/' + MY_URL_PREFIX + d.path;
-    d.active = false;
-    return d;
-  });
-
-
-export default {
-  components: {
-    groupMenu: menu,
-    bubbles: bubbles
-  },
-  data: function() {
-    return {
-      activeLink: this.findActiveLink()
-    }
-  },
-  computed: {
-    links: function() {
-      return LINKS;
-    }
-  },
-  methods: {
-    findActiveLink: function() {
-      _.each(LINKS, l => {
-        l.active = false;
-      })
-      var link = _.find(LINKS, l => l.path == '#' + this.$route.path);
-      if(!link) {
-        link = LINKS[0];
-      }
-      return link;
-    }
-  },
-  watch: {
-    '$route' (to, from) {
-      this.activeLink = this.findActiveLink();
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .holder {
-    width: 500px;
-    margin: auto;
-  }
-  .menu ul {
-    padding: 0;
-    margin: 0;
-  }
-  .menu li {
-    text-align: left;
-  }
-</style>

src/d3-components/bubbles-nested-routes/menu.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="holder">
-    <ul class="menu">
-      <li>Group by: </li>
-      <li v-for="link in alinks">
-        <a :href="link.item.path" :class="{active: link.active}"> {{link.item.name}} </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-
-const _ = require('lodash');
-
-export default {
-  props: ['links', 'activeLink'],
-  computed: {
-    alinks: function() {
-      var that = this;
-      return _.map(this.links, l => ({
-        item: l,
-        active: (l.path == that.activeLink.path)
-      }))
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .menu {
-    padding: 0;
-    margin: 0;
-  }
-  .menu li {
-    text-align: left;
-    display: inline-block;
-    text-align: left;
-    margin: 0px;
-    margin-right: 10px;
-  }
-  .menu li a {
-    text-decoration: none;
-  }
-  .menu li a.active {
-    text-decoration: underline;
-  }
-</style>

src/d3-components/bubbles-nested-routes/ph2/index.js

@@ -1,98 +0,0 @@
-// http://vallandingham.me/bubble_charts_with_d3v4.html
-
-import layoutTotal from './layout-total';
-import layoutCountry from './layout-contry';
-import layoutDay from './layout-day';
-
-const d3 = require('d3');
-import _ from 'lodash';
-
-// TODO: do it d3-way so I can use selection.call()
-
-export default class PH2 {
-  constructor(elem, data, layoutName) {
-    this.svg = elem;
-    this.data = data;
-    this.setData(data);
-    this._init();
-    this.layout = undefined;
-    this.setLayout(layoutName);
-  }
-
-  setLayout(layoutName) {
-
-    if(layoutName === undefined) {
-      throw new Error('layoutName is undefined');
-    }
-    if(!this.layouts) {
-      throw new Error('Layouts are not defined');
-    }
-    if(!this.layouts[layoutName]) {
-      throw new Error('Can`t find layout ' + layoutName);
-    }
-
-    if(this.layout) {
-      this.layout.exit();
-    }
-    this.layout = this.layouts[layoutName];
-    if(!this.layout.inited) {
-      this.layout.init();
-      this.layout.inited = true;
-    }
-    this.layout.enter();
-    this.simulation.alpha(1);
-    this.simulation.restart();
-  }
-
-  setData(data) {
-    this.nodes = data.map(d => ({
-      r: +d.Magnitude
-    }))
-  }
-
-  _init() {
-    this.simulation = d3.forceSimulation()
-      .force("index-collide", d3.forceCollide(d => d.r + 5).iterations(16))
-      .force("index-x", d3.forceX().strength(0.04))
-      .force("index-y", d3.forceY().strength(0.04))
-
-    this._initLayouts();
-
-    var node = this.svg.append("g")
-      .attr("class", "nodes")
-      .selectAll("circle")
-      .data(this.nodes)
-      .enter()
-      .append("circle")
-      .attr("r", d => d.r )
-
-    var that = this;
-    var ticked = function() {
-      node
-        .attr("cx", d => d.x )
-        .attr("cy", d => d.y );
-      if(that.layout.ticked) {
-        that.layout.ticked();
-      }
-    }
-
-    this.simulation
-      .nodes(this.nodes)
-      .on("tick", ticked);
-
-  }
-
-  _initLayouts() {
-    this.layouts = {
-      'total': layoutTotal,
-      'country': layoutCountry,
-      'day': layoutDay
-    };
-
-    for (var k in this.layouts) {
-      var v = this.layouts[k];
-      this.layouts[k] = new v(this.svg, this.data, this.simulation);
-    }
-  }
-
-}

src/d3-components/bubbles-nested-routes/ph2/layout-contry.js

@@ -1,97 +0,0 @@
-const d3 = require('d3');
-const _ = require('lodash');
-
-export default class {
-  constructor(elem, data, simulation) {
-    this.elem = elem;
-    this.data = data;
-    this.simulation = simulation;
-  }
-
-  init() {
-    var groups = _(this.data)
-      .map((k, i) => ({
-        location: k.Location.split(', ')[1],
-        index: i
-      }))
-      .groupBy('location')
-      .value();
-
-    this.countries = _.map(groups, (v, k) => ({ key: k, r: -30 }));
-
-    this.links = [];
-    console.log(groups[this.countries[0].key][0]);
-    for(var i = 0; i < this.countries.length; i++) {
-      for(var j = 0; j < groups[this.countries[i].key].length; j++) {
-        this.links.push({
-          source: i + this.data.length,
-          target: groups[this.countries[i].key][j].index
-        });
-      }
-    }
-
-  }
-
-  enter() {
-
-    this.nodesBefore = this.simulation.nodes();
-    this.simulation
-      .force("country-link", d3.forceLink().id(d => d.index))
-      .force("country-charge", d3.forceManyBody().strength(-30))
-      .force("country-x", d3.forceX().strength(0.11))
-      .force("country-y", d3.forceY().strength(0.11))
-
-    //console.log(this.simulation.force("link").distance());
-    this.simulation.force("link")//.distance(-10)
-
-    this.simulation.nodes(_.concat(this.nodesBefore, this.countries));
-
-    this.countryG = this.elem.append("g");
-    this.countyLabels = this.countryG
-      .selectAll('text')
-      .data(this.countries)
-      .enter()
-      .append('text')
-      .text(d => d.key)
-      .attr("text-anchor", "middle")
-      .attr("font-size", "8")
-
-    this.linesG = this.elem.insert("g", ":first-child");
-    this.lines = this.linesG
-      .selectAll("line")
-      .data(this.links)
-      .enter()
-      .append("line")
-      .attr("stroke", "#d7d7d7")
-
-
-    this.simulation
-      .force("country-link")
-      .links(this.links);
-
-  }
-
-  ticked() {
-    this.lines
-      .attr("x1", d => d.source.x)
-      .attr("y1", d => d.source.y)
-      .attr("x2", d => d.target.x)
-      .attr("y2", d => d.target.y);
-    this.countyLabels
-      .attr('x', d => d.x)
-      .attr('y', d => d.y)
-  }
-
-  exit() {
-    this.simulation
-      .nodes(this.nodesBefore);
-    this.simulation
-      .force("country-link", null)
-      .force("country-charge", null)
-      .force("country-x", null)
-      .force("country-y", null)
-
-    this.linesG.remove();
-    this.countryG.remove();
-  }
-}

src/d3-components/bubbles-nested-routes/ph2/layout-day.js

@@ -1,56 +0,0 @@
-const d3 = require('d3');
-const _ = require('lodash');
-
-const DAY_RANGE = d3.range(14, 24);
-const WIDTH = 500;
-
-export default class {
-  constructor(elem, data, simulation) {
-    this.elem = elem;
-    this.data = data;
-    this.simulation = simulation;
-  }
-  init() {
-    this.dayX = _.map(
-      this.data, d => this._dayToX(+d.Date.split('-')[0])
-    );
-  }
-  enter() {
-    this.forceIndexCollide = this.simulation.force("index-collide");
-    this.simulation.force("index-collide", null);
-    this.forceIndexY = this.simulation.force("index-y");
-    this.simulation.force("index-y", null);
-
-    this.simulation.force("day-collide", d3.forceCollide(d => d.r + 2).iterations(16))
-
-
-    this.daysG = this.elem.append('g');
-
-    this.daysG
-      .selectAll('text')
-      .data(DAY_RANGE)
-      .enter()
-      .append('text')
-      .text(d => d)
-      .attr('x', this._dayToX)
-      .attr('font-size', 10)
-      .attr('fill', 'gray')
-      .attr('text-anchor', 'middle')
-
-    var that = this;
-    this.simulation.force(
-      'day-x', d3.forceX(d => that.dayX[d.index]).strength(1)
-    );
-    this.simulation.force("day-y", d3.forceY().strength(0.005));
-  }
-  exit() {
-    this.daysG.remove();
-    this.simulation.force('day-x', null);
-    this.simulation.force("index-collide", this.forceIndexCollide);
-    this.simulation.force("index-y", this.forceIndexY);
-  }
-
-  _dayToX(day) {
-    return (day - DAY_RANGE[0]) * WIDTH / DAY_RANGE.length - WIDTH * 0.48
-  }
-}

src/d3-components/bubbles-nested-routes/ph2/layout-total.js

@@ -1,15 +0,0 @@
-export default class {
-  constructor(elem, data, simulation) {
-    this.elem = elem;
-    this.simulation = simulation;
-  }
-  init() {
-
-  }
-  enter() {
-
-  }
-  exit() {
-
-  }
-}

src/d3-components/circle-mount.vue

@@ -1,31 +0,0 @@
-<!--
-Links:
-  Components: https://vuejs.org/v2/guide/components.html
-  .vue files: https://vuejs.org/v2/guide/single-file-components.html
-
-Advanced:
-  Component Lifecyrcle: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
-  Virtual DOM: https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40#.hexwxh9m3
--->
-
-<template>
-  <svg width="500" height="300"></svg>
-</template>
-
-<script>
-const d3 = require('d3');
-export default {
-  mounted: function() {
-    // this.#el - is the root element in <template>
-    // in this case it is <svg> tag
-    d3.select(this.$el)
-      .append('circle')
-      .attr('cx', '250')
-      .attr('cy', '150')
-      .attr('r', '100')
-  }
-}
-</script>
-
-<style>
-</style>

src/d3-components/pie-chart-local-component/index.vue

@@ -1,61 +0,0 @@
-<!--
-
-Links:
-  Local Registration: https://vuejs.org/v2/guide/components.html#Local-Registration
-  Props: https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props
-  Methods: https://vuejs.org/v2/guide/events.html#Method-Event-Handlers
-  Conditional Rendering: https://vuejs.org/v2/guide/conditional.html
-
-Data:
-  http://www.studentsoftheworld.info/penpals/stats.php3?Pays=
-
--->
-
-<template>
-  <div>
-    <h4>Most popular female names in the world</h4>
-    <pie :data="names" />
-    <br>
-    <button v-if="canAddAName" v-on:click="addName">Add a name</button>
-  </div>
-</template>
-
-<script>
-
-var _ = require('lodash')
-const pie = require('d3-components/pie-chart-local-component/pie')
-
-const NAMES = [
-  { name: 'Sarah', value: 2502 },
-  { name: 'Emma', value: 2005 },
-  { name: 'Laura', value: 1968 },
-  { name: 'Chloé', value: 1863 },
-  { name: 'Marie', value: 1810 },
-  { name: 'Emily', value: 1637 },
-  { name: 'Léa', value: 1592 },
-  { name: 'Camille', value: 1572 },
-  { name: 'Anna', value: 1433 },
-  { name: 'Manon', value: 1403 }
-]
-
-export default {
-  components: {
-    pie: pie
-  },
-  data: function() {
-    return {
-      names: _.take(NAMES, 3)
-    }
-  },
-  computed: {
-    canAddAName: function() {
-      return this.names.length < NAMES.length;
-    }
-  },
-  methods: {
-    addName: function() {
-      this.names.push(NAMES[this.names.length]);
-    }
-  }
-}
-</script>

src/d3-components/pie-chart-local-component/pie.vue

@@ -1,92 +0,0 @@
-<!--
-
-Based on:
-  https://bl.ocks.org/shimizu/f90651541575f348a129444003a73467
-
-Links:
-  Props: https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props
-  Methods: https://vuejs.org/v2/guide/events.html#Method-Event-Handlers
-
--->
-
-<template>
-  <svg width="500" height="300"></svg>
-</template>
-
-<script>
-
-const d3 = require('d3');
-
-export default {
-  mounted: function() {
-    var svg = d3.select(this.$el);
-    var width = +svg.attr('width');
-    var height = +svg.attr('height');
-
-    var margin = { top:20, left:0, bottom:30, right:0 };
-
-    var chartWidth = width - (margin.left + margin.right);
-    var chartHeight = height - (margin.top + margin.bottom);
-
-    this.chartLayer = svg
-      .append('g')
-      .attr(
-        "transform",
-        `translate(${margin.left}, ${margin.top})`
-      );
-
-    this.arc = d3.arc()
-      .outerRadius(chartHeight / 2)
-      .innerRadius(chartHeight / 4)
-      .padAngle(0.03)
-      .cornerRadius(8)
-
-    this.pieG = this.chartLayer
-      .append("g")
-      .attr(
-        "transform",
-        `translate(${chartWidth / 2}, ${chartHeight / 2})`
-      )
-
-    this.drawChart(this.data);
-
-  },
-  props: ['data'],
-  watch: {
-    data: function(newData) {
-      this.drawChart(newData);
-    }
-  },
-  methods: {
-    drawChart: function(data) {
-      var arcs = d3.pie()
-          .sort(null)
-          .value(function(d) { return d.value; })
-          (data)
-
-      var block = this.pieG.selectAll(".arc")
-        .data(arcs)
-
-      block.select('path').attr('d', this.arc)
-
-      var newBlock = block
-        .enter()
-        .append("g")
-        .classed("arc", true)
-
-      newBlock.append("path")
-        .attr("d", this.arc)
-        .attr("id", function(d, i) { return "arc-" + i })
-        .attr("stroke", "gray")
-        .attr("fill", d => d3.interpolateCool(Math.random()))
-
-      newBlock.append("text")
-        .attr("dx", 10)
-        .attr("dy", -5)
-        .append("textPath")
-        .attr("xlink:href", function(d, i) { return "#arc-" + i; })
-        .text(function(d) { return d.data.name })
-    }
-  }
-}
-</script>

src/d3-components/size-controller.vue

@@ -1,49 +0,0 @@
-<!--
-Links
-  Data: https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
-  Form Input Bindings: https://vuejs.org/v2/guide/forms.html#Basic-Usage
-  Watchers: https://vuejs.org/v2/guide/computed.html#Watchers
--->
-
-<template>
-  <div>
-    <svg width="500" height="300"></svg>
-    <br>
-    <input
-      type="range"
-      v-model="circleSize"
-      min="1"
-      max="100"
-      step="1"
-    >
-  </div>
-</template>
-
-<script>
-const d3 = require('d3');
-export default {
-  data: function() {
-    return {
-      circleSize: 50
-    }
-  },
-  mounted: function(createElement) {
-    var svg = d3.select(this.$el).select('svg');
-    this.circle = svg
-      .append('circle')
-      .attr('cx', '250')
-      .attr('cy', '150')
-      .attr('r', this.circleSize)
-  },
-  watch: {
-    circleSize: function(newValue) {
-      this.circle
-        .attr('r', newValue)
-    }
-  }
-
-}
-</script>
-
-<style>
-</style>

src/main.js

@@ -1,16 +0,0 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import app from './app'
-import router from './router'
-
-import VueResource from 'vue-resource'
-Vue.use(VueResource);
-
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  router,
-  template: '<app/>',
-  components: { app }
-})

src/router/demos.js

@@ -1,45 +0,0 @@
-const config = require('config.json');
-
-export const routes = [
-  {
-    name: 'Circle: mount',
-    path: '/circle-mount',
-    component: require('d3-components/circle-mount')
-  },
-  {
-    name: 'Circle: size controller',
-    path: '/size-controller',
-    component: require('d3-components/size-controller')
-  },
-  {
-    name: 'Bars: styles',
-    path: '/bars-styles',
-    component: require('d3-components/bars-styles')
-  },
-  {
-    name: 'Pie chart: local component & props',
-    path: '/pie-chart-local-component',
-    folder: true,
-    component: require('d3-components/pie-chart-local-component/index')
-  },
-  {
-    name: 'Basic map: html tooltip & events',
-    path: '/basic-map-tooltip',
-    folder: true,
-    component: require('d3-components/basic-map-tooltip/index')
-  },
-  {
-    name: 'Bubbles: nested routes',
-    path: '/bubbles-nested-routes',
-    alias: '/bubbles-nested-routes/*',
-    folder: true,
-    component: require('d3-components/bubbles-nested-routes/index')
-  }
-].map(r => {
-  var res = r;
-  res.source = config.githubLink +
-               config.d3ComponentsPath +
-               r.path +
-               (r.folder ? '' : '.vue')
-  return res;
-})

src/router/index.js

@@ -1,17 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Index from 'components/index'
-import {routes as demoRoutes} from './demos'
-
-Vue.use(VueRouter)
-
-export default new VueRouter({
-  routes: [
-    {
-      path: '/',
-      name: 'Menu',
-      component: Index
-    }, ... demoRoutes
-
-  ]
-})

static/css/app.ea478ad0f98c40581c472cf6cea74c24.css

@@ -0,0 +1,278 @@
+
+#app[data-v-41b7bac0] {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  margin-top: 30px;
+}
+a[data-v-41b7bac0] {
+  color: black;
+  text-decoration: none;
+}
+
+#links[data-v-098bb42e] {
+  display: block;
+  width: 300px;
+  height: 40px;
+  position: relative;
+}
+a[data-v-098bb42e] {
+  display: block;
+  position: absolute;
+  width: 100px;
+  text-decoration: none;
+  font-weight: bold;
+  color: blue;
+}
+a[data-v-098bb42e]:hover {
+  text-decoration: underline;
+}
+.prev[data-v-098bb42e] {
+  left: 0px;
+  text-align: left;
+}
+.source[data-v-098bb42e] {
+  left:100px;
+  text-align: center;
+}
+.next[data-v-098bb42e] {
+  right: 0px;
+  text-align: right;
+}
+#holder[data-v-098bb42e] {
+  width: 300px;
+  margin: auto;
+  position: relative;
+  height: 30px;
+  /*border-top: 1px dashed gray;*/
+  border-bottom: 1px dashed gray;
+  padding-top: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+#bars-style .one {
+  fill: #ffc300
+}
+#bars-style .two {
+  fill: #c70039
+}
+#bars-style .three {
+  fill: #571845
+}
+
+
+.one[data-v-63d4ce13] {
+  fill: #154890
+}
+.two[data-v-63d4ce13] {
+  fill: #e1d4c0
+}
+.three[data-v-63d4ce13] {
+  fill: #ff6600
+}
+
+#bars-style-sass .one {
+  fill: #AA5C39;
+}
+#bars-style-sass .two {
+  fill: #5B9632;
+}
+#bars-style-sass .three {
+  fill: #2A4F6E;
+}
+
+#holder[data-v-39fd153a] {
+  position: relative;
+  height: 300px;
+  width: 500px;
+  margin: auto;
+}
+.mapHolder[data-v-39fd153a] {
+  position: absolute;
+  margin: auto;
+}
+
+.state {
+  fill: #ccc;
+  stroke: #fff;
+}
+.state:hover {
+  fill: steelblue;
+}
+
+#tooltipPositioner[data-v-6039702a] {
+  position: relative;
+  left: 50%;
+  top: 350px;
+  width: 240px;
+}
+#tooltipContainer[data-v-6039702a] {
+  position: absolute;
+  bottom: 0;
+  width: 230px;
+  left: -125px;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 10px;
+  border-radius: 3px;
+  background: rgba(255,255,255,0.9);
+  color: #000;
+  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+  -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+  border:1px solid rgba(200,200,200,0.85);
+  text-align:center;
+}
+#tooltip[data-v-6039702a] {
+  text-align:center;
+  z-index: 1000;
+  position: absolute;
+  display: block;
+}
+#tooltip .description[data-v-6039702a] {
+  color:#666;
+  font-size: 11px;
+  text-align:center;
+  font-style:italic;
+}
+#tooltip .title[data-v-6039702a] {
+  text-align: left;
+  font-size: 13px;
+  text-align:center;
+}
+
+
+.holder[data-v-28f41ffe] {
+  width: 500px;
+  margin: auto;
+}
+.menu ul[data-v-28f41ffe] {
+  padding: 0;
+  margin: 0;
+}
+.menu li[data-v-28f41ffe] {
+  text-align: left;
+}
+
+.menu[data-v-37ada400] {
+  padding: 0;
+  margin: 0;
+}
+.menu li[data-v-37ada400] {
+  text-align: left;
+  display: inline-block;
+  text-align: left;
+  margin: 0px;
+  margin-right: 10px;
+}
+.menu li a[data-v-37ada400] {
+  text-decoration: none;
+}
+.menu li a.active[data-v-37ada400] {
+  text-decoration: underline;
+}
+
+h1[data-v-417810ac], h2[data-v-417810ac] {
+  font-weight: normal;
+}
+ul[data-v-417810ac] {
+  /*list-style-type: none;*/
+  padding: 0;
+  margin: auto;
+  width: 300px;
+}
+li[data-v-417810ac] {
+  /*display: inline-block;*/
+  margin: 0 0px;
+  list-style: decimal
+}
+a[data-v-417810ac] {
+  color: blue;
+  display: block;
+  text-decoration: none;
+  text-align: left;
+}
+a[data-v-417810ac]:hover {
+  text-decoration: underline;
+}
+
+/*# sourceMappingURL=app.ea478ad0f98c40581c472cf6cea74c24.css.map*/

static/js/manifest.0d9440aa0954c24a67c3.js

@@ -0,0 +1,2 @@
+!function(e){function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(t,c,i){for(var u,a,f,s=0,l=[];s<t.length;s++)a=t[s],o[a]&&l.push(o[a][0]),o[a]=0;for(u in c)Object.prototype.hasOwnProperty.call(c,u)&&(e[u]=c[u]);for(n&&n(t,c,i);l.length;)l.shift()();if(i)for(s=0;s<i.length;s++)f=r(r.s=i[s]);return f};var t={},o={2:0};r.e=function(e){function n(){c.onerror=c.onload=null,clearTimeout(i);var r=o[e];0!==r&&(r&&r[1](new Error("Loading chunk "+e+" failed.")),o[e]=void 0)}if(0===o[e])return Promise.resolve();if(o[e])return o[e][2];var t=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,r.nc&&c.setAttribute("nonce",r.nc),c.src=r.p+"static/js/"+e+"."+{0:"03b56a03b17565331709",1:"bb478689be3640ebf141"}[e]+".js";var i=setTimeout(n,12e4);c.onerror=c.onload=n;var u=new Promise(function(r,n){o[e]=[r,n]});return o[e][2]=u,t.appendChild(c),u},r.m=e,r.c=t,r.i=function(e){return e},r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:t})},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r.p="/",r.oe=function(e){throw console.error(e),e}}([]);
+//# sourceMappingURL=manifest.0d9440aa0954c24a67c3.js.map