Trying Vega-Lite-API

100%

Trying Vega-Lite-API

✓ Published0🌍 Public

Last edited Mar 13, 2021

Created on Mar 13, 2021

This visualization is a bar chart that displays task scheduling data, showing each task's start and end times along the y-axis. The bars are colored by tag category, with a tooltip providing the task name. It is built using the vega-lite-api library, which programmatically constructs Vega-Lite specifications, and renders the chart with Vega and D3. The data originates from a custom dataset of todo items, processed in `getData.js` to calculate durations and completion status. The chart is displayed full-screen with a custom dark color scheme.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

This visualization uses Vega-Lite's API to render a bar chart of household counts in Yemen, grouped by governorate of origin and colored by displacement date. It loads CSV data from a remote gist, configures axes and tooltips, and fits the chart to the browser window. The example demonstrates the `vega-lite-api` library alongside D3 and Vega tooltip handlers.

AAmit Wadhwa

73% match

Loading thumbnail…

test Vega-Lite API 2

This example displays a bar chart of satellite launch purposes by country, with bar heights encoded via a symmetric log scale and bars colored by purpose, using a dataset loaded from a CSV file. It is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and renders the visualization as SVG using `vl.markBar`, `vl.x`, `vl.y`, and `vl.color` encodings. The chart fills the browser window, and a Vega Tooltip handler is initialized to show value details on hover.

Ssurikmeetr

73% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting horsepower against origin with points colored by year and labeled by name. It demonstrates the vega-lite-api library, which programmatically constructs Vega-Lite specifications using JavaScript method chaining. The code registers Vega, Vega-Lite, and the API with vega-tooltip, then renders an interactive SVG chart that adapts to the window size. Custom axis and label styles in config.js improve readability against a dark theme.

NNadir-Zenith

72% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a bar chart of student performance data, showing chapters on the x-axis and total scores on the y-axis, with bars colored by difficulty level and tooltips revealing the total score. The underlying data is a small set of chapter names, percentages, scores, levels, and elapsed times. The visualization is built with the `vega-lite-api` library, which generates a Vega-Lite specification that is rendered by the Vega engine. The code registers both Vega and Vega-Lite, applies custom configuration for axis styling, and uses the d3 `csv` function to fetch data from a remote URL, though the live render uses hardcoded data instead.

JJeyasuriya M

72% match

Loading thumbnail…

Vega-Lite API Template

This example shows a timeline of page visits, with a line mark for each session plotted against timestamps on the x-axis and page names on the y-axis, colored by session ID. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads data from a CSV file via d3.csv. It renders as an SVG that fits the window, using custom axis and label styling from a config object, with Vega Tooltip enabled for interactivity.

CCurran Kelleher

72% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari

72% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the sum of slum households per division using a bar chart generated with the Vega-Lite API. It renders bars sized to five pixels, sorted by aggregate value, and applies a custom dark-color configuration for axis labels and titles. The code loads CSV data from a GitHub gist using d3.csv, registers vega, vega-lite, and vega-lite-api, and enables tooltips via vega-tooltip’s Handler.

Ssofia-martinovich

72% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example from the Vega-Lite API template displays a bar chart showing the count of records per business unit, colored by work class and positioned along a temporal axis derived from date-of-birth data. The visualization is built using the Vega-Lite API (vl) with D3.js v5 for data loading via the `csv` function from a GitHub Gist. It uses vega-lite-api’s declarative encoding to map fields to x, y, color, and tooltip, then renders to SVG with a tooltip handler and custom axis styling from a config object.

Mmarkbayley

72% match