data_plaisio

100%

✓ Published1🌍 Public

Last edited May 30, 2022

Created on May 30, 2022

This visualization maps the relationship between hard drive capacity and RAM for products listed in a CSV dataset from Plaisio, with price encoded by color and product names shown via tooltips. Built with the Vega-Lite API and D3, it renders circles as marks, scaling both axes from zero and adjusting sizing and opacity for readability. The code sets dark-themed axis styling and uses vega-tooltip for interactive hover details.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of data_plaisio2

This example plots items from a CSV dataset of Plaisio products, showing the relationship between hard drive capacity and RAM. Each circle represents a product, positioned by these two attributes and colored by price, with the product name available as a tooltip. The visualization is built using the Vega-Lite API and rendered through Vega, with D3.js handling the CSV data loading from a remote gist. The code customizes the axis appearance and tooltip styling through a configuration object.

Ssofigg

93% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of automotive data from the UCI Auto MPG dataset, graphing miles per gallon against horsepower. Each circle’s size encodes acceleration, while tooltips reveal the car’s name. The example demonstrates the Vega-Lite API workflow, using `vl.markCircle` with field encodings for quantitative axes and an opacity adjustment for overlapping points. The code builds the chart by processing CSV data via `d3.csv`, configuring axis styling through Vega-Lite’s `config`, and rendering with the vega-lite-api library alongside vega-tooltip for interactive hover details.

IIsar Ramses

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

74% match

Loading thumbnail…

Vega-Lite API Scatter Plot

This example displays a scatter plot of product brands against their costs, with tooltips revealing product names and size and opacity encoding additional data dimensions. Built with the Vega-Lite API, it uses the `vl` wrapper to define the visualization, registering Vega and Vega-Lite under the hood. The code loads D3 via UNPKG, fetches CSV data using `d3.csv`, and renders the chart as an SVG. The visualization integrates a custom tooltip handler and a configuration object that adjusts tick colors, font sizes, and removes axis domain lines for a cleaner appearance.

SSwapna1915

74% match

Loading thumbnail…

Vega-Lite API Template

This example presents a scatter plot of auto-mpg data from the UCI Machine Learning Repository, visualizing vehicle attributes across model years. Each circle’s position encodes the year and horsepower, while its color differentiates the region of origin and its size reflects vehicle weight, with tooltips revealing model names. The visualization is built using the Vega-Lite API, where `vl.x()`, `vl.y()`, `vl.color()`, and `vl.size()` are chained to define encodings. Data is loaded asynchronously via `d3.csv`, and the rendered SVG view is configured with custom axis styling and a tooltip handler from `vega-tooltip`.

JJoe Hutchins

74% match

Loading thumbnail…

vega

This example visualizes automobile data using a Vega-Lite scatter plot, with circles positioned by weight and horsepower, colored by origin, sized by miles per gallon, and showing car names on hover. The visualization is built with the vega-lite-api library, which compiles specifications to Vega, and is rendered as an SVG using the vega view. Data is loaded asynchronously from a CSV file with d3.csv, and the chart is dynamically sized to fit the window. The code includes custom styling for axes and tooltip formatting.

MMatt Lane

74% match

Loading thumbnail…

Template Vega-Lite Api

This example demonstrates a scatter plot of automobile data, mapping miles per gallon, horsepower, weight, and origin using the Vega-Lite API. It shows how to declaratively build interactive visualizations with circle marks, color encoding, and tooltips. The code registers Vega, Vega-Lite, and vega-tooltip via `vl.register`, loads CSV data from a gist using d3.csv, and renders to an SVG view that fits the window. Appearance is customized with a configuration object, and the visualization auto-sizes with padding.

AAlan Santos

74% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

PPirialMersus

73% match