Linking scatter plots and bar charts

100%

Linking scatter plots and bar charts

✓ Published0🌍 Public

Last edited Dec 14, 2018

Created on Dec 14, 2018

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.

AI-generated description

Data from http://roycekimmons.com/tools/generated_data/exams

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

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

79% match

Loading thumbnail…

Linked Scatter Plot and Bar Chart

This linked-view visualization pairs a scatter plot with a bar chart using the Fisher Iris dataset. Brushing a region in the scatter plot selects data points, which are then aggregated and displayed as bars in the adjacent chart, showing the average of a chosen attribute for the selected species. Built with D3.js and the model.js reactive framework, the example uses SVG rendering and a gist-hosted codebase. The bar chart updates dynamically based on user selection.

CCurran Kelleher

75% match

Loading thumbnail…

Bar plot and scatter plot

This gallery example presents two distinct data-visualization approaches side by side. The first is a horizontal bar plot rendered with React and D3, displaying the average class performances of school grades from 2010 to 2020, using `scaleBand` and `scaleLinear` for axis scaling and data-loaded via `d3.csv`. The second is a scatter plot built with D3's imperative API, showing the relationship between pH and alcohol content in a wine quality dataset, using `d3.scaleLinear`, `d3.extent`, and the `.join()` method for creating circles.

RRohithNaiduDevareddy@my.unt.edu

75% match

Loading thumbnail…

Linked Brushing between two charts

This example demonstrates linked brushing between a bar chart and a scatter plot, both visualizing the same dataset. Hovering over a bar or circle highlights the corresponding country’s marks in both charts in pink, while all other marks remain grey, enabling quick cross-referencing. The bar chart displays column C, while the scatter plot shows columns A and B, with both rendered as SVG elements using D3 v5. The code uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `mouseover`/`mouseout` events to synchronize highlighting across the two charts.

GGerardoFurtado

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

74% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This horizontal bar chart displays student exam scores from a CSV file, with each bar representing an individual student’s score on a scale from 0 to 100. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data and render an SVG with purple bars that become semi-transparent on hover. Student names appear on the y-axis, while the x-axis shows score values, with the chart laid out within a 960-by-450-pixel SVG canvas.

Oolddb

74% match