Merge pull request #98 from yldio/architecture-react-d3

Architecture react d3
2016-12-07 11:28:55 +00:00 · 2016-12-07 11:28:55 +00:00 · 174aec625e
commit 174aec625e
parent d44eeb2d70 d1a1362d2a
23 changed files with 934 additions and 0 deletions
--- a/spikes/architecture/d3-revamp/README.md
+++ b/spikes/architecture/d3-revamp/README.md
@ -0,0 +1,4 @@
+# Example
+
+![screenshot from 2016-12-06 17-03-28](https://cloud.githubusercontent.com/assets/524382/20936109/4508ebda-bbd9-11e6-9561-baa1f7fcc80c.png)
+
--- a/spikes/architecture/d3-revamp/index.html
+++ b/spikes/architecture/d3-revamp/index.html
@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<meta charset='utf-8'>
+<style>
+
+.links line {
+  stroke: #343434;
+  stroke-opacity: 1;
+}
+
+.health, .health_warn {
+  font-family: LibreFranklin;
+  font-size: 12px;
+  font-weight: bold;
+  font-style: normal;
+  font-stretch: normal;
+  text-align: center;
+}
+
+.health_warn {
+  font-size: 15px;
+}
+
+.stat {
+  font-family: LibreFranklin;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.5;
+}
+
+.node_statistics {
+  font-family: LibreFranklin;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.5;
+}
+
+.node_statistics p {
+  margin: 0 0 0 0;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.primary, .secondary {
+  font-family: LibreFranklin;
+  font-size: 12px;
+  font-weight: normal;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.5;
+}
+
+</style>
+<svg width='960' height='700'></svg>
+<script src='https://d3js.org/d3.v4.min.js'></script>
+<script>
+
+var svg = d3.select('svg'),
+    width = +svg.attr('width'),
+    height = +svg.attr('height');
+
+var color = d3.scaleOrdinal(d3.schemeCategory20);
+
+var simulation = d3.forceSimulation()
+  .force('charge', d3.forceManyBody().strength(() => -50).distanceMin(() => 30))
+  .force('link', d3.forceLink().distance(() => 200).id(function(d) { return d.id; }))
+  .force('collide', d3.forceCollide().radius(function(d) { return 200 + 0.5; }).iterations(2))
+  .force('center', d3.forceCenter(width * 1/3, height * 1/3))
+
+function rightRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + y // Move to top left (absolute)
+       + 'h ' + (width - radius) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+       + 'h ' + (radius - width) // Horizontal lint to (relative)
+       + 'z '; // path back to start
+}
+
+function leftRoundedRect(x, y, width, height, radius) {
+  return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+       + 'v ' + height // Vertical line to (relative)
+       + 'h ' + (radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+       + 'z '; // path back to start
+}
+
+function topRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arc
+       + 'h ' + -(radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'h ' + (radius - width) // Horizontal line to (relative)
+       + 'z '; // path back to start
+}
+
+function bottomRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'h ' + (radius + width) // Horizontal line to (relative)
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + -radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arc
+       + 'h ' + (radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+       + 'z '; // path back to start
+}
+
+function rect(x, y, width, height, radius) {
+  return 'M' + x + ',' + -(y - height - 2 * radius) // Move to (absolute) start at bottom-right
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'h ' + (width + radius + 2) // Horizontal line to (relative)
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'h ' + (radius - width) // Horizontal line to (relative)
+       + 'z '; // path back to start
+}
+
+
+d3.json('services.json', function(error, graph) {
+  if (error) throw error;
+
+  function createNode(elm) {
+    // Box where label will live
+    elm.append('path')
+    .attr('class', 'node')
+      .attr('d', topRoundedRect('0', '0', 170, 47, 4))
+      .attr('stroke', '#343434')
+      .attr('stroke-width', '1px')
+      .attr('fill', '#464646')
+
+    // Hover-over text for a node's label.
+    var text = elm.append('g')
+
+    text.append('text')
+    .attr('class', 'info_text')
+      .attr('x', '12')
+      .attr('y', '30')
+      .attr('text-anchor', 'start')
+      .attr('fill', '#fff')
+      .text(d => d.id)
+
+    text.append('circle')
+    .attr('class', 'alert')
+      .attr('cx', function () { return d3.select(this.parentNode).select('.info_text').node().getBBox().width + 30 })
+      .attr('cy', '24')
+      .attr('stroke-width', '0px')
+      .attr('fill', (d) => d.id == 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
+      .attr('r', '9px')
+
+    // An icon or label that exists within the circle, inside the infobox
+    text.append('text')
+    .attr('class', 'health')
+      .attr('x', function () { return d3.select(this.parentNode).select('.info_text').node().getBBox().width + 30 })
+      .attr('y', '29')
+      .attr('text-anchor', 'middle')
+      .attr('fill', '#fff')
+      .text((d) => d.id == 'Memcached' ? '!' : '❤')
+
+    // Box where stats will live
+    var stats = elm.append('g');
+
+    stats.append('path')
+    .attr('class', 'node')
+      .attr('d', (d) => d.id == 'Percona' ? rect('0', '-39', 170, 78, 2) : bottomRoundedRect('0', '-39', 170, 78, 4))
+      .attr('stroke', '#343434')
+      .attr('stroke-width', '1px')
+      .attr('fill', '#464646')
+
+    var html = stats
+      .append('switch')
+      .append('foreignObject')
+        .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
+        .attr('x', 12)
+        .attr('y', 57)
+        .attr('width', 160)
+        .attr('height', 70)
+        // From here everything will be rendered with react using a ref.
+        // However for now these values are hard-coded.
+      .append('xhtml:div')
+        .attr('class', 'node_statistics')
+
+        // Remove with react + dyanmic data.
+      html.append('p')
+        .text('CPU: 48%')
+      html.append('p')
+        .text('Memory: 54%')
+      html.append('p')
+        .text('Network: 1.75kb/sec')
+
+
+    elm.call(d3.drag()
+            .on('start', dragstarted)
+            .on('drag', dragged)
+            .on('end', dragended));
+
+    elm.append('title')
+        .text(function(d) { return d.id; });
+
+  }
+
+  function createExtendedNode(elm) {
+    elm.append('path')
+    .attr('class', 'node')
+      .attr('d', topRoundedRect('0', '0', 170, 47, 4))
+      .attr('stroke', '#343434')
+      .attr('stroke-width', '1px')
+      .attr('fill', '#464646')
+
+    // Hover-over text for a node's label.
+    var text = elm.append('g')
+
+    text.append('text')
+    .attr('class', 'info_text')
+      .attr('x', '12')
+      .attr('y', '30')
+      .attr('text-anchor', 'start')
+      .attr('fill', '#fff')
+      .text(d => d.id)
+
+    // Box where stats will live
+    var stats = elm.append('g');
+    var primary = stats.append('g')
+
+    primary.append('path')
+    .attr('class', 'node')
+      .attr('d', rect('0', '-39', 170, 114, 2))
+      .attr('stroke', '#343434')
+      .attr('stroke-width', '1px')
+      .attr('fill', '#464646')
+
+    primary.append('text')
+    .attr('class', 'primary')
+      .attr('x', '12')
+      .attr('y', '70')
+      .attr('text-anchor', 'start')
+      .attr('fill', '#fff')
+      .text('Primary')
+
+    primary.append('circle')
+    .attr('class', 'alert')
+      .attr('cx', function () { return d3.select(this.parentNode).select('.primary').node().getBBox().width + 30 })
+      .attr('cy', '64')
+      .attr('stroke-width', '0px')
+      .attr('fill', 'rgb(227, 130, 0)')
+      .attr('r', '9px')
+
+    // An icon or label that exists within the circle, inside the infobox
+    primary.append('text')
+    .attr('class', 'health_warn')
+      .attr('x', function () { return d3.select(this.parentNode).select('.primary').node().getBBox().width + 30 })
+      .attr('y', '69')
+      .attr('text-anchor', 'middle')
+      .attr('fill', '#fff')
+      .text('☇')
+
+    var html = primary
+      .append('switch')
+      .append('foreignObject')
+        .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
+        .attr('x', 12)
+        .attr('y', 87)
+        .attr('width', 160)
+        .attr('height', 70)
+        // From here everything will be rendered with react using a ref.
+        // However for now these values are hard-coded.
+      .append('xhtml:div')
+        .attr('class', 'node_statistics')
+
+        // Remove with react + dyanmic data.
+      html.append('p')
+        .text('CPU: 48%')
+      html.append('p')
+        .text('Memory: 54%')
+      html.append('p')
+        .text('Network: 1.75kb/sec')
+
+    var secondary = stats.append('g');
+
+    secondary.append('path')
+    .attr('class', 'node')
+      .attr('d', bottomRoundedRect('0', '-149', 170, 114, 4))
+      .attr('stroke', '#343434')
+      .attr('stroke-width', '1px')
+      .attr('fill', '#464646')
+
+    secondary.append('text')
+    .attr('class', 'secondary')
+      .attr('x', '12')
+      .attr('y', '183')
+      .attr('text-anchor', 'start')
+      .attr('fill', '#fff')
+      .text('Secondary')
+
+    secondary.append('circle')
+    .attr('class', 'alert')
+      .attr('cx', function () { return d3.select(this.parentNode).select('.secondary').node().getBBox().width + 30 })
+      .attr('cy', '177')
+      .attr('stroke-width', '0px')
+      .attr('fill', 'rgb(0,175,102)')
+      .attr('r', '9px')
+
+    // An icon or label that exists within the circle, inside the infobox
+    secondary.append('text')
+    .attr('class', 'health')
+      .attr('x', function () { return d3.select(this.parentNode).select('.secondary').node().getBBox().width + 30 })
+      .attr('y', '182')
+      .attr('text-anchor', 'middle')
+      .attr('fill', '#fff')
+      .text('❤')
+
+    var html = secondary
+      .append('switch')
+      .append('foreignObject')
+        .attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
+        .attr('x', 12)
+        .attr('y', 200)
+        .attr('width', 160)
+        .attr('height', 70)
+        // From here everything will be rendered with react using a ref.
+        // However for now these values are hard-coded.
+      .append('xhtml:div')
+        .attr('class', 'node_statistics')
+
+        // Remove with react + dyanmic data.
+      html.append('p')
+        .text('CPU: 48%')
+      html.append('p')
+        .text('Memory: 54%')
+      html.append('p')
+        .text('Network: 1.75kb/sec')
+
+    elm.call(d3.drag()
+            .on('start', dragstarted)
+            .on('drag', dragged)
+            .on('end', dragended));
+
+  }
+
+  // Drawing the links between nodes
+  var link = svg.append('g')
+      .attr('class', 'links')
+    .selectAll('line')
+    .data(graph.links)
+    .enter().append('line')
+      .attr('stroke-width', '2px')
+
+  // And svg group, to contain all of the attributes in @antonas' first prototype
+  var node = svg.selectAll('.node')
+    .data(graph.nodes)
+    .enter()
+    .append('g')
+    .attr('class', 'node_group');
+
+  svg.selectAll('.node_group').each(function (d) {
+    // Create different type of node for services with Primaries + Secondaries
+    // We could extend this further to allow us to have as many nested services
+    // as wanted.
+    if (d.id === 'Percona') {
+      createExtendedNode(d3.select(this));
+    } else {
+      createNode(d3.select(this));
+    }
+  });
+
+  simulation
+      .nodes(graph.nodes)
+      .on('tick', ticked);
+
+  simulation.force('link')
+      .links(graph.links);
+
+  function contrain(dimension, r, z) {
+    return Math.max(0, Math.min(dimension - r, z))
+  }
+
+  function ticked() {
+    // TODO: Remove these values and pull them out of the height of the boxes 
+    // that the constraints belong to.
+    r=174
+    r2=270
+
+    link
+        .attr('x1', function(d) {
+          let x;
+          svg.selectAll('.node_group').each(function (_, i) {
+            if (i !== d.source.index) return;
+            x = d3.select(this).node().getBBox().width;
+          });
+
+          return contrain(width, x, d.source.x) + 80;
+        })
+        .attr('y1', function(d) {
+          let y;
+          svg.selectAll('.node_group').each(function (_, i) {
+            if (i !== d.source.index) return;
+            y = d3.select(this).node().getBBox().height;
+          });
+          return contrain(height, y, d.source.y) + 24;
+        })
+        .attr('x2', function(d) {
+          let x;
+          svg.selectAll('.node_group').each(function (_, i) {
+            if (i !== d.target.index) return;
+            x = d3.select(this).node().getBBox().width;
+          });
+          return contrain(width, x, d.target.x) + 80;
+        })
+        .attr('y2', function(d) {
+          let y;
+          svg.selectAll('.node_group').each(function (_, i) {
+            if (i !== d.target.index) return;
+            y = d3.select(this).node().getBBox().height;
+          });
+          return contrain(height, y, d.target.y) + 24;
+        });
+
+    svg.selectAll('.node_group')
+       .attr('transform', function(d) {
+         let x = d3.select(this).node().getBBox().width;
+         let y = d3.select(this).node().getBBox().height;
+         return 'translate(' + contrain(width, x, d.x) + ',' + contrain(height, y, d.y) + ')';
+       });
+  }
+});
+
+function dragstarted(d) {
+  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
+  d.fx = d.x;
+  d.fy = d.y;
+}
+
+function dragged(d) {
+  d.fx = d3.event.x;
+  d.fy = d3.event.y;
+}
+
+function dragended(d) {
+  if (!d3.event.active) simulation.alphaTarget(0);
+  d.fx = null;
+  d.fy = null;
+}
+
+</script>
--- a/spikes/architecture/d3-revamp/services.json
+++ b/spikes/architecture/d3-revamp/services.json
@ -0,0 +1,15 @@
+{
+  "nodes": [
+    {"id": "Nginx", "group": 1},
+    {"id": "Wordpress", "group": 1},
+    {"id": "Memcached", "group": 1},
+    {"id": "Percona", "group": 1},
+    {"id": "NFS", "group": 1}
+  ],
+  "links": [
+    {"source": "Nginx", "target": "Wordpress", "value": 1},
+    {"source": "Wordpress", "target": "Memcached", "value": 8},
+    {"source": "Wordpress", "target": "NFS", "value": 8},
+    {"source": "Wordpress", "target": "Percona", "value": 8}
+  ]
+}
--- a/spikes/architecture/react-d3/.babelrc
+++ b/spikes/architecture/react-d3/.babelrc
@ -0,0 +1,15 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    ["transform-object-rest-spread", {
+      "useBuiltIns": true
+    }],
+    "add-module-exports",
+    "transform-es2015-modules-commonjs",
+    "react-hot-loader/babel"
+  ],
+  "sourceMaps": "both"
+}
--- a/spikes/architecture/react-d3/.eslintignore
+++ b/spikes/architecture/react-d3/.eslintignore
@ -0,0 +1,3 @@
+/node_modules
+coverage
+.nyc_output
--- a/spikes/architecture/react-d3/.eslintrc
+++ b/spikes/architecture/react-d3/.eslintrc
@ -0,0 +1,30 @@
+{
+  "extends": "semistandard",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 7,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "babel",
+    "react"
+  ],
+  "rules": {
+    "generator-star-spacing": 0,
+    "babel/generator-star-spacing": 1,
+    "space-before-function-paren": [2, "never"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "object-curly-newline": ["error", {
+      "minProperties": 1
+    }],
+    "sort-vars": ["error", {
+      "ignoreCase": true
+    }],
+    "operator-linebreak": 0
+  }
+}
--- a/spikes/architecture/react-d3/.gitignore
+++ b/spikes/architecture/react-d3/.gitignore
@ -0,0 +1,4 @@
+/node_modules
+coverage
+.nyc_output
+npm-debug.log
--- a/spikes/architecture/react-d3/client/graph.js
+++ b/spikes/architecture/react-d3/client/graph.js
@ -0,0 +1,26 @@
+const ReactRedux = require('react-redux');
+const React = require('react');
+const Links = require('./links');
+const Nodes = require('./nodes');
+
+const {
+  connect
+} = ReactRedux;
+
+const Component = (props) =>
+  <svg width='960' height='600'>
+    <Links {...props}/>
+    <Nodes {...props}/>
+  </svg>;
+
+const mapStateToProps = ({
+  data
+}) => {
+  return {
+    data
+  };
+};
+
+module.exports = connect(
+  mapStateToProps
+)(Component);
--- a/spikes/architecture/react-d3/client/index.js
+++ b/spikes/architecture/react-d3/client/index.js
@ -0,0 +1,18 @@
+const ReactDOM = require('react-dom');
+const React = require('react');
+const store = require('./store')();
+
+const render = () => {
+  const Root = require('./root');
+
+  ReactDOM.render(
+    <Root store={store} />,
+    document.getElementById('root')
+  );
+};
+
+render();
+
+if (module.hot) {
+  module.hot.accept('./root', render);
+}
--- a/spikes/architecture/react-d3/client/links.js
+++ b/spikes/architecture/react-d3/client/links.js
@ -0,0 +1,10 @@
+const React = require('react');
+
+const renderLines = (props) => {
+  return () => <line strokeWidth={2}></line>;
+};
+
+module.exports = (props) =>
+  <g className='links'>
+    { props.data.links.map(renderLines()) }
+  </g>;
--- a/spikes/architecture/react-d3/client/nodes.js
+++ b/spikes/architecture/react-d3/client/nodes.js
@ -0,0 +1,75 @@
+const React = require('react');
+
+function rightRoundedRect(x, y, width, height, radius) {
+  return 'M' + x + ',' + y // Move to (absolute)
+       + 'h ' + (width - radius) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+       + 'v ' + (height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+       + 'h ' + (radius - width) // Horizontal lint to (relative)
+       + 'z '; // path back to start
+}
+
+function leftRoundedRect(x, y, width, height, radius) {
+  return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+       + 'v ' + height // Vertical line to (relative)
+       + 'h ' + (radius - width) // Horizontal line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+       + 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+       + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+       + 'z '; // path back to start
+}
+
+const InfoBoxContainer = () =>
+  <g>
+    <path className='node_info'
+          d={leftRoundedRect('0', '0', 48, 48, 4)}
+          stroke='#bc3e35'
+          strokeWidth={1}
+          fill='#d6534a'
+    ></path>
+    <path className='node'
+          d={rightRoundedRect('48', '0', 112, 48, 4)}
+          stroke='#343434'
+          strokeWidth={1}
+          fill='#464646'
+    ></path>
+  </g>;
+
+const InfoBoxAlert = () =>
+  <g>
+    <circle className='alert'
+            cx={24}
+            cy={24}
+            strokeWidth={0}
+            fill='#fffff'
+            r={9}
+    ></circle>
+    <text className='exclamation'
+          x={24}
+          y={30}
+          textAnchor='middle'
+          fill='#d75148'
+    >{'!'}</text>
+  </g>;
+
+const InfoBoxText = (props) =>
+  <text className='info_text'
+        x={100}
+        y={30}
+        textAnchor='middle'
+        fill='#fff'
+  >{props.id}</text>;
+
+module.exports = (props) => (
+  <g className='groups'>
+    { props.data.nodes.map(node =>
+        <g className='node_group'>
+          <InfoBoxContainer/>
+          <InfoBoxAlert/>
+          <InfoBoxText {...node}/>
+        </g>
+      )
+    }
+  </g>
+);
--- a/spikes/architecture/react-d3/client/root.js
+++ b/spikes/architecture/react-d3/client/root.js
@ -0,0 +1,21 @@
+const React = require('react');
+const ReactHotLoader = require('react-hot-loader');
+const ReactRedux = require('react-redux');
+const Graph = require('./graph');
+
+const {
+  AppContainer
+} = ReactHotLoader;
+
+const {
+  Provider
+} = ReactRedux;
+
+module.exports = ({
+  store
+}) =>
+  <AppContainer>
+    <Provider store={store}>
+      <Graph />
+    </Provider>
+  </AppContainer>;
--- a/spikes/architecture/react-d3/client/services.json
+++ b/spikes/architecture/react-d3/client/services.json
@ -0,0 +1,15 @@
+{
+  "nodes": [
+    {"id": "Nginx", "group": 1},
+    {"id": "Wordpress", "group": 1},
+    {"id": "Memcached", "group": 1},
+    {"id": "Percona", "group": 1},
+    {"id": "NFS", "group": 1}
+  ],
+  "links": [
+    {"source": "Nginx", "target": "Wordpress", "value": 1},
+    {"source": "Wordpress", "target": "Memcached", "value": 8},
+    {"source": "Wordpress", "target": "NFS", "value": 8},
+    {"source": "Wordpress", "target": "Percona", "value": 8}
+  ]
+}
--- a/spikes/architecture/react-d3/client/store.js
+++ b/spikes/architecture/react-d3/client/store.js
@ -0,0 +1,17 @@
+const redux = require('redux');
+const services = require('./services');
+
+const {
+  createStore
+} = redux;
+
+const reducer = (state, action) => {
+  return {
+    ...state,
+    data: services
+  };
+};
+
+module.exports = (state = Object.freeze({})) => {
+  return createStore(reducer, state);
+};
--- a/spikes/architecture/react-d3/package.json
+++ b/spikes/architecture/react-d3/package.json
@ -0,0 +1,56 @@
+{
+  "name": "chartjs-graphing-spike",
+  "private": true,
+  "license": "private",
+  "main": "server/index.js",
+  "dependencies": {
+    "autoprefixer": "^6.5.1",
+    "babel-eslint": "^7.0.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
+    "babel-plugin-transform-object-rest-spread": "^6.16.0",
+    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-react-hmre": "^1.1.1",
+    "babel-runtime": "^6.11.6",
+    "build-array": "^1.0.0",
+    "component-emitter": "^1.2.1",
+    "css-loader": "^0.25.0",
+    "hapi": "^15.2.0",
+    "hapi-webpack-dev-plugin": "^1.1.4",
+    "inert": "^4.0.2",
+    "lodash.takeright": "^4.1.1",
+    "nes": "^6.3.1",
+    "postcss-loader": "^1.0.0",
+    "postcss-modules-values": "^1.2.2",
+    "postcss-nested": "^1.0.0",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "react-redux": "^4.4.5",
+    "redux": "^3.6.0",
+    "require-dir": "^0.3.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.16.2"
+  },
+  "devDependencies": {
+    "babel-register": "^6.16.3",
+    "eslint": "^3.8.1",
+    "eslint-config-semistandard": "^7.0.0",
+    "eslint-config-standard": "^6.2.0",
+    "eslint-plugin-babel": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-react": "^6.4.1",
+    "eslint-plugin-standard": "^2.0.1",
+    "json-loader": "^0.5.4"
+  },
+  "ava": {
+    "require": [
+      "babel-register"
+    ],
+    "babel": "inherit"
+  }
+}
--- a/spikes/architecture/react-d3/readme.md
+++ b/spikes/architecture/react-d3/readme.md
@ -0,0 +1,9 @@
+# ChartJS
+
+![](http://g.recordit.co/N8vdP8DBk4.gif)
+
+## summary
+
+ - [x] customisable via js
+ - [x] fast (handles 100ms updates well)
+ - [x] easy to update data
--- a/spikes/architecture/react-d3/server/index.js
+++ b/spikes/architecture/react-d3/server/index.js
@ -0,0 +1,29 @@
+const requireDir = require('require-dir');
+const plugins = require('./plugins');
+const routes = requireDir('./routes');
+const Hapi = require('hapi');
+const path = require('path');
+const fs = require('fs');
+
+const server = new Hapi.Server();
+
+server.connection({
+  host: 'localhost',
+  port: 8000
+});
+
+server.register(plugins, (err) => {
+  if (err) {
+    throw err;
+  }
+
+  Object.keys(routes).forEach((name) => {
+    routes[name](server);
+  });
+
+  server.start((err) => {
+    server.connections.forEach((conn) => {
+      console.log(`started at: ${conn.info.uri}`);
+    });
+  });
+});
--- a/spikes/architecture/react-d3/server/plugins.js
+++ b/spikes/architecture/react-d3/server/plugins.js
@ -0,0 +1,15 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const cfg = require('../webpack.config.js');
+
+module.exports = [
+  require('inert'),
+  require('nes'), {
+    register: require('hapi-webpack-dev-plugin'),
+    options: {
+      compiler: webpack(cfg),
+      devIndex: path.join(__dirname, '../static')
+    }
+  }
+];
--- a/spikes/architecture/react-d3/server/routes/home.js
+++ b/spikes/architecture/react-d3/server/routes/home.js
@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/',
+    handler: (request, reply) => {
+      reply.file(path.join(__dirname, '../../static/index.html'));
+    }
+  });
+};
--- a/spikes/architecture/react-d3/server/routes/static.js
+++ b/spikes/architecture/react-d3/server/routes/static.js
@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = (server) => {
+  // server.route({
+  //   method: 'GET',
+  //   path: '/{param*}',
+  //   handler: {
+  //     directory: {
+  //       path: path.join(__dirname, '../../static'),
+  //       redirectToSlash: true,
+  //       index: true
+  //     }
+  //   }
+  // });
+};
--- a/spikes/architecture/react-d3/server/routes/version.js
+++ b/spikes/architecture/react-d3/server/routes/version.js
@ -0,0 +1,18 @@
+const Pkg = require('../../package.json');
+
+const internals = {
+  response: {
+    version: Pkg.version
+  }
+};
+
+module.exports = (server) => {
+  server.route({
+    method: 'GET',
+    path: '/ops/version',
+    config: {
+      description: 'Returns the version of the server',
+      handler: (request, reply) => reply(internals.response)
+    }
+  });
+};
--- a/spikes/architecture/react-d3/static/index.html
+++ b/spikes/architecture/react-d3/static/index.html
@ -0,0 +1,11 @@
+<!doctype html>
+<html lang='en-US'>
+  <head>
+    <title>D3 React Boilerplate</title>
+    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
+  </head>
+  <body>
+    <div id='root'></div>
+    <script src='/static/bundle.js'></script>
+  </body>
+</html>
--- a/spikes/architecture/react-d3/webpack.config.js
+++ b/spikes/architecture/react-d3/webpack.config.js
@ -0,0 +1,69 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const config = {
+  debug: true,
+  devtool: 'source-map',
+  context: path.join(__dirname, './client'),
+  app: path.join(__dirname, './client/index.js'),
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
+    './index.js'
+  ],
+  output: {
+    path: path.join(__dirname, './static'),
+    publicPath: '/static/',
+    filename: 'bundle.js'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  postcss: () => {
+    return [
+      require('postcss-modules-values'),
+      require('postcss-nested'),
+      require('autoprefixer')
+    ];
+  },
+  module: {
+    loaders: [{
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['babel']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loaders: ['json']
+    }, {
+      test: /\.css$/,
+      exclude: /node_modules/,
+      include: [
+        path.join(__dirname, './client')
+      ],
+      loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
+    }]
+  }
+};
+
+const devServer = {
+  hot: true,
+  compress: true,
+  lazy: false,
+  publicPath: config.output.publicPath,
+  historyApiFallback: {
+    index: './static/index.html'
+  }
+};
+
+module.exports = Object.assign({
+  devServer
+}, config);