D3: Linked charts

100%

D3: Linked charts

✓ Published0🌍 Public

Last edited Feb 7, 2017

Created on Feb 7, 2017

This interactive example presents two linked bar charts comparing giving and bonus data for named items. The visualization uses D3.js to render both charts as SVG elements, each with its own linear scale and axis. Users can re-sort the linked dataset by clicking buttons that arrange the bars by giving, bonus, or rank, with all charts updating consistently. Sorting transitions are animated, and highlighting reveals label text on bars. The code demonstrates how D3's selection, transition, and scale APIs can coordinate multiple charts from a shared dataset.

AI-generated description

Linked bar charts with sorting functions

Copied and tweaked from <a href="www.alignedleft.com"> Scott Murray's</a> examples. This gives introduction to:

linking together two graphs built from same dataset
adding 3 different sorting buttons based on ascending/descending of different variables

forked from <a href='http://bl.ocks.org/jalapic/'>jalapic</a>'s block: <a href='http://bl.ocks.org/jalapic/b629a4c2470b8646781c'>bars: links,sorting</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3: Linked charts

Two linked bar charts share the same dataset, visualizing grades and a second variable. Each chart uses its own linear scale and axis, while a single ordinal scale positions the bars. Animated transitions and sort buttons let users reorder the bars by ascending or descending values. The example demonstrates how to link two D3.js SVG visualizations built from the same data, enabling interactive comparison.

AAdlopez2016

89% match

Loading thumbnail…

D3: Linked charts

Two linked bar charts display the same dataset of grades and associated names. Three sorting buttons reorder both charts simultaneously, with bars animating into their new positions. The example uses D3.js version 3.5.5 with ordinal and linear scales, SVG rendering, and transition delays to animate bar heights and the appearance of axes. The data is embedded as a JavaScript array of objects with name and grades properties.

AAdlopez2016

86% match

Loading thumbnail…

D3: Linked charts

A bar chart displays student grades from a dataset of student IDs and numeric grade values, with each bar representing a student. The visualization uses linked charts to show grades and allows sorting by ascending or descending order. Built with D3.js, it uses SVG rendering with animated bar transitions and axes. The bars are color-coded using hue and saturation, and hovering highlights individual bars to reveal exact grade labels. The data appears to be sample grade records with student IDs, and the chart is designed to compare grade distributions across students.

AAdlopez2016

81% match

Loading thumbnail…

D3 Bar Chart

This interactive D3 v4 bar chart displays two datasets of numbers as vertical steel-blue bars with value labels and a y-axis. Clicking the Update button toggles between a 10-element ascending dataset and an 8-element descending one, demonstrating the enter, update, and exit pattern. The code uses d3.scaleLinear for the y-scale, d3.axisLeft for the axis, and transition().duration(500) to smoothly animate bar heights, positions, widths, and labels when the data changes. SVG rendering handles all visual elements.

MMaxBotta

79% match

Loading thumbnail…

Linking scatter plots and bar charts

The chart links a scatter plot of exam scores with a bar chart, using animated transitions to filter and highlight data by category. The bar chart displays the distribution of math scores binned into histograms, colored by ethnicity. Clicking a bar filters the scatter plot to show only the corresponding data points, while the bar chart also supports linked selections between the two views. The visualization uses SVG and D3 v5, with data loaded from a CSV file.

AAlexDaGr8

77% match

Loading thumbnail…

D3 Example

This example presents a horizontal bar chart comparing revenue figures across named categories, with an additional vertical reference line and a separate bar strip on the right side. Built with D3.js (version 3.5.5) and rendered as SVG, it uses two CSV data files—one containing revenue and prior-year values, the other containing revenue and other metrics. The chart employs ordinal and linear scales, along with D3’s axis and selection APIs, to map category names to bar heights and revenue values to bar widths, while the standalone line and rectangles are placed manually via SVG coordinates.

RRatnar

77% match

Loading thumbnail…

D3 Example

Three bar charts are drawn as animated SVG rectangles that appear, update, and exit in sequence. The example demonstrates D3’s data-join lifecycle: `d3.scale.linear` maps data values to pixel positions, while `d3.transition` animates fill opacity over 2.75 seconds. Three timed `render` calls first draw two red bars, then five blue bars, then remove two while recoloring the remaining three green, with console logs showing the join state before and after each update.

Aal1s

76% match

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates an interactive bar chart that smoothly transitions between stacked and grouped layouts, with a single click on the chart toggling between the two modes. It uses D3.js v3 to render the chart as an SVG, animating the bars' positions and sizes via `transition` and custom attribute tweens. The data is generated in-browser with a `bumpLayer` function, and hovering a bar shows a tooltip listing the three series values using Underscore.js templates and jQuery for DOM manipulation. A legend with clickable series boxes lets viewers enable or disable individual series, updating the chart and the number of enabled series accordingly.

EEfratVil

76% match