label_line_connected_scatter.vg.json

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 800,
  "height": 500,
  "padding": 5,

  "config": {
    "axis": {
      "domain": false,
      "labelFontSize": 12,
      "labelFontWeight": "bold",
      "tickSize": 0
    }
  },

  "data": [
    {
      "name": "drive",
      "url": "../data/driving.json"
    }
  ],

  "scales": [
    {
      "name": "x",
      "type": "linear",
      "domain": {"data": "drive", "field": "miles"},
      "range": "width",
      "nice": true,
      "zero": false,
      "round": true
    },
    {
      "name": "y",
      "type": "linear",
      "domain": {"data": "drive", "field": "gas"},
      "range": "height",
      "nice": true,
      "zero": false,
      "round": true
    },
    {
      "name": "align",
      "type": "ordinal",
      "domain": ["left", "right", "top", "bottom"],
      "range": ["right", "left", "center", "center"]
    },
    {
      "name": "base",
      "type": "ordinal",
      "domain": ["left", "right", "top", "bottom"],
      "range": ["middle", "middle", "bottom", "top"]
    },
    {
      "name": "dx",
      "type": "ordinal",
      "domain": ["left", "right", "top", "bottom"],
      "range": [-7, 6, 0, 0]
    },
    {
      "name": "dy",
      "type": "ordinal",
      "domain": ["left", "right", "top", "bottom"],
      "range": [1, 1, -5, 6]
    }
  ],

  "axes": [
    {
      "orient": "top",
      "scale": "x",
      "tickCount": 5,
      "grid": true
    },
    {
      "orient": "bottom",
      "scale": "x",
      "title": "Miles driven per capita each year",
      "ticks": false,
      "labels": false
    },
    {
      "orient": "left",
      "scale": "y",
      "tickCount": 5,
      "grid": true,
      "format": "$0.2f"
    },
    {
      "orient": "right",
      "scale": "y",
      "title": "Price of a gallon of gasoline (adjusted for inflation)",
      "ticks": false,
      "labels": false
    }
  ],

  "marks": [
    {
      "type": "line",
      "name": "baseLine",
      "from": {"data": "drive"},
      "encode": {
        "enter": {
          "interpolate": {"value": "cardinal"},
          "x": {"scale": "x", "field": "miles"},
          "y": {"scale": "y", "field": "gas"},
          "stroke": {"value": "#000"},
          "strokeWidth": {"value": 3}
        }
      }
    },
    {
      "type": "symbol",
      "name": "basePoint",
      "from": {"data": "drive"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "miles"},
          "y": {"scale": "y", "field": "gas"},
          "fill": {"value": "#fff"},
          "stroke": {"value": "#000"},
          "strokeWidth": {"value": 1},
          "size": {"value": 50}
        }
      },
      "zindex": 1
    },
    {
      "type": "text",
      "from": {"data": "basePoint"},
      "name": "label",
      "encode": {
        "enter": {
          "fill": {"value": "#000"},
          "text": {"field": "datum.year"}
        }
      },
      "transform": [
        {
          "type": "label",
          "offset": 2.5,
          "size": [800, 500],
          "sort": {"field": "datum.year"},
          "avoidMarks": ["baseLine"],
          "padding": 10
        }
      ],
      "zindex": 2
    },
    {
      "type": "rule",
      "from": {"data": "label"},
      "encode": {
        "enter": {
          "x": {"field": "datum.x"},
          "y": {"field": "datum.y"},
          "x2": {"field": "x"},
          "y2": {"field": "y"},
          "opacity": {"field": "opacity"},
          "strokeOpacity": {"value": 0.3},
          "strokeWidth": {"value": 1}
        }
      },
      "zindex": -1
    }
  ]
}