Fork of First Graph

100%

Fork of First Graph

✓ Published0🌍 Public

Last edited Oct 24, 2021

Created on Oct 24, 2021

This example displays a scatter plot of automobile data, with points colored by country of origin and sized by vehicle weight. The visualization is rendered using the Vega-Lite API, specifically through the `vl` object from `vega-lite-api`. It encodes the acceleration and horsepower fields on the x and y axes, with scales set to not include zero. The plot uses `markPoint` with filled, semi-transparent circles, and includes a tooltip showing the car name. The data appears to come from a standard automotive dataset, though its exact source is not shown in the code.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes a scatter plot of automobile data, mapping weight on the x-axis, horsepower on the y-axis, and encoding country of origin as color and fuel efficiency (mpg) as point size. The visualization is built using the Vega-Lite API, which composes a declarative specification in `viz.js` and renders it as an SVG. Data is loaded from a remote CSV file via `d3.csv`, and the chart’s appearance is customized through a config object that adjusts axis styles and label typography. Interactivity is added via the Vega Tooltip handler, enabling hover details.

FFrancisco Ortega

86% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example builds a scatter plot of automobile data, mapping weight and horsepower along the axes and encoding the vehicle’s country of origin by color, with point size also tied to weight. It uses the Vega-Lite API (via `vl.markCircle`) to declaratively specify the visualization, which is then rendered to SVG. The underlying data is fetched as CSV using `d3.csv` from a GitHub gist, and interactivity (like tooltips) is added through the Vega Tooltip `Handler`. Custom styling is applied through a shared config object.

TTranHBach

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatter plot of automobile data from the UCI Machine Learning Repository, displaying miles per gallon against horsepower. Each point is colored by country of origin and sized by vehicle weight, with tooltips revealing car names. The visualization employs the `vl` API to construct the mark and encodings, configures axis styling for readability, and uses `vl.scale` for non-zero-based axes. It renders to SVG using Vega-Lite's default renderer, with data fetched asynchronously from a Gist-hosted CSV.

EEevikettu

85% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatterplot of automobile data, mapping weight to the x-axis and horsepower to the y-axis, with color encoding for country of origin and point size reflecting miles per gallon. Tooltips display the vehicle name. The code uses the Vega-Lite API, registering vega and vega-lite libraries, and loads CSV data asynchronously via d3.csv from a gist URL. Config settings customize axis and label appearance, while the view is rendered as SVG with fit sizing to the window.

Ddanielscheeper@gmail.com

85% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of automotive data, mapping miles per gallon and horsepower with circle size representing vehicle weight and color indicating country of origin. Built using the Vega-Lite API, the code registers both Vega and Vega-Lite libraries, then chains mark and encoding specifications programmatically. Data is loaded asynchronously from a CSV file hosted on GitHub, using d3's csv parser, and rendered as an SVG with tooltips provided by the vega-tooltip handler.

Llingfa

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile characteristics using a scatter plot, where the x-axis maps the country of origin, the y-axis shows horsepower, color represents weight, and point size encodes miles per gallon. The visualization is built with the Vega-Lite API, which programmatically constructs the specification, while D3 handles CSV data loading from a remote source. The rendered SVG output includes an interactive tooltip showing car names. The code customizes the chart’s appearance through a configuration object that adjusts axis and label styling.

SSean Lin

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automotive data, plotting miles per gallon against horsepower, with weight encoded as color. The visualization is built using the Vega-Lite API, which is programmatically assembled in JavaScript via `vl.markPoint`, `vl.x`, `vl.y`, and `vl.color`. Data is loaded asynchronously from a CSV file using `d3.csv`. The chart renders as SVG with a custom dark theme and tooltips provided by `vega-tooltip`.

Aaniosindustries

84% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API with D3 to render a scatterplot of automobile data from the auto-mpg.csv dataset. It plots miles per gallon on the x-axis against horsepower on the y-axis, with points colored by country of origin and sized with a fixed 300-pixel radius at 50% opacity. The visualization is generated declaratively using `vl.markCircle`, `vl.x().fieldQ`, `vl.y().fieldQ`, and `vl.color().fieldN` to encode the quantitative and nominal fields, with tooltips showing car names. Data is loaded asynchronously via `d3.csv` before the chart is rendered into the DOM.

Aape-ape-ape

84% match