Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published1🌍 Public
Aashpradhan01123
Last edited Jul 28, 2020
Created on Jul 28, 2020
Forked from HTML Starter

This example animates the drawing of a line chart, transitioning each data point from the bottom of the plot to its correct position over time using a staggered delay. The visualization uses Apple’s stock closing price data, rendered with a custom easing function and a line path. Built with React, the code leverages Observable’s `d3.select`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and a timer to orchestrate the animation, with axes and a styled steelblue stroke.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example displays a multi-series line chart of stock data, plotting both opening and closing values over time as two distinct colored lines. The visualization uses D3 v4 with SVG rendering, employing `d3.line()` to generate the paths, `d3.scaleTime()` for the time-based x-axis, and `d3.scaleLinear()` for the y-axis. Data is loaded from a local CSV file via `d3.csv()`, with dates parsed using `d3.timeParse()`. The chart includes axes rendered through `d3.axisBottom()` and `d3.axisLeft()`, all styled with basic CSS classes.

Ttayyabanisar
84% match
Loading thumbnail…

HTML Starter

This example displays two animated line charts comparing "Away" and "Home" values across eight time points, with interactive hover effects that highlight lines and reveal individual data points. The visualization uses D3 v5 scales (d3.scaleLinear), axes, and line generators to render SVG paths, with circles marking each value. The code also incorporates React as the framework and includes smooth transitions and hover tooltips that display numeric values.

Rremyapk
81% match
Loading thumbnail…

HTML Starter

This example renders a dual-axis time series chart of S&P 500 stock prices and long-term interest rates from monthly data in a CSV file. The SVG visualization uses D3 v5 scales and axes, with two line generators for each metric and a filled area between them, though the area is nearly transparent. The chart displays the data over time with inverted y-axes and employs `d3.csv` for data loading and `scaleTime` for temporal mapping.

Ppaularl
77% match
Loading thumbnail…

Animated Sparkline Chart with d3

This example shows a single sparkline chart that animates its line drawing from left to right over two seconds. The chart plots a small dataset of 23 numeric values using an SVG path with a natural curve, rendered at 200 by 30 pixels. The animation is achieved by first measuring the path’s total length, then using `stroke-dasharray` and `stroke-dashoffset` with a D3 transition and linear easing. The code uses `d3.line`, `d3.scaleLinear`, and `d3.select` within a React framework, drawing to SVG.

111abhisharma
77% match
Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani
76% match
Loading thumbnail…

HTML Starter

This example presents three animated circle charts, each with its own dataset and button. Clicking a button cycles through data values, causing the corresponding circle’s radius to transition smoothly while its numeric label updates. The visualization uses D3 v4 with `d3.select`, `d3.scaleLinear` for mapping data to radius and color, and `transition().attr` to animate changes. Each circle’s fill shifts along a gradient, and buttons trigger the updates through custom click handlers.

Ssgalhamdani
76% match
Loading thumbnail…

Untitled

This example presents an interactive stock chart with candlestick and line plots, accompanied by technical indicators such as moving averages, MACD, RSI, and volume. The chart also supports zooming, panning, and draggable annotations for trendlines and support/resistance levels. It uses the D3 v4 library with techan.js for financial charting, rendering to SVG within a React framework. Data is loaded from a TSV file containing historical stock prices and parsed using `d3.timeParse`.

SSheela2930
76% match
Loading thumbnail…

HTML Starter

This example shows a time series of monthly stock price data with a focus and context view. The main chart displays the price trend as an area chart, while a smaller brushable overview allows users to select a date range. The selection is reflected in the main chart through a coordinated zoom and pan interaction. The visualization is built with D3 v5, using `d3.brushX` for the range selection and `d3.zoom` for pan and zoom transforms. The SVG rendering uses `d3.area` with a monotone curve, and the data is loaded from a CSV file containing date and price pairs.

RRostyslav
76% match