Fork of Types of vehicles for a fuel type - Adam Usmani

100%

Fork of Types of vehicles for a fuel type - Adam Usmani

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

Forked from Types of vehicles for a fuel type

This visualization shows the distribution of 746 car models across vehicle classes, colored by fuel type, with tooltips revealing the make and model of each vehicle. It uses a bar chart where the y-axis counts the number of models per vehicle class, and the color encoding distinguishes fuel types. Built with the vega-lite-api and vega-lite library, the chart loads CSV data from a GitHub Gist and renders interactively using vega-tooltip for hover details. The visualization adapts to the full window size with a customized dark theme.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the Kaggle, via Gist].

Having completed a few weeks in Data visualization, I am getting comfortable with the js setup. The data on the right is a representation of 746 car models based on their vehicle type and fuel color. Upon hovering over any point on the data, we can see the make and model that has been counted. There is a lot of information from just a bar graph and more can be done by providing a couple of parameters. I look forward to bringing out the creative side in me thorugh these visualizations.

MIT Licensed

Similar vizzes

Loading thumbnail…

Types of vehicles for a fuel type

This visualization shows the distribution of 746 car models across vehicle classes, color-coded by fuel type. A bar chart counts the number of models per vehicle class, with each bar segmented by fuel category. Hovering over a bar segment reveals the make and model of the counted vehicles. Built with the Vega-Lite API and D3.js, the example loads data from a CSV file hosted on Gist, originally sourced from Kaggle. The visualization uses `vl.markBar()`, `vl.x()`, `vl.y()`, and `vl.color()` to encode the categorical and quantitative fields.

AArjun Rao

91% match

Loading thumbnail…

Fork of Vega-Lite API Template

This scatter plot visualization explores the relationship between fuel efficiency and horsepower across car models, using color to encode the region of origin and point size to represent vehicle weight. The plot is built with the Vega-Lite API, which registers with Vega and Vega-Lite libraries to render an SVG chart, while D3.js handles fetching and parsing the CSV data. Tooltips display vehicle names via the Vega Tooltip handler. The data originates from the UCI Machine Learning Repository’s Auto MPG dataset, loaded from a GitHub Gist.

SS-Au-Zn

80% match

Loading thumbnail…

Fork of Vega-Lite API Template 2

This visualization presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower, with color encoding for country of origin and size encoding for vehicle weight. Built using the Vega-Lite API in conjunction with D3 v5 and Vega-Tooltip, the visualization retrieves data via D3’s CSV loader and renders as a full-window SVG with customized axis styling and tooltips that display vehicle names on hover.

Mmuhammadshumas

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between miles per gallon and horsepower for a subset of automobile models, with point size encoding vehicle weight and color distinguishing geographic origin. Hovering reveals each car’s name via a tooltip. Built with the Vega-Lite API for chart specification, it loads CSV data from the UCI Auto MPG dataset and renders interactively using D3.js, Vega, and the vega-tooltip handler.

Ggon araseon

79% match

Loading thumbnail…

Fork of Vega-Lite API Template b

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for various car models, with points colored by origin and sized by weight, using data from the UCI Auto MPG dataset. The visualization is built with the Vega-Lite API, which generates a Vega-Lite specification that is subsequently rendered by Vega. It uses D3.js to load the CSV data from a Gist, customizes axis and label styling through a configuration object, and includes interactive tooltips displaying the car name via the Vega-Tooltip handler.

Bbilalialikissankpeyi

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 Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting each car model as a circle positioned by fuel efficiency (mpg) and horsepower, with color encoding the country of origin and size representing vehicle weight. The visualization is constructed programmatically using the Vega-Lite API, which registers Vega and Vega-Lite libraries to render SVG. Data is fetched asynchronously via d3.csv, and the tooltip feature from Vega-Tooltip is attached to show car names when hovering.

CCees Klap

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between fuel efficiency (miles per gallon) and horsepower across automobile models, with color mapping to the country of origin and point size encoding vehicle weight, and includes tooltips displaying model names. It uses the Vega-Lite API (vl) to declaratively define the scatter plot specification, with data loaded from the UCI Machine Learning Repository’s Auto MPG dataset via d3.csv. The visualization is rendered through Vega’s and Vega-Lite’s JavaScript libraries, integrating the Vega Tooltip for interactive hover details, and applies a custom configuration for axis and label styling.

GGerasimos Katsagannis

79% match