Skip to main content
SimilarExport ZIP
100%

Pseudo Bar Chart IV

✓ Published0🌍 Public
CCurran Kelleher
Last edited Feb 21, 2017
Created on Oct 9, 2016

This example demonstrates a reusable bar chart component built with D3 v4, displaying a dataset of five named values (A through E) rendered as vertical bars with conventional margins and axis labels. The chart is implemented using the "Towards Reusable Charts" pattern, defining a `BarChart` function that configures scales, axes, and SVG rendering via `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. The visualization animates by periodically filtering the data with `Math.random()`, removing a random subset of bars every second, while the SVG re-renders to reflect the changing dataset.

AI-generated description

A pseudo-bar chart demonstrating conventional margins with the D3 Towards Reusable Charts pattern. Uses:

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/647027d31e6001dddceeab4a28127cb3'>Pseudo Bar Chart V</a>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/fef335f18b995e9ca60087eff4de5358'>Pseudo Bar Chart VI</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart renders four vertical bars in red, blue, yellow, and green, each paired with a black letter label (A–D) beneath it. The bars vary in height and vertical offset, suggesting categorical values without an explicit scale or axes. Built with plain SVG, the visualization uses static `rect` and `text` elements inside an `svg` container, with styling applied via CSS using the Share Tech font and a white background. No JavaScript libraries are involved; the chart relies entirely on hard-coded coordinates.

SSam Hege
82% 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
81% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart uses black rectangles to represent categorical values A through D, with varying heights that suggest a bar chart’s visual hierarchy while omitting traditional axes. The SVG code explicitly places four rectangles and paired text labels, demonstrating a static, hand-coded layout. It relies on React’s rendering approach via the v3 framework, though the visible implementation uses raw SVG elements and CSS styling with the Share Tech font. No data binding or dynamic computation occurs; the chart is purely declarative.

TTheo-0201
81% 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
81% match
Loading thumbnail…

Pseudo Bar Chart

This example shows a pseudo bar chart with six black rectangular bars labeled A through F, rendered as static SVG elements on a white canvas. The bars vary in height and y-position to simulate quantitative values, while labels sit beneath each bar. The code uses raw SVG `<rect>` and `<text>` elements, positioned manually with pixel coordinates, and styled with the Share Tech font from Google Fonts. It demonstrates a minimal, hand-coded alternative to data-driven charting, using only HTML and CSS within a React-free setup.

Ccharlieronchetti@gmail.com
81% match
Loading thumbnail…

Pseudo Bar Chart

This example shows a simple bar chart made from black rectangular bars labeled A through D, with each bar’s length decreasing from top to bottom. The chart is drawn using raw SVG `<rect>` and `<text>` elements in an inline `index.html` file, with no external data source. Styling relies on CSS for font family and size, and the SVG is set to a fixed 960 by 500 viewBox with white background. The bars are positioned manually via x and y attributes, and the chart demonstrates basic SVG shape rendering without any JavaScript libraries.

CCaroline Ghisolfi
81% match
Loading thumbnail…

Pseudo Bar Chart

This pseudo bar chart encodes four categories, A through D, as horizontal black bars of varying lengths on a white background, with the first bar highlighted in blue. Each bar’s width suggests a quantitative value, while category labels sit to the left. The visualization uses plain SVG rectangles and text elements, with styling controlled by CSS, including the Share Tech font. The layout is fixed within a 506×321 viewBox, and no interactive or dynamic data binding is present.

DDavid Hojdan
80% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

This example shows a pseudo horizontal bar chart, where four categories—A, B, C, and D—are represented by black bars of varying widths protruding from a common left edge, mimicking a real bar chart without using standard charting axes. Each bar’s length corresponds to an implicit value, with labels placed to the left. The visualization is built using raw SVG elements, including `rect` for the bars and `text` for the labels, all styled with a large `font-size` and the Share Tech font. The rendering relies entirely on inline SVG markup within an HTML file, with no JavaScript libraries or data-binding frameworks involved.

Aajoua
80% match