One Slider Affecting Two Charts

100%

One Slider Affecting Two Charts

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 6, 2024

This example shows two identical bar charts displaying capital gains by sector, with a slider that selects a date to update both charts simultaneously. The code uses D3 v7 to parse CSV data, nest it by date, and render SVG bar charts with axes. A range input controls the selected date, triggering the `updateCharts` function to rebuild both charts with new data. The visualization demonstrates how a single UI control can synchronize multiple views of a dataset.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

D3 sliders

This example shows an interactive bar chart of a small dataset where dragging a vertical HTML range slider recolors bars below a threshold value from light blue to dark blue. The chart uses D3 version 7 scales (`scaleBand` and `scaleLinear`) to position and size SVG rectangles, and React is mentioned as the framework context. The slider’s `change` event triggers a D3 transition over 500 milliseconds to animate the fill color change, demonstrating linked interaction between an HTML input and D3-managed SVG elements.

KKaustav Sen

77% match

Loading thumbnail…

Example of slider

A slider controls a dynamic scatterplot of 20 points, each representing a year from 2000 to 2020, with x and y positions generated randomly. The visualization shows how point positions change across years as the user drags the range input. The code uses D3.js v4 to bind data, create SVG circles, and update them via a transition. The slider’s input event triggers a filter on the pre-generated dataset, updating the circles’ coordinates and the displayed year label. Axes are rendered using d3.axisBottom and d3.axisLeft, with color mapping via d3.scaleOrdinal.

GGerardoFurtado

73% match

Loading thumbnail…

slider

A playable slider scrubs through a date range from January to July 2020, with a draggable handle and animated play button. The time-based scale uses `d3.scaleTime` with `d3.drag` for interaction, and the handle position updates a text label showing the formatted date. The animation advances the slider via `setInterval`, incrementing the current value until it reaches the end. Data comes from `circles.csv`.

Aashpradhan01123

72% match

Loading thumbnail…

Multiple Simple graphs on one page

Two line charts display daily closing values from two separate CSV files, each plotted on its own SVG canvas stacked vertically. The example demonstrates how to reuse a shared set of D3 3.5.17 API components—including `d3.time.scale`, `d3.scale.linear`, `d3.svg.axis`, and `d3.svg.line`—to build multiple independent graphs on one page. Data is loaded with `d3.csv`, parsed with `d3.time.format`, and rendered as steel-blue paths with annotated axes. Both charts use identical margins, dimensions, and axis configurations, showing a simple way to generate small multiples.

Dd3noob

71% match

Loading thumbnail…

Animated Bar Chart w/ dropdown

This example presents an animated bar chart where users can toggle between revenue and profit metrics via a dropdown menu. The chart loads monthly financial data from a CSV file and renders it as SVG rectangles using D3 v7's `scaleBand` and `scaleLinear`. Selecting a different option triggers a `transition` that smoothly animates the bars to their new heights over 750 milliseconds. The visualization uses D3's `select` and `property` methods to handle the dropdown interaction, demonstrating dynamic data binding and transitions.

AAdan Rodriguez

71% match

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

71% match

Loading thumbnail…

Document

This interactive bar chart shows monthly values for a selected year, with a slider controlling the year from 2009 to 2014 and a smooth 2-second transition animating the bars to their new heights and colors. The visualization uses D3 v4 with a band scale for months, a linear scale for values, and a quantile color scale to encode magnitude. Data is loaded from six CSV files using d3.queue, and the chart updates by merging entering and existing SVG rect elements via `selection.merge` and applying axis transitions.

Hhamzavg

71% match

Loading thumbnail…

Updatable D3.js Charts.

Two updatable bar charts demonstrate how D3.js v5 charts can be modified after initial rendering. The example uses JavaScript closures to create reusable chart functions, with `select` and `max` imported from D3. The charts display arrays of running miles and temperature data, rendered as SVG rectangles with animated transitions. The `transition().duration(900)` API animates updates to data, width, and fill color, while `.data()` and `.fillColor()` methods allow property changes at runtime.

RRubens

71% match