visgl · Firenze11 · May 31, 2017 · May 23, 2017 · May 24, 2017 · May 31, 2017
diff --git a/examples/plot/app.js b/examples/plot/app.js
@@ -26,10 +26,14 @@ class Root extends Component {
         height: 500
       }
     };
+
+    this._resize = this._resize.bind(this);
+    this._onChangeViewport = this._onChangeViewport.bind(this);
+    this._onHover = this._onHover.bind(this);
   }
 
   componentDidMount() {
-    window.addEventListener('resize', this._resize.bind(this));
+    window.addEventListener('resize', this._resize);
     this._resize();
   }
 
@@ -46,17 +50,31 @@ class Root extends Component {
     });
   }
 
+  _onHover(info) {
+    const hoverInfo = info.sample ? info : null;
+    if (hoverInfo !== this.state.hoverInfo) {
+      this.setState({hoverInfo});
+    }
+  }
+
   render() {
-    const {viewport} = this.state;
+    const {viewport, hoverInfo} = this.state;
 
     return (
       <OrbitController
         {...viewport}
-        onChangeViewport={this._onChangeViewport.bind(this)} >
-        <DeckGLOverlay viewport={viewport}
+        onChangeViewport={this._onChangeViewport} >
+        <DeckGLOverlay
+          viewport={viewport}
           equation={equation}
           resolution={200}
-          showAxis={true} />
+          showAxis={true}
+          onHover={this._onHover} />
+
+        {hoverInfo && <div className="tooltip" style={{left: hoverInfo.x, top: hoverInfo.y}} >
+          { hoverInfo.sample.map(x => x.toFixed(3)).join(', ') }
+        </div>}
+
       </OrbitController>
     );
   }

diff --git a/examples/plot/index.html b/examples/plot/index.html
@@ -5,6 +5,16 @@
     <title>deck.gl example</title>
     <style>
       body {margin: 0; padding: 0; overflow: hidden;}
+      .tooltip {
+        position: absolute;
+        padding: 4px;
+        background: rgba(0, 0, 0, 0.8);
+        color: #fff;
+        max-width: 300px;
+        font-size: 10px;
+        z-index: 9;
+        pointer-events: none;
+      }
     </style>
   </head>
   <body>

diff --git a/examples/plot/package.json b/examples/plot/package.json
@@ -5,6 +5,7 @@
     "build": "NODE_ENV=production webpack --env.prod=true"
   },
   "dependencies": {
+    "d3-scale": "^1.0.6",
     "deck.gl": "^4.0.0",
     "immutable": "^3.8.1",
     "luma.gl": "^3.0.0",

diff --git a/examples/plot/plot-layer/README.md b/examples/plot/plot-layer/README.md
@@ -95,3 +95,9 @@ Amount that grids should setback from the bounding box. Relative to the size of
 - Default: `[0, 0, 0, 255]`
 
 Color to draw the grids with, in `[r, g, b, a]`.
+
+##### `axesTitles` (Array, optional)
+
+- Default: `['x', 'z', 'y']`
+
+Strings to draw next to each axis as their titles, note that the second element is the axis that points upwards.
diff --git a/examples/plot/plot-layer/axes-layer.js b/examples/plot/plot-layer/axes-layer.js
@@ -13,10 +13,11 @@ import labelFragment from './label-fragment.glsl';
 const FONT_SIZE = 48;
 
 const defaultProps = {
-  fontSize: 12,
+  fontSize: 16,
   ticksCount: 6,
   axesOffset: 0,
-  axesColor: [0, 0, 0, 255]
+  axesColor: [0, 0, 0, 255],
+  axesTitles: ['x', 'z', 'y']
 };
 
 /* Utils */
@@ -53,7 +54,8 @@ export default class AxesLayer extends Layer {
 
     attributeManager.addInstanced({
       instancePositions: {size: 2, update: this.calculateInstancePositions, noAlloc: true},
-      instanceNormals: {size: 3, update: this.calculateInstanceNormals, noAlloc: true}
+      instanceNormals: {size: 3, update: this.calculateInstanceNormals, noAlloc: true},
+      instanceIsTitle: {size: 1, update: this.calculateInstanceIsTitle, noAlloc: true}
     });
 
     this.setState({
@@ -69,13 +71,13 @@ export default class AxesLayer extends Layer {
     const {attributeManager} = this.state;
 
     if (changeFlags.dataChanged || oldProps.ticksCount !== props.ticksCount) {
-      const {data, ticksCount} = props;
+      const {data, ticksCount, axesTitles} = props;
 
       const ticks = this.calculateTicks(data, ticksCount);
 
       this.setState({
         ticks,
-        labelTexture: this.renderLabelTexture(ticks),
+        labelTexture: this.renderLabelTexture(ticks, axesTitles),
         center: data.map(b => (b[0] + b[1]) / 2),
         dim: data.map(b => b[1] - b[0])
       });
@@ -254,23 +256,42 @@ export default class AxesLayer extends Layer {
     attribute.value = new Float32Array(flatten(normals));
   }
 
+  calculateInstanceIsTitle(attribute) {
+    const {ticks} = this.state;
+
+    const isTitle = ticks.map(axisTicks => {
+      const ticksCount = axisTicks.length - 1;
+      return axisTicks.map((t, i) => i < ticksCount ? 0 : 1);
+    });
+
+    attribute.value = new Float32Array(flatten(isTitle));
+  }
+
   // updates the instancePositions and instanceNormals attributes
   calculateTicks(bounds, ticksCount) {
     const xTicks = getTicks(bounds[0], ticksCount);
     const yTicks = getTicks(bounds[1], ticksCount);
     const zTicks = getTicks(bounds[2], ticksCount);
 
-    return [xTicks, yTicks, zTicks];
+    return [
+      [...xTicks, (bounds[0][0] + bounds[0][1]) / 2],
+      [...yTicks, (bounds[1][0] + bounds[1][1]) / 2],
+      [...zTicks, (bounds[2][0] + bounds[2][1]) / 2]];
   }
 
-  renderLabelTexture(ticks) {
+  renderLabelTexture(ticks, axesTitles) {
 
     if (this.state.labels) {
       this.state.labels.labelTexture.delete();
     }
 
+    const axesLabels = ticks.map((axisTicks, axisId) => {
+      const ticksCount = axisTicks.length - 1;
+      return axisTicks.map((t, i) => i < ticksCount ? t : axesTitles[axisId]);
+    });
+
     // attach a 2d texture of all the label texts
-    const textureInfo = textMatrixToTexture(this.context.gl, ticks, FONT_SIZE);
+    const textureInfo = textMatrixToTexture(this.context.gl, axesLabels, FONT_SIZE);
     if (textureInfo) {
       // success
       const {columnWidths, texture} = textureInfo;

diff --git a/examples/plot/plot-layer/grid-vertex.glsl.js b/examples/plot/plot-layer/grid-vertex.glsl.js
@@ -25,6 +25,7 @@ attribute vec3 positions;
 attribute vec3 normals;
 attribute vec2 instancePositions;
 attribute vec3 instanceNormals;
+attribute float instanceIsTitle;
 
 uniform vec3 modelCenter;
 uniform vec3 modelDim;
@@ -62,7 +63,7 @@ void main(void) {
     ) * instanceNormals;
 
   // do not draw grid line in front of the graph
-  shouldDiscard = frontFacing(gridLineNormal);
+  shouldDiscard = frontFacing(gridLineNormal) + instanceIsTitle;
 
   vec3 position_modelspace = (vec3(instancePositions.x) - modelCenter) *
     instanceNormals + gridVertexOffset * modelDim / 2.0;

diff --git a/examples/plot/plot-layer/label-vertex.glsl.js b/examples/plot/plot-layer/label-vertex.glsl.js
@@ -26,6 +26,7 @@ attribute vec3 normals;
 attribute vec2 texCoords;
 attribute vec2 instancePositions;
 attribute vec3 instanceNormals;
+attribute float instanceIsTitle;
 
 uniform vec2 viewportSize;
 uniform vec3 modelCenter;
@@ -40,6 +41,7 @@ varying vec2 vTexCoords;
 varying float shouldDiscard;
 
 const float LABEL_OFFSET = 0.02;
+const float TITLE_OFFSET = 0.04;
 
 float sum2(vec2 v) {
   return v.x + v.y;
@@ -105,7 +107,7 @@ void main(void) {
 
   // apply offsets
   position_modelspace += gridOffset * gridLineNormal;
-  position_modelspace += LABEL_OFFSET * gridVertexOffset;
+  position_modelspace += (LABEL_OFFSET + (instanceIsTitle * TITLE_OFFSET)) * gridVertexOffset;
 
   vec4 position_clipspace = project_to_clipspace(vec4(position_modelspace, 1.0));
 

diff --git a/examples/plot/plot-layer/plot-layer.js b/examples/plot/plot-layer/plot-layer.js
@@ -14,10 +14,11 @@ const defaultProps = {
   yResolution: 100,
   lightStrength: 1,
   drawAxes: true,
-  fontSize: 12,
+  fontSize: 16,
   ticksCount: 6,
   axesOffset: 0,
-  axesColor: [0, 0, 0, 255]
+  axesColor: [0, 0, 0, 255],
+  axesTitles: ['x', 'z', 'y']
 };
 
 /*
@@ -84,6 +85,7 @@ export default class PlotLayer extends CompositeLayer {
         ticksCount: this.props.ticksCount,
         axesOffset: this.props.axesOffset,
         axesColor: this.props.axesColor,
+        axesTitles: this.props.axesTitles,
         visible: this.props.drawAxes,
         pickable: false
       })