Skip to main content
SimilarExport ZIP
100%

Simple Bar chart

✓ Published0🌍 Public
JJonathan Liu
Last edited Feb 5, 2020
Created on Feb 5, 2020
Forked from Tree Example

This example shows a horizontal bar chart of fruit values sorted in ascending order. The chart uses D3 v3 with SVG rendering, mapping each fruit name to a y-axis position using `d3.scale.ordinal` and each value to a bar width via `d3.scale.linear`. The y-axis is drawn with `d3.svg.axis`, and bars are rendered as SVG `rect` elements with a label text appended to each bar.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Bar Chart

This example shows a basic bar chart comparing fruit categories (Apples, Oranges, Bananas, Pears) with corresponding numerical values. The chart renders as an SVG using React and D3 v5, employing `d3.scaleBand` for the x-axis positioning and `d3.scaleLinear` for the y-axis scaling. Bars appear in steelblue, with axes generated through `d3.axisBottom` and `d3.axisLeft`. The underlying data is hardcoded in the React component, and the visualization updates whenever the data prop changes.

ZZac02
86% match
Loading thumbnail…

Untitled

A bar chart displays the values of three fruits (apple, banana, pineapple) from a CSV file, with each bar colored red, green, or blue. The chart uses D3 v4's `d3.select`, `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` to render an SVG visualization with rotated x-axis labels and a fixed y-axis range from 0 to 100.

Zzoniyac
82% match
Loading thumbnail…

d3.js learning

This example demonstrates a stacked bar chart built with D3.js, visualizing changes in fruit production (apples, oranges, and pears) over multiple years. The chart uses D3’s `d3.layout.stack` to create the stacked series, `d3.scale.ordinal` for the x-axis, and `d3.svg.axis` for the axes. Hovering over a bar segment reveals a tooltip displaying the exact value. The chart is rendered as SVG, with a legend identifying each fruit series and colors assigned to each category.

OOhayouKaminari
81% match
Loading thumbnail…

Bar Chart

This example displays a static SVG bar chart that represents a collection of five fruit objects, each of type "apple". The visualization is rendered using the D3.js library (version 5) with an SVG canvas, while the data is generated programmatically through D3's `range` and `map` functions. The chart’s construction relies on `select` to access the SVG element, with dimensions defined by attributes, though no actual bars are drawn in the provided code.

TThamjith Thaha
81% match
Loading thumbnail…

Making a Bar Chart

Five fruit circles render in an SVG using React components, with apples styled red and lemons yellow via d3-scaleOrdinal color and radius scales. Clicking a fruit toggles a black stroke around it, updating state through React’s useState hook. The example demonstrates how to combine React’s declarative component model with d3 scales for mapping data to visual properties, producing an interactive selection interface.

AAnton Vasilev
81% match
Loading thumbnail…

Simple bar chart

This example shows a simple bar chart of eight numeric values rendered as SVG rectangles, with each value labeled directly above its bar. The chart uses D3.js version 5’s data join pattern (`selectAll`, `data`, `enter`, `append`) to create `rect` elements from a hardcoded array. Bar heights encode the data values, and text labels are added using the same data join. The SVG canvas has fixed dimensions of 500 by 300 pixels, with bars spaced by a constant padding.

HHuan Tran
80% match
Loading thumbnail…

Stylized Bar Chart

This example demonstrates a stylized bar chart built with React and D3.js v5. It creates an array of five fruit objects using D3’s `range` function, each initialized with the type “apple.” The chart visually represents this categorical data using a custom bar layout, leveraging React’s component structure for rendering and D3’s utility APIs. The design emphasizes aesthetic styling over raw quantitative comparison, focusing on the playful presentation of identical fruit entries rather than varying magnitudes.

TThamjith Thaha
80% match
Loading thumbnail…

Untitled

This example shows a stacked bar chart of fruit quantities over three months, using D3 v6 within a React context. The bars are rendered as SVG rectangles, with an ordinal color scale mapping apples, bananas, and oranges to blue, green, and red. The chart uses `d3.scaleBand` for the x-axis months, `d3.scaleLinear` for the y-axis, and `d3.stack` to compute the stacked series. It reads inline data with monthly values and displays axes via `axisBottom` and `axisLeft`.

Ssubratanp
80% match