Vega Lite API lessons done on Italki

100%

Vega Lite API lessons done on Italki

✓ Published0🌍 Public

Last edited Jun 25, 2021

Created on Jun 25, 2021

Forked from Fork of Vega-Lite API Template

This visualization tracks the cumulative number of Italian lessons the author completed on Italki over a two-week period in June 2021, shown as a line chart. It uses the vega-lite-api to declare the mark and encodings, with d3.v5 for CSV parsing. The chart is rendered as SVG via vega and vega-lite, with vega-tooltip providing interactive hover details. A custom config adjusts axis and label styling for improved readability against a dark color scheme.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

74% match

Loading thumbnail…

Vega-Lite API Template

This example shows a line chart of temperature readings over time, rendered as a single thick stroke. The visualization uses the Vega-Lite API to specify the mark type and encodings, including the x-axis as a temporal field and the y-axis as a quantitative field with a non-zero scale. Data is fetched from a CSV file containing weekly San Francisco temperature measurements using d3’s `csv` function. The code registers Vega-Lite and Vega-Tooltip to enable interactive tooltips, and applies custom axis styling from a configuration object.

AAnkit5ingh

73% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of student data, plotting marks against time spent studying, with color and size encoding the number of courses and an integer attribute, respectively. The tooltip reveals each student’s name. Built with Vega-Lite API and D3, it loads CSV data from the UCI Auto MPG dataset, renders an SVG via Vega, and customizes axes and label styling through a config object.

NNaimisha-M

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 Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Bbakstorage00001

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

72% match

Loading thumbnail…

Vega-Lite API Example

This example demonstrates a line chart visualizing numerical values over time, with data sourced from an Auto MPG dataset and individual time-stamped observations. The visualization is constructed programmatically using the `vega-lite-api`, which provides a fluent JavaScript interface for defining Vega-Lite specifications. After fetching data using the `json` function from `d3`, the chart is rendered as an SVG through the `vega` and `vega-lite` libraries, with a custom tooltip handler integrated for interactive exploration. The chart is configured to fit the window size, and styling is adjusted for readability.

DDaniel Lauzon

72% match

Loading thumbnail…

Vega-Lite API Template 10

This visualization uses the Vega-Lite API with D3 to display a scatter plot of Auto MPG data from the UCI Machine Learning Repository, encoding horsepower and acceleration on the axes while coloring points by vehicle class. A second miniature chart, generated with repeated row and column facets, serves as a navigation overview. The code customizes axes and label styling through separate config objects and fetches data via D3’s CSV loader. Both charts are rendered as SVG using Vega-Lite’s API.

OOleJRask

72% match