mattijn
4/27/2018 - 8:55 PM

vegalite2_awash_line_chart.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": "https://raw.githubusercontent.com/mattijn/datasets/master/stations_discharge_day_of_year_8_stations.csv",
    "format": {"type": "csv", "parse": {"date": "date"}}
  },
  "width": 800,
  "height": 400,
  "title":{"text":"Average daily discharge in m3/s for each station based on last ~30 years"},  
  "layer": [
    {
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": {"format": "%B", "title":" "}},
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      },
      "layer": [
        {"mark": "line"},
        {
          "selection": {
            "tooltip": {
              "type": "single",
              "nearest": true,
              "on": "mouseover",
              "encodings": ["x"],
              "empty": "none"
            }
          },
          "mark": "point",
          "encoding": {
            "opacity": {
              "condition": {"selection": "tooltip", "value": 1},
              "value": 0
            }
          }
        }
      ]
    },
    {
      "transform": [{"filter": {"selection": "tooltip"}}],
      "layer": [
        {
          "mark": {"type": "rule", "color": "gray"},
          "encoding": {
            "x": {"type": "temporal", "field": "date", "axis": {"format": "%B"}}
          }
        },
        {
          "mark": {"type": "text", "align": "left", "dx": 5, "dy": -5},
          "encoding": {
            "text": {"type": "quantitative", "field": "value"},
            "color": {"type": "nominal", "field": "symbol"},
            "x": {"type": "temporal", "field": "date"},
            "y": {"type": "quantitative", "field": "value"}
          }
        },
        {
          "mark": {"type": "text", "align": "left", "dx": 5, "dy": 232},
          "encoding": {
            "text": {"type": "temporal", "field": "date", "format": "%d %B"},
            "x": {"type": "temporal", "field": "date"}
          }
        }        
      ]
    }
  ]
}