Bar chart - Highest MPG

100%

Bar chart - Highest MPG

✓ Published0🌍 Public

Last edited May 5, 2022

Created on Apr 6, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar chart - Highest MPG

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.

Ddriftcafe

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

86% 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

81% 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

80% match

Loading thumbnail…

Bar chart with a Sequential color scale

This bar chart displays average engine horsepower for seven car manufacturers, sorted from lowest to highest, with bars colored according to a sequential red color scale that maps horsepower values to increasingly darker shades. A yellow tooltip appears on mouseover, showing the exact manufacturer and horsepower value. The visualization is built with D3 v6, using `scaleBand`, `scaleLinear`, and `scaleQuantize` for positioning and color encoding, along with the ColorBrewer Reds palette and the d3-legend library. Data is loaded from a CSV file via `d3.csv`, and rendered as SVG rectangles with interactive hover effects.

Pprateekvasi

79% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower of car makes, sorted from lowest to highest, with a sequential color scale from light to dark red indicating increasing values. It uses D3 v6 with SVG rendering and includes interactive tooltips on hover, as well as axis labels and a legend. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleQuantize` with `colorbrewer.Reds[7]` for the color mapping. Data is loaded from a CSV file and filtered to seven specific makes.

Lliu yang

79% 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

78% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower for seven car manufacturers, sorted from lowest to highest, with a sequential red color scale encoding the same value. The visualization is rendered in SVG using D3 v6 and the d3-legend plugin, with a quantized color scale from colorbrewer. Hovering over a bar triggers a tooltip with the exact horsepower value. The chart includes labeled axes, a legend, and animated opacity transitions on the tooltip.

Mmavercikalvin

76% match