marcprux · December 17, 2015 23:49
diff --git a/README.md b/README.md
diff --git a/options.json b/options.json
 {
    "libraries": [
        "d3",
        "vega"
    ],
    "mode": "json",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
 }
diff --git a/water.css b/water.css
 .axis path, .axis line {
  fill: none;
  stroke: black;
  stroke-width: 1px;
  shape-rendering: crispEdges;
 }
 .axis text {
  font-family: sans-serif;
  font-size: 11px;
 }
diff --git a/water.html b/water.html
 <div id="vis"></div>
diff --git a/water.js b/water.js
 // from https://github.com/trifacta/vega/wiki/Tutorial

 function parse(spec) {
  vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
 }
 parse(livecoding.json);
diff --git a/water.json b/water.json
 {
  "width": 400,
  "height": 200,
  "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1,  "y": 28}, {"x": 2,  "y": 55},
        {"x": 3,  "y": 43}, {"x": 4,  "y": 91},
        {"x": 5,  "y": 81}, {"x": 6,  "y": 53},
        {"x": 7,  "y": 19}, {"x": 8,  "y": 87},
        {"x": 9,  "y": 52}, {"x": 10, "y": 48},
        {"x": 11, "y": 24}, {"x": 12, "y": 49},
        {"x": 13, "y": 87}, {"x": 14, "y": 66},
        {"x": 15, "y": 17}, {"x": 16, "y": 27},
        {"x": 17, "y": 68}, {"x": 18, "y": 16},
        {"x": 19, "y": 49}, {"x": 20, "y": 15}
      ]
    },
    {
      "name": "tableStats",
      "source": "table",
      "transform": [
        {"type": "stats", "value": "data.y"}
      ]
    },
    {
      "name": "tableWithStats",
      "source": "table",
      "transform": [
        {
          "type": "zip",
          "with": "tableStats",
          "as": "stats"
        },
        {
          "type": "formula", 
          "field": "isExtremum", 
          "expr": "(d.data.y >= d.stats.max) || (d.data.y <= d.stats.min)"}
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "ordinal",
      "range": "width",
      "domain": {"data": "table", "field": "data.x"}
    },
    {
      "name": "y",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.y"}
    },
    {
      "name": "color",
      "domain": {"data": "tableWithStats", "field": "isExtremum"},
      "range": ["green","darkgreen"]
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "properties": {
        "enter": {
          "x": {"scale": "x", "field": "data.x"},
          "width": {"scale": "x", "band": true, "offset": -1},
          "y": {"scale": "y", "field": "data.y"},
          "y2": {"scale": "y", "value": 0}
        },
        "update": {
          "fill": {"scale": "color", "field": "isExtremum"}
        },
        "hover": {
          "fill": {"value": "red"}
        }
      }
    }
  ]
 }
	{
	"libraries": [
	"d3",
	"vega"
	],
	"mode": "json",
	"layout": "fullscreen mode (vertical)",
	"resolution": "reset"
	}
	.axis path, .axis line {
	fill: none;
	stroke: black;
	stroke-width: 1px;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	// from https://github.com/trifacta/vega/wiki/Tutorial

	function parse(spec) {
	vg.parse.spec(spec, function(chart) { chart({el:"#vis"}).update(); });
	}
	parse(livecoding.json);
	{
	"width": 400,
	"height": 200,
	"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
	"data": [
	{
	"name": "table",
	"values": [
	{"x": 1, "y": 28}, {"x": 2, "y": 55},
	{"x": 3, "y": 43}, {"x": 4, "y": 91},
	{"x": 5, "y": 81}, {"x": 6, "y": 53},
	{"x": 7, "y": 19}, {"x": 8, "y": 87},
	{"x": 9, "y": 52}, {"x": 10, "y": 48},
	{"x": 11, "y": 24}, {"x": 12, "y": 49},
	{"x": 13, "y": 87}, {"x": 14, "y": 66},
	{"x": 15, "y": 17}, {"x": 16, "y": 27},
	{"x": 17, "y": 68}, {"x": 18, "y": 16},
	{"x": 19, "y": 49}, {"x": 20, "y": 15}
	]
	},
	{
	"name": "tableStats",
	"source": "table",
	"transform": [
	{"type": "stats", "value": "data.y"}
	]
	},
	{
	"name": "tableWithStats",
	"source": "table",
	"transform": [
	{
	"type": "zip",
	"with": "tableStats",
	"as": "stats"
	},
	{
	"type": "formula",
	"field": "isExtremum",
	"expr": "(d.data.y >= d.stats.max) \|\| (d.data.y <= d.stats.min)"}
	]
	}
	],
	"scales": [
	{
	"name": "x",
	"type": "ordinal",
	"range": "width",
	"domain": {"data": "table", "field": "data.x"}
	},
	{
	"name": "y",
	"range": "height",
	"nice": true,
	"domain": {"data": "table", "field": "data.y"}
	},
	{
	"name": "color",
	"domain": {"data": "tableWithStats", "field": "isExtremum"},
	"range": ["green","darkgreen"]
	}
	],
	"axes": [
	{"type": "x", "scale": "x"},
	{"type": "y", "scale": "y"}
	],
	"marks": [
	{
	"type": "rect",
	"from": {"data": "table"},
	"properties": {
	"enter": {
	"x": {"scale": "x", "field": "data.x"},
	"width": {"scale": "x", "band": true, "offset": -1},
	"y": {"scale": "y", "field": "data.y"},
	"y2": {"scale": "y", "value": 0}
	},
	"update": {
	"fill": {"scale": "color", "field": "isExtremum"}
	},
	"hover": {
	"fill": {"value": "red"}
	}
	}
	}
	]
	}