Connected Scatter Plot Example
A connected scatter plot uses line segments to connect consecutive scatter plot points, for example to illustrate trajectories over time. This example shows the shifting relationship between the price of gas and the average number of miles driven in a year, adapted from Driving Shifts Into Reverse by Hannah Fairfield, The New York Times (May 2, 2010).
Vega JSON Specification <>
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "An example of a connected scatter plot, tracking changes in miles driven versus the price of gasoline.",
"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",
"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",
"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": 49}
}
}
},
{
"type": "text",
"from": {"data": "drive"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "miles"},
"y": {"scale": "y", "field": "gas"},
"dx": {"scale": "dx", "field": "side"},
"dy": {"scale": "dy", "field": "side"},
"fill": {"value": "#000"},
"text": {"field": "year"},
"align": {"scale": "align", "field": "side"},
"baseline": {"scale": "base", "field": "side"}
}
}
}
]
}