Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Nov 3, 2021

Created on Nov 3, 2021

This visualization shows a circular mark plot where each point represents a dataset item, with the x-axis ordered by region and the y-axis mapping intensity values, while color encodes intensity and tooltips reveal titles. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries and uses a custom configuration for axis styling. The data is fetched asynchronously from a remote JSON file using D3’s `json` method, and the view is rendered as an SVG, filling the browser window with a fit autosize setting.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot-like visualization of user data, with points positioned along categorical axes for country and status, using an arc mark with a fill and low opacity. The visualization is built with the Vega-Lite API, which is registered with Vega and Vega-Lite, and uses a tooltip handler for interaction. Data is fetched asynchronously via D3's `json` function from a local server endpoint, and the chart is configured with custom axis styles and dark label colors.

VVahe Abovyan

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile data from the UCI Machine Learning Repository, plotting longitude and latitude coordinates while encoding magnitude type through color and gap distance through circle size. Point opacity is set to 0.5 with a fixed size of 300 pixels, and hovering reveals place names via tooltip. The visualization is constructed programmatically using the Vega-Lite API, which composes specifications through chained method calls. Data loading relies on d3.csv, while rendering uses Vega-Lite’s SVG renderer with custom configuration for axis styling and label fonts. The visualization dynamically fits the browser window dimensions upon load.

HHeidi Stockton

84% match

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.

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a circle-marked visualization of religious populations by country, with circle size encoding population and both axes using categorical fields. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification, and renders to an SVG via Vega. The underlying data is loaded from a CSV using d3.csv, and the visualization includes tooltips through the vega-tooltip Handler. The code applies custom axis and label styling, and sets the chart to fit the full browser window.

Ccynichole

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of car data, with each point representing a vehicle. The visualization uses a circular mark with low opacity to show the distribution of horsepower across different regions of origin, with tooltips revealing the car’s name. The chart is built using the Vega-Lite API, which programmatically defines the visualization, while D3’s `csv` method loads the dataset. The rendering is handled by Vega and Vega-Lite, with a custom tooltip handler and styling to improve readability.

Jjaowei

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a genome dataset as a scatter plot, with each point positioned by chromosome position and protein accession identifier. The plot uses a minimal point mark with very small, fully opaque circles and no strokes, creating a dense field of data points. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and D3, and loads CSV data from a GitHub gist. Custom axis styling and tooltips are configured, with the visualization rendered as an SVG that fills the browser window.

Ggon araseon

83% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, mapping engine displacement on the x-axis against horsepower on the y-axis, with each point’s opacity and size fixed. The visualization uses the Vega-Lite API, registered with vega and vega-lite, to render the mark as SVG. Data is loaded asynchronously via D3’s `csv` from a remote GitHub gist, with axis labels and tooltips showing the vehicle name. The view adapts to the full window size and includes a config for styling.

Aarmansepahvand

83% match