Skip to main content
SimilarExport ZIP
100%

Bar chart - Highest MPG

✓ Published2🌍 Public
Ddriftcafe
Last edited Apr 6, 2022
Created on Apr 6, 2022

A bar chart ranks ten car makes by their highest city MPG values, from Suzuki to MINI, with taller bars indicating better fuel economy. The visualization uses D3 v6 to load CSV data and render an SVG with a quantized color scale from ColorBrewer, mapping MPG values to a red gradient. A tooltip appears on mouseover, and d3-legend provides a color legend, while axes and labels clarify the make and MPG measurements.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Bar chart - Highest MPG

This bar chart visualizes the average city MPG for different car makes, sorted from lowest to highest, with MINI achieving the highest fuel efficiency. The chart uses a sequential red color scale to encode MPG values, with darker shades representing higher efficiency. Built with D3.js v6, it employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` for axes and color mapping, along with `d3.legendColor` for the legend. Interactive tooltips display exact MPG values on hover, and the data comes from a CSV file listing each make’s average MPG.

Ddriftcafe
90% 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…

Barchart - Highest MPG

This bar chart visualizes the distribution of average horsepower for German car brands, derived from a CSV dataset. Built with D3 v6, it renders an SVG histogram with ten bins, using `d3.histogram()` and `d3.scaleLinear()` for axes. Interactive tooltips appear on hover, displaying the bin range, while animated transitions highlight bars on mouseover. The chart includes labeled axes and a title.

Ddriftcafe
81% 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
81% match
Loading thumbnail…

Box Plot - Highest MPG

This visualization displays the distribution of fuel efficiency (mpg) for the top five automobile makes—Hyundai, Honda, Kia, Scion, and MINI—across multiple model years. It combines box plots showing quartiles, median, and whisker ranges with individual green data points jittered along the x-axis to reveal underlying data density. Built with D3 v4, the chart uses `d3.nest()` and `d3.quantile()` to compute summary statistics from a CSV file, then renders SVG rectangles, lines, and circles with hover tooltips for each point.

Vvishusikka
79% 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
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
78% match