Update interactive examples.

uwdata · Jul 7, 2015 · 4cf7af8 · 4cf7af8
1 parent 456f86d
commit 4cf7af8
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 101 deletions.
diff --git a/examples/spec/brush.json b/examples/spec/brush.json
@@ -3,20 +3,23 @@
   "height": 200,
 
   "signals": [
+    {"name": "w", "init": 200},
+    {"name": "h", "init": 200},
     {
       "name": "brush_start",
       "init": {"x": 0, "y": 0},
-      "streams": [{"type": "mousedown", "expr": "{x: event.vgX, y: event.vgY}"}]
+      "streams": [{
+        "type": "mousedown",
+        "expr": "{x: clamp(event.vgX,0,w), y: clamp(event.vgY,0,h)}"
+      }]
     },
     {
       "name": "brush_end",
       "init": {"x": 0, "y": 0},
-      "streams": [
-        {
-          "type": "mousedown, mouseup, [mousedown, mouseup] > mousemove", 
-          "expr": "{x: event.vgX, y: event.vgY}"
-        }
-      ]
+      "streams": [{
+        "type": "mousedown, [mousedown, window:mouseup] > window:mousemove", 
+        "expr": "{x: clamp(event.vgX,0,w), y: clamp(event.vgY,0,h)}"
+      }]
     }
   ],
 
@@ -28,15 +31,13 @@
       "range": [{"signal": "brush_start.x"}, {"signal": "brush_end.x"}],
       "scale": {"name": "x", "invert": true}
     },
-
     {
       "name": "yRange",
       "type": "in",
       "item": {"arg": "y"},
       "range": [{"signal": "brush_start.y"}, {"signal": "brush_end.y"}],
       "scale": {"name": "y", "invert": true}
     },
-
     {
       "name": "inRange",
       "type": "&&",
@@ -102,7 +103,6 @@
                   "x": {"field": "sepalWidth"},
                   "y": {"field": "petalLength"}
                 },
-
                 "scale": "c", 
                 "field": "species"
               },

diff --git a/examples/spec/budget_forecasts.json b/examples/spec/budget_forecasts.json
@@ -1,6 +1,7 @@
 {
   "width": 700,
   "height": 400,
+  "padding": {"top": 10, "left": 10, "right": 80, "bottom": 10},
   "background": "#edf1f7",
 
   "signals": [
@@ -14,13 +15,11 @@
     },
     {
       "name": "handleYear",
-      "streams": [
-        {
-          "type": "mousemove[dragging]",
-          "expr": "event.vgX",
-          "scale": {"name": "x", "invert": true}
-        }
-      ]
+      "streams": [{
+        "type": "mousemove[dragging]",
+        "expr": "clamp(event.vgX, 10, 10000)",
+        "scale": {"name": "x", "invert": true}
+      }]
     },
     {
       "name": "currentYear",
@@ -29,21 +28,17 @@
     },
     {
       "name": "tipYear",
-      "streams": [
-        {
-          "type": "mousemove[!dragging]", "expr": "event.vgX",
-          "scale": {"name": "x", "invert": true}
-        }  
-      ]
+      "streams": [{
+        "type": "mousemove[!dragging]", "expr": "event.vgX",
+        "scale": {"name": "x", "invert": true}
+      }]
     },
     {
       "name": "tipValue",
-      "streams": [
-        {
-          "type": "mousemove[!dragging]", "expr": "event.vgY",
-          "scale": {"name": "y", "invert": true}
-        }  
-      ]
+      "streams": [{
+        "type": "mousemove[!dragging]", "expr": "event.vgY",
+        "scale": {"name": "y", "invert": true}
+      }]
     }
   ],
 
@@ -228,9 +223,9 @@
       "type": "text",
       "properties": {
         "enter": {
-          "x": {"field": {"group": "width"}, "offset": -25},
+          "x": {"value": 0},
           "y": {"value": 25},
-          "fontSize": {"value": 24},
+          "fontSize": {"value": 32},
           "fontWeight": {"value": "bold"},
           "fill": {"value": "steelblue"}
         },
@@ -245,9 +240,9 @@
       "from": {"data": "tooltip"},
       "properties": {
         "update": {
-          "x": {"scale": "x", "field": "argmin.forecastYear", "offset": -50},
+          "x": {"scale": "x", "field": "argmin.forecastYear", "offset": -5},
+          "y": {"scale": "y", "field": "argmin.value", "offset": 20},
           "width": {"value": 150},
-          "y": {"scale": "y", "field": "argmin.value", "offset": 25},
           "height": {"value": 35},
           "fill": {"value": "#fff"},
           "fillOpacity": {"value": 0.85},
@@ -261,8 +256,8 @@
           "type": "text",
           "properties": {
             "update": {
-              "x": {"value": 5},
-              "y": {"value": 15},
+              "x": {"value": 6},
+              "y": {"value": 14},
               "text": {"template": "Forecast from early {{parent.argmin.budgetYear}}"},
               "fill": {"value": "black"},
               "fontWeight": {"value": "bold"}
@@ -273,9 +268,9 @@
           "type": "text",
           "properties": {
             "update": {
-              "x": {"value": 5},
-              "y": {"value": 30},
-              "text": {"template": "{{parent.argmin.forecastYear}} \t\t {{parent.argmin.abs|number:'$.3f'}} trillion {{parent.argmin.type}}"},
+              "x": {"value": 6},
+              "y": {"value": 29},
+              "text": {"template": "{{parent.argmin.forecastYear}} \t {{parent.argmin.abs|number:'$.3f'}} trillion {{parent.argmin.type}}"},
               "fill": {"value": "black"},
               "align": {"value": "left"}
             }

diff --git a/examples/spec/crossfilter.json b/examples/spec/crossfilter.json
@@ -88,22 +88,31 @@
   ],
 
   "signals": [
+    {
+      "name": "scope",
+      "streams": [
+        {"type": "@timesGroup:mousedown", "expr": "event.vgTimesGroupItem"},
+        {"type": "@delayGroup:mousedown", "expr": "event.vgDelayGroupItem"},
+        {"type": "@distGroup:mousedown", "expr": "event.vgDistGroupItem"},
+        {"type": "@dayGroup:mousedown", "expr": "event.vgDayGroupItem"}
+      ]
+    },
     {
       "name": "timesStart",
       "init": -1,
       "streams": [{
         "type": "@timesGroup:mousedown", 
         "expr": "event.vgTimesGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgTimesGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {
       "name": "timesEnd",
       "init": -1,
       "streams": [{
-        "type": "@timesGroup:mousedown, @timesGroup:mouseup, [@timesGroup:mousedown, @timesGroup:mouseup] > @timesGroup:mousemove",
+        "type": "@timesGroup:mousedown, [@timesGroup:mousedown, @timesGroup:mouseup] > @timesGroup:mousemove",
         "expr": "event.vgTimesGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgTimesGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {"name": "minTime", "expr": "max(min(timesStart, timesEnd), 0)"},
@@ -115,16 +124,16 @@
       "streams": [{
         "type": "@delayGroup:mousedown", 
         "expr": "event.vgDelayGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgDelayGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {
       "name": "delayEnd",
       "init": -1,
       "streams": [{
-        "type": "@delayGroup:mousedown, @delayGroup:mouseup, [@delayGroup:mousedown, @delayGroup:mouseup] > @delayGroup:mousemove",
+        "type": "@delayGroup:mousedown, [@delayGroup:mousedown, @delayGroup:mouseup] > @delayGroup:mousemove",
         "expr": "event.vgDelayGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgDelayGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {"name": "minDelay", "expr": "max(min(delayStart, delayEnd), -60)"},
@@ -136,16 +145,16 @@
       "streams": [{
         "type": "@distGroup:mousedown", 
         "expr": "event.vgDistGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgDistGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {
       "name": "distEnd",
       "init": -1,
       "streams": [{
-        "type": "@distGroup:mousedown, @distGroup:mouseup, [@distGroup:mousedown, @distGroup:mouseup] > @distGroup:mousemove",
+        "type": "@distGroup:mousedown, [@distGroup:mousedown, @distGroup:mouseup] > @distGroup:mousemove",
         "expr": "event.vgDistGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgDistGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {"name": "minDist", "expr": "max(min(distStart, distEnd), 0)"},
@@ -156,15 +165,15 @@
       "streams": [{
         "type": "@dayGroup:mousedown", 
         "expr": "event.vgDayGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgDayGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {
       "name": "dayEnd",
       "streams": [{
-        "type": "@dayGroup:mousedown, @dayGroup:mouseup, [@dayGroup:mousedown, @dayGroup:mouseup] > @dayGroup:mousemove",
+        "type": "@dayGroup:mousedown, [@dayGroup:mousedown, @dayGroup:mouseup] > @dayGroup:mousemove",
         "expr": "event.vgDayGroupX",
-        "scale": {"name": "x", "invert": true, "scope": "event.vgDayGroupItem"}
+        "scale": {"scope": "scope", "name": "x", "invert": true}
       }]
     },
     {"name": "minDay", "expr": "max(min(dayStart, dayEnd), datetime('Jan 1 2001'))"},
@@ -580,4 +589,4 @@
     }
 
   ]
-}
+}
diff --git a/examples/spec/index_chart.json b/examples/spec/index_chart.json
@@ -5,7 +5,7 @@
 
   "signals": [
     {
-      "name": "xPos",
+      "name": "xDate",
       "streams": [{
         "type": "mousemove", 
         "expr": "event.vgX", 
@@ -19,8 +19,8 @@
       "name": "indexDate",
       "init": {"expr": "time('Jan 1 2005')"},
       "streams": [{
-        "type": "xPos", 
-        "expr": "min(max(xPos, minDate), maxDate)"
+        "type": "xDate", 
+        "expr": "clamp(xDate, minDate, maxDate)"
       }]
     }
   ],
@@ -153,4 +153,4 @@
       }
     }
   ]
-}
+}
diff --git a/examples/spec/linking.json b/examples/spec/linking.json
@@ -25,54 +25,51 @@
       "init": {"x": 0, "y": 0},
       "streams": [{
         "type": "@cell:mousedown, @point:mousedown", 
-        "expr": "{x: event.vgX, y: event.vgY}"
+        "expr": "{x: clamp(event.vgX, cell.x, cell.x+cell.width), y: clamp(event.vgY, cell.y, cell.y+cell.height)}"
       }]
     },
     {
       "name": "brush_end",
       "init": {"x": 0, "y": 0},
       "streams": [{
-        "type": "@cell:mousedown, @point:mousedown, @cell:mouseup, @point:mouseup", 
-        "expr": "{x: event.vgX, y: event.vgY}"
-      }, {
-        "type": "[(@cell:mousedown, @point:mousedown), mouseup] > mousemove", 
-        "expr": "{x: event.vgX, y: event.vgY}"
+        "type": "@cell:mousedown, @point:mousedown, [(@cell:mousedown, @point:mousedown), window:mouseup] > window:mousemove",
+        "expr": "{x: clamp(event.vgX, cell.x, cell.x+cell.width), y: clamp(event.vgY, cell.y, cell.y+cell.height)}"
       }]
     },
     {
       "name": "start_x",
       "init": 0,
       "streams": [{
         "type": "brush_start", 
-        "expr": "brush_start.x - cell.x", 
-        "scale": {"name": "x", "invert": true, "scope": {"signal": "cell"}}
+        "expr": "brush_start.x - cell.x",
+        "scale": {"name": "x", "invert": true, "scope": "cell"}
       }]
     },
     {
       "name": "start_y",
       "init": 0,
       "streams": [{
         "type": "brush_start", 
-        "expr": "brush_start.y - cell.y", 
-        "scale": {"name": "y", "invert": true, "scope": {"signal": "cell"}}
+        "expr": "brush_start.y - cell.y",
+        "scale": {"name": "y", "invert": true, "scope": "cell"}
       }]
     },
     {
       "name": "end_x",
       "init": 0,
       "streams": [{
         "type": "brush_end", 
-        "expr": "brush_end.x - cell.x", 
-        "scale": {"name": "x", "invert": true, "scope": {"signal": "cell"}}
+        "expr": "brush_end.x - cell.x",
+        "scale": {"name": "x", "invert": true, "scope": "cell"}
       }]
     },
     {
       "name": "end_y",
       "init": 0,
       "streams": [{
         "type": "brush_end", 
-        "expr": "brush_end.y - cell.y", 
-        "scale": {"name": "y", "invert": true, "scope": {"signal": "cell"}}
+        "expr": "brush_end.y - cell.y",
+        "scale": {"name": "y", "invert": true, "scope": "cell"}
       }]
     }
   ],