Skip to main content
SimilarExport ZIP
100%

Linked Scatter Plot and Bar Chart

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jun 28, 2016
Created on Jun 28, 2016

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.

AI-generated description

Ancient code revived from April 2014, originally posted at github.com/curran/model/examples/d3LinkedViews, revived to demonstrate the concept. Original README follows.

An example of multiple linked views using model.js. This builds on two other examples, the bar chart and scatter plot.

Run the example

Brushing in the scatter plot causes the selected data to be aggregated and plotted in the bar chart.

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2128590&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->
mit Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot [interactive] II

An interactive scatter plot of the Iris dataset shows relationships between two selected numeric attributes, with points colored by species. Users can change the x and y axes via dropdown menus powered by React. The visualization uses D3 scales (d3.scaleLinear, d3.scaleOrdinal) to map data to SVG circles, while hovering over the color legend highlights points of a single species. Data is loaded asynchronously from a CSV URL using d3.csv.

Aadewole-top
78% match
Loading thumbnail…

Scatter Plot

An interactive scatter plot of the Iris dataset lets users explore relationships between different measurements. Two dropdown menus dynamically change which numerical columns are plotted on the X and Y axes. The visualization is built with D3.js, using scales for axes and ordinal color mapping for the categorical species. Circles animate into position with a staggered delay, and axes and labels update based on the selected data columns.

Ddaniel
77% match
Loading thumbnail…

Scatter Plot episode 12

This interactive scatter plot visualizes the Iris dataset, letting users switch the x and y axes via dropdown menus. D3 v6 selection joins animate circles with staggered delays as axes and point positions update. The chart uses d3.scaleLinear for quantitative columns, d3.scalePoint for categorical species, and transitions to smoothly grow and reposition SVG circles.

BBart van Pelt
76% match
Loading thumbnail…

Scatter Plot with Legend

This example shows an interactive scatter plot of the Iris Dataset, where users can choose which numeric attribute to display on the x- and y-axes via dropdown menus. Each point represents a flower sample, colored by species and accompanied by a legend. The visualization is built with React and rendered as SVG, using d3.scaleLinear and d3.scaleOrdinal for scales, while d3.csv loads the data from a remote gist.

Jj-PGi
76% match
Loading thumbnail…

ScatterPlot with Color

This interactive scatter plot visualizes the Iris dataset, displaying relationships between user-selected attributes via dropdown menus. The chart uses D3.js scaling functions and SVG circles, with color encoding by species through an ordinal color scale. Built with React, the visualization updates axes and marks dynamically, leveraging D3's `csv` parser for data loading and `scaleLinear` for axis construction.

AAnthony Zornig
76% match
Loading thumbnail…

Menu on Animated Reusable D3 Scatter Plot Following Along

This interactive scatter plot displays Fisher's Iris dataset with animated transitions between different variable pairings. Two dropdown menus let users select which measurements appear on the x and y axes, with all five attributes available for both dimensions. The visualization uses d3.scaleLinear for numerical values and d3.scalePoint for the species category, implementing smooth animations through d3.transition and the join/enter/update pattern. The chart renders as SVG with axis updates and label repositioning occurring over a one-second duration, while points drift to their new positions with staggered delays based on data index.

PParker-D5
76% match
Loading thumbnail…

Model.js Dynamic Scatter Plot

This dynamic scatter plot, built with model.js and D3, visualizes the classic Iris dataset, mapping sepal width and length to Cartesian coordinates. The visualization animates transitions when configuration values change, leveraging SVG for crisp rendering. The chart reads its data from a TSV file containing 150 measurements across three iris species, while a separate configuration file drives the x and y axis field selections, labels, and margins, making it a flexible, data-driven example for reusable chart components.

CCurran Kelleher
76% match
Loading thumbnail…

color scattere plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to compare any two numeric attributes by selecting them from dropdown menus. The chart renders circles for each data point using SVG, with axes and tick marks generated from D3 scales and formatting. Written in React with D3 v5, the visualization updates the x and y scales and re-renders marks whenever the user changes the selected attributes. The Iris dataset is loaded as CSV and parsed with d3.csv.

Mmikekslv
75% match