test

100%

✓ Published0🌍 Public

Last edited Nov 1, 2024

Created on Oct 31, 2024

This example demonstrates an interactive line chart of a sine wave, plotting y = sin(x) for x values from 0 to 100. A brushable range slider allows users to zoom into a specific x-domain interval, dynamically updating the x-axis scale and the plotted line to show only the selected portion. The visualization is built with D3.js, using `d3.scaleLinear` for axes, `d3.line` for the path, and the `d3-simple-slider` library's `sliderBottom` component for the range selection. The SVG rendering is generated programmatically from random-like data computed in the code.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Sine Wave

This visualization displays a sine wave rendered as an SVG path. The wave is generated using D3.js version 5, with the `d3.line` generator and `d3.scaleLinear` for mapping data points to screen coordinates. The animation updates the wave’s phase over time using `d3.interval`. The example demonstrates how to build interactive, time-based data visualizations with D3’s core modules, including axis creation via `d3.axisBottom` and `d3.axisLeft` for reference lines.

AAndy Zhang

76% match

Loading thumbnail…

D3 Selections

This example demonstrates a dynamic line chart created with D3, where 15 points oscillate vertically over time based on a sine function. The visualization uses D3's `select` and `range` APIs to build an SVG canvas and animate both circles and a connected path. Using D3's `.join()` method, the code efficiently updates element attributes on each frame, with a `setInterval` timer driving the animation at 20ms intervals. The implementation uses the React framework and renders purely through SVG elements, with the data generated procedurally from a mathematical function rather than external sources.

Ddanperkins

74% match

Loading thumbnail…

My d3 skill

This example animates a sinusoidal line chart generated from a sequence of one thousand data points, rendering the path with SVG and a smooth transition. The visualization uses d3.line to compute the curve, d3.scaleLinear and d3.axisBottom for the x-axis, and d3.range to create the initial dataset. Though the code includes a commented-out update to different data, only the initial static render is active, leaving the axis without ticks and the line fixed in place.

MMarian Schubert

73% match

Loading thumbnail…

Fixed size slider

This example shows a line chart of 200 randomly generated data points, with a fixed-size brush slider that can only be moved side to side. The chart uses D3 v4 with SVG rendering, where the brush is created using `d3.brushX()` and initially positioned over a range of data points. The code explicitly removes the brush handles and overlay to prevent resizing, leaving only the movable brush window. The line is drawn with `d3.line()` and scaled using `d3.scaleLinear()`, while axes are added via `d3.axisBottom` and `d3.axisLeft`.

EEfratVil

73% match

Loading thumbnail…

Sin graph

An animated sine wave is rendered as a series of circles that grow and shrink in radius as they move along the curve. The visualization updates every second, adding or removing circles based on the current sine value, creating a dynamic, pulsing pattern across the full browser viewport. The code uses React 18.2.0 and D3 v7.6.1, with D3’s `select`, `range`, and the `.join()` API to handle the SVG circle elements and their animated attributes. The graph is drawn in SVG, and the animation is driven by a `setInterval` loop that recalculates circle positions and radii.

Ddeebanks77

73% match

Loading thumbnail…

Sine wave with line

This example animates a smooth, natural sine wave that undulates across the screen, with a line drawn through its points using a black stroke. The wave is generated from 100 data points, each positioned along the x-axis with a y-coordinate determined by a sine function that shifts over time. Built with D3 v6 in a React framework, the visualization updates every frame using `setInterval` and renders via SVG. The code employs D3’s `line` generator with a `curveNatural` interpolation and animates the wave by incrementing the phase offset `t`.

LLewis Ward

73% match

Loading thumbnail…

D3 Selection Exploration

This example presents an animated scatter plot and line chart driven by a sinusoidal wave. A set of circles and a connecting path update 60 times per second, with the number of points oscillating between five and fifteen and their vertical positions shifting over time. Built with React and D3.js, the code uses `d3.select`, `selectAll`, and `join` to bind data to SVG elements, while `d3.range` generates the sequence and `d3.lineGenerator` computes the path’s geometry. All rendering occurs in SVG with smooth, real-time animation.

SSubhendu Karmakar

73% match

Loading thumbnail…

D3 Selection

This example demonstrates animated sine-wave motion in an SVG scene using D3. A line generator creates a path from 15 points, with each point’s y-coordinate oscillating based on a sine function of its index and a time variable. Circles are bound to the same data, updating their position each frame via D3’s data join. The code uses `d3.select`, `d3.range`, `d3.line`, `selectAll`, and the `join` method, refreshing every 100 milliseconds. The animation runs indefinitely, shifting the wave pattern across the viewport.

KKhanAzmat

72% match