Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 13, 2024

Created on Nov 13, 2024

This example renders a scatter plot of automobile data from the `auto-mpg` dataset, mapping acceleration on the x-axis and horsepower on the y-axis, with tooltips revealing vehicle names. It demonstrates programmatic chart construction using the Vega-Lite API (`vl.markPoint`, `vl.x().fieldQ`) within a D3 v5 async data-loading pipeline (`d3.csv`). The visualization is compiled through `vega-lite` and rendered as SVG via the `vega` view, with custom axis styling and tooltip handling from `vega-tooltip`.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile characteristics from the auto-mpg dataset, plotting acceleration on the x-axis against horsepower on the y-axis, with color encoding car weight and tooltips revealing model names. The visualization is constructed programmatically using the Vega-Lite API through its JavaScript bindings, with `vl.markPoint()` defining the marks and `vl.x().fieldQ()`, `vl.y().fieldQ()`, and `vl.color().fieldQ()` specifying the encodings. Data is loaded asynchronously with `d3.csv()` from a GitHub gist, while Vega and Vega-Lite render the SVG output, supported by `vega-tooltip` for interactive hovering and a custom configuration that enlarges fonts and removes axis domains for readability.

JJar-Jar-Blings

95% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data from the auto-mpg CSV dataset, plotting displacement against horsepower with a tooltip revealing the car model. The visualization is built programmatically via `vl.markPoint` and encode methods, with the chart filling the browser window. Appearance is customized through a config object that removes axis domains and adjusts label styling, while `d3.csv` loads the data and a Vega Tooltip handler enables interactive hover details.

KKristopher Skelton

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the classic Auto MPG dataset. The visualization encodes quantitative fields for acceleration (x-axis) and horsepower (y-axis), with origin as color and cylinders as size, plus a tooltip for car name. The code loads data via `d3.csv`, renders with `vega` and `vega-lite`, and applies custom styling from `config.js` for axis ticks and label fonts. The chart auto-fits to the window, uses SVG rendering, and integrates `vega-tooltip` for hover details.

Ssmile2git

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile performance data, using the Vega-Lite API to visualize the relationship between acceleration and horsepower for various car models. The visualization encodes each car as a point, with tooltips revealing the vehicle's name on hover. The code leverages the `vega-lite-api` library, which wraps Vega-Lite and Vega for declarative chart construction, and uses D3's `csv` function to fetch and parse the `auto-mpg.csv` dataset. The chart is configured with a dark theme and custom axis styling to improve readability, and it renders as an interactive SVG.

Kkevin-jake

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example depicts a scatter plot of automobile data, showing the relationship between engine displacement and horsepower, with tooltips revealing car names. Built with the Vega-Lite API, it uses `vl.markPoint` and `vl.encode` to define visual encodings, while D3’s `csv` loads the auto-mpg dataset. The chart is rendered as an SVG via Vega and Vega-Lite, with custom axis and label styling from the config file. Tooltips are handled by the Vega Tooltip handler.

MMagarsa Gudeta

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automobile data from an auto-mpg CSV, showing the relationship between engine displacement and horsepower. The visualization is built using the Vega-Lite API, which composes specifications and renders them through Vega-Lite while leveraging D3’s `csv` loader to fetch and parse the data. Points are rendered as semi-transparent filled circles with tooltips that reveal vehicle names. The plot uses a custom config and a fit-to-window layout, with axis styling adjusted for readability.

Ccaptind

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg.csv dataset. It plots miles per gallon on the x-axis against horsepower on the y-axis, with points colored by country of origin and sized with a fixed 300-pixel radius at 50% opacity. The visualization is generated declaratively using `vl.markCircle`, `vl.x().fieldQ`, `vl.y().fieldQ`, and `vl.color().fieldN` to encode the quantitative and nominal fields, with tooltips showing car names. Data is loaded asynchronously via `d3.csv` before the chart is rendered into the DOM.

Aape-ape-ape

94% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting miles per gallon against horsepower, with tooltips revealing car names. It renders using the Vega-Lite API, which compiles specifications to Vega and renders to SVG. The code loads the auto-mpg dataset via `d3.csv`, configures axis and label styling, and fits the visualization to the window. Custom styling includes removing axis domains and settings for guide labels and titles.

TTung Pham

94% match