Skip to main content
SimilarExport ZIP
100%

Fork of data_plaisio2

✓ Published0🌍 Public
Ssofigg
Last edited May 30, 2022
Created on May 30, 2022
Forked from data_plaisio

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.

AI-generated description

A visualization constructed using the vega-lite-api.

<iframe width="560" height="315"
MIT Licensed

Similar vizzes

Loading thumbnail…

data_plaisio

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.

Ssofigg
93% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows an interactive scatterplot of automobile data from 1980, plotting miles per gallon against horsepower, with each point colored by origin and sized by weight. The visualization is built using the Vega-Lite API (vl) with a custom configuration that removes axis domains and enlarges label and title fonts. Since it is a fork of an API template, it loads data from a CSV file using `d3.csv`, then renders the marks with `vl.markCircle`, encoding position, color, size, and tooltip fields directly in `viz.js`. The view resizes to the window and includes a tooltip handler from Vega Tooltip.

PPiotr Paszek
76% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, mapping miles per gallon and horsepower with point size reflecting mpg and color indicating origin. The visualization uses the Vega-Lite API to declare the chart specification, with D3.js loading the CSV dataset from a GitHub gist. Rendering is handled by Vega and Vega-Lite, while Vega Tooltip provides interactive hover details. The chart fills the viewport, and custom axis, label, and title styling improve readability against the dark text on a light background.

MMalcolm Mead
75% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatterplot of automobile data, mapping miles per gallon and horsepower from a CSV dataset, with points colored by origin and sized by mpg. The visualization uses the Vega-Lite API (vl) to construct the chart declaratively, while D3.js fetches the data via `d3.csv`. Custom styling is applied through a Vega-Lite config for axis and label appearance. The code registers Vega and Vega-Lite with the API, renders to SVG, and integrates a tooltip handler for interactive exploration.

LLeandro Miguel Narciso
75% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing vehicle names. Built with the Vega-Lite API and D3’s CSV loader, it renders as an SVG scatterplot using semi-transparent points to reveal density. The visualization sizes itself to the window and applies custom styling for larger axis labels, with the Vega tooltip handler enabled for interactive inspection.

Ddev-ignacio-h
75% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile data, with circles positioned by vehicle origin on the x-axis and horsepower on the y-axis. Tooltips reveal car names when hovering, using the vega-lite-api to construct the visualization. The code loads data from a CSV via d3.csv, then renders the chart with vega, vega-lite, and vega-tooltip, applying a custom config for styling and fitting the full window size.

PPetko4
75% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower as a scatter plot with semi-transparent points. Tooltips reveal vehicle names on hover, while the custom configuration adjusts font sizes, axis colors, and removes axis domains for a cleaner appearance. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite, and rendered as SVG through D3. Data loading relies on D3's `csv` function, with the chart automatically sizing to fit the browser window.

IInnocent Ernest
75% 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
75% match