Vega-Lite API Template 2

100%

Vega-Lite API Template 2

✓ Published0🌍 Public

Last edited Feb 12, 2021

Created on Feb 12, 2021

Forked from Film nerd data with Vega-Lite API

This example visualizes one person’s film-watching records, plotting each movie as a circle positioned by its watch date on the x-axis and its grade on the y-axis, with color encoding the grade value. The circles are semi-transparent and tooltips reveal the film title. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and data is loaded asynchronously from a CSV file via d3.csv. The code customizes axis and label styling through a config object, and the final SVG view is rendered full-screen, fitted to the window dimensions.

AI-generated description

A visualization of data from one person's film-watching records. Constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Film nerd data with Vega-Lite API

This visualization displays one person’s film-watching records from a CSV file, plotting watch dates on the x-axis and countries on the y-axis. Each circle represents a film, with color encoding the user’s grade and tooltips revealing the title. The example uses the Vega-Lite API’s `markCircle` and `encode` methods, with D3’s `csv` loader to fetch data. Styling is customized via a config object, while the chart is rendered as SVG inside a full-window layout.

KKirsten Lund

91% 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

82% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatterplot visualizes the relationship between movie titles, ratings, and origin using the Vega-Lite API. The visualization encodes film rating on the y-axis, title on the x-axis, origin as color, and weight as point size, with tooltips displaying movie names. It loads CSV data from a GitHub-hosted file retrieved via `d3.csv`. Built with `vega-lite-api`, `vega`, and `vega-lite`, the chart renders as an SVG and includes a custom config that adjusts axis styles and typography for improved readability.

Oozbrenn

82% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to visualize page visits over time, plotting each visit as a small black circle with timestamps on the x-axis and page names on the y-axis. The chart is rendered as an SVG via the View API, with data loaded asynchronously from a CSV file using d3.csv. The API is registered with vega and vega-lite, and a custom config adjusts axis and label styling for readability.

Ppalti

82% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Ddavid-cv2

80% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

MMamveguh

80% 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

79% match

Loading thumbnail…

Vega-Lite API Template 7

This example visualizes automobile data from the UCI Auto MPG dataset, plotting two numeric attributes as a scatter plot with points colored by vehicle class. The main chart fills the viewport, while a smaller overview version in the corner provides navigation context. Built with the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode fields, with `vl.color().fieldN()` for categorical coloring. Data loads via D3’s `csv` function, and the configuration customizes axis styling and label appearance.

OOleJRask

79% match