Skip to main content
SimilarExport ZIP
100%

Vega-Lite API Template

✓ Published1🌍 Public
CCurran Kelleher
Last edited Sep 16, 2019
Created on Sep 16, 2019

This visualization plots survey responses about technology’s impact on life, with the x-axis representing attitudes toward driverless cars and the y-axis measuring whether technological change is seen as better or worse. Each point’s size reflects the count of identical responses, revealing distributions across these categorical opinions. The chart is built using the Vega-Lite API, with data loaded via d3.csv from a GitHub-hosted CSV. Rendering is handled through Vega’s SVG renderer, with custom configuration for axis styling and tooltip interaction via vega-tooltip.

AI-generated description

A visualization of the dataset located at https://gist.github.com/nasmith2/f7306cec68cf23c53a77f03efe7d70c0

What people think about the change in technology

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization plots survey responses about technology’s impact on daily life, comparing opinions on riding in a driverless car against whether technology change generally improves or worsens life. Each circle’s size encodes the count of matching responses. It loads CSV data from a GitHub gist, applies custom axis and label styling, and renders using Vega-Lite’s API with d3.csv for data fetching. The vega-lite-api library builds the mark, and vega-tooltip provides hover interactions.

Mmoslem-tg
89% match
Loading thumbnail…

Vega-Lite API Template

This visualization displays automobile data from a CSV file, plotting horsepower against origin with points colored by year and labeled by name. It demonstrates the vega-lite-api library, which programmatically constructs Vega-Lite specifications using JavaScript method chaining. The code registers Vega, Vega-Lite, and the API with vega-tooltip, then renders an interactive SVG chart that adapts to the window size. Custom axis and label styles in config.js improve readability against a dark theme.

NNadir-Zenith
80% match
Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to create an interactive scatter plot of the UCI Auto MPG dataset, mapping miles per gallon, horsepower, weight, and origin to the x-axis, y-axis, size, and color channels respectively. The visualization is rendered in SVG via Vega and Vega-Lite, with a tooltip showing car names. The code registers the vega-lite-api with a custom tooltip handler, loads data asynchronously using d3.csv, and applies a shared config for axis and label styling. The chart fits the full window and uses a dark color scheme.

Rrobin88824
80% match
Loading thumbnail…

Vega-Lite API Template

This gallery example demonstrates six distinct data visualizations rendered sequentially on a single page, exploring relationships between automotive attributes like miles per gallon, horsepower, and weight from the auto-mpg dataset, alongside temperature trends over time from the week temperature SF dataset. The visualizations include scatter plots, line charts, and point plots, each customized with tooltips and color encoding. Built using the Vega-Lite API wrapper, the code dynamically retrieves CSV data via D3 and configures visual properties programmatically, with options for mark type, size, opacity, and axis scaling. The framework combines Vega, Vega-Lite, and Vega-Tooltip for interactive SVG rendering.

SSulav Bista
80% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository as a scatter plot, mapping miles per gallon, horsepower, origin, weight, and car name to the x-axis, y-axis, color, size, and tooltip channels. It uses the Vega-Lite API to construct the specification programmatically, with Vega and Vega-Lite for rendering and Vega-Tooltip for interactive hover details. Data is loaded via d3.csv, and the chart fills the browser window with a custom configuration for font sizes and axis styling.

AAmine HAMOU
79% match
Loading thumbnail…

Vega-Lite API Template

This example visualizes infrastructure indicators by plotting each data point as a circle, with the year on the x-axis, the indicator type on the y-axis, and the color encoding the numeric value. Tooltips reveal the exact values on hover. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render the chart as SVG. Data is loaded asynchronously from a CSV file using d3.csv, and the chart’s styling and axis labels are customized through a configuration object. The visualization automatically fits the full browser window.

SSabin Bhandari
79% match
Loading thumbnail…

Vega-Lite API Template (1)

This visualization shows a scatter plot of automobile data from the UCI Auto MPG dataset, plotting population against horsepower with point size scaled by weight. The chart is built using the Vega-Lite API, which programmatically constructs a Vega-Lite specification through JavaScript calls like `vl.markPoint()` and `vl.x().fieldQ()`. It loads data asynchronously via `d3.csv`, applies a custom configuration for axis styling, and renders to SVG with interactive tooltips powered by `vega-tooltip`. The visualization fills the browser window and auto-fits its dimensions to the viewport.

AAndres de la Garza
79% match
Loading thumbnail…

Vega-Lite API Template 10

This visualization uses the Vega-Lite API with D3 to display a scatter plot of Auto MPG data from the UCI Machine Learning Repository, encoding horsepower and acceleration on the axes while coloring points by vehicle class. A second miniature chart, generated with repeated row and column facets, serves as a navigation overview. The code customizes axes and label styling through separate config objects and fetches data via D3’s CSV loader. Both charts are rendered as SVG using Vega-Lite’s API.

OOleJRask
79% match