Merge pull request #432 from Kitware/solid-dots

Add opacity option to ScatterPlot

app/examples/index.json

@@ -3,6 +3,10 @@
     "title": "Scatter Plot",
     "link": "scatter"
   },
+  {
+    "title": "Scatter Plot (solid dots)",
+    "link": "scatter-solid"
+  },
   {
     "title": "Line Chart",
     "link": "line"

app/examples/scatter-solid/index.js

@@ -0,0 +1,22 @@
+import { iris } from '../util/datasets';
+import showComponent from '../util/showComponent';
+
+window.onload = () => {
+  showComponent('ScatterPlot', 'div', {
+    data: iris,
+    x: 'petalLength',
+    y: 'petalWidth',
+    color: 'sepalLength',
+    shape: 'species',
+    width: 620,
+    height: 500,
+    opacity: 0.9,
+    padding: {
+      top: 20,
+      bottom: 80,
+      left: 50,
+      right: 130
+    },
+    renderer: 'svg'
+  });
+};

src/candela/components/ScatterPlot/spec.json

@@ -12,6 +12,9 @@
     ["xAxis.title", ["@get", "x"]],
     ["yAxis.title", ["@get", "y"]],
 
+    // Default to (almost) transparent symbols.
+    ["opacity", 0.01],
+
     ["padding", "strict"]
 ],
   [
@@ -238,7 +241,7 @@
                     "stroke": {"scale": "color", "field": "color"},
                     "shape": {"scale": "shape", "field": "shape"},
                     "fill": {"scale": "color", "field": "color"},
-                    "fillOpacity": {"value": 0.01},
+                    "fillOpacity": {"value": ["@get", "opacity"]},
                     "strokeWidth": {"value": 2},
                     "size": {"scale": "size", "field": "size"}
                   }

src/candela/components/ScatterPlot/test/scatterplot-solid.image.js

@@ -0,0 +1,9 @@
+import imageTest from '../../../util/imageTest';
+
+imageTest({
+  name: 'scatterplot-solid',
+  url: 'http://localhost:28000/examples/scatter-solid',
+  selector: '#vis-element',
+  delay: 1000,
+  threshold: 0.001
+});