Add vx graph and fix demo site

demo/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "data-driven-motion-demo",
+  "version": "1.0.0",
+  "description": "demo for data-driven-motion",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --content-base build/ --port 3000",
+    "build": "webpack -p --env production"
+  },
+  "author": "Kye Hohenberger",
+  "license": "MIT",
+  "dependencies": {
+    "@vx/curve": "^0.0.112",
+    "@vx/gradient": "^0.0.112",
+    "@vx/group": "^0.0.114",
+    "@vx/mock-data": "^0.0.115",
+    "@vx/scale": "^0.0.117",
+    "@vx/shape": "^0.0.119",
+    "color-name": "^1.1.2",
+    "css-loader": "^0.28.4",
+    "d3-array": "^1.2.0",
+    "d3-random": "^1.0.3",
+    "d3-scale": "^1.0.5",
+    "d3-shape": "^1.0.6",
+    "gh-pages": "^0.12.0",
+    "github-markdown-css": "^2.5.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-crate": "^2.0.0",
+    "react-dom": "^15.5.4",
+    "react-loadable": "^3.0.1",
+    "react-motion": "^0.4.7",
+    "react-router-dom": "^4.0.0",
+    "react-svg-morph": "^0.1.10",
+    "rebass": "^0.4.0-beta.9",
+    "recompose": "^0.22.0",
+    "rgb-to-hsl": "0.0.3"
+  },
+  "devDependencies": {
+    "babel-core": "^6.23.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.5.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.28.0",
+    "markdown-loader": "^2.0.0",
+    "open-color": "^1.5.1",
+    "prettier": "^0.20.0",
+    "raw-loader": "^0.5.1",
+    "standard": "^10.0.2",
+    "style-loader": "^0.18.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.4.5"
+  },
+  "eslintConfig": {
+    "extends": "standard",
+    "parser": "babel-eslint"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "/dist/",
+      "/demo/"
+    ]
+  }
+}

demo/src/App.js

@@ -16,6 +16,7 @@ import Scatterplot from './demos/Scatterplot'
 import America from './demos/America'
 import Slider from './demos/Slider'
 import ColorSearch from './demos/ColorSearch'
+import BarChart from './demos/BarChart'
 
 const WOBBLY_SPRING = { stiffness: 350, damping: 15, precision: 0.1 }
 
@@ -76,6 +77,17 @@ const HomePage = ({ style }) => {
 const DemosPage = ({ style }) => (
   <div style={style} className={'demo-page markdown-body scrollable'}>
     <div className={'demo-page-inner'}>
+      <h3>
+        vx bar chart
+        <a
+          href='https://github.com/tkh44/data-driven-motion/blob/master/demo/src/demos/BarChart.js'
+          target={'_blank'}
+        >
+          Source
+        </a>
+      </h3>
+      <BarChart />
+      <hr />
       <h3>
         SVG Path Transformation
         <a

demo/src/demos/BarChart.js

@@ -0,0 +1,117 @@
+import React, { Component } from 'react'
+import { Group } from '@vx/group'
+import { LineRadial } from '@vx/shape'
+import { scaleTime, scaleLog } from '@vx/scale'
+import { curveBasisOpen } from '@vx/curve'
+import { appleStock } from '@vx/mock-data'
+import { extent } from 'd3-array'
+import { LinearGradient } from '@vx/gradient'
+
+import Demo from '../Demo'
+
+const x = d => new Date(d.date)
+const y = d => d.close
+
+function LineRadialTile (
+  {
+    capPoints,
+    width,
+    height,
+    margin = {
+      top: 10,
+      left: 10,
+      right: 10,
+      bottom: 120
+    }
+  }
+) {
+  if (width < 10) return null
+
+  const radius = Math.min(width, height) / 2
+
+  const xScale = scaleTime({
+    range: [0, Math.PI * 2],
+    domain: extent(appleStock, x)
+  })
+  const yScale = scaleLog({
+    range: [0, height / 2 - 20],
+    domain: extent(appleStock, y)
+  })
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+      height={height}
+      style={{ width: '100%', height: '100%' }}
+    >
+      <LinearGradient from="#e5fd3d" to="#aeeef8" id="line-gradient" />
+      <rect x={0} y={0} width={width} height={height} fill="#744cca" rx={0} />
+      <Group top={height / 2} left={width / 2}>
+        {yScale.ticks().map((tick, i) => {
+          return (
+            <g key={`radial-grid-${i}`}>
+              <circle
+                r={yScale(tick)}
+                stroke="#aeeef8"
+                strokeWidth={1}
+                fill="#aeeef8"
+                fillOpacity={1 / (i + 1) - 1 / i * 0.2}
+                strokeOpacity={0.2}
+              />
+              <text
+                y={-yScale(tick)}
+                textAnchor="middle"
+                dy={'-.33em'}
+                fontSize={8}
+                fill="#aeeef8"
+                fillOpacity={0.6}
+              >
+                {tick}
+              </text>
+            </g>
+          )
+        })}
+        <LineRadial
+          data={appleStock}
+          angle={d => xScale(x(d))}
+          radius={d => yScale(y(d))}
+          fill="none"
+          stroke={"url('#line-gradient')"}
+          strokeWidth={2}
+          strokeOpacity={0.7}
+          curve={curveBasisOpen}
+          strokeLinecap="round"
+        />
+        {capPoints.map((d, i) => {
+          return (
+            <circle
+              key={`line-cap-${i}`}
+              cy={-yScale(y(d))}
+              cx={xScale(x(d)) * Math.PI / 180}
+              r={3}
+              fill="#dff84d"
+            />
+          )
+        })}
+      </Group>
+    </svg>
+  )
+}
+
+export default class extends Component {
+  state = {
+    capPoints: [appleStock[0]].concat([appleStock[appleStock.length - 1]])
+  };
+
+  render () {
+    return (
+      <Demo>
+        <LineRadialTile
+          capPoints={this.state.capPoints}
+          width={800}
+          height={450}
+        />
+      </Demo>
+    )
+  }
+}

demo/src/index.js

@@ -6,7 +6,7 @@ import { render } from 'react-dom'
 
 function run () {
   const Root = require('./App').default
-  render(<Root />, document.querySelector('#demo'))
+  render(<Root />, document.querySelector('#app'))
 }
 
 run()

demo/src/index.tpl.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+
+<body>
+  <div id="app">
+
+  </div>
+
+  <script src="main.js"></script>
+</body>
+
+</html>

demo/src/style.css

@@ -12,7 +12,7 @@ body {
   flex-direction: column;
 }
 
-#demo,
+#app,
 .full {
   flex: 1;
   width: 100%;

demo/webpack.config.js

@@ -0,0 +1,50 @@
+var path = require('path')
+var webpack = require('webpack')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+module.exports = env => {
+  const PROD = env === 'production'
+
+  var loaders = [
+    {
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader'
+    },
+    {
+      test: /\.css$/,
+      use: ExtractTextPlugin.extract({
+        fallback: 'style-loader',
+        use: 'css-loader'
+      })
+    },
+    {
+      test: /\.(svg|woff2?|ttf|eot|jpe?g|png|gif)(\?.*)?$/i,
+      use: PROD ? 'file-loader' : 'url-loader'
+    }
+  ]
+
+  return {
+    devtool: PROD ? 'source-map' : 'eval',
+    entry: path.resolve('src', 'index.js'),
+    output: {
+      path: path.resolve('build'),
+      filename: 'main.js',
+      publicPath: '/'
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx']
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve('src', 'index.tpl.html'),
+        filename: 'index.html',
+        inject: false
+      })
+    ].concat(new ExtractTextPlugin('styles.css')),
+    module: {
+      loaders: loaders
+    }
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-driven-motion",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Declarative animation in react.",
   "jsnext:main": "dist/data-driven-motion.es.js",
   "module": "dist/data-driven-motion.es.js",
@@ -35,35 +35,18 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
     "color-name": "^1.1.2",
-    "d3-array": "^1.1.1",
-    "d3-random": "^1.0.3",
-    "d3-scale": "^1.0.5",
-    "d3-shape": "^1.0.6",
     "gh-pages": "^0.12.0",
-    "github-markdown-css": "^2.5.0",
     "gzip-size-cli": "^2.0.0",
-    "html-loader": "^0.4.5",
     "jest": "^20.0.1",
-    "markdown-loader": "^2.0.0",
     "npm-run-all": "^4.0.2",
-    "open-color": "^1.5.1",
-    "preact": "^8.0.0",
-    "preact-compat": "^3.14.3",
     "prettier": "^0.20.0",
     "pretty-bytes-cli": "^2.0.0",
-    "raw-loader": "^0.5.1",
     "react": "^15.5.4",
     "react-addons-test-utils": "^15.5.1",
-    "react-crate": "^2.0.0",
     "react-dom": "^15.5.4",
-    "react-loadable": "^3.0.1",
     "react-motion": "^0.4.7",
     "react-router-dom": "^4.0.0",
-    "react-svg-morph": "^0.1.10",
     "react-test-renderer": "^15.5.4",
-    "rebass": "^0.4.0-beta.9",
-    "recompose": "^0.22.0",
-    "rgb-to-hsl": "0.0.3",
     "rimraf": "^2.6.1",
     "rollup": "^0.41.6",
     "rollup-plugin-babel": "^2.7.1",