100%

Barchart as an input device

✓ Published0🌍 Public

Last edited Mar 4, 2018

Created on Mar 4, 2018

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.

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 !!

forked from <a href='http://bl.ocks.org/AlainRo/'>AlainRo</a>'s block: <a href='http://bl.ocks.org/AlainRo/9264cd08e341f2c92f020c39642c34d1'>BarChart with draggable bars to input/adjust data values (Horizontal + Vertical)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Barchart as an input device

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.

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

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

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

78% match

Loading thumbnail…

Barchart

Five series of smoothly varying data are visualized as a stacked bar chart that toggles between stacked and grouped layouts every two seconds. Using D3 v5, the chart binds stacked data to SVG rectangles and animates transitions with `transition.attr` to interpolate positions and sizes between the two arrangements. Radio buttons let users manually switch layouts, with an interval timer resetting on interaction.

Ssimonaay

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

76% match

Loading thumbnail…

Barchart

This bar chart displays multiple series of smooth, generated data using stacked and grouped layouts. Users toggle between layouts and toggle individual series on and off via custom radio buttons. The visualization uses D3 v6 with SVG rendering and transitions to animate bar positions and heights. Data comes from a custom `bumps` function, and the chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout and scaling.

Nngahhoang

76% match

Loading thumbnail…

Barchart

An interactive stacked and grouped barchart displays multiple data series generated by the `bumps()` function in `testdata.js`. The chart’s primary view is a stacked barchart, with a radio-button form allowing the user to toggle the layout to a grouped barchart, triggering an animated transition. The visualization uses D3 v6 scales, including `scaleBand` and `scaleOrdinal`, and a `d3.stack` operation to compute the stacked series. An SVG tooltip, populated with a legend of series values, appears on mouseover events.

AAndre J Denais

76% match