drawGraph

src/components/heatmap/heatmap.js

@@ -1,25 +1,235 @@
 import React from 'react';
 import _ from "lodash";
+import DeckGL, {PointCloudLayer, ScreenGridLayer, COORDINATE_SYSTEM} from 'deck.gl';
+import OrbitController from './orbit-control';
+import { Popup } from './popup';
 
 class Heatmap extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {
 
+    this.onChangeViewport = this.onChangeViewport.bind(this);
+    this.onInitialized = this.onInitialized.bind(this);
+    this.onResize = this.onResize.bind(this);
+    this.onUpdate = this.onUpdate.bind(this);
+    this.onHover = this.onHover.bind(this);
+
+    this.state = {
+      width: 0,
+      height: 0,
+      points: [],
+      sampleExpressionMatrix: [
+        {color:[0, 255, 0], position: [100, 100]},
+        {color:[0, 255, 0], position: [100, 100]},
+        {color:[0, 255, 0], position: [100, 100]},
+      ],
+      progress: 0,
+      popup: {
+        displayed: false,
+        x: 0,
+        y: 0,
+        title: '',
+      },
+      viewport: {
+        lookAt: [0, 0, 0],
+        distance: 1,
+        rotationX: 0,
+        rotationY: 0,
+        fov: 30,
+        minDistance: 0.5,
+        maxDistance: 3
+      }
     };
   }
 
-  componentDidMount() {
+  getColor(cluster) {
+    let color = [0, 0, 0];
 
+    switch(cluster){
+      case 0:
+        color = [166, 206, 227];
+        break;
+      case 1:
+        color = [31, 120, 180];
+        break;
+      case 2:
+        color = [178, 223, 138];
+        break;
+      case 3:
+        color = [51, 160, 44];
+        break;
+      case 4:
+        color = [251, 154, 153];
+        break;
+      case 5:
+        color = [227, 26, 28];
+        break;
+      case 6:
+        color = [253, 191, 111];
+        break;
+      case 7:
+        color = [255, 127, 0];
+        break;
+      case 8:
+        color = [202, 178, 214];
+        break;
+      case 9:
+        color = [106, 61, 154];
+        break;
+    }
+
+    return color;
+  }
+
+
+  componentWillMount() {
+    window.addEventListener('resize', this.onResize);
+    this.onResize();
+  }
+
+  componentDidMount() {
+    this.canvas.fitBounds([-0.5, -0.5, -0.5], [0.5, 0.5, 0.5]);
+
+    this.fetchData();
+
+    window.requestAnimationFrame(this.onUpdate);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  }
+
+  fetchData() {
+    fetch('https://raw.githubusercontent.com/zdenekhynek/data-science-capstone-visualisation/master/public/clusters.json')
+      .then((res) => {
+        res.json().then((obj) => {
+          const clusters = Object.keys(obj).map((k) => obj[k])
+          const points = clusters.map((cluster) => {
+            const position = [cluster.x, cluster.y, cluster.z];
+            const color = [255,0,0];
+            const id = cluster.id;
+            const title = cluster.webTitle;
+            return { id, title, position, color };
+          });
+
+          this.setState({ points, progress: 1 })
+        });
+      });
+  }
+
+  onHover(d) {
+    let popup = { displayed: false };
+    console.log('d', d)
+
+    if (d.object) {
+      const object = d.object;
+      popup = {
+        id: object.id,
+        title: object.title,
+        displayed: true,
+        x: d.x,
+        y: d.y,
+      };
+    }
+
+    this.setState({ popup });
+  }
+
+  onResize() {
+    const {innerWidth: width, innerHeight: height} = window;
+    this.setState({width: width / 1.5, height: height / 1.5});
+  }
+
+  onInitialized(gl) {
+    gl.clearColor(0, 0, 0, 1);
+    gl.enable(gl.DEPTH_TEST);
+    gl.depthFunc(gl.LEQUAL);
+  }
+
+  onChangeViewport(viewport) {
+    this.setState({
+      rotating: !viewport.isDragging,
+      viewport: {...this.state.viewport, ...viewport}
+    });
+  }
+
+  onUpdate() {
+    const {viewport} = this.state;
+    window.requestAnimationFrame(this.onUpdate);
+  }
+
+  renderPointCloudLayer() {
+    return this.state.points.length && new PointCloudLayer({
+      id: 'point-cloud-layer',
+      data: this.state.points,
+      projectionMode: COORDINATE_SYSTEM.IDENTITY,
+      pickable: true,
+      onHover: this.onHover,
+      getPosition: d => d.position,
+      getNormal: d => [0, 0.5, 0.2],
+      getColor: d => d.color,
+      radiusPixels: 2
+    });
+  }
+
+  renderGridLayer() {
+    /**
+     * Data format:
+     * [
+     *   {position: [-122.4, 37.7]},
+     *   ...
+     * ]
+     */
+    const screenGridLayer = new ScreenGridLayer({
+      id: 'screen-grid-layer',
+      data: this.state.sampleExpressionMatrix,
+      projectionMode: COORDINATE_SYSTEM.IDENTITY,
+      pickable: true,
+      getPosition: d => d.position,
+      getColor: d => d.color,
+      cellSizePixels: 40
+    });
+
+    return screenGridLayer;
+  }
+
+  renderDeckGLCanvas() {
+    const {width, height, viewport} = this.state;
+    const canvasProps = {width, height, ...viewport};
+    const glViewport = OrbitController.getViewport(canvasProps);
+
+    return width && height && (
+      <OrbitController {...canvasProps} ref={canvas => {
+        this.canvas = canvas;
+      }} onChangeViewport={this.onChangeViewport}>
+        <DeckGL
+          width={width}
+          height={height}
+          viewport={glViewport}
+          layers={[
+            // this.renderPointCloudLayer(),
+            this.renderGridLayer()
+          ].filter(Boolean)}
+          onWebGLInitialized={this.onInitialized}/>
+      </OrbitController>
+    );
   }
 
   render() {
+    const {width, height, popup} = this.state;
+    if (!width || !height) {
+      return null;
+    }
+
+    const renderedPopup = (popup.displayed)? <Popup {...popup} /> : null;
+
     return (
-      <div style={{marginTop: 50}}>
-        <h3> Heatmap </h3>
+      <div id="heatmap">
+        {this.renderDeckGLCanvas()}
+        {renderedPopup}
       </div>
-    )
+    );
   }
 };
 

src/components/heatmap/orbit-control.js

@@ -0,0 +1,171 @@
+/* global window */
+import React, {Component, PropTypes} from 'react';
+import {PerspectiveViewport} from 'deck.gl';
+import {vec3} from 'gl-matrix';
+
+/* Utils */
+// constrain number between bounds
+function clamp(x, min, max) {
+  if (x < min) {
+    return min;
+  }
+  if (x > max) {
+    return max;
+  }
+  return x;
+}
+
+const ua = typeof window.navigator !== 'undefined' ?
+  window.navigator.userAgent.toLowerCase() : '';
+const firefox = ua.indexOf('firefox') !== -1;
+
+/* Interaction */
+
+export default class OrbitController extends Component {
+
+  static getViewport({width, height, lookAt, distance, rotationX, rotationY, fov}) {
+    const cameraPos = vec3.add([], lookAt, [0, 0, distance]);
+    vec3.rotateX(cameraPos, cameraPos, lookAt, rotationX / 180 * Math.PI);
+    vec3.rotateY(cameraPos, cameraPos, lookAt, rotationY / 180 * Math.PI);
+
+    return new PerspectiveViewport({
+      width,
+      height,
+      lookAt,
+      far: 1000,
+      near: 0.1,
+      fovy: fov,
+      eye: cameraPos
+    });
+  }
+
+  constructor(props) {
+    super(props);
+    this._dragStartPos = null;
+  }
+
+  _onDragStart(evt) {
+    const {pageX, pageY} = evt;
+    this._dragStartPos = [pageX, pageY];
+    this.props.onChangeViewport({isDragging: true});
+  }
+
+  _onDrag(evt) {
+    if (this._dragStartPos) {
+      const {pageX, pageY} = evt;
+      const {width, height} = this.props;
+      const dx = (pageX - this._dragStartPos[0]) / width;
+      const dy = (pageY - this._dragStartPos[1]) / height;
+
+      if (evt.shiftKey || evt.ctrlKey || evt.altKey || evt.metaKey) {
+        // pan
+        const {lookAt, distance, rotationX, rotationY, fov} = this.props;
+
+        const unitsPerPixel = distance / Math.tan(fov / 180 * Math.PI / 2) / 2;
+
+        const newLookAt = vec3.add([], lookAt, [-unitsPerPixel * dx, unitsPerPixel * dy, 0]);
+        vec3.rotateX(newLookAt, newLookAt, lookAt, rotationX / 180 * Math.PI);
+        vec3.rotateY(newLookAt, newLookAt, lookAt, rotationY / 180 * Math.PI);
+
+        this.props.onChangeViewport({
+          lookAt: newLookAt
+        });
+      } else {
+        // rotate
+        const {rotationX, rotationY} = this.props;
+        const newRotationX = clamp(rotationX - dy * 180, -90, 90);
+        const newRotationY = (rotationY - dx * 180) % 360;
+
+        this.props.onChangeViewport({
+          rotationX: newRotationX,
+          rotationY: newRotationY
+        });
+      }
+
+      this._dragStartPos = [pageX, pageY];
+    }
+  }
+
+  _onDragEnd() {
+    this._dragStartPos = null;
+    this.props.onChangeViewport({isDragging: false});
+  }
+
+  _onWheel(evt) {
+    evt.preventDefault();
+    let value = evt.deltaY;
+    // Firefox doubles the values on retina screens...
+    if (firefox && evt.deltaMode === window.WheelEvent.DOM_DELTA_PIXEL) {
+      value /= window.devicePixelRatio;
+    }
+    if (evt.deltaMode === window.WheelEvent.DOM_DELTA_LINE) {
+      value *= 40;
+    }
+    if (value !== 0 && value % 4.000244140625 === 0) {
+      // This one is definitely a mouse wheel event.
+      // Normalize this value to match trackpad.
+      value = Math.floor(value / 4);
+    }
+
+    const {distance, minDistance, maxDistance} = this.props;
+    const newDistance = clamp(distance * Math.pow(1.01, value), minDistance, maxDistance);
+
+    this.props.onChangeViewport({
+      distance: newDistance
+    });
+  }
+
+  // public API
+  fitBounds(min, max) {
+    const {fov} = this.props;
+    const size = Math.max(max[0] - min[0], max[1] - min[1], max[2] - min[2]);
+    const newDistance = size / Math.tan(fov / 180 * Math.PI / 2) / 2;
+
+    this.props.onChangeViewport({
+      distance: newDistance
+    });
+  }
+
+  render() {
+    return (
+      <div style={{position: 'relative', userSelect: 'none'}}
+        onMouseDown={this._onDragStart.bind(this)}
+        onMouseMove={this._onDrag.bind(this)}
+        onMouseLeave={this._onDragEnd.bind(this)}
+        onMouseUp={this._onDragEnd.bind(this)}
+        onWheel={this._onWheel.bind(this)} >
+
+        {this.props.children}
+
+      </div>);
+  }
+}
+
+OrbitController.propTypes = {
+  // target position
+  lookAt: PropTypes.arrayOf(PropTypes.number),
+  // camera distance
+  distance: PropTypes.number.isRequired,
+  minDistance: PropTypes.number,
+  maxDistance: PropTypes.number,
+  // rotation
+  rotationX: PropTypes.number,
+  rotationY: PropTypes.number,
+  // field of view
+  fov: PropTypes.number,
+  // viewport width in pixels
+  width: PropTypes.number.isRequired,
+  // viewport height in pixels
+  height: PropTypes.number.isRequired,
+  // callback
+  onChangeViewport: PropTypes.func.isRequired
+};
+
+OrbitController.defaultProps = {
+  lookAt: [0, 0, 0],
+  rotationX: 0,
+  rotationY: 0,
+  minDistance: 0,
+  maxDistance: Infinity,
+  fov: 50
+};

src/components/heatmap/popup.js

@@ -0,0 +1,51 @@
+import React, {PureComponent} from 'react';
+
+export class Popup extends PureComponent {
+  render() {
+    const { title, x, y } = this.props;
+    const style = {
+      position: 'absolute',
+      top: y,
+      left: x,
+      maxWidth: '200px',
+      padding: '10px',
+      color: 'white',
+      backgroundColor: 'black',
+      pointerEvents: 'none',
+      transform: 'translate(10px, -50%)',
+    };
+
+    const arrowStyle = {
+      position: 'absolute',
+      top: '50%',
+      left: '-14px',
+      width: '7px',
+      height: '5px',
+      boxSizing: 'border-box',
+      transform: 'translateY(-50%)',
+      border: '7px solid transparent',
+      borderRight: '7px solid black',
+    };
+
+    return (
+      <div style={style}>
+        <div style={arrowStyle} />
+        {title}
+      </div>
+    )
+  };
+}
+
+Popup.propTypes = {
+  id: React.PropTypes.string,
+  title: React.PropTypes.string,
+  x: React.PropTypes.number,
+  y: React.PropTypes.number,
+};
+
+Popup.defaultProps = {
+  id: 'id',
+  title: '',
+  x: 0,
+  y: 0,
+};