Vega-Lite

https://vega.github.io/vega-lite/docs/
Admin
Vega-Lite is a high-level grammar for interactive graphics that provides a concise JSON syntax for...
Tokens:143,228
Snippets:1,438
Trust Score:8.3
Update:3 months ago
Show doc for...
Tokens:
Raw
### Example: Impute with Keyvals

Source: https://vega.github.io/vega-lite/docs/impute.html

Example demonstrating the use of `keyvals` to specify explicit key values for imputation when `groupby` is not used.

```APIDOC
## Example: Impute with Keyvals

Similarly `keyvals` _must_ be specified if the `groupby` property is not specified.

```json
{
  "data": {
    "values": [{"a": 0, "b": 28, "c": 0},
               {"a": 0, "b": 91, "c": 1},
               {"a": 1, "b": 43, "c": 0},
               {"a": 1, "b": 55, "c": 1},
               {"a": 2, "b": 81, "c": 0},
               {"a": 2, "b": 53, "c": 1},
               {"a": 3, "b": 19, "c": 0}]
  },
  "transform": [{
    "impute": "b",
      "key": "a",
      "value": 100,
      "groupby": ["c"],
      "keyvals": [4]
  }],
  "mark": "line",
  "encoding": {
    "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal"}
  }
}
```
```

--------------------------------

### General Concatenation Example

Source: https://vega.github.io/vega-lite/docs/concat.html

This example shows a flexible flow layout with two columns. It displays bar charts for mean and median precipitation, followed by a scatter plot of temperature bins. The `columns` property controls the maximum items per row.

```json
{
  "data": {
    "url": "data/weather.csv"
  },
  "transform": [{
    "filter": "datum.location === 'Seattle'"
  }],

  "columns": 2,
  "concat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "precipitation"
        }
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "median",
          "field": "precipitation"
        }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "bin": true
        },
        "size": {
          "aggregate": "count"
        }
      }
    }
  ]
}
```

--------------------------------

### Quantile Transform Output with Step Example

Source: https://vega.github.io/vega-lite/docs/quantile.html

Shows the output format for quantile calculations using a probability step size.

```json
[{ "prob": 0.025, "value": 0.01 }, { "prob": 0.075, "value": 0.02 }, ...{ "prob": 0.975, "value": 0.2 }]
```

--------------------------------

### Quantile Transform Output Example

Source: https://vega.github.io/vega-lite/docs/quantile.html

Illustrates the output format for quantile calculations using specified probabilities.

```json
[
  { "prob": 0.25, "value": 1.34 },
  { "prob": 0.5, "value": 5.82 },
  { "prob": 0.75, "value": 9.31 }
]
```

--------------------------------

### Customizing Color Scheme with Scheme Parameters

Source: https://vega.github.io/vega-lite/docs/scale.html

This example shows how to use a scheme parameter object to specify the 'name' and 'extent' of a color scheme.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "field": "Origin", "type": "nominal",
      "scale": {"range": ["purple", "#ff0000", "teal"]}
    }
  }
}
```

--------------------------------

### Lookup Data Example

Source: https://vega.github.io/vega-lite/docs/lookup.html

This example demonstrates how to use the lookup transform to add 'age' and 'height' properties to the main data. It matches the 'person' field from the primary data to the 'name' field in the secondary data source.

```json
{
  "data": {"url": "data/lookup_groups.csv"},
  "transform": [
    {
      "lookup": "person",
      "from": {
        "data": {"url": "data/lookup_people.csv"},
        "key": "name",
        "fields": ["age", "height"]
      }
    }
  ],
  "mark": "bar",
  "encoding": {
    "x": {"field": "group"},
    "y": {"field": "age", "aggregate": "mean"}
  }
}
```

--------------------------------

### Vertical Concatenation Example

Source: https://vega.github.io/vega-lite/docs/concat.html

This example demonstrates vertical concatenation by displaying a bar chart of monthly precipitation followed by a scatter plot of min/max temperatures. Ensure data is loaded and filtered as needed.

```json
{
  "data": {
    "url": "data/weather.csv"
  },
  "transform": [{
    "filter": "datum.location === 'Seattle'"
  }],
  "vconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "precipitation",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "type": "quantitative",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "type": "quantitative",
          "bin": true
        },
        "size": {
          "aggregate": "count",
          "type": "quantitative"
        }
      }
    }
  ]
}
```

--------------------------------

### Example: Horizontal Concatenation of Bar and Point Charts

Source: https://vega.github.io/vega-lite/docs/concat.html

This example demonstrates horizontal concatenation by displaying a bar chart of average precipitation and a point chart of binned temperatures side-by-side. The data is filtered for 'Seattle'.

```json
{
  "data": {
    "url": "data/weather.csv"
  },
  "transform": [{
    "filter": "datum.location === 'Seattle'"
  }],
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {
          "timeUnit": "month",
          "field": "date",
          "type": "ordinal"
        },
        "y": {
          "aggregate": "mean",
          "field": "precipitation"
        }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "temp_min",
          "bin": true
        },
        "y": {
          "field": "temp_max",
          "bin": true
        },
        "size": {"aggregate": "count"}
      }
    }
  ]
}
```

--------------------------------

### Calculate and Filter Data - Vega-Lite Example

Source: https://vega.github.io/vega-lite/docs/calculate.html

This example demonstrates deriving a new field 'b2' by doubling the 'b' field using a calculate transform, and then filtering the data to include only rows where 'b2' is greater than 60. Use 'datum' to reference fields within the current data object.

```json
{
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43},
      {"a": "G", "b": 19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53}
    ]
  },
  "transform": [
    {"calculate": "2*datum.b", "as": "b2"},
    {"filter": "datum.b2 > 60"}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "b2", "type": "quantitative"},
    "x": {"field": "a", "type": "ordinal"}
  }
}
```

--------------------------------

### Example: Impute with Mean Method and Frame

Source: https://vega.github.io/vega-lite/docs/impute.html

Example of using the impute transform with the 'mean' method and a specified frame to calculate moving averages.

```APIDOC
## Example: Impute with Mean Method and Frame

```json
{
  "data": {
    "values": [{"a": 0, "b": 28, "c": 0},
               {"a": 0, "b": 91, "c": 1},
               {"a": 1, "b": 43, "c": 0},
               {"a": 1, "b": 55, "c": 1},
               {"a": 2, "b": 81, "c": 0},
               {"a": 2, "b": 53, "c": 1},
               {"a": 3, "b": 19, "c": 0}]
  },
  "transform": [{
      "impute": "b",
      "key": "a",
      "groupby": ["c"],
      "method": "mean",
      "frame": [-2, 2]
  }],
  "mark": "line",
  "encoding": {
    "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal"}
  }
}
```
```

--------------------------------

### Brush Scatterplot Example

Source: https://vega.github.io/vega-lite/docs/selection.html

This example demonstrates a scatterplot where points are colored based on 'Origin' when selected by the 'brush' interval. The 'zoom' property is implicitly enabled for interactive resizing.

```json
{
  "data": {"url": "data/cars.json"},
  "params": [{"name": "brush", "select": "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": {
        "param": "brush",
        "field": "Origin", "type": "nominal"
      },
      "value": "grey"
    }
  }
}
```

--------------------------------

### Loess Transform Definition Example

Source: https://vega.github.io/vega-lite/docs/loess.html

Provides a concrete example of how to define the loess transform with specific fields and bandwidth.

```json
{"loess": "y", "on": "x", "bandwidth": 0.5}
```

--------------------------------

### Example: Fit Autosize with Padding

Source: https://vega.github.io/vega-lite/docs/size.html

Demonstrates a bar chart that fits exactly into specified dimensions, including padding within the size calculation. This configuration is useful when the total view size is critical.

```json
{
  "width": 300,
  "autosize": {
    "type": "fit",
    "contains": "padding"
  },
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

--------------------------------

### Text Mark as Labels with Offset

Source: https://vega.github.io/vega-lite/docs/text.html

Example showing how to use text marks as labels for other marks. It demonstrates setting `dx` or `dy` for offset, and configuring `align` and `baseline` properties.

```json
{
  "data": {

```

--------------------------------

### Stacked Bar Chart Example

Source: https://vega.github.io/vega-lite/docs/stack.html

A basic stacked bar chart is created by default when a color field is added to a bar mark. This example uses the 'barley.json' dataset to visualize yield by variety, stacked by site.

```json
{
  "data": {"url": "data/barley.json"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "variety"},
    "y": {"aggregate": "sum", "field": "yield"},
    "color": {"field": "site"}
  }
}
```

--------------------------------

### Global Title Configuration Example

Source: https://vega.github.io/vega-lite/docs/title.html

Shows how to configure title properties globally within the 'config' object for a top-level view specification. This allows for consistent title styling across multiple charts.

```json
// Top-level View Specification
{
  ...
  "config": {
    "title": : {
      ...
    }
  }
}
```

--------------------------------

### Scatterplot with Image Marks

Source: https://vega.github.io/vega-lite/docs/image.html

This example demonstrates how to create a scatterplot where each point is represented by an image. The 'url' encoding channel maps image file paths to the points.

```json
{
  "data": {
    "values": [
      {"x": 0.5, "y": 0.5, "img": "data/ffox.png"},
      {"x": 1.5, "y": 1.5, "img": "data/gimp.png"},
      {"x": 2.5, "y": 2.5, "img": "data/7zip.png"}
    ]
  },
  "mark": {"type": "image", "width": 50, "height": 50},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "url": {"field": "img", "type": "nominal"}
  }
}
```

--------------------------------

### Customize Tooltip and Axis Formatting

Source: https://vega.github.io/vega-lite/docs/config.html

Configure different number formats for tooltips and axes. This example uses a more precise format for tooltips and a simpler format for the y-axis.

```json
{
  "width": 150,
  "height": 150,
  "data": {"url": "data/cars.json"},
  "mark": {"type": "bar", "tooltip": true},
  "encoding": {
    "x": {"field": "Year", "type": "temporal"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative", "aggregate": "average"}
  },
  "config": {
    "tooltipFormat": {
      "numberFormat": ".8f"
    },
    "numberFormat": "d",
    "customFormatTypes": true
  }
}
```

--------------------------------

### Parsing Local Time with 'hoursminutes'

Source: https://vega.github.io/vega-lite/docs/timeunit.html

Visualizing data using hours and minutes. This example assumes dates are parsed in local time by default.

```json
{
  "data": {
    "values": [
      {"date": "10 Oct 2011 22:48:00"},
      {"date": "11 Oct 2022 23:00:00"}
    ]
  },
  "mark": "point",
  "encoding": {
    "y": {
      "timeUnit": "hoursminutes",
      "field": "date",
      "type": "ordinal",
      "title": "time"
    }
  }
}
```

--------------------------------

### Quantile-Quantile Plot Example

Source: https://vega.github.io/vega-lite/docs/quantile.html

Generates a quantile-quantile plot comparing input data to theoretical uniform and normal distributions. Requires the 'u' field from the data.

```json
{
  "data": {
    "url": "data/normal-2d.json"
  },
  "transform": [
    {
      "quantile": "u",
      "step": 0.01,
      "as": [
        "p",
        "v"
      ]
    },
    {
      "calculate": "quantileUniform(datum.p)",
      "as": "unif"
    },
    {
      "calculate": "quantileNormal(datum.p)",
      "as": "norm"
    }
  ],
  "hconcat": [
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "unif",
          "type": "quantitative"
        },
        "y": {
          "field": "v",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {
          "field": "norm",
          "type": "quantitative"
        },
        "y": {
          "field": "v",
          "type": "quantitative"
        }
      }
    }
  ]
}
```

--------------------------------

### Dot Plot Example

Source: https://vega.github.io/vega-lite/docs/point.html

Creates a dot plot by mapping a field to the x-channel of point marks.

```json
{
  "data": {"url": "data/movies.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "IMDB Rating", "type": "quantitative"}
  }
}
```

--------------------------------

### Single Bar Chart Example

Source: https://vega.github.io/vega-lite/docs/bar.html

Creates a single bar chart by mapping a quantitative field to the x-axis. Requires data and a transform filter.

```json
{
  "data": { "url": "data/population.json"},
  "transform": [{
    "filter": "datum.year == 2000"
  }],
  "mark": "bar",
  "encoding": {
    "x": {
      "aggregate": "sum", "field": "people",
      "title": "population"
    }
  }
}
```

--------------------------------

### Extent Transform Example Data

Source: https://vega.github.io/vega-lite/docs/extent.html

This is the sample data used to demonstrate the extent transform. It contains records with fields 'a' and 'b'.

```json
{
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  }
}
```

--------------------------------

### Wind Vector Map Example

Source: https://vega.github.io/vega-lite/docs/point.html

Utilizes point marks with angle encoding to create a wind vector map visualization.

```json
{
  "width": 615,
  "height": 560,
  "data": {
    "url": "data/windvectors.csv",

```

--------------------------------

### Faceted Density Estimates Example

Source: https://vega.github.io/vega-lite/docs/density.html

Generates density estimates of 'Body Mass (g)' for different penguin species, faceted by species. This allows for easy comparison of distributions across groups.

```json
{
  "title": "Distribution of Body Mass of Penguins",
  "width": 400,
  "height": 80,
  "data": {
    "url": "data/penguins.json"
  },
  "mark": "area",
  "transform": [
    {
      "density": "Body Mass (g)",
      "groupby": ["Species"],
      "extent": [2500, 6500]
    }
  ],
  "encoding": {
    "x": {"field": "value", "type": "quantitative", "title": "Body Mass (g)"},
    "y": {"field": "density", "type": "quantitative", "stack": "zero"},
    "row": {"field": "Species"}
  }
}
```

--------------------------------

### Set Step for Offset Channel

Source: https://vega.github.io/vega-lite/docs/size.html

When using a nested offset channel (like xOffset), the step size is applied to the offset by default. This example demonstrates setting a specific step for the offset.

```json
{
  "data": {
    "values": [
      {"category":"A", "group": "x", "value":0.1},
      {"category":"A", "group": "y", "value":0.6},
      {"category":"A", "group": "z", "value":0.9},
      {"category":"B", "group": "x", "value":0.7},
      {"category":"B", "group": "y", "value":0.2},
      {"category":"B", "group": "z", "value":1.1},
      {"category":"C", "group": "x", "value":0.6},
      {"category":"C", "group": "y", "value":0.1},
      {"category":"C", "group": "z", "value":0.2}
    ]
  },
  "width": {"step": 24},
  "mark": "bar",
  "encoding": {
    "x": {"field": "category"},
    "y": {
      "field": "value", "type": "quantitative",
      "axis": {"title": "population", "grid": false}
    },
    "xOffset": {"field": "group"},
    "color": {"field": "group"}
  }
}
```

--------------------------------

### Text Mark Properties Specification

Source: https://vega.github.io/vega-lite/docs/text.html

Example of how to define properties for a text mark within a Vega-Lite specification. This includes type, and other mark properties.

```json
{
  "data": ... ,
  "mark": {
    "type": "text",
    ...
  },
  "encoding": ... ,
  ...
}
```

--------------------------------

### Rule Mark Properties Specification

Source: https://vega.github.io/vega-lite/docs/rule.html

Example of how to include a rule mark within a larger view specification, showing where mark properties can be defined.

```json
{
  "...",
  "mark": {
    "type": "rule",
    ...
  },
  "encoding": ... ,
  ...
}
```

--------------------------------

### Diverging Scale Example

Source: https://vega.github.io/vega-lite/docs/scale.html

Illustrates a diverging color scale for quantitative data, using a custom domain and range. The number of elements in 'range' should match the number of elements in 'domain'.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "field": "Weight_in_lbs",
      "type": "quantitative",
      "scale": {
        "domainMid": 3250,
        "range": "diverging"
      }
    }
  }
}
```

--------------------------------

### Impute Transform with Keyvals

Source: https://vega.github.io/vega-lite/docs/impute.html

Example demonstrating the use of 'keyvals' to specify explicit key values for imputation, alongside 'groupby' and a fixed 'value'.

```json
{
  "data": {
    "values": [{"a": 0, "b": 28, "c": 0},
               {"a": 0, "b": 91, "c": 1},
               {"a": 1, "b": 43, "c": 0},
               {"a": 1, "b": 55, "c": 1},
               {"a": 2, "b": 81, "c": 0},
               {"a": 2, "b": 53, "c": 1},
               {"a": 3, "b": 19, "c": 0}]
  },
  "transform": [{
    "impute": "b",
      "key": "a",
      "value": 100,
      "groupby": ["c"],
      "keyvals": [4]
  }],
  "mark": "line",
  "encoding": {
    "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal"}
  }
}
```

--------------------------------

### Layered Bar Chart with Text Labels

Source: https://vega.github.io/vega-lite/docs/text.html

This example shows how to layer a text mark on top of a bar mark to display quantitative values as labels. Ensure data is properly formatted for both marks.

```json
{
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal"},
    "x": {"field": "b", "type": "quantitative", "scale": {"domain": [0, 60]}}
  },
  "layer": [{
    "mark": "bar"
  }, {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
      "dx": 3
    },
    "encoding": {
      "text": {"field": "b", "type": "quantitative"}
    }
  }]
}
```

--------------------------------

### Horizontal Bar Chart Example

Source: https://vega.github.io/vega-lite/docs/bar.html

Generates a horizontal bar chart by mapping a discrete field to the y-channel and a quantitative field to the x-channel. Adjusts bar height using `step`.

```json
{
  "height": {"step": 17},
  "data": { "url": "data/population.json"},
  "transform": [{"filter": "datum.year == 2000"}],
  "mark": "bar",
  "encoding": {
    "y": {"field": "age"},
    "x": {
      "aggregate": "sum", "field": "people",
      "title": "population"
    }
  }
}
```

--------------------------------

### Reversed X-Scale for Continuous Fields

Source: https://vega.github.io/vega-lite/docs/sort.html

Setting the 'sort' property to 'descending' for a quantitative field reverses the axis. This example reverses the x-axis to start from the maximum 'Horsepower' value.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "tick",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative", "sort": "descending"}
  }
}
```

--------------------------------

### Custom Sort Order for Time Units (Day of Week)

Source: https://vega.github.io/vega-lite/docs/sort.html

For discrete time fields, sort arrays can include date-time definition objects or names/initials for specific time units like 'day'. This example starts the week on Monday.

```json
{
  "data": { "url": "data/github.csv"},
  "mark": "circle",
  "encoding": {
    "y": {
      "field": "time",
      "type": "ordinal",
      "timeUnit": "day",
      "sort": ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]
    },
    "x": {
      "field": "time",
      "type": "ordinal",
      "timeUnit": "hours"
    },
    "size": {
      "field": "count",
      "type": "quantitative",
      "aggregate": "sum"
    }
  }
}
```

--------------------------------

### Fold Transform Example Data

Source: https://vega.github.io/vega-lite/docs/fold.html

Input data for the fold transform example, containing country-specific gold and silver medal counts.

```json
[
  {"country": "USA", "gold": 10, "silver": 20},
  {"country": "Canada", "gold": 7, "silver": 26}
]
```

--------------------------------

### Variable and Selection Parameters with Expressions

Source: https://vega.github.io/vega-lite/docs/parameter.html

Demonstrates using a bound variable parameter 'opacityVar' and a selection parameter 'sel' to control point opacity and size dynamically. The opacity is driven by a range input, and the size is determined by a clicked point's 'Miles_per_Gallon'.

```json
{
  "data": {"url": "data/cars.json"},
  "params": [
    {
      "name": "opacityVar",
      "value": 50,
      "bind": {"input": "range", "min": 1, "max": 100}
    },
    {
      "name": "sel",
      "select": {"type": "point", "fields": ["Miles_per_Gallon"], "toggle": false}
    }
  ],
  "mark": {
    "type": "point",
    "size": {"expr": "sel.Miles_per_Gallon * 10 || 75"},
    "opacity": {"expr": "opacityVar/100"}
  },
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  }
}
```

--------------------------------

### Example: Impute with Value Method

Source: https://vega.github.io/vega-lite/docs/impute.html

Example of using the impute transform with the 'value' method to fill missing 'b' values based on 'a' and grouped by 'c'.

```APIDOC
## Example: Impute with Value Method

```json
{
  "data": {
    "values": [{"a": 0, "b": 28, "c": 0},
               {"a": 0, "b": 91, "c": 1},
               {"a": 1, "b": 43, "c": 0},
               {"a": 1, "b": 55, "c": 1},
               {"a": 2, "b": 81, "c": 0},
               {"a": 2, "b": 53, "c": 1},
               {"a": 3, "b": 19, "c": 0}]
  },
  "transform": [{
      "impute": "b",
      "key": "a",
      "value": 0,
      "groupby": ["c"]
  }],
  "mark": "line",
  "encoding": {
    "x": {"field": "a", "type": "quantitative", "scale": {"nice": 1}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal"}
  }
}
```
```

--------------------------------

### Area Chart Example

Source: https://vega.github.io/vega-lite/docs/area.html

An example of an area chart visualizing unemployment data over time. It maps a temporal field to the x-axis and a quantitative field to the y-axis.

```json
{
  "width": 300,
  "height": 200,
  "data": {"url": "data/unemployment-across-industries.json"},
  "mark": "area",
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "title": "Year of Unemployment Rate",
      "axis": {"format": "%Y"}
    },
    "y": {
      "field": "count",
      "type": "quantitative",
      "title": "Number of People",
      "axis": {"format": ","}
    }
  }
}
```

--------------------------------

### Interactive Index Chart with Lookup Selection

Source: https://vega.github.io/vega-lite/docs/lookup.html

This example uses a lookup transform with a selection parameter ('index') to dynamically fetch and display indexed stock prices. It calculates the percentage change relative to a selected point in time.

```json
{
  "data": {
    "url": "data/stocks.csv",
    "format": {"parse": {"date": "date"}}
  },
  "width": 650,
  "height": 300,
  "layer": [
    {
      "params": [{
        "name": "index",
        "value": [{"x": {"year": 2005, "month": 1, "date": 1}}],
        "select": {
          "type": "point",
          "encodings": ["x"],
          "on": "pointerover",
          "nearest": true
        }
      }],
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "opacity": {"value": 0}
      }
    },
    {
      "transform": [
        {
          "lookup": "symbol",
          "from": {"param": "index", "key": "symbol"}
        },
        {
          "calculate": "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0",
          "as": "indexed_price"
        }
      ],
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "y": {
          "field": "indexed_price", "type": "quantitative",
          "axis": {"format": "%"}
        },
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"filter": {"param": "index"}}],
      "encoding": {
        "x": {"field": "date", "type": "temporal", "axis": null},
        "color": {"value": "firebrick"}
      },
      "layer": [
        {"mark": {"type": "rule", "strokeWidth": 0.5}},
        {
          "mark": {"type": "text", "align": "center", "fontWeight": 100},
          "encoding": {
            "text": {"field": "date", "timeUnit": "yearmonth"},
            "y": {"value": 310}
          }
        }
      ]
    }
  ]
}
```

--------------------------------

### Combined Legend Example

Source: https://vega.github.io/vega-lite/docs/legend.html

This example demonstrates how Vega-Lite automatically combines legends when 'color' and 'shape' both encode the 'Species' field. The resulting legend displays both the encoded colors and shapes.

```json
{
  "data": {
    "url": "data/penguins.json"
  },
  "mark": "point",
  "encoding": {
    "x": {
      "field": "Flipper Length (mm)",
      "type": "quantitative",
      "scale": {"zero": false}
    },
    "y": {
      "field": "Body Mass (g)",
      "type": "quantitative",
      "scale": {"zero": false}
    },
    "color": {"field": "Species", "type": "nominal"},
    "shape": {"field": "Species", "type": "nominal"}
  }
}
```

--------------------------------

### Vega-Lite View Configuration Structure

Source: https://vega.github.io/vega-lite/docs/spec.html

Illustrates the structure for defining view configurations within the top-level `config` object. Supports properties for view size and background.

```json
// Top-level View Specification
{
  ...,
  "config": { // Configuration Object

    "view": { // - View Configuration

      // View Size
      "continuousWidth": ...,
      "continuousHeight": ...,
      "discreteWidth": ...,
      "discreteHeight": ...,
      // View Background Properties
      "fill": ...,
      "stroke": ...,
      ...
    },
    ...
  }
}
```

--------------------------------

### Data from URL - Vega-Lite

Source: https://vega.github.io/vega-lite/docs/data.html

Loads data from a specified URL. Vega-Lite infers the format from the file extension by default, but it can be explicitly set using `format.type`.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  }
}
```

--------------------------------

### Stacked Density Estimates Example

Source: https://vega.github.io/vega-lite/docs/density.html

Creates stacked density estimates for 'Body Mass (g)' grouped by 'Species'. A shared extent and fixed steps are used for alignment, and 'counts' is set to true for proportional differences.

```json
{
  "title": "Distribution of Body Mass of Penguins",
  "width": 400,
  "height": 80,
  "data": {
    "url": "data/penguins.json"
  },
  "mark": "area",
  "transform": [
    {
      "density": "Body Mass (g)",
      "groupby": ["Species"],
      "extent": [2500, 6500]
    }
  ],
  "encoding": {
    "x": {"field": "value", "type": "quantitative", "title": "Body Mass (g)"},
    "y": {"field": "density", "type": "quantitative", "stack": "zero"},
    "color": {"field": "Species", "type": "nominal"}
  }
}
```

--------------------------------

### Sample Transform in View Specification

Source: https://vega.github.io/vega-lite/docs/sample.html

Illustrates where the sample transform is placed within a Vega-Lite view specification.

```json
{
  "..." : "...",
  "transform": [
    {"sample": ...} // Sample Transform
     ...
  ],
  "..." : "..."
}
```

--------------------------------

### Basic View Specification Structure

Source: https://vega.github.io/vega-lite/docs/mark.html

Illustrates the basic structure of a Vega-Lite view specification, highlighting the 'mark' property.

```json
{
  "data": ... , 
  "mark": ... ,       // mark
  "encoding": ... , 
  ...
}
```

--------------------------------

### Bubble Plot Example

Source: https://vega.github.io/vega-lite/docs/point.html

Generates a bubble plot by mapping a third field to the 'size' channel of point marks.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "size": {"field": "Acceleration", "type": "quantitative"}
  }
}
```

--------------------------------

### Top-level View Specification with Selection Configuration

Source: https://vega.github.io/vega-lite/docs/parameter.html

Illustrates the structure for including selection configuration within the top-level config object of a Vega-Lite specification.

```json
{
  ...,
  "config": {
    "selection": { ... },
    ...
  }
}
```

--------------------------------

### Configuring Tick Mark Size and Thickness

Source: https://vega.github.io/vega-lite/docs/tick.html

This example shows how to customize the default properties of tick marks using the top-level config object. It sets a specific thickness and band size for the ticks.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "tick",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"}
  },
  "config": {
    "tick": {
      "thickness": 2,
      "bandSize": 10
    }
  }
}
```

--------------------------------

### Define and Reference Datasets

Source: https://vega.github.io/vega-lite/docs/data.html

Define a dataset named 'somedata' and then reference it in the 'data' property. This avoids inlining the same data multiple times.

```json
"datasets": {
  "somedata": [1,2,3]
},
"data": {
  "name": "somedata"
}
```

--------------------------------

### Scatterplot with Square Marks

Source: https://vega.github.io/vega-lite/docs/square.html

Example of creating a scatterplot using square marks. This configuration maps 'Horsepower' to the x-axis and 'Miles_per_Gallon' to the y-axis.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "square",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  }
}
```

--------------------------------

### Scatterplot with Circle Marks

Source: https://vega.github.io/vega-lite/docs/circle.html

An example of creating a scatter plot using circle marks. This requires quantitative data for the x and y axes.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  }
}
```

--------------------------------

### Runtime Data Insertion - Vega-Embed

Source: https://vega.github.io/vega-lite/docs/data.html

Demonstrates how to insert data into a named data source at runtime using the Vega View API with Vega-Embed. This allows for dynamic chart updates.

```javascript
vegaEmbed('#vis', spec).then((res) =>
  res.view
    .insert('myData', [
      /* some data array */
    ])
    .run(),
);
```

--------------------------------

### Basic Tick Mark Specification

Source: https://vega.github.io/vega-lite/docs/tick.html

A basic example of a tick mark specification in Vega-Lite. This is used to define a single view with a tick mark.

```json
{
  "data": ... ,
  "mark": "tick",
  "encoding": ... ,
  ...
}
```

--------------------------------

### Example: Comparing Complete Data vs. Sampled Data

Source: https://vega.github.io/vega-lite/docs/sample.html

Compares plots of complete data against a random sample of 200 data objects. This helps visualize the effect of sampling on data representation.

```json
{
  "data": {"url": "data/cars.json"},
  "hconcat": [
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
        }
    },
    {
      "transform": [{"sample" : 200}],
      "mark": "point",
      "encoding": {
        "x": {"field": "Horsepower", "type": "quantitative"},
        "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
      }
    }
  ]
}
```

--------------------------------

### Filled Scatter Plot Example

Source: https://vega.github.io/vega-lite/docs/point.html

Creates a filled scatter plot by setting the 'filled' property to true within the point mark definition.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
  }
}
```

--------------------------------

### Basic Parameter Structure

Source: https://vega.github.io/vega-lite/docs/parameter.html

Illustrates the fundamental structure for defining parameters within a Vega-Lite specification. Parameters are declared in an array under the 'params' key.

```json
{
  "...": "...",
  "params": [
    {"name": "...", "...": "..."}
  ],
  "mark": "...",
  "encoding": "...",
  "...": "..."
}
```

--------------------------------

### Loess Trend Line Example

Source: https://vega.github.io/vega-lite/docs/loess.html

Demonstrates how to use the loess transform to generate a trend line for scatterplot data, layering it over the original points.

```json
{
  "data": {
    "url": "data/movies.json"
  },
  "layer": [
    {
      "mark": {
        "type": "point",
        "filled": true
      },
      "encoding": {
        "x": {
          "field": "Rotten Tomatoes Rating",
          "type": "quantitative"
        },
        "y": {
          "field": "IMDB Rating",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "line",
        "color": "firebrick"
      },
      "transform": [
        {
          "loess": "IMDB Rating",
          "on": "Rotten Tomatoes Rating"
        }
      ],
      "encoding": {
        "x": {
          "field": "Rotten Tomatoes Rating",
          "type": "quantitative"
        },
        "y": {
          "field": "IMDB Rating",
          "type": "quantitative"
        }
      }
    }
  ]
}
```

--------------------------------

### Bar Chart with Rounded Corners

Source: https://vega.github.io/vega-lite/docs/bar.html

Create bars with rounded corners at the end using the `cornerRadiusEnd` property. This example applies a radius of 4.

```json
{
  "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "mark": {"type": "bar", "cornerRadiusEnd": 4},
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

--------------------------------

### Basic Circle Mark Specification

Source: https://vega.github.io/vega-lite/docs/circle.html

This is a basic example of a single view specification using the circle mark. Ensure data and encoding are defined.

```json
// Single View Specification
{
  "data": ... ,
  "mark": "circle",
  "encoding": ... ,
  ...
}
```

--------------------------------

### Single View Specification with Mark Object

Source: https://vega.github.io/vega-lite/docs/mark.html

Demonstrates how to specify a mark using a definition object within a single view specification. This allows for customization of mark properties.

```json
{
  "mark": {
    "type": ...,       // mark
    ...
  },
  ...
}
```

--------------------------------

### Default Color Scheme for Ordinal Data

Source: https://vega.github.io/vega-lite/docs/scale.html

This example shows the default color scheme for ordinal data, which uses the 'ordinal' range (defaulting to 'blues').

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Cylinders", "type": "ordinal"}
  }
}
```
Tokens:
Raw