Skip to main content
SimilarExport ZIP
100%

Interactive Sparkline

✓ Published4🌍 Public
CCurran Kelleher
Last edited Oct 9, 2025
Created on Jul 15, 2024
Forked from Circles with D3

This interactive sparkline visualizes weekly NPM package download counts for the d3 library, using data fetched from a JSON URL. The chart displays an area and line graph, with a hover interaction that reveals a large numeric download count and a date range label. The implementation leverages d3 functions such as `scaleTime`, `scaleLinear`, `line`, `area`, `flatRollup`, `bisector`, and `pointer` to handle aggregation, scaling, and mouse tracking. The visualization updates dynamically as the mouse moves, highlighting the nearest data point with a circle and vertical line.

AI-generated description

A reproduction of the interactive sparkline for weekly downloads of NPM packages.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Interactive Sparkline

This interactive sparkline charts weekly NPM download counts for the d3 package, as fetched from a remote JSON data source. The visualization displays a purple area chart with a bold line, and hovering over the chart reveals a vertical guide and a large text label showing the exact weekly total and date range. The implementation uses the d3 library, specifically `scaleTime`, `scaleLinear`, `line`, `area`, and `bisector`, along with `flatRollup` and `sum` to aggregate daily data into weekly buckets.

AAustin Lackey
88% match
Loading thumbnail…

Fork of Interactive Sparkline

This interactive sparkline visualizes weekly D3.js download counts, with a line and area chart that updates on mouse movement. The code uses d3.line, d3.area, d3.scaleTime, and d3.scaleLinear to render the chart, while d3.pointer and d3.bisector handle hover detection. Data is fetched from a remote JSON file and aggregated using d3.flatRollup and d3.sum. A hovered circle and vertical line highlight the selected week, with a text label showing the download count and date range.

GGuo Ci
87% match
Loading thumbnail…

NPM D3 Downloads Data

This example visualizes daily download counts for the D3 package from July 2023 to December 2023, sourced from npm-stat. It shows a time series line chart where the y-axis represents weekly downloads and the x-axis represents dates, revealing a clear sawtooth pattern of high weekday activity and lower weekend counts. The visualization uses D3.js to parse the JSON data, scale the axes, and render the line path via `d3.line`. The user can inspect the raw data through the accompanying `data.json` file.

CCurran Kelleher
83% match
Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden
73% match
Loading thumbnail…

Sparkline Crash data

This interactive sparkline chart displays monthly crash counts from 2012 to 2025, rendered as a filled area line graph. The visualization presents the full time series and highlights the monthly value on hover, updating a large text label with the exact date and crash count. Built with React and D3.js, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.bisector` to map data, draw the chart, and handle pointer interactions. The data originates from a local CSV file.

JJose Morales
73% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes daily metrics from a CSV file, letting users map any numeric column to the X, Y, and size channels and a categorical column to color. Built with D3 v7, the visualization uses `d3.zoom` for pan-and-zoom with scale extent bounds, `d3.scaleLinear` and `d3.scaleSqrt` for axes and point sizing, and `d3.scaleOrdinal` with the `schemeSet2` palette for coloring. Hovering a point triggers a tooltip with the row’s values, while the axis labels update dynamically based on selected column names. The chart resets to its original view when the user clicks the "Reset Zoom" button.

Mmaddulanagasanjana@gmail.com
73% 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
72% 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