Types of vehicles for a fuel type

100%

Types of vehicles for a fuel type

✓ Published1🌍 Public

Last edited Sep 24, 2020

Created on Sep 23, 2020

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.

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…

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

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.

AAdam Usmani

91% match

Loading thumbnail…

Making a Bar Chart

This horizontal bar chart visualizes the fuel efficiency of various car models, ranking them by their miles per gallon (MPG) value. The data is sourced from a CSV file and loaded using D3's `csv` function, with MPG values scaled down for display. The visualization is built with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are rendered as SVG rectangles, with axes added via `axisLeft` and `axisBottom`, and the chart is styled with a steelblue fill for the bars.

Ssrrajendran

77% match

Loading thumbnail…

Vehicle information

This example displays a bar chart of fuel consumption for nine vehicles, ranked from highest to lowest miles per gallon. The vehicles are listed on the y-axis, with horizontal bars showing their MPG values. Built with D3 v7, it loads data from a CSV file and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart as SVG. Vehicle names are uppercased and axes are labeled to clarify the data.

Kkeynes okiro

76% match

Loading thumbnail…

Car models and there mpg range values

This example visualizes the fuel efficiency range (mpg) of various car models as a bar graph. It shows the distribution of miles per gallon across different vehicles, highlighting which models are more fuel-efficient. The visualization uses React to manage the component state and D3.js v5 for data parsing and scales, including `scaleBand` for the categorical x-axis and `scaleLinear` for the continuous y-axis. The data is loaded as CSV from a remote URL, and bars are rendered as SVG rectangles with steelblue fills, accompanied by axes with tick marks and rotated labels for readability.

NNanditha Reddy

76% match

Loading thumbnail…

Asssssignment

This visualization shows the fuel efficiency (mpg) of 20 car models, with horizontal bars representing each car's miles per gallon alongside their make. The chart uses blue tick lines and light green bars against a clean white background, with a labeled x-axis for population-2020 values. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements through custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate the ticks and rectangles. Data is loaded from a CSV file via D3's `csv` function.

HHemanthh81

75% match

Loading thumbnail…

BarChartD3

This bar chart displays the fuel economy (MPG) of various vehicles, with each bar labeled by its exact MPG value and sorted alphabetically by vehicle name. The visualization uses D3 v7 to load CSV data from a remote gist, parse numeric values, and render an SVG with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, while grouped SVG elements append both rectangle bars and text labels for each data point.

Ccwb314159@gmail.com

75% match

Loading thumbnail…

Car Type Distribution

A stacked horizontal bar chart shows the proportional distribution of five car types—compact, midsize, large, SUV, and truck—across three brands, with each bar segmented by percentage. The visualization uses D3 v7’s `d3.stack` to compute stacked series, `d3.scaleBand` for brand categories, and `d3.scaleOrdinal` for color mapping. SVG rects render the segments, and mouseover tooltips display exact percentages. Data comes from a local CSV file, with axes and a legend generated via `d3.axisBottom` and manual legend elements.

JJayanthKumarkoni

74% match

Loading thumbnail…

Bar chart

This interactive bar chart displays the horsepower of various car models, with each bar representing a different vehicle from the provided cars.tsv dataset. The visualization uses D3 v6 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the chart as scalable vector graphics (SVG). The horizontal bars are sorted by car name on the y-axis, with a teal fill color, and the chart includes a title and axis labels.

AAndrewTsai0406

74% match