Interactive Bar Chart

100%

Interactive Bar Chart

✓ Published0🌍 Public

Last edited Dec 11, 2015

Created on Dec 10, 2015

This interactive bar chart, built with D3.js and Chiasm, visualizes the classic Auto MPG dataset, allowing users to explore relationships between vehicle attributes. The chart includes dropdown menus that let users select which numeric columns to plot on the x- and y-axes, enabling comparisons such as horsepower against miles per gallon. The visualization updates smoothly in response to user selections, demonstrating how interactive column selection can reveal patterns in multivariate data. The source code and data are available under the MIT License.

AI-generated description

This example shows one way to add interactive column selection widgets to a scatter plot.

The data shown here is the classic Auto MPG Data Set.

Uses Chiasm.

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/014b461f460cf8fa3b77'>Iris Dataset Scatter Plot</a>

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1987648&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/9938078a93a4ba380a0e'>Interactive Scatter Plot</a>

Similar vizzes

Loading thumbnail…

Interactive Scatterplot

This interactive scatterplot, built with D3.js and Chiasm, visualizes the classic Auto MPG dataset. Users can dynamically select which numeric columns (e.g., MPG, horsepower, weight) to plot on the x- and y-axes using dropdown menus, enabling exploration of relationships between vehicle attributes. Points are rendered as circles, colored by country of origin, and the visualization updates smoothly in response to selection changes. The underlying data is loaded from a CSV file and mapped to the chart, with axis labels updating to reflect the current selections. The example is authored by Curran Kelleher and demonstrates a flexible pattern for building linked interactive visualizations with column selection widgets.

CCurran Kelleher

90% match

Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Auto MPG dataset, letting users explore relationships between numeric vehicle attributes. Two dropdown menus, built with a custom D3 module, select which columns are plotted on the x- and y-axes. The chart uses D3 v5 scales, axes, and SVG circles that animate from the center to their positions with a staggered delay, while gridlines and axis labels update dynamically. The code is structured as reusable ES6 modules for the menu and plot.

SShashwat Priyadarshi

82% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying relationships between car attributes such as horsepower, weight, and acceleration. Dropdown menus let users dynamically select which columns map to the X and Y axes, with the chart automatically transitioning between configurations. Built with d3.v5, the visualization uses d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.transition to render SVG circles and animate their positions over 2 seconds when axes change.

MMichał Szumnarski

81% match

Loading thumbnail…

Interactive Cars Scatter plot with menus

This interactive scatter plot lets users explore the relationships between different attributes of cars from the auto-mpg dataset. Two dropdown menus allow selection of the x and y variables, dynamically re-rendering the axes and data points. The visualization uses d3.v5 with SVG and animation, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes. Circles transition smoothly to new positions when the selected columns change, and a tooltip appears on hover to show each car's details.

Vvladvaculin

81% match

Loading thumbnail…

D3 Cars Scatterplot with Menus

This interactive D3.js scatterplot displays automobile performance data from the auto-mpg dataset, plotting 392 vehicles across user-selected numeric attributes. Two dropdown menus let viewers independently choose which columns to map to the x- and y-axes, with options including mpg, horsepower, weight, and acceleration. Built with D3 v5, the visualization uses SVG for rendering and d3.axisBottom and d3.axisLeft for labeled axes. On menu changes, the scatterPlot function transitions each circle to its new position using a staggered d3 transition with duration and delay, creating an animated effect.

Rrdeichert

81% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, allowing users to explore relationships between car attributes such as horsepower, weight, and acceleration. Two dropdown menus let viewers select which data columns map to the X and Y axes, dynamically re-rendering the plot. The visualization uses D3 v5 with custom modules for the dropdown menus and scatter plot, employing D3's scaleLinear, extent, axisLeft, axisBottom, and transition features. Circles animate from the chart's center to their positions with staggered delays over two seconds, while SVG renders the axes, labels, and semi-transparent red data points.

SSchmittYannic

80% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot lets viewers explore the relationship between different attributes of cars from the classic Auto MPG dataset by selecting which columns map to the X and Y axes via dropdown menus. The visualization uses D3.js (version 5) to render circles with animated transitions, scaling each axis with `d3.scaleLinear` and adding axes via `d3.axisBottom` and `d3.axisLeft`. The user can compare variables such as miles per gallon, horsepower, and weight.

HHaileabGH

80% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, letting users choose which columns to map to the X and Y axes via dropdown menus. Built with D3 v5, the visualization uses `scaleLinear` for axes and animates circles with a 2-second transition when selections change. The chart includes axis labels and grid lines, rendered as SVG with opacity-styled red circles. Updates trigger a re-render that re-binds data and transitions circle positions, demonstrating dynamic visualization of multivariate car attributes like horsepower, weight, and acceleration.

Kkzaiets

80% match