Fork of Fork of Vega-Lite API Template

100%

Fork of Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

Forked from 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.

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

89% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L

86% 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 Vega-Lite API Template

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.

SShivaPriyad

86% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This interactive scatter plot visualizes automobile characteristics from the UCI Auto MPG dataset, comparing fuel efficiency (mpg) against horsepower while encoding weight through point size and origin through color. The visualization is built using the Vega-Lite API, which programmatically constructs the specification through chained methods like `markCircle`, `encode`, and field mappings. It imports and registers Vega, Vega-Lite, and Vega-Tooltip libraries, fetches CSV data via `d3.csv`, and renders to SVG with custom styling for axis labels and tooltips.

BBrian Olczak

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of Auto MPG data, showing relationships between vehicle attributes through a dense cluster of points. It uses the Vega-Lite API to construct the chart, with D3.js handling data loading via `d3.csv`. The visualization features tooltips that display RGB hex values when hovering over points. The chart is rendered dynamically, adapting its size to the browser window using the `vl.width()` and `vl.height()` methods from the vega-lite-api library, and includes custom styling from the config file for improved readability.

TtrwMK

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

GGyromighty

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon, horsepower, weight, and origin. The visualization uses the Vega-Lite API with d3.csv for data loading, and configures an SVG renderer with a custom dark theme. It encodes x, y, color, size, and tooltip channels through the vl.markCircle and vl.encode methods, with vega-tooltip handling interactive hover details. The chart automatically resizes to fill the viewport.

Vvarmps

85% match