Skip to main content
SimilarExport ZIP
100%

circles_slider

✓ Published0🌍 Public
BBenHeubl
Last edited Jun 19, 2016
Created on Jun 18, 2016

Two sliders control the number of hours spent on domestic and work activities, updating two large percentage labels that show the share of mothers and fathers in that scenario. The percentages are pulled from a TSV dataset of cumulative proportions, filtered by sex, number of kids, and hourly categories. The visualization uses D3.js slider callbacks to trigger transitions, and `transition.tween` with `d3.interpolate` animates the count-up effect in the text labels.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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
71% match
Loading thumbnail…

Circular Layout (Slider)

A circular layout of 180 arc-shaped segments, colored on a brown-to-steelblue scale, visualizes random values distributed by angle and radius. A range slider controls the radial display, fading arcs in and out based on their angular distance from the slider’s current value. The d3.v3 code builds the visualization using nested `g` elements, `d3.svg.arc` for geometry, and `d3.scale.linear` for mapping. The animation reveals each arc via chained transitions on `fill-opacity`, while the slider input event updates the opacity based on angular difference.

Mmbostock
70% match
Loading thumbnail…

Untitled

Five circles sit on a shared horizontal axis, each sized by a value from the current dataset. A button switches between two data arrays, triggering a one-second transition that repositions circle radii and x-coordinates. Using D3.js v6 with SVG and animation, the code employs data joins, `enter`/`exit` selections, and `transition` to update the visualization. An axis line and a title label (highlighting the active dataset) complete the chart, which renders entirely in the browser.

Ssgzzhinde
69% match
Loading thumbnail…

Untitled

This interactive visualization displays dated events as colored circles along a timeline, with a draggable slider and play button controlling the temporal view. A single circle represents each entry in the `circles.csv` dataset, positioned by date and colored using `d3.hsl` based on the date value. The animation smoothly transitions circle radii as new data points appear. The code leverages d3.v4 APIs including `d3.scaleTime`, `d3.drag`, and `d3.csv`, rendering SVG elements with a React-compatible setup. A step function advances the slider position, triggering updates to the plot.

NNathanGBIM
69% match
Loading thumbnail…

income-transition

The visualization "income-transition" animates 1,500 circles representing people moving from a starting income quintile to an ending one, illustrating income mobility. Rendering with SVG via a custom `d3.select` and `d3.conventions` API, the animation chains transitions to move circles horizontally across the canvas, fading them in and out. The data is synthetic, generated with `d3.range` and random quintile assignments, while a tooltip div is prepared in the script.

11wheel
69% match
Loading thumbnail…

data-space-transition

Four animated transitions show how the same dataset—eight demographic groups with percentages—can be represented as rectangles and lines along a shared axis. A sliding vertical midpoint shifts between two values, with each transition morphing the visual encoding between bar lengths, path strokes, and interpolated rect tweens using d3 transitions. The SVG and canvas renderings cycle through these states on click, preserving color coding and axis labels. The code relies on d3 selections, transitions, and interpolators to animate the geometric transformations.

11wheel
68% match
Loading thumbnail…

One Slider Affecting Two Charts

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.

Ffxcarch@gmail.com
68% match
Loading thumbnail…

Module6

This visualization uses birth-rate data from 2000–2013 for 39 countries to show how national rates change over time. A time slider scrubs through the years, with each country represented by a small circle positioned along a vertical axis. The current year is highlighted in a large display, and country labels fade or emphasize as the user drags the slider. The chart is rendered using D3 v3 with SVG, presenting a clean, static-scale line-and-dot layout that lets viewers compare relative birth rates across countries and track temporal trends.

CClevejones
68% match