Timeseries with buttons

100%

Timeseries with buttons

✓ Published2🌍 Public

Last edited Jan 24, 2023

Created on Jan 23, 2023

A time series line chart displays event counts over time, with three buttons allowing viewers to switch between 15, 30, and 60-day datasets. The visualization uses d3.scaleLinear axes and a d3.line path with smooth transitions, animating both the line and axis updates over 3 seconds via d3.transition. Data comes from CSV files (data15.csv, data30.csv, data60.csv) of the Data Canvas Sense Your City Dataset, with the SVG rendered through D3 v6 and button-driven updates handled through d3.select event listeners.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

[Continue] Campaign Timeframe

This interactive visualization displays the number of events occurring per day over varying campaign timeframes, with buttons to toggle between 15, 30, and 60-day periods. The line chart, rendered as an SVG, uses smooth transitions to animate the path's shape and axis scales as new data loads from CSV files. The visualization is built with D3 v6, leveraging functions like `d3.csv` for data import, `d3.scaleLinear` for axes, and `d3.line` for generating the path. The data originates from the Data Canvas Sense Your City dataset.

Kkechapasiin

78% match

Loading thumbnail…

Untitled

An interactive time-series line chart displays daily, weekly, and monthly aggregations of value and quantity data from a CSV file. Buttons allow switching between these temporal resolutions, with the line path redrawing accordingly. Tooltips appear on mouseover, and the chart uses D3 v3 APIs including `d3.csv`, `d3.time.scale`, `d3.bisector`, and `d3.svg.axis`, with an SVG canvas and smooth animation during transitions.

Ggabrielribeirob

76% match

Loading thumbnail…

Untitled

This interactive time-series chart displays a daily value over three months and lets the user switch between daily, weekly, and monthly aggregated views. It renders an SVG line chart using D3 v3, with axis labels, an orange line, and a tooltip that appears on hover over the chart area. The code aggregates data by summing values for each time unit and linearly interpolates gaps, using APIs like `d3.time.scale`, `d3.svg.axis`, and `d3.bisector`. Buttons enable the time-unit selection, and the chart updates dynamically on click.

Ffaversin17

74% match

Loading thumbnail…

Update d3.js data with button press

Clicking the Update button swaps the visible line chart from one dataset to an alternative CSV file, animating the change over 750 milliseconds. The example demonstrates how to rebind D3.js v3 selections to new data by re-calling the same line and axis generator functions within an `onclick` handler. It uses `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the SVG path and axes, with transitions applied via `selection.transition().duration()`. The underlying data comes from two local CSV files with date and closing-value pairs.

CCBasis

73% match

Loading thumbnail…

line chart

This line chart example presents two datasets: ticket prices by year and Klout scores by day. Clicking color swatches animates the chart between the two data sets, updating both the x- and y-axes, and the line’s gradient stroke. The visualization is built with D3 v4, using SVG rendering and transitions to animate axis rescaling and path redrawing. The code uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.line` for drawing the line.

MMike Z

73% match

Loading thumbnail…

Untitled

This interactive time series visualization displays daily count data from September 2018 to September 2019. Using D3.js version 3, it renders an SVG line chart with buttons to aggregate the data into weekly or monthly sums, with missing dates linearly interpolated. Hovering over the chart reveals tooltips and focus elements, while the axes are drawn using `d3.svg.axis`.

Ffaversin17

72% match

Loading thumbnail…

Line chart with step buttons

A line chart displays population trends for five countries from 1600 to 2030, with step buttons that cycle through each nation’s series. The visualization uses D3 v3 with SVG rendering and animation, building axes with `d3.svg.axis` and scales via `d3.time.scale` and `d3.scale.linear`. Users click Previous or Next to switch the highlighted line and its annotation, updating the chart dynamically. Data is loaded from a CSV file using `d3.csv`.

LLuisSevillano

72% match

Loading thumbnail…

Untitled

This interactive line chart visualizes time-series data, comparing two different datasets loaded by default and via an update button. It displays the data as a single line, with the x-axis representing dates and the y-axis representing values. The chart uses D3.js to render an SVG, with axes and a line path updated smoothly using a transition. The code employs `d3.time.scale` and `d3.scale.linear` for scaling, and transitions to animate the line and axes when new data is loaded.

Ttracy3057

72% match