D3: Linked charts

100%

D3: Linked charts

✓ Published0🌍 Public

AAdlopez2016

Last edited Sep 7, 2016

Created on Sep 7, 2016

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.

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

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

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

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

79% match

Loading thumbnail…

D3: Sorting and re-sorting visual elements with delay

A bar chart of twenty numeric values renders with SVG rectangles and text labels. Clicking any bar triggers a re-sorting of the bars and labels in ascending or descending order, with each element transitioning horizontally to its new position. The code uses D3 v4’s `scaleBand` for x-positioning, `scaleLinear` for y-scaling, and `selection.sort` combined with `transition.delay` and `transition.duration` to create a staggered animation effect. Hovering a bar changes its fill to orange via CSS.

深深度碎片

79% match

Loading thumbnail…

Students Grades of Bar Chart

This horizontal bar chart displays student grades, with each student’s name on the y-axis and their corresponding numerical grade on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars. Data is loaded from a CSV file, and interactive features include tooltips on mouseover and an alert on click, triggered via `select` and event listeners. Grid lines and axis labels are conditionally configured through a chart configuration object.

SshanLU999

77% match

Loading thumbnail…

D3.js Tutorial

This example shows a bar chart of test scores for seven people, sorted from highest to lowest score, with royal blue bars, labeled axes, and hover opacity feedback on each bar. The visualization uses D3.js v5 with an SVG rendering approach, creating scales via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. It appends rectangles bound to an array of name-score objects, calls `d3.axisBottom` and `d3.axisLeft` for the axes, and sorts the data with `d3.descending`. The chart is embedded in a basic HTML page with a centered title.

Bbhargav83

77% match

Loading thumbnail…

DynamicChart_Animated

Five student records switch between math and science scores with a simple bar chart built from div elements. Clicking the Math or Science buttons triggers a transition that smoothly resizes each bar’s width to match the selected subject’s value. The chart uses D3 v4’s data join with a key function on student names, merging enter and update selections for animated width changes via `selection.transition()`. Styled with teal CSS bars, the visualization demonstrates basic data binding and animated updates without axes or scales.

JJoelGallagher

77% match