Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template 3

✓ Published0🌍 Public
Iinar-vision
Last edited Sep 1, 2022
Created on Sep 1, 2022

This visualization uses a Vega-Lite API specification to render a scatter plot of automobile data from a CSV file. Each circle represents a vehicle, positioned by origin and horsepower, with color encoding weight and size encoding miles per gallon (mpg), with tooltips showing the car name. The code builds the chart declaratively using the `vega-lite-api` library, registering it with vega and vega-lite, and loads data via d3.csv. Custom configuration adjusts font sizes and axis styling for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to plot automobile data, showing each car as a circle positioned by weight and horsepower, colored by origin, and sized by fuel efficiency (mpg). The code loads CSV data from a GitHub gist via D3’s `csv` method, then builds the chart with `vega-lite-api`’s `markCircle` and encodes position, color, size, and tooltip fields. Rendered as an SVG through the Vega renderer, the visualization includes a Vega tooltip handler for interactive inspection.

AA
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each vehicle as a circle based on its origin, horsepower, and weight. The chart uses color to encode weight and circle size to represent miles per gallon, with tooltips showing vehicle names. Built with the Vega-Lite API and D3.js, it loads data asynchronously and renders an interactive scatter plot that fits the full window. The visualization configures axes and label styles, and integrates Vega tooltip for hover details.

Nnayak-sarvesh12
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with each circle representing a vehicle based on its miles per gallon, horsepower, origin, and weight. The visualization uses the Vega-Lite API within a D3.js context to render interactive SVG graphics. It loads a CSV dataset from a GitHub gist and applies custom encoding for position, color, and size, while tooltips reveal vehicle names. The code integrates vega, vega-lite, vega-lite-api, and vega-tooltip libraries, with the figure automatically fitting the browser window.

TTylerSaikaleyTheriault
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping engine displacement on the x-axis against horsepower on the y-axis. Each point represents a vehicle, with color encoding the model year, size encoding vehicle weight, and tooltips revealing the car name. The code uses the vega-lite-api to construct the chart, with data loaded from a CSV of auto-mpg statistics via d3.csv. It renders as an SVG through Vega-Lite, applying custom configuration for axis styling and font sizes, and integrates a Vega Tooltip handler for interactive hover details.

Eericemc3
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to plot automobile performance data from a CSV file, encoding engine displacement, horsepower, model year, and weight as visual channels. A scatterplot of circles renders each car with size mapped to weight and color to year, while tooltips display the model name. The chart is built by registering vega, vega-lite, and the vega-lite-api library, and it uses D3’s csv loader to fetch the data. Custom axis and label styling in config.js improves readability against a dark text color.

CCoollRock
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 a CSV file. The visualization encodes origin as the x-axis, horsepower as the y-axis, weight as color, and mpg as point size, with tooltips showing car names. It applies custom axis and label styling via the Vega-Lite config, and uses the vega-tooltip handler for interactive hover details. The chart is rendered as an SVG that fits the full window using the vega-lite-api’s `render()` method.

Llatifiss
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This fork of the Vega-Lite API template renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Circles encode car origin on the x-axis, horsepower on the y-axis, weight as color, and miles per gallon as size, with tooltips revealing car names. The visualization uses the vega-lite-api library to construct the specification programmatically, registering Vega and Vega-Lite for rendering in SVG. The code loads CSV data via d3.csv, applies custom axis and label styling from config.js, and adapts to the full window size.

NNick Jefford-Horn
94% match