Vega-lite Quick Demo

Layer.vl.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Summarized and per year weather information for Seatle and New York.",
  "data": {"url": "data/weather.csv"},
  "repeat": {"column": ["temp_max","precipitation","wind"]},
  "spec": {
    "layer": [
      {
        "mark": "line",
        "encoding": {
          "y": {
            "aggregate": "mean",
            "field": {"repeat": "column"},
            "type": "quantitative"
          },
          "x": {
            "timeUnit": "month",
            "type": "temporal",
            "field": "date"
          },
          "detail": {
            "timeUnit": "year",
            "type": "temporal",
            "field": "date"
          },
          "color": {"type": "nominal","field": "location"},
          "opacity": {"value": 0.2}
        }
      },
      {
        "mark": "line",
        "encoding": {
          "y": {
            "aggregate": "mean",
            "field": {"repeat": "column"},
            "type": "quantitative"
          },
          "x": {
            "timeUnit": "month",
            "type": "temporal",
            "field": "date"
          },
          "color": {"type": "nominal","field": "location"}
        }
      }
    ]
  }
}

Zoom

{
  "data": {"url": "data/cars.json"},
  "selection": {
    "brush": {
      "type": "interval"
    }
  },
  "mark": {"type": "circle", "clip": true},
  "encoding": {
    "x": {
      "field": "Horsepower", "type": "quantitative",
      "scale": {"domain": [75, 150]}
    },
    "y": {
      "field": "Miles_per_Gallon", "type": "quantitative",
      "scale": {"domain": [20, 40]}
    },
    "size": {"field": "Cylinders", "type": "quantitative"},
    "color": {
      "condition": {
        "selection": "brush",
        "field": "Origin", "type": "nominal"
      },
      "value": "grey"
    }
  }
}

"zoom": "wheel![event.shiftKey]"

"bind": "scales"