Fork of Bar chart

100%

Fork of Bar chart

✓ Published0🌍 Public

Last edited Mar 25, 2025

Created on Mar 25, 2025

This fork of a D3.js v7 bar chart displays car model names on the x-axis against their price in USD on the y-axis using steel-blue rectangles. The code loads data from a hardcoded array of eight vehicles, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` with `.nice()` for the continuous price scale. Axis labels are added via SVG `text` elements, and the chart renders entirely as an SVG inside an HTML page with no external data source.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a reusable scatter plot that maps categorical car models on the x-axis to their numeric prices on the y-axis using blue circular marks. Built with D3 v6, it employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick rendering. The chart is rendered as SVG, with a title and rotated x-axis labels. Sample data is embedded in the code for demonstration.

Nnagalakshmibadineedi2@gmail.com

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

81% match

Loading thumbnail…

Fork of Bar chart with a Sequential color scale

A sequential bar chart displays average horsepower for seven automobile brands, sorted from lowest to highest, with color intensity increasing alongside value. The visualization uses D3 v6 to construct SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, while a `d3.scaleQuantize` maps horsepower values to a seven-step reds palette from colorbrewer. Hovering reveals a tooltip with the exact value, and an interactive legend and axes are generated using `d3.legendColor` and axis components. Data comes from a CSV file provided in the accompanying `barchart.csv`.

JJim Luo

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

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

80% match

Loading thumbnail…

Fork of Fork of Bar chart with a Sequential color scale

A horizontal bar chart displays the average horsepower of seven car brands, from Volkswagen to Mercedes-AMG, sorted in ascending order. Bars use a sequential color scale from the ColorBrewer Reds palette, rendered as SVGs via D3 v6, with a hover tooltip showing exact values. The code loads data from a CSV, applies `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleQuantize`, and uses the d3-legend library to generate a color legend.

Mmavercikalvin

80% match

Loading thumbnail…

Fork of ICE 6

A bar chart displays automobile prices across car makes, sourced from a CSV dataset. The visualization uses D3 v5 to load data via `d3.csv` and render SVG rectangles scaled with `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with rotated x-axis labels. The chart includes titles and axis labels, with bars colored steelblue.

Iindushashi.g@gmail.com

80% match

Loading thumbnail…

Fork of making a Bar graph

This bar chart visualizes the Area values from a CSV dataset across various years, rendered as steelblue rectangles on an SVG canvas. The visualization uses the D3.js v5 library to load and map the data, with each bar's height corresponding to the Area measurement. A supplementary JavaScript array demonstrates dataset manipulation by finding the index of a specific car brand, though this is logged to the console rather than displayed graphically. The chart is styled with CSS, adjusting the rect fill color and enlarging text for readability.

SSteve_Nashon

79% match