Add demo code for graph vis class (uber-archive#10)

Add a new folder 'graph' under src/demos. There are 5 steps to complete the interactive graph visualization application. The starting code for each step is separated into different folders: * 0-starting-code: only the basic scaffold. Users will add GraphRender component. * 1-basic-graph: the result from the step 0. Users will complete the app.js here. * 2-graph-layout: the result from the step 1. Users will add the layout-engine. * 3-interactive-graph: the result from the step 2. Users will add onHover interaction. * 4-final-version: the complete code of the interactive graph visualization application.
qiaoxin136 · Sep 27, 2017 · eae7d8e · eae7d8e
1 parent 5e5eb63
commit eae7d8e
Show file tree

Hide file tree

Showing 46 changed files with 19,972 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "autobind-decorator": "^2.1.0",
+    "d3-force": "^1.0.6",
     "deck.gl": "^4.1.1",
     "luma.gl": "^4.0.1",
     "ocular": "^0.1.17",

diff --git a/src/demos/graph/0-starting-code/README.md b/src/demos/graph/0-starting-code/README.md
@@ -0,0 +1,9 @@
+This is a minimal standalone version of the ArcLayer example
+on [deck.gl](http://deck.gl) website.
+
+### Usage
+Copy the content of this folder to your project. Run
+```
+npm install
+npm start
+```
diff --git a/src/demos/graph/0-starting-code/index.html b/src/demos/graph/0-starting-code/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/style.css">
+    <title>Basic Graph Vis Tutorial - Setup</title>
+    <style>
+      body {
+        font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
+        font-size: 12px;
+        line-height: 1.833;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+      }
+      .intro {
+        align-items: center;
+        display: flex;
+        height: 100vh;
+        justify-content: center;
+        position: absolute;
+        width: 100vw;
+      }
+    </style>
+  </head>
+  <body>
+    <div id='root' />
+    <script type="text/javascript" src="bundle.js"></script>
+  </body>
+</html>
diff --git a/src/demos/graph/0-starting-code/package.json b/src/demos/graph/0-starting-code/package.json
@@ -0,0 +1,21 @@
+{
+  "scripts": {
+    "start-local": "webpack-dev-server --env.local --progress --hot --port 3030 --open",
+    "start": "webpack-dev-server --progress --hot --port 3030 --open",
+    "build": "NODE_ENV=production webpack --env.prod=true"
+  },
+  "dependencies": {
+    "deck.gl": "^4.1.0",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
+  }
+}
diff --git a/src/demos/graph/0-starting-code/root.js b/src/demos/graph/0-starting-code/root.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import {render} from 'react-dom';
+
+import App from './src/app';
+
+const element = document.getElementById('root');
+
+render(<App />, element);
+
+if (module.hot) {
+  module.hot.accept('./src/app', () => {
+    const Next = require('./src/app').default;
+    render(<Next />, element);
+  });
+}
diff --git a/src/demos/graph/0-starting-code/src/app.js b/src/demos/graph/0-starting-code/src/app.js
@@ -0,0 +1,19 @@
+/* global window */
+import React, {Component} from 'react';
+
+export default class App extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <div className='intro'>
+          Empty App, Edit Me!
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/demos/graph/0-starting-code/webpack.config.js b/src/demos/graph/0-starting-code/webpack.config.js
@@ -0,0 +1,32 @@
+const resolve = require('path').resolve
+const webpack = require('webpack')
+
+module.exports = {
+  entry: resolve('./root'),
+
+  devtool: 'source-map',
+
+  module: {
+    rules: [
+      {
+        // Compile ES2015 using buble
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['env', 'react', 'stage-2'].map(n => require.resolve(`babel-preset-${n}`)),
+          },
+        },
+      },
+    ],
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
+      },
+    }),
+  ],
+}