Skip to main content
SimilarExport ZIP
100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public
Mmoslem-tg
Last edited Apr 12, 2023
Created on Apr 12, 2023

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.

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…

Vega-Lite API Template

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.

CCurran Kelleher
89% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3 to plot automobile data, showing each car as a circle positioned by weight and horsepower, colored by origin, and sized by fuel efficiency (mpg). The code loads CSV data from a GitHub gist via D3’s `csv` method, then builds the chart with `vega-lite-api`’s `markCircle` and encodes position, color, size, and tooltip fields. Rendered as an SVG through the Vega renderer, the visualization includes a Vega tooltip handler for interactive inspection.

AA
85% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to display Auto MPG data from the UCI Machine Learning Repository, plotting horsepower against miles per gallon with circle marks. Each circle’s size encodes weight, while color groups vehicles by origin, and hovering reveals car names via tooltips. The code registers Vega, Vega-Lite, and the Vega-Lite API, renders SVG output, and uses a custom config to style axes and labels. Data is fetched asynchronously with d3.csv, and the visualization adapts to the window dimensions.

NNioh
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of automotive data, with each circle representing a vehicle based on its miles per gallon, horsepower, origin, and weight. The visualization uses the Vega-Lite API within a D3.js context to render interactive SVG graphics. It loads a CSV dataset from a GitHub gist and applies custom encoding for position, color, and size, while tooltips reveal vehicle names. The code integrates vega, vega-lite, vega-lite-api, and vega-tooltip libraries, with the figure automatically fitting the browser window.

TTylerSaikaleyTheriault
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, displaying vehicle weight against horsepower with points colored by origin and sized by weight. A tooltip reveals the car’s name on hover. The code builds the visualization declaratively via `vl.markCircle`, `vl.encode`, and field mappings, then registers Vega-Lite with vega and vega-lite-api, using d3’s `csv` loader for data retrieval and custom configuration for styling axes and labels.

Mmaker57sk
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a scatter plot of automotive data from the UCI Auto MPG dataset, loaded via d3.csv. The active chart displays vehicle origin on the x-axis and horsepower on the y-axis, with large translucent circular marks and tooltips showing car names. The code registers Vega-Lite with vega, vega-lite-api, and vega-tooltip, and applies custom axis and label styling from a config object. The visualization is responsive, fitting the full browser window.

MMyGitUserName-dh
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

KKeyvan Rezaei
83% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. It displays each car as a circle positioned by mileage-per-gallon and horsepower, with color encoding geographical origin and size encoding weight, while tooltips reveal the vehicle name. The visualization is built with d3.v5 for CSV loading, the Vega-Lite API for declarative chart specification, and Vega-Tooltip for interactive hover details. The code configures axis styling and a dark color palette to improve readability.

KKeyvan Rezaei
83% match