Date slider - histogram legend

100%

Date slider - histogram legend

✓ Published0🌍 Public

Last edited Aug 2, 2017

Created on Aug 2, 2017

A date slider controls a histogram color legend, where each bar represents a year and its height shows the count of data points. Dragging the handle filters the scatterplot below, showing only records with dates up to the selected year. The visualization uses d3.csv to load the data, d3.histogram and d3.scaleTime for binning and axes, and d3.drag for the slider interaction. The color scale is d3.scaleOrdinal with a categorical range applied across year bins.

AI-generated description

Date slider using a histogram as colour legend. Slider adapted from Mike Bostock's drag slider.

Related examples:

forked from <a href='http://bl.ocks.org/officeofjane/'>officeofjane</a>'s block: <a href='http://bl.ocks.org/officeofjane/f132634f67b114815ba686484f9f7a77'>Date slider - histogram legend</a>

mit Licensed

Similar vizzes

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

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

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

72% match

Loading thumbnail…

D3 4.0 Sequential Scales Explorer

This interactive D3 v4 heatmap displays a two-dimensional histogram of date and value buckets, with tile colors encoding count data. Users select from a menu of sequential color interpolators, including Viridis, Inferno, and colorbrewer schemes, to recolor the visualization. The chart updates dynamically using `d3.scaleSequential`, and an animation cycles through interpolators every second until manual selection. The SVG rendering includes axes, a color legend, and labels for the count, date, and value dimensions.

TThanaporn-sk

70% match

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

70% match

Loading thumbnail…

sliders

This visualization demonstrates interactive sliders built with D3.js, where each slider’s filled portion changes color dynamically as the user drags the handle. The sliders use a brush interaction to capture input, and the fill color is mapped through a custom cubehelix color scale (d3.scale.cubehelix) based on the slider’s current value. The SVG rendering includes horizontal and vertical orientations, with text labels and a clean, minimal design. The code also includes an animated transition example, though it is commented out.

SSpaceActuary

69% match

Loading thumbnail…

Small multiple histograms

Small multiple histograms display the distribution of event dates by region, with three separate charts for Asia, Africa, and America. Each chart shows yearly bins using d3.histogram with time-based thresholds, and labels each non-empty bin with its count. The example loads a CSV file with d3.csv, parses dates using d3.timeParse, and nests rows by region via d3.nest. All charts share a global y-axis scale for count, rendered as SVG with d3.axisBottom showing year tick marks.

TThanaporn-sk

69% match

Loading thumbnail…

Scatter Plot With Slider

A scatter plot displays countries positioned by latitude and longitude, with each point colored orange and labeled via a tooltip on hover. A slider below the chart adjusts the upper limit of the x-axis, triggering a smooth 1000-millisecond transition that rescales the domain and repositions the circles. Built with React and D3 v4, the code uses d3.csv for data loading, d3.scaleLinear for axes, and d3.transition for animation. The data comes from a GitHub-hosted CSV file, and the visualization is rendered as SVG.

GGa1307988

69% match