Skip to main content
SimilarExport ZIP
100%

Vehicle information

✓ Published0🌍 Public
Kkeynes okiro
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from Making A Bar Chart

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.

AI-generated description
MIT Licensed

Similar vizzes

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
88% 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
83% match
Loading thumbnail…

barChartWithLegendD3

This example presents a bar chart visualizing the fuel economy (MPG) of various vehicles, with bars sorted alphabetically by vehicle name and colored using a sequential blue color scale that encodes the MPG value. A color legend is included to map the color gradient to the data range. The chart is built using D3.js (v7) with SVG rendering, reading data from a CSV file and leveraging D3’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, along with the `d3-legend` library for the color legend.

Ccwb314159@gmail.com
82% match
Loading thumbnail…

Bar chart - Highest MPG

This example shows the highest city MPG vehicles by make, using a sequential bar chart where warmer reds indicate higher MPG values. The chart sorts car makes from lowest to highest MPG, with interactive tooltips displaying exact values on hover. Built with D3 v6, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` to map data, while `d3.axisBottom` and `d3.axisLeft` render axes. A color legend from the d3-legend library explains the red color scale, and all graphics are drawn as SVG elements with mouseover/mouseout events.

Vvishusikka
80% match
Loading thumbnail…

Making a Bar Chart

A scatter plot displays the relationship between vehicle weight and fuel efficiency (MPG) for cars from the 1970s, with each circle’s size proportional to weight. Using d3.csv to load the data, d3.scaleLinear maps the x- and y-domains, while d3.axisBottom and d3.axisLeft render gridlines and ticks. The SVG circles are appended via data joins, and margins define the plotting area.

Nnshedd
80% match
Loading thumbnail…

Bar Chart Visualization

This bar chart displays the fuel efficiency (mpg) of various car makes, sourced from a remote CSV file. The visualization uses D3 v7 to load and parse the data with `d3.csvParse`, then renders horizontal bars with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the SVG output styled in steelblue. Data and marks are updated dynamically through an asynchronous `fetch` workflow.

HHemanthh81
80% match
Loading thumbnail…

Bar chart - I

This bar chart visualizes the range of different EV vehicles, with horizontal bars showing each model's range in miles. Built using D3 v5, it demonstrates a clean, simple bar chart design with a categorical y-axis for vehicle names and a continuous x-axis for the range values. The chart uses `scaleLinear` and `scaleBand` to map the data, `axisBottom` and `axisLeft` for axes, and SVG rectangles for bars. Data is loaded from a CSV file via `d3.csv`, and tooltips provide additional details on hover.

NNita
79% match
Loading thumbnail…

Divergent Barchart with legend D3

This divergent bar chart visualizes the fuel economy (mpg) of various cars, with each bar diverging from the dataset’s average value. Bars extending right indicate above-average efficiency, while those extending left show below-average performance, with color encoding the magnitude of deviation using a red-blue sequential scale. The chart uses D3 v7’s `scaleBand`, `scaleLinear`, and `scaleSequential` APIs, rendering as SVG with axes and bar labels. Data is loaded from a remote CSV file via `d3.csv`, and the visualization is set within a tall 1000×4000 pixel canvas.

Ccwb314159@gmail.com
79% match