Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Pparshwa30122002@gmail.com
Last edited Aug 14, 2024
Created on Aug 13, 2024

This example visualizes automobile performance data from a CSV file, plotting miles per gallon against horsepower. Colored circles represent the country of origin, while circle size encodes vehicle weight, with tooltips displaying detailed attributes. The visualization is built using the Vega-Lite API, registering Vega and Vega-Lite libraries with a custom configuration for axis styling and tooltip handling. Data is loaded asynchronously via D3's `csv` function, and the chart renders responsively to fill the browser window using an SVG renderer.

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 visualizes automotive data from a CSV file, plotting horsepower and weight for each car as circles, with color indicating origin and size encoding miles per gallon. It uses the Vega-Lite API to build the chart declaratively, with D3’s `csv` function for data loading. The visualization leverages vega-lite-api’s `markCircle` and `encode` methods, and it renders SVG output through Vega, vega-lite, and vega-tooltip for interactive tooltips.

TTakuya Kitazawa
95% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics from the auto-mpg CSV dataset using the Vega-Lite API. It plots weight against horsepower as a scatter plot, with circle size encoding miles per gallon and color encoding country of origin, plus tooltips showing vehicle names. The code registers Vega-Lite with Vega, uses d3.csv for data loading, and applies a custom configuration for axis styling and typography. The visualization renders as SVG, sized to fit the browser window, with a semi-transparent fill and opacity adjustments for readability.

AAoibhinnRed
95% 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 example visualizes the relationship between vehicle attributes from the auto-mpg dataset, plotting weight against horsepower while using the size and color of circles to encode miles per gallon and country of origin. The visualization is constructed using the Vega-Lite API, which builds a declarative specification rendered through D3 and Vega-Lite libraries. It draws scatterplot circles with custom styling, reads CSV data asynchronously via D3’s csv loader, and includes interactive tooltips that display car names when hovered.

EEugenio2192
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile fuel efficiency and performance data from the auto-mpg dataset, plotting engine horsepower against miles per gallon. Circles are colored by country of origin and sized according to vehicle weight. The visualization is built programmatically using the Vega-Lite API, which compiles to Vega specifications, with data loaded asynchronously via D3’s `csv` function. Custom axis and label styling are applied through the `config` object, and an interactive tooltip displays each car’s model name on hover.

SSabbir
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes car performance data from the auto-mpg dataset, plotting horsepower against miles per gallon and coloring points by country of origin. The visualization uses the Vega-Lite API to define a scatter plot with circles, where both color and size encode variables, and tooltips display car names. It loads data via d3.csv, configures a dark theme with custom axis styling, and renders the chart as SVG using Vega-Lite’s vega-lite-api library, integrated with vega-tooltip for interactive hover details.

AasafJortilles
94% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from the UCI Machine Learning Repository, displaying a scatter plot of miles per gallon against horsepower. Color encodes the car’s country of origin, while the size of each circular mark scales with weight, and tooltips reveal the vehicle name. It uses the Vega-Lite API to construct the chart declaratively, with the `vl.markCircle`, `vl.x().fieldQ`, and `vl.color().fieldN` functions. The code imports data via `d3.csv`, registers Vega-Lite with `vega-tooltip`, and renders the output as an SVG using the Vega view.

TThiago Sawada
94% match