rendering point marks, with attributes from ordinal variables

Author: sandbox

public/js/explore-sql.min.js

@@ -61,7 +61,9 @@ FieldContainer = DropTarget(["TableField", "ShelfField"], FieldDropHandler, fiel
 
 const LEGEND_TYPE = {
   color: 'color',
-  opacity: 'color'
+  opacity: 'color',
+  shape: 'symbol',
+  size: 'size'
 }
 
 class ShelfLegend extends React.Component {
@@ -77,7 +79,18 @@ class ShelfLegend extends React.Component {
     if (null == scaleObject) return
     let { type, domain, range } = scaleObject
     let scale = d3.scale[type]().domain(domain).range(range)
+    switch(shelf) {
+    case 'shape':
+      scale.range(_.map(scale.range(), shape => d3.svg.symbol().type(shape)()))
+      break
+    case 'size':
+      scale.range(_.map(scale.range(), v => Math.sqrt(v / Math.PI)))
+    }
     let svgLegend = d3.legend[LEGEND_TYPE[shelf]]().scale(scale)
+    switch(shelf) {
+    case 'size':
+      svgLegend.shape('circle').shapePadding(5)
+    }
     switch(type) {
     case 'linear': case 'log': case 'pow': case 'sqrt':
       let ticks = scale.ticks(5)
@@ -90,9 +103,9 @@ class ShelfLegend extends React.Component {
     }
     let node = d3.select(this.refs.d3LegendContainer)
     let elem = findDOMNode(this)
-    let legendElem = node.append('g').call(svgLegend)
+    let legendElem = node.append('g').attr("transform", _.contains(['shape', 'size'], shelf) ? "translate(10, 10)" : null).call(svgLegend)
     let legendBounds = legendElem[0][0].getBoundingClientRect()
-    node.attr("width", legendBounds.width).attr("height", legendBounds.height)
+    node.attr("width", legendBounds.width).attr("height", legendBounds.height + 5)
   }
 
   componentDidMount() {

src/explorer/components/Shelf.js

@@ -3,7 +3,8 @@ import { getFieldQueryType, getAccessorName } from '../../helpers/field'
 
 const MARKS = {
   'bar': React.createFactory(require('./marks/Bar')),
-  'line': React.createFactory(require('./marks/Line'))
+  'line': React.createFactory(require('./marks/Line')),
+  'point': React.createFactory(require('./marks/Point'))
 }
 
 export class Pane extends React.Component {

src/explorer/components/vis/Pane.js

@@ -0,0 +1,99 @@
+import _ from 'lodash'
+import dl from 'datalib'
+import d3 from 'd3'
+import React from 'react'
+import { getAccessorName, isBinField } from '../../../helpers/field'
+const { svg } = React.DOM
+
+export default class Point extends React.Component {
+  getDefaultScales() {
+    const { scales } = this.props
+    let symbol = d3.svg.symbol()
+    return {
+      size:    scales.size.__default__,
+      opacity: scales.opacity.__default__,
+      symbol:  symbol,
+      shape:   scales.shape.__default__,
+      color:  scales.color.__default__,
+      x:       0,
+      y:       0
+    }
+  }
+
+  getSymbolScales(props) {
+    const { markData, width, height } = this.props
+    const { field, scale, shelf } = props
+    const name = getAccessorName(field)
+    switch(shelf) {
+    case 'row':
+      return {
+        y: (d) => scale(d[name])
+      }
+    case 'col':
+      return {
+        x: (d) => scale(d[name])
+      }
+    case 'color':
+      let color = (d) => scale(d[name])
+      return {
+        color
+      }
+    case 'size':
+      return {
+        size: d => scale(d[name])
+      }
+    case 'shape':
+      return {
+        shape:  d => scale(d[name])
+      }
+    case 'opacity':
+    default:
+      return {
+      }
+    }
+  }
+
+  getAttributeTransforms() {
+    const { transformFields } = this.props
+    let transforms = _.merge(
+      this.getDefaultScales(),
+      _.reduce(_.map(transformFields, (fs) => this.getSymbolScales(fs)), _.merge, {}))
+    transforms.transform = (d, i) => `translate(${transforms.x(d, i)}, ${transforms.y(d, i)})`
+    transforms.d = d => {
+      return transforms.symbol.size(transforms.size(d)).type(transforms.shape(d))()
+    }
+    return transforms
+  }
+
+  _d3Render() {
+    d3.select(this.refs.d3container).selectAll("*").remove()
+    const transforms = this.getAttributeTransforms()
+    let symbols = d3.select(this.refs.d3container).selectAll("g.symbol")
+        .data(this.props.markData)
+        .enter().append("g").attr("class", "symbol")
+        .append('path')
+        .attr('stroke-width', 1)
+        .attr('d', transforms.d)
+        .attr('fill', transforms.color)
+        .attr('fill-opacity', 0.2)
+        .attr('stroke', transforms.color)
+        .attr('transform', transforms.transform)
+  }
+
+  componentDidMount() {
+    this._d3Render()
+  }
+
+  componentDidUpdate() {
+    this._d3Render()
+  }
+
+  componentWillUnmount() {
+    d3.select(this.refs.d3container).selectAll("*").remove()
+  }
+
+  render() {
+    const { width, height } = this.props
+    return svg({ref: 'd3container', width, height})
+  }
+}

src/explorer/components/vis/marks/Point.js

@@ -8,6 +8,10 @@ function getOrdinalVisualRange(shelf, spec) {
   switch (shelf) {
   case 'color':
     return COLOR_PALETTES[spec.palette]
+  case 'shape':
+    return spec.shapes
+  case 'size':
+    return spec.sizes
   default:
     return []
   }

src/explorer/data/scale.js

@@ -39,9 +39,13 @@ function table(state = tableState, action) {
 
 const propertiesState = {
   size:        {
-    'default': 30,
+    sizes: [30, 50, 80, 120, 170, 230, 300],
+    'default': 30
+  },
+  shape:       {
+    shapes: ["circle", "cross", "diamond", "square", "triangle-down", "triangle-up"],
+    'default': 'circle'
   },
-  shape:       {},
   color:       {
     palette: "category10",
     'default': "#356CA7",