Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

✓ Published0🌍 Public
RRavi Teja Bonam
Last edited Mar 8, 2022
Created on Mar 2, 2022

This bar chart displays February 2022 US auto sales by brand, ranked from highest to lowest sales figures. The visualization uses the Vega-Lite API, registered through `vl.register` with Vega and Vega-Lite, to construct and render the SVG output. Data is loaded asynchronously from a CSV file via `d3.csv`, and the bar marks encode the Brand field on the x-axis and the Feb sales quantity on the y-axis, with tooltips showing exact values. The chart’s appearance is customized using the exported `config` object.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This visualization displays a bar chart of population by country, sourced from the UCI Auto MPG dataset via a Gist. It is built using the Vega-Lite API alongside d3.v5, with Vega-Lite 4 and Vega 5. The chart sorts bars descending by population and includes tooltips. The code programs the visualization declaratively via `vl.markBar()` and encodes fields with `vl.x()` and `vl.y()`, applying custom axis and label styling from a config object.

Zzjulijie0618
84% match
Loading thumbnail…

Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This example displays a bar chart of population by country, sorted in descending order to highlight the most populous nations. The visualization is built programmatically using the Vega-Lite API, which constructs a specification that is then rendered by the Vega engine. The code registers Vega-Lite and Vega with the vega-lite-api library, uses D3’s CSV parser to load data from a Gist-hosted file, and applies custom configuration for axis styling and tooltips. Data originates from the UCI Auto MPG dataset, though the visualization itself plots country populations.

Zzjulijie0618
81% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API to render a bar chart of the auto-mpg dataset, with bars representing origin categories and encoding horsepower on the y-axis, mpg through size, and color by origin. Hovering reveals car names via a tooltip. The code imports data through D3’s CSV loader, registers Vega and Vega-Lite via the vega-lite-api library, and configures axis styling and tooltip handling in the provided config.js and index.js files.

IIlyas Filali
79% match
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile data where each car model is represented as a bar positioned by its miles per gallon (mpg) and year, with color encoding the country of origin and bar size encoding horsepower. The visualization uses the Vega-Lite API to construct the specification, which is then rendered as an SVG by Vega, with data loading handled through d3’s `csv` function. Tooltips are enabled via vega-tooltip, and the chart is configured with custom axis and label styling from the `config.js` file, while the layout auto-fits to the browser window.

Rredeath96
79% match
Loading thumbnail…

Fork of Fork of Fork of Pie Chart

This pie chart displays 2022 US auto sales by brand, showing each brand’s share as a percentage and raw sales in thousands. The visualization uses a static SVG rendered with D3 v5, where slices are generated via `d3.pie` and `d3.arc`, with colors assigned using `d3.scaleOrdinal`. Legends are manually appended, listing each brand, its percentage, and sales volume. Data is loaded asynchronously from a CSV file hosted in a GitHub gist using `d3.csv`, with numeric sales values parsed before rendering.

Eeravellisaimeghana
79% match
Loading thumbnail…

Fork of Vega-Lite API Template

A bar chart shows the relationship between car origin and median horsepower using a dataset of automobile specifications from an online CSV. The visualization is built with the Vega-Lite API, which generates a specification rendered by D3.js and Vega, with interactive tooltips displaying car names. The code loads data via D3's `csv` function, configures axis styling and colors, and sets the chart to fit the browser window.

Jjr-frazier
79% match
Loading thumbnail…

Fork of Fork of Pie Chart

This pie chart displays 2022 US auto sales by brand, sourced from a CSV file loaded via d3.csv. The visualization uses d3.pie() and arc generators to create SVG paths, with a scaleOrdinal color scheme mapping each brand’s YTD sales value. A legend lists each brand with its corresponding color and sales figure formatted in thousands (K). The rendering approach relies on SVG elements within a 960x500 viewport, with data preprocessing converting string values to numbers before generating the chart.

VVenkata Rajashekar Reddy Chinthala
79% match
Loading thumbnail…

Fork of Fork of CarSelling-Bar Chart

This bar chart visualization displays car selling data from a CSV file fetched via d3.csv from a GitHub gist. The chart is rendered as SVG within a React framework, using d3.v5 to parse and process the data. The visualization employs vega-lite and vega-tooltip libraries, registered through vega-lite-api, to enable interactive tooltips on hover. The page integrates vega and vega-lite scripts in the HTML head, with the SVG container set to 960x500 pixels, and the visualization is generated through a bundled JavaScript file that loads the dataset and applies the charting configuration.

RRyanYun0017
78% match