bar chart

100%

✓ Published0🌍 Public

Last edited Mar 23, 2017

Created on Mar 22, 2017

This example shows a small, static bar chart of five categorical values, with each bar colored individually and labeled A through E. The chart displays the data using SVG rectangles, with linear and ordinal scales mapping the values to positions and heights. The code uses d3.js version 3.5, specifically d3.scale.linear and d3.scale.ordinal, along with d3.svg.axis for the x and y axes. The data is hard-coded in the script and rendered on a light grey canvas with margins applied via a group transform.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Bar chart

A bar chart displays categorical values with six colored, semi-transparent rectangles. The visualization maps lettered categories (A through F) to numeric values, with axes labeled and gridlines rendered via D3's SVG axis API. It uses `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis range, while `d3.svg.axis` generates the ticks. Rectangles are appended and styled with `d3.scale.category10` colors, and the data comes from an inline array of objects with `x` and `y` properties.

DDDDDDanica

89% match

Loading thumbnail…

Pseudo bar chart

This pseudo bar chart displays five categories (A through E) as horizontal dark bars of decreasing length on a white background, with each category label placed to the left of its bar. The bars are static rectangles created with inline SVG elements, while the category names are rendered as text elements using the Share Tech font. The chart uses absolute pixel coordinates within a 960×500 viewBox, with bar widths ranging from 570 to 111 pixels. No dynamic data binding or JavaScript libraries are involved; the visualization is purely declarative SVG markup.

LLouis Astorg

84% match

Loading thumbnail…

D3.js Bar Chart Example

This D3.js example shows a straightforward bar chart of categorical data with axes and labels, visualizing values for five categories (A through E). The visualization renders as an SVG, using D3 v6's modular imports including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to map the dataset to bar positions and heights. The chart reads its data from a CSV file via `d3.csv`, converting the population column to numeric values, while the styling uses steelblue fills for the bars.

BBhavanaGIrni

84% match

Loading thumbnail…

Bar Chart Example

This example demonstrates a basic bar chart built with D3 version 6. It visualizes a small dataset of four categorical values using an SVG container. The code creates an SVG, applies d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, then renders steelblue rectangles for each data point. It also appends axes with d3.axisBottom and d3.axisLeft.

VVamshi Amudala

84% match

Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

OOluoch Odhiambo

83% match

Loading thumbnail…

SVG Example

This example displays a simple bar chart with five bars labeled A through E, where bar heights correspond to values from 5 down to 1. The visualization uses D3 v4’s `d3-selection` to bind data to SVG `rect` elements, and `d3-scale` with `scaleBand` for the x-axis positions and `scaleLinear` for the y-axis scaling. The page creates an SVG canvas in the body and renders all bars via chained `enter()` and `append` calls, with no axes or labels added.

CCurran Kelleher

83% match

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart displays categorical data for values A through D, with bars extending from a common left baseline. The SVG rendering uses basic rectangular shapes with black fills to represent the bar lengths, which decrease progressively from A to D. A separate text element using the Inconsolata font displays the category labels. The chart uses plain SVG attributes for positioning and sizing rather than a JavaScript visualization library, reflecting its creation as a Figma export.

AAllison Leggett

83% match

Loading thumbnail…

bar chart examples

This example shows a simple bar chart of ten values from an inline array, with bars colored blue except for the single bar at 250, which is red, and a y-axis with blue tick labels except the 250 tick in red. The chart is rendered as SVG via D3 v5, using a linear scale for the y-axis and manually positioning each rectangle with fixed width and spacing. The code explicitly sets bar height as the difference between the chart height and the scaled value, and the axis is drawn with `d3.axisLeft`. The data is hardcoded, and the visualization demonstrates basic scaling, axis generation, and per-bar styling without interactive features.

DDarMontou

83% match