100%

Barchart as an input device

✓ Published0🌍 Public

Last edited Oct 4, 2017

Created on Oct 31, 2016

This example demonstrates how D3's brush component can be repurposed as a direct manipulation input device for editing bar chart values. Two synchronized bar charts, one horizontal and one vertical, display the same dataset of eight values, and dragging any bar updates its value in both views. The code uses `d3.brushX` and `d3.brushY` with `brushmove` and `brushend` event handlers to capture mouse interaction and update the shared data array. SVG selections and the `selection.call` method apply the brushes and propagate value changes between the two linked charts.

AI-generated description

Barchart as an input device

Brushes can be used to draw a barchart. This gives an easy way to input or adjust values with the mouse !!!

The d3 brush is a complex piece of logic taking care of events and user feed-backs. Among other characterics it exposes a nice selection rectangle which can be used as a bar !!!

2D-brushes come in two flavors see official API v4 doc

d3.brushX()
d3.brushY()

Let's try both of them on this example.

Code comments

Code is made of:

CSS
a data definition in the form of: [{index:2, value: 23.34}, ...]
two almost identical barchart generators (horizontal/vertical) allowing to drag a bar to a new value
a refresh function which propagates data updates into the two barcharts

Enjoy !!

Similar vizzes

Loading thumbnail…

Barchart as an input device

Two linked barcharts display the same dataset of eight numeric values, one horizontal and one vertical. Each bar is implemented as a d3.brushX or d3.brushY selection rectangle, so dragging a bar changes its value. A shared refresh function updates both charts simultaneously, showing the current value labels. This turns the familiar bar chart into a direct manipulation input device for editing data.

AAlainRo

92% match

Loading thumbnail…

a Barchart of brushes

Six horizontal bars form an editable bar chart, with each bar implemented as a draggable D3 v4 brush selection. The chart displays six numeric values between 0 and 20, rendered as blue bars on a light yellow background with a black axis. Users adjust a bar’s height by dragging its brush handle horizontally, which updates the underlying data and the white text label showing the value. The visualization uses `d3.brushX()` for interaction, `d3.scaleLinear()` for positioning, and SVG rendering, with the brush extent constrained to each bar’s row.

AAlainRo

85% match

Loading thumbnail…

Barchart

This example shows an interactive bar chart with multiple data series that can be toggled between grouped and stacked layouts via radio-button style controls. Additional buttons allow users to show or hide individual series. The visualization uses D3 v6 with SVG rendering and animated transitions, employing `d3.stack` to compute stacked values and `d3.scaleBand` and `d3.scaleLinear` for positioning. Data is generated procedurally using smooth random bumps, and mouseover interactions display tooltips with precise values.

Mmachetenwueter

76% match

Loading thumbnail…

Bar Chart with Brushing

This interactive bar chart demonstrates how brushing can reconcile the trade-off between a zero baseline and emphasizing small differences. The visualization displays two horizontal bars comparing scores across groups, rendered as SVG rectangles using React components. A linked brushing interface, implemented with d3.brushX, allows users to select a region on the top chart, which then dynamically updates the bottom chart’s x-scale domain via d3.scaleLinear. The data originates from a CSV file loaded with d3.csv, and React’s useState hook manages the brush extent state for responsive zooming.

WWaseem Medhat

76% match

Loading thumbnail…

Barchart

This interactive bar chart displays multiple data series as colored bars, with buttons allowing users to toggle between grouped and stacked layouts and show or hide individual series. The chart uses D3 v6 with SVG rendering and animated transitions. Data is generated procedurally using a bump function that creates smooth, pseudo-random positive values. Tooltips show precise values on hover, while radio-style buttons and series toggles control the visualization state.

Ppsabela

75% match

Loading thumbnail…

Making a barchart

This example demonstrates a responsive SVG barchart that fills the browser window using CSS. It initially renders two green diagonal lines forming an X, which visually confirm the chart’s dimensions. The code uses D3.js v5 to select the chart container, append an SVG element, and dynamically set its width and height based on the container’s client dimensions. A redraw function is triggered on window resize, using D3’s selection merge methods to update the lines’ coordinates. The chart has no data source, focusing instead on sizing and rendering mechanics.

NNick Dyson

74% match

Loading thumbnail…

Barchart in D3.JS

This example displays an empty SVG canvas with dimensions 960 by 500, prepared for a bar chart. The code initializes the chart by selecting the SVG element with `d3.select('svg')` and reads its width and height attributes using `svg.attr('width')` and `svg.attr('height')`. The stylesheet sets the body margin to zero and hides overflow. No data is loaded or rendered; the visualization is purely a scaffold, with commented-out code suggesting potential circle manipulation, but no bars are drawn.

AAnkit

73% match

Loading thumbnail…

Barchart

This interactive bar chart demonstrates the difference between grouped and stacked layouts. Users can toggle between the two views using custom radio buttons. The visualization uses randomly generated test data with smooth bumps, displayed as an SVG with animated transitions. Built with D3 v6, the code employs `d3.stack()` for data preparation, `d3.scaleBand()` and `d3.scaleLinear()` for scales, and CSS-styled tooltips for mouseover interactions.

Vvillagef

73% match