### Include Example Specification in Documentation

Source: https://github.com/vega/vega-lite/blob/main/CONTRIBUTING.md

Embed Vega-Lite example specifications in documentation using a span tag with a data attribute specifying the example name.

```html
<span class="vl-example" data-name="point_1d"></span>
```

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

### Install Vega-Lite Libraries with NPM

Source: https://github.com/vega/vega-lite/blob/main/site/usage/embed.md

Use npm to install Vega, Vega-Lite, and Vega-Embed if you prefer to host the dependencies yourself. This installs the latest stable versions.

```sh
npm install vega
npm install vega-lite
npm install vega-embed
```

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

### Example: View Background Configuration

Source: https://github.com/vega/vega-lite/blob/main/site/docs/spec.md

This example demonstrates setting both the overall visualization background color and the specific view background color in Vega-Lite.

```html
<span class="vl-example" data-name="point_background"></span>
```

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

### Quantize Scale Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

This example utilizes a quantize scale for color encoding, dividing the domain into uniform segments.

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

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

### Clone Repository and Install Dependencies

Source: https://github.com/vega/vega-lite/blob/main/CONTRIBUTING.md

Clone the Vega-Lite repository and install all necessary npm dependencies to set up the development environment.

```sh
git clone https://github.com/vega/vega-lite.git
cd vega-lite
npm install
```

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

### Selection Parameter Example (Point and Interval)

Source: https://github.com/vega/vega-lite/blob/main/site/docs/parameter/parameter.md

Compares 'point' and 'interval' selection types, driven by user input like clicks or drags. The example allows switching between types.

```json
<select onchange="changeSpec('selection_type', 'selection_type_' + this.value)"><option>point</option><option>interval</option></select>
<div id="selection_type" class="vl-example" data-name="selection_type_point"></div>
```

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

### Install Ruby and Bundler on macOS

Source: https://github.com/vega/vega-lite/blob/main/CONTRIBUTING.md

Install Ruby using Homebrew and install Bundler for managing Ruby dependencies. This is required for serving the website locally.

```sh
brew install ruby
gem install bundler
```

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

### Run Streaming Example

Source: https://github.com/vega/vega-lite/blob/main/site/tutorials/streaming.md

This script is used to initialize and run a streaming data example for a Vega-Lite chart. Ensure the target element with the ID 'chart' is present in your HTML.

```javascript
window.onload = () => window.runStreamingExample('#chart');
```

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

### Install Node.js on macOS

Source: https://github.com/vega/vega-lite/blob/main/CONTRIBUTING.md

Install Node.js using Homebrew on macOS. This is a prerequisite for many development tasks.

```sh
brew install node
```

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

### Density Plot Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/density.md

Demonstrates how to create a density plot using the density transform. This example visualizes the distribution of a measure.

```json
{
  "data": {
    "url": "data/cars.json"
  },
  "transform": [
    {"density": "Horsepower", "as": ["Horsepower", "density"]}
  ],
  "mark": "area",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "density", "type": "quantitative"}
  }
}
```

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

### Complete HTML Example for Embedding Vega-Lite

Source: https://github.com/vega/vega-lite/blob/main/site/usage/embed.md

This example demonstrates the easiest way to embed a Vega-Lite chart using the CDN approach. It includes the necessary script tags and a sample Vega-Lite specification.

```html
<!doctype html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@{{ site.data.versions.vega }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.data.versions.vega-lite }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.data.versions.vega-embed }}"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v6.json',
        description: 'A simple bar chart with embedded data.',
        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'},
        },
      };
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>
```

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

### Scale Configuration Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

This JavaScript snippet illustrates the structure for configuring scales at the top level of a Vega-Lite specification.

```javascript
// Top-level View Specification
{
  ...
  "config": {
    "scale": {
      ...
    },
    "range": {
      ...
    },
    ...
  }
  ...
}
```

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

### Compile Vega-Lite using npx

Source: https://github.com/vega/vega-lite/blob/main/site/usage/compile.md

Execute Vega-Lite command-line utilities like `vl2vg` directly using `npx`. `npx` handles the installation and execution of the necessary binaries, even if Vega or Vega-Lite are not installed globally.

```bash
npx vl2vg spec.vl.json
```

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

### Threshold Scale Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

This example demonstrates a threshold scale for color encoding, mapping arbitrary domain subsets to discrete values.

```json
{
  "data": {"url": "data/cars.json"},
  "mark": "circle",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {"field": "Horsepower", "type": "quantitative", "scale": {"domain": [100, 200], "range": ["red", "yellow", "green"]}}
  }
}
```

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

### Install Jekyll Dependencies

Source: https://github.com/vega/vega-lite/blob/main/CONTRIBUTING.md

Install Jekyll and its dependencies using Bundler. This command should be run within the 'site' directory.

```sh
pushd site && bundle install && popd
```

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

### Facet Configuration Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/facet.md

Demonstrates the structure for configuring facet properties like spacing and columns at the top level of a Vega-Lite specification.

```javascript
{
  ...,
  "config": { // Configuration Object

    "facet": { // - Facet Configuration
      "spacing": ...,
      "columns": ...,
    },
    ...
  }
}
```

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

### Concat Configuration Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/concat.md

Configure spacing and column behavior for concatenated views at the top level.

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

    "concat": { // - Concat Configuration
      "spacing": ...,
      "columns": ...,
    },
    ...
  }
}
```

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

### Variable Parameter Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/parameter/parameter.md

Demonstrates a simple variable parameter 'cornerRadius' for customizing bar marks.

```json
<div class="vl-example" data-name="bar_params"></div>
```

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

### Install Specific Bundler Version

Source: https://github.com/vega/vega-lite/blob/main/CONTRIBUTING.md

Install a specific version of Bundler that matches the version used to create the bundle, as specified in the Gemfile.lock.

```sh
gem install bundler -v "$(grep -A 1 'BUNDLED WITH' Gemfile.lock | tail -n 1)"
```

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

### Bin-Ordinal Scale Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

This example demonstrates a binned field on the color channel, which automatically uses a binned ordinal scale.

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

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

### Example of a Diverging Color Scale

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

Demonstrates the use of a diverging color scale. This snippet is a placeholder for a visual example.

```json
{
  "data": {"values": [
    {"x": 1, "y": 1, "c": 2},
    {"x": 1, "y": 2, "c": 1},
    {"x": 1, "y": 3, "c": 3},
    {"x": 2, "y": 1, "c": 1},
    {"x": 2, "y": 2, "c": 3},
    {"x": 2, "y": 3, "c": 2},
    {"x": 3, "y": 1, "c": 3},
    {"x": 3, "y": 2, "c": 2},
    {"x": 3, "y": 3, "c": 1}
  ]},
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "ordinal"},
    "y": {"field": "y", "type": "ordinal"},
    "color": {"field": "c", "type": "ordinal", "scale": {"scheme": "heatmap"}}
  }
}
```

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

### Quantile Scale Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

This example uses a quantile scale for color encoding, distributing data points evenly across the color range.

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

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

### Data from URL Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/data.md

Loads data from a relative URL 'data/cars.json'. The format type is implicitly 'json'.

```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"}
  }
}
```

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

### Faceted Density Estimates Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/density.md

Visualizes density estimates of body mass for different penguin species using faceting.

```json
{
  "data": {"url": "data/penguins.json"},
  "transform": [
    {"density": "body_mass_g", "groupby": ["species"], "extent": [2000, 6000], "as": ["body_mass_g", "density"]
    }
  ],
  "mark": "area",
  "encoding": {
    "x": {"field": "body_mass_g", "type": "quantitative"},
    "y": {"field": "density", "type": "quantitative"},
    "facet": {"field": "species", "type": "nominal"}
  }
}
```

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

### Point with Hyperlink

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding.md

This example demonstrates how to use the href channel to make marks clickable hyperlinks. The cursor changes to a pointer to indicate it's a link.

```json
{
  "data": {
    "values": [
      {"name": "A", "url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
      {"name": "B", "url": "https://vega.github.io/vega-lite/examples/data/cars.json"}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "href": {"field": "Origin", "type": "nominal"},
    "tooltip": [
      {"field": "Horsepower", "type": "quantitative"},
      {"field": "Miles_per_Gallon", "type": "quantitative"},
      {"field": "Origin", "type": "nominal"}
    ]
  }
}
```

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

### Histogram Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/bar.md

Creates a histogram by mapping a binned quantitative field to x and the count aggregate to y. Assumes data is not pre-aggregated.

```javascript
{
  "data": {
    "url": "data/movies.json"
  },
  "mark": "bar",
  "encoding": {
    "x": {"bin": true, "field": "IMDB_Rating", "type": "quantitative"},
    "y": {"aggregate": "count", "type": "quantitative"}
  }
}
```

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

### Stacked Density Estimates Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/density.md

Shows how to create stacked density estimates by using a shared extent and fixed steps. Setting counts to true preserves proportional differences.

```json
{
  "data": {"url": "data/cars.json"},
  "transform": [
    {"density": "Horsepower", "counts": true, "extent": [0, 200], "steps": 20, "as": ["Horsepower", "density"]
    }
  ],
  "mark": "area",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "density", "type": "quantitative"},
    "color": {"field": "Origin", "type": "nominal"}
  }
}
```

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

### Density Transform Definition Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/density.md

Illustrates a simple density transform configuration using a measure field and grouping by a key.

```json
{"density": "measure", "groupby": ["key"]}
```

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

### Combine Sphere and Graticule

Source: https://github.com/vega/vega-lite/blob/main/site/docs/data.md

This example demonstrates layering a sphere with a default graticule to create a base map.

```json
{
  "data": {"sphere": true},
  "marks": [
    {"name": "countries", "type": "geoshape", "from": {"data": {"url": "https://cdn.jsdelivr.net/npm/vega-datasets@v1.29.0/data/world-110m.json"}}, "encode": {"update": {"fill": {"value": "lightgray"}, "stroke": {"value": "white"}}}},
    {"name": "graticule", "type": "graticule", "encode": {"update": {"stroke": {"value": "black"}, "strokeWidth": {"value": 0.5}}}}
  ],
  "projection": {"type": "orthographic"}
}
```

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

### Bound Variable Parameter Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/parameter/parameter.md

Shows how to bind a variable parameter to input widgets for dynamic customization of bar mark corner radius.

```json
<div class="vl-example" data-name="bar_params_bound"></div>
```

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

### Grid Facet Example (Row and Column Encoding)

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/facet.md

Generates a grid of small multiples by using both 'row' and 'column' encoding channels to facet the data.

```json
{
  "data": {
    "url": "data/barley.json"
  },
  "mark": "bar",
  "encoding": {
    "row": {
      "field": "year",
      "type": "ordinal",
      "header": {
        "title": "Year"
      }
    },
    "column": {
      "field": "site",
      "type": "nominal",
      "header": {
        "title": "Site"
      }
    },
    "x": {
      "field": "yield",
      "type": "quantitative"
    },
    "y": {
      "field": "variety",
      "type": "nominal"
    },
    "color": {
      "field": "variety",
      "type": "nominal"
    }
  }
}
```

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

### Fixed Width for Bar Chart

Source: https://github.com/vega/vega-lite/blob/main/site/docs/view/size.md

This example shows how to set a fixed width for a bar chart, causing the discrete steps to scale and fit within that width.

```json
{
  "data": {
    "values": [
      {"category": "A", "value": 10},
      {"category": "B", "value": 20},
      {"category": "C", "value": 15}
    ]
  },
  "mark": "bar",
  "width": 300,
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}
```

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

### Single Bar Chart Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/bar.md

Creates a single bar chart by mapping a quantitative field to the x or y channel of the bar mark.

```javascript
{
  "data": {
    "values": [
      {"category": "A", "value": 10},
      {"category": "B", "value": 20},
      {"category": "C", "value": 15}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}
```

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

### Default Sizing for Bar Chart

Source: https://github.com/vega/vega-lite/blob/main/site/docs/view/size.md

This example demonstrates the default sizing behavior for a bar chart where height is fixed and width adapts to discrete steps.

```json
{
  "data": {
    "values": [
      {"category": "A", "value": 10},
      {"category": "B", "value": 20},
      {"category": "C", "value": 15}
    ]
  },
  "mark": "bar",
  "height": 200,
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}
```

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

### Wrapped Facet Example (Facet Operator)

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/facet.md

Illustrates a wrapped facet specification using the `facet` operator, likely for arranging plots in a grid or wrapped layout.

```json
{
  "data": {
    "url": "data/barley.json"
  },
  "facet": {
    "row": {
      "field": "year",
      "header": {
        "title": "Year"
      }
    },
    "column": {
      "field": "site",
      "header": {
        "title": "Site"
      }
    }
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "yield",
        "type": "quantitative"
      },
      "y": {
        "field": "variety",
        "type": "nominal"
      },
      "color": {
        "field": "variety",
        "type": "nominal"
      }
    }
  }
}
```

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

### Basic Image Mark Specification

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/image.md

A basic Vega-Lite specification using the 'image' mark. This is a starting point for including images in your visualizations.

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

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

### Row-Facet Example (Facet Operator)

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/facet.md

Demonstrates vertically faceting histograms by 'origin' using the `facet` operator. Each chart displays a histogram for a specific origin.

```json
{
  "data": {
    "url": "data/cars.json"
  },
  "facet": {
    "row": {
      "field": "Origin",
      "header": {
        "title": "Origin"
      }
    }
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {
        "bin": true,
        "field": "Horsepower",
        "type": "quantitative"
      },
      "y": {
        "type": "quantitative",
        "axis": {
          "title": "Number of Cars"
        }
      }
    }
  }
}
```

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

### Responsive Width for Bar Chart

Source: https://github.com/vega/vega-lite/blob/main/site/docs/view/size.md

This example sets the width to 'container', making the bar chart responsive to its parent element's size. A fixed height is also specified.

```json
{
  "data": {
    "values": [
      {"category": "A", "value": 10},
      {"category": "B", "value": 20},
      {"category": "C", "value": 15}
    ]
  },
  "mark": "bar",
  "width": "container",
  "height": 200,
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}
```

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

### Quantile Transform Definition Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/quantile.md

A basic example of defining the quantile transform to compute quartiles for a 'measure' field.

```json
{"quantile": "measure", "probs": [0.25, 0.5, 0.75]}
```

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

### Run CLI Commands with npx and Package Installation

Source: https://github.com/vega/vega-lite/blob/main/site/usage/compile.md

Use `npx` to run specific binaries like `vl2png` by specifying the required packages (`vega` and `vega-lite`). This is useful for running commands without pre-installing them.

```bash
npx -p vega -p vega-lite vl2png --help
```

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

### Text Configuration Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/text.md

Shows how to set default properties for text marks at the top level of a Vega-Lite configuration. This allows for consistent styling across multiple text marks in a visualization.

```javascript
// Top-level View Specification
{
  ...
  "config": {
    "text": ...,
    ...
  }
}
```

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

### Disabling Scale Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/scale.md

This example shows how to disable the scale property to directly encode data values, in this case, color names.

```json
{
  "data": {"url": "data/barcolors.json"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "ordinal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "color", "type": "nominal", "scale": null}
  }
}
```

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

### Repeat Configuration for Spacing and Columns

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/repeat.md

Shows how to configure the spacing and column layout for repeated views using the top-level `config` object, similar to concatenation configuration.

```json
{
  "config": {
    "concat": {
      "spacing": 10,
      "columns": 4
    }
  },
  "repeat": {
    "column": ["field1", "field2", "field3", "field4"]
  },
  "spec": {
    // ... view specification ...
  }
}
```

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

### Stack Transform Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/stack.md

The 'stack' transform can be used within the 'transform' array of any view specification to achieve stacking. This example shows a normalized stacked bar chart using the transform.

```json
{
  ...
  "transform": [
    // Stack Transform
    {
      "stack": ...,
      "groupby": ...,
      "offset": ...,
      "sort": ...,
      "as": ...
    }
    ...
  ],
  ...
}
```

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

### Example: US Airports using Albers USA Projection

Source: https://github.com/vega/vega-lite/blob/main/site/docs/projection.md

This example demonstrates projecting latitude and longitude coordinates for US airports using the albersUsa projection to display them as x, y coordinates.

```JSON
{
  "data": {
    "url": "data/airports.csv"
  },
  "projection": {
    "type": "albersUsa"
  },
  "mark": "circle",
  "encoding": {
    "longitude": {"field": "longitude", "type": "quantitative"},
    "latitude": {"field": "latitude", "type": "quantitative"},
    "color": {"field": "region", "type": "nominal"},
    "tooltip": [
      {"field": "iata_code", "type": "nominal"},
      {"field": "city", "type": "nominal"},
      {"field": "state", "type": "nominal"}
    ]
  }
}
```

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

### Image Configuration in Top-Level Config

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/image.md

Demonstrates how to set default properties for all image marks using the top-level 'config' object. This is useful for applying consistent styling or behavior to images across a visualization.

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

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

### Top-level View Specification with Config

Source: https://github.com/vega/vega-lite/blob/main/site/docs/spec.md

Illustrates the structure for defining view configuration within a top-level Vega-Lite specification. Supports view background properties and default sizing.

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

    "view": { // - View Configuration

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

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

### Customize Axis Title

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/axis.md

An example demonstrating how to customize the title of an axis, specifically for the x-axis in a bar chart.

```json
<div class="vl-example" data-name="bar_1d"></div>
```

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

### Compile Vega-Lite to Vega using CLI

Source: https://github.com/vega/vega-lite/blob/main/site/usage/compile.md

Use the `vl2vg` command-line utility to compile Vega-Lite specifications to Vega JSON. This command can accept the specification as a file argument or via standard input.

```bash
vl2vg spec.vl.json
```

```bash
cat spec.vl.json | vl2vg
```

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

### Linear Gradient Definition

Source: https://github.com/vega/vega-lite/blob/main/site/docs/types/gradient.md

Defines a linear gradient with red at the start, white in the middle, and blue at the end.

```json
{
  "gradient": "linear",
  "stops": [
    {"offset": 0.0, "color": "red"},
    {"offset": 0.5, "color": "white"},
    {"offset": 1.0, "color": "blue"}
  ]
}
```

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

### Bar Chart with Title

Source: https://github.com/vega/vega-lite/blob/main/site/docs/view/title.md

Adds a descriptive title to a bar chart. This example uses a simple string for the title.

```json
{
  "data": {
    "values": [
      {"x": "A", "y": 10},
      {"x": "B", "y": 20},
      {"x": "C", "y": 30}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "x", "type": "ordinal"},
    "y": {"field": "y", "type": "quantitative"}
  },
  "title": "A Simple Bar Chart"
}
```

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

### Top-Level Configuration Structure

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/mark.md

Illustrates the basic structure for defining configuration, including the 'config' and 'style' properties at the top level of a Vega-Lite specification.

```js
{
  // Top Level Specification
  "config": {
    "style": {
      ...
    }
    ...
  }
}
```

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

### Extent Transform Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/extent.md

Calculates the extent of the 'b' field and stores it in the 'b_extent' parameter. The result will be [19, 91].

```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}
    ]
  },
  "transform": [
    {"extent": "b", "param": "b_extent"}
  ]
}
```

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

### Grouped Bar Chart with Repeat

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/bar.md

Example of a grouped bar chart using the repeat property for multiple measures.

```json
{
  "data": {
    "values": [
      {"category": "A", "measure": "X", "value": 10},
      {"category": "A", "measure": "Y", "value": 20},
      {"category": "B", "measure": "X", "value": 15},
      {"category": "B", "measure": "Y", "value": 25}
    ]
  },
  "repeat": {
    "measure": ["X", "Y"]
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "category", "type": "ordinal"},
      "y": {"field": "value", "type": "quantitative"},
      "color": {"field": "measure", "type": "nominal"}
    }
  }
}
```

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

### Point Color Legend

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/legend.md

Example of a point plot with a nominal color scale, which automatically generates a symbol legend.

```json
{
  "data": {
    "values": [
      {"x": 1, "y": 1, "c": "A"},
      {"x": 1, "y": 2, "c": "B"},
      {"x": 2, "y": 1, "c": "A"},
      {"x": 2, "y": 2, "c": "C"}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal"}
  }
}
```

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

### Sample Transform in View Specification

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/sample.md

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

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

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

### Basic Structure of a Selection Parameter

Source: https://github.com/vega/vega-lite/blob/main/site/docs/parameter/select.md

Illustrates the fundamental structure of a selection parameter within a Vega-Lite specification, showing where the 'select' property is defined.

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

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

### Sample Transform Configuration

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/sample.md

Configures the sample transform to retain at most 500 data objects. This is useful for reducing the size of a data stream for analysis or visualization.

```json
{"sample": 500}
```

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

### Point Color Quantitative Legend

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/legend.md

Example of a point plot with a quantitative color scale, which automatically generates a gradient legend.

```json
{
  "data": {
    "values": [
      {"x": 1, "y": 1, "c": 2},
      {"x": 1, "y": 2, "c": 4},
      {"x": 2, "y": 1, "c": 3},
      {"x": 2, "y": 2, "c": 5}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "c", "type": "quantitative"}
  }
}
```

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

### Runtime Data Insertion with Vega-Embed

Source: https://github.com/vega/vega-lite/blob/main/site/docs/data.md

Demonstrates inserting data into a named source 'myData' using the Vega View API via Vega-Embed.

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

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

### Basic Rect Mark Definition

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/rect.md

A basic specification for a rect mark. This is a starting point for defining a rectangle in a Vega-Lite visualization.

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

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

### Width per Discrete Step

Source: https://github.com/vega/vega-lite/blob/main/site/docs/view/size.md

This example defines the width of the plot based on a specific step size for each discrete category on the x-axis.

```json
{
  "data": {
    "values": [
      {"category": "A", "value": 10},
      {"category": "B", "value": 20},
      {"category": "C", "value": 15}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "ordinal", "axis": {"labelAngle": 0}},
    "y": {"field": "value", "type": "quantitative"}
  },
  "width": {"step": 40}
}
```

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

### Quantile Transform with Probability Steps

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/quantile.md

Example of using the quantile transform to compute quantiles at specified probability steps for a 'measure' field.

```json
{"quantile": "measure", "step": 0.05}
```

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

### Vega-Lite Configuration for Selections

Source: https://github.com/vega/vega-lite/blob/main/site/docs/parameter/parameter.md

Shows the structure for configuring default properties of selection parameters at the top level of a Vega-Lite specification.

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

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

### Loess Transform Output Data Structure

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/loess.md

Example of the data stream produced by the loess transform, containing 'x' and 'y' fields for plotting.

```javascript
[
  {"x": 1, "y": 2.3},
  {"x": 2, "y": 2.9},
  {"x": 3, "y": 2.7},
  ...
]
```

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

### Format Vega Output using CLI

Source: https://github.com/vega/vega-lite/blob/main/site/usage/compile.md

The `vl2vg` command supports an optional `-p` argument to format the generated Vega specification, making it more readable.

```bash
vl2vg spec.vl.json -p
```

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

### Line Chart with Detail for Grouping

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding.md

This example shows how to use the 'detail' channel to group lines in a line chart by 'symbol'. This allows each stock ticker symbol to have its own distinct line over time.

```json
{
  "data": {"url": "data/stocks.csv"},
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "detail": {"field": "symbol", "type": "nominal"},
    "tooltip": [
      {"field": "date", "type": "temporal"},
      {"field": "price", "type": "quantitative"},
      {"field": "symbol", "type": "nominal"}
    ]
  }
}
```

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

### Fold Transform Input Data

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/fold.md

Example input data in a wide format, with separate columns for 'gold' and 'silver' medal counts.

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

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

### Load Vega-Lite Libraries via CDN

Source: https://github.com/vega/vega-lite/blob/main/site/usage/embed.md

Include these script tags in your HTML to load Vega, Vega-Lite, and Vega-Embed from a CDN. This is suitable for production deployments.

```html
<script src="https://cdn.jsdelivr.net/npm/vega@{{ site.data.versions.vega }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.data.versions.vega-lite }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.data.versions.vega-embed }}"></script>
```

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

### Error Band as a Layered Plot

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/errorband.md

An error band is a composite mark that expands into a layered plot. This example shows the underlying structure.

```json
<div class="vl-example" data-name="normalized/layer_line_errorband_ci_normalized"></div>
```

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

### Inline Data Example

Source: https://github.com/vega/vega-lite/blob/main/site/docs/data.md

Embeds an inline data table with nine rows and two columns (a and b) using the 'values' property.

```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": 86},
      {"a": "I", "b": 53}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

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

### Load Latest Vega-Lite Libraries via CDN

Source: https://github.com/vega/vega-lite/blob/main/site/usage/embed.md

Specify only the major version to automatically use the latest releases of Vega, Vega-Lite, and Vega-Embed from a CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/vega@{{ site.data.versions.vega | slice: 0 }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@{{ site.data.versions.vega-lite | slice: 0 }}"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@{{ site.data.versions.vega-embed | slice: 0 }}"></script>
```

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

### Combined Color and Shape Legend

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/legend.md

Example of a point plot where both color and shape encode the same nominal field, resulting in a combined legend.

```json
{
  "data": {
    "values": [
      {"x": 1, "y": 1, "c": "A", "s": "A"},
      {"x": 1, "y": 2, "c": "B", "s": "B"},
      {"x": 2, "y": 1, "c": "A", "s": "A"},
      {"x": 2, "y": 2, "c": "C", "s": "C"}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal"},
    "shape": {"field": "s", "type": "nominal"}
  }
}
```

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

### Basic Structure with Sort Property

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/sort.md

Illustrates where the 'sort' property can be applied within a Vega-Lite specification for a channel.

```json
{
  ...,
  "mark/layer": ...,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      "sort": ...,         // sort
      ...
    },
    "y": ...,
    ...
  },
  ...
}
```

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

### Predicate Composition: AND

Source: https://github.com/vega/vega-lite/blob/main/site/docs/types/predicate.md

Combines multiple predicates using the 'and' operator. This example checks if the 'height' field is both greater than 0 and less than 180.

```json
{"and": [{"field": "height", "gt": 0}, {"field": "height", "lt": 180}]}
```

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

### Quantile Transform Output for Probability Steps

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/quantile.md

Illustrates the output format when computing quantiles using probability steps.

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

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

### Basic Window Transform Structure

Source: https://github.com/vega/vega-lite/blob/main/site/docs/transform/window.md

Illustrates the general structure of the window transform within a Vega-Lite view specification. It shows where to define the window operations, sorting, grouping, and frame.

```javascript
{
  ...
  "transform": [
    {
      "window": [
          {
              "op": ...,
              "field": ...,
              "param": ...,
              "as": ...
          }
      ],
      "sort": [
        {"field": ..., "order": ...}
      ],
      "ignorePeers": ...,
      "groupby": [
        "..."
      ],
      "frame": [...,...]
    }
     ...
  ],
  ...
```

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

### Axis Properties in Encoding

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/axis.md

An example of how to specify axis properties within an encoding channel's definition for a single view or layer specification.

```json
{
  "mark/layer": ...,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      "axis": {
        ...
      },
      ...
    },
    "y": ...,
    ...
  }
}
```

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

### Basic Geoshape Mark

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/geoshape.md

A basic example of a single view specification using the geoshape mark. Ensure data and encoding are properly defined.

```javascript
{
  "data": ... ,
  "mark": "geoshape",
  "encoding": ... ,
  ...
}
```

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

### Explicitly Specifying Scale Domain with Parameter and Encoding

Source: https://github.com/vega/vega-lite/blob/main/site/docs/parameter/parameter.md

Demonstrates how to explicitly define a scale's domain using a parameter and specifying the target encoding, useful for multi-field selections.

```json
{
  "scale": {"domain": {"param": "brush", "encoding": "x"}}
}
```

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

### Line Mark Default Position

Source: https://github.com/vega/vega-lite/blob/main/site/docs/encoding/bandPosition.md

By default, points in line marks are placed at the beginning of a time interval. This example shows the default behavior.

```json
{
  "data": {
    "values": [
      {"date": "2023-01-01", "value": 10},
      {"date": "2023-02-01", "value": 15},
      {"date": "2023-03-01", "value": 12}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal", "axis": {"title": "Month"}},
    "y": {"field": "value", "type": "quantitative"}
  }
}
```

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

### Trail Configuration in Top-Level Spec

Source: https://github.com/vega/vega-lite/blob/main/site/docs/mark/trail.md

Illustrates how to set default properties for trail marks at the top level of a Vega-Lite configuration. This allows for consistent styling across multiple trail marks in a visualization.

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

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

### Predicate Composition: NOT

Source: https://github.com/vega/vega-lite/blob/main/site/docs/types/predicate.md

Uses the 'not' operator to negate a predicate. This example checks if the 'x' field's value is outside the range [0, 5].

```json
{"not": {"field": "x", "range": [0, 5]}}
```

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

### Scale, Axis, and Legend Resolution Configuration

Source: https://github.com/vega/vega-lite/blob/main/site/docs/composition/resolve.md

Configure how scales, axes, and legends are resolved. Use 'shared' for merged guides and 'independent' for separate ones. Defaults vary by composition type.

```json
{
  "resolve": {
    // Scale resolution
    "scale": {
      "CHANNEL": ...
    },
    // Axis resolution for position channels
    "axis": {
      "POSITION_CHANNEL": ...
    },
    // Legend resolution for non-position channels
    "legend": {
      "NON_POSITION_CHANNEL": ...
    }
  }
}
```