Smiles

100%

✓ Published0🌍 Public

Last edited Jan 14, 2022

Created on Jan 13, 2022

This visualization plots automobile data as a scatterplot, using a circle mark for each vehicle. The horizontal axis maps origin, the vertical axis maps horsepower, with color encoding weight, size encoding miles per gallon, and a tooltip showing the car name. It is built with React and uses the vega-lite-api to construct the chart specification, rendering marks with a fixed size and partial opacity. The visualization relies on the `vl.markCircle`, `vl.x`, `vl.y`, `vl.color`, `vl.size`, and `vl.tooltip` APIs to define the encoding.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

81% match

Loading thumbnail…

Vega Vehicle Scatter Plot

This example renders a scatter plot of vehicle data from the auto-mpg CSV dataset, showing the relationship between weight, horsepower, and miles per gallon, with origin as a color-coded category. Built with React and the Vega-Lite API, it uses `vl.markCircle` to encode fields for x, y, size, color, and tooltip, while the `config.js` file customizes axis styles and label appearance. The visualization fetches data asynchronously via `d3.csv`, registers the Vega tooltip handler for interactive tooltips, and dynamically sizes the plot to fit the window using `autosize`.

AAmeer Nuri

80% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting each car as a circle on a scatterplot with origin on the x-axis and horsepower on the y-axis. Tooltips display the car model name. Built with React and the Vega-Lite API, it uses `vl.markCircle`, `vl.x().fieldN`, and `vl.y().fieldQ` to create the chart, fetching data with `d3.csv`. The visualization is rendered to SVG via Vega-Lite with custom axis styling for readability.

TTaeyoung Ahn

79% match

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, showing the relationship between vehicle weight, horsepower, and miles per gallon. The visualization uses the Vega-Lite API within a React framework, loading data from a CSV file via D3’s `csv` method. It renders a circle mark for each car, with color encoding weight, size encoding mpg, and tooltips revealing the car name. The code registers Vega-Lite with Vega and integrates the Vega Tooltip handler for interactive labels.

RRahul Gupta

79% match

Loading thumbnail…

Viz with Vega

This example uses the Vega-Lite API to render a scatter plot of automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. It maps miles per gallon on the x-axis, horsepower on the y-axis, color to country of origin, and size to vehicle weight, with tooltips showing model names. The visualization is built programmatically via `vl.markCircle`, `vl.x().fieldQ()`, and related encodings, then rendered with Vega-Lite’s API and a custom `config` for styling. Data loading relies on d3’s `csv` function, while the final output uses Vega’s SVG renderer with an interactive tooltip handler.

SStarkerRegen

78% match

Loading thumbnail…

cars scatter plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, with each circle representing a vehicle. Built with React and rendered as SVG, it uses D3’s `csv` loader and `scaleLinear` for axes, plus `axisBottom` and `axisLeft` for labeled tick marks. The D3 code maps the data to pixel coordinates, applies `extent` and `.nice()` to scale domains, and removes default tick lines for a clean presentation.

Llinkshady

78% match

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between the origin of a car and its horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as a circular scatter plot, each point represents a car, with opacity enhancing readability when points overlap. The code leverages the Vega-Lite API, specifically `vl.markCircle` and `vl.encode` for visual encoding, while `d3.csv` handles data loading. The visualization automatically fits the browser window and includes a custom tooltip via Vega-Tooltip, with axis styling customized through a separate configuration file.

Ggoyalshivam204

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatterplot visualizes automobile data by plotting horsepower against origin, with each point representing a car model and tooltips revealing its name. Built with the Vega-Lite API, the chart uses `vl.markCircle` with encoding functions for x and y axes, while custom config adjusts font sizes and axis styling. Data is loaded asynchronously from a CSV using D3’s `csv` method, and the visualization renders full-screen with an SVG view and integrated tooltip handler.

Bbreadcircle

78% match