Skip to main content
SimilarExport ZIP
100%

Bar Chart with color Legend: Chrysler cars HP

✓ Published0🌍 Public
Kkfhujosefsson@dons.usfca.edu
Last edited Mar 5, 2025
Created on Mar 4, 2025

This bar chart displays the horsepower ratings of various Chrysler car models, with each bar’s blue color intensity mapped to its power output and a separate HTML legend showing the color scale. Data is loaded from a CSV file using `d3.csv`, and the chart is rendered as SVG with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateBlues` for color encoding. The `d3-legend` plugin generates the color legend, while axis labels and data labels are added manually.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Chrystler Models Horsepower

This example visualizes the horsepower of Chrysler car models using a bar chart rendered with p5.js. It loads a CSV file from a GitHub Gist into a table object, filters rows for Chrysler models, and maps their horsepower values to vertical bars. The chart includes grid lines, axis labels, and titles, with bar heights scaled proportionally to the maximum horsepower value. The sketch uses p5.js’s `loadTable` and `createCanvas` APIs to build the interactive visualization.

Kkfhujosefsson@dons.usfca.edu
83% 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
80% 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
79% match
Loading thumbnail…

Fork of Bar chart with a Sequential color scale New

This bar chart displays the average horsepower for seven car brands, sorted in ascending order and colored with a sequential red scale that maps horsepower values to color intensity. Built with D3 v6, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize` to position and color the bars, while a tooltip appears on mouseover. The rendering is SVG-based, with axes, a color legend, and animation effects, drawing data from a CSV file named `barchart.csv`.

Pprateek
79% match
Loading thumbnail…

A6-Barchart

This bar chart visualizes the average horsepower of cars by manufacturer, using a sequential blue color scale to represent magnitude. The visualization is built with D3 v6, loading data from a CSV file hosted in a GitHub Gist, and then aggregating the data with `d3.rollup` and `d3.mean`. The chart renders as an SVG with bars positioned by `d3.scaleBand` and `d3.scaleLinear`, and includes a color legend via the `d3.legendColor` API from the d3-legend library.

SSukhraj Singh
79% 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
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…

Fork of Bar chart with a Sequential color scale

This bar chart displays the average horsepower for seven car brands, sorted from lowest to highest, with each bar colored according to a sequential red color scale that encodes the horsepower value. The visualization loads data from a CSV file using d3.csv, binds it to SVG rectangles, and uses d3.scaleBand, d3.scaleLinear, and d3.scaleQuantize for positioning and color mapping. Interactive tooltips appear on mouseover, while d3.legendColor adds a legend, and axes are rendered with d3.axisBottom and d3.axisLeft.

SShishiraRudrabhatla
78% match