Film nerd data with Vega-Lite API

100%

Film nerd data with Vega-Lite API

✓ Published1🌍 Public

Last edited Feb 22, 2021

Created on Feb 8, 2021

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.

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…

Vega-Lite API Template 2

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.

KKirsten Lund

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

79% match

Loading thumbnail…

Vega-Lite API Template testing

This visualization displays the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car as a circle positioned by miles per gallon on the x-axis and country of origin on the y-axis, with color encoding horsepower. Built with the Vega-Lite API, the example demonstrates a programmatic approach to declarative chart construction, where the visualization specification is defined using the `vl` object's methods like `markCircle` and `encode`. The code registers Vega, Vega-Lite, and the API with `vl.register`, loads CSV data via `d3.csv`, and renders an SVG that fits the full window. Custom axis styling and tooltips via `vega-tooltip` enhance readability.

AAndy Maes

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

74% match

Loading thumbnail…

Vega-Lite API Template TESTFork

A bubble chart shows the population of various religious groups across countries, with circle size encoding population and position mapping country and religion. Built with the Vega-Lite API, the visualization loads CSV data from a gist URL and renders as a scalable SVG that fits the browser window. The example demonstrates the `vl.markCircle` method with encoded fields for country, religion, and population, styled through a custom config that adjusts axis and label appearance. It integrates Vega-Lite, Vega, and D3’s CSV loader for data ingestion.

PPaul B

74% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes annual counts of air quality records from a filtered dataset, using a scatterplot of circles where each point represents one year. It loads CSV data from a GitHub gist, filters rows by a specific indicator ID, and renders the visualization with the Vega-Lite API, registering it alongside Vega and D3 v5. The code uses `vl.markCircle`, `vl.x().fieldT('Start_Date').timeUnit('year')`, and `vl.y().count()` to aggregate values, with custom axis and label styling via a config object and a tooltip handler.

YYodae Lim

74% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of automobile data using the Vega-Lite API, with each circle representing a car model positioned by its country of origin and horsepower. The visualization shows overlapping points with low opacity to reveal density patterns. It loads data from a CSV file using d3.csv, constructs the mark and encoding specifications through vl.markCircle and vl.encode, then renders the final SVG using Vega charting libraries bundled with Vega-Tooltip. The code demonstrates a workflow that builds a Vega-Lite specification programmatically rather than writing JSON directly, minimizing boilerplate while retaining full expressiveness.

CCurran Kelleher

73% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays student performance data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting exam marks against study time as circles colored by number of courses and sized by an integer attribute. Built with the Vega-Lite API and D3 v5, it renders an interactive scatter plot with tooltips showing student names. The code uses `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode variables, while fetching data via `d3.csv`. The chart fills the browser window and employs a custom config for improved label readability.

NNaimisha-M

73% match