Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published2🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This visualization displays the relationship between study time and exam marks for individual students, using a scatter plot with semi-transparent circular marks. It is built with the Vega-Lite API, a high-level grammar for declarative visualization, which compiles specifications into Vega and renders them as SVG. The code reads student data from a remote CSV file via `d3.csv`, and incorporates a custom `config` object to adjust axis styling and label appearance. Tooltips are enabled through the Vega Tooltip handler, allowing users to inspect exact mark values.

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…

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

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

86% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between two quantitative variables, "Marks" and "time_study," with each point’s tooltip revealing the value of "Marks." The visualization is built using the Vega-Lite API, which generates a specification that is registered with Vega and Vega-Lite for rendering. Data is loaded asynchronously via a CSV file from the UCI Auto MPG dataset, fetched using d3’s `csv` function. The chart’s layout adapts to the browser window using autosize with fit, and custom axis styling is applied via a config object.

NNaimisha-M

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates an interactive scatterplot visualization built with the Vega-Lite API, plotting work class and gender attributes from a CSV dataset loaded via d3.csv. The points are rendered with low opacity and large size to show density distributions, with tooltips displaying gender values on hover. The code registers Vega-Lite with the vega and vegaLite libraries, configures an SVG renderer with custom axis styling, and uses the vega-tooltip Handler for interactive feedback. The visualization fills the window and adapts its dimensions dynamically.

Mmarkbayley

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses Vega-Lite API to plot a scatterplot of college football team data, mapping four-year average recruiting points on the x-axis and average points per game on the y-axis. Circle size encodes scoring average, and tooltips reveal team names. It loads CSV data from a GitHub gist via d3.csv, configures chart appearance in a separate config object, and renders interactively with vega-tooltip. The Vega-Lite chart is built programmatically through vl.markPoint, vl.x, vl.y, and vl.r encodings, then rendered as SVG.

BBenLeathers

80% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays student performance across five test attempts, breaking down questions into four categories based on correctness and confidence level. The bar chart uses color to distinguish between correct strong, correct weak, incorrect strong, and incorrect weak responses, while the x-axis orders test numbers by their totals. The visualization is built with the Vega-Lite API, which configures the bar marks, scales, and tooltips, while D3’s CSV loader is present for data fetching. The data is hardcoded in the script, representing fictional assessment results rather than an external dataset.

JJeyasuriya M

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

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

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.

AAbhishek Bhavsar

79% match