100%

sparkline

✓ Published0🌍 Public

Last edited May 5, 2022

Created on May 4, 2022

A sparkline-style line chart displays the daily count of news articles associated with a specific cryptocurrency event, "The Golden Crypto Bullrun." The visualization uses a time-scaled x-axis and a linear y-axis to plot the article frequency over a two-day period, with the line rendered as an SVG path. Built with React and D3 v5, it leverages `scaleTime`, `scaleLinear`, `extent`, and `line` from the d3 library, alongside custom axis components. The data is embedded directly in the App component, showing a simple, focused example of trend visualization.

AI-generated description

Axes with 3D

MIT Licensed

Similar vizzes

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

70% match

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization trends over time, with dropdown menus to select the metric (price_usd or market_cap) and coin type (bitcoin, ethereum, litecoin, ripple, or bitcoin_cash). The SVG chart animates transitions between datasets using `d3.transition()`, updating the line path, x-axis (time), and y-axis (linear scale) with a duration of 700ms. Data is loaded from `buildings.json` via `d3.json()`, with dates parsed using `d3.timeParse()`, and the y-axis labels are conditionally formatted (e.g., market cap shown in thousands with “k”).

DdeafMother

69% match

Loading thumbnail…

Line Graph Trial

This interactive line graph visualizes cryptocurrency price and market capitalization over time, with dropdown menus allowing users to switch between metrics and coin types. The code uses D3 v5’s `d3.line`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG path, with smooth transitions via `d3.transition`. Data is loaded from a local `buildings.json` file and parsed using `d3.timeParse`. A React framework is present, though the rendering and animation are handled directly through D3’s SVG and transition APIs.

Hhafsa2020

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

68% match

Loading thumbnail…

Line graph

A line graph displays daily high stock prices for CS Bank over time, with a red-to-green vertical gradient applied to the stroke. The chart includes labeled axes, a title, and a hover interaction that reveals the exact price at any point via a movable circle and text label. Built with React and D3.js v4, it loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the line using `d3.line` with a `linearGradient` fill. Interactive tooltips rely on `d3.bisector` for nearest-date lookup.

SSheela2930

67% match

Loading thumbnail…

Interactive Sparkline

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.

CCurran Kelleher

66% match

Loading thumbnail…

lines

This example shows monthly COVID-19 case counts from the New York Times rolling-averages dataset as a line chart with circular markers, rendered as SVG using React and D3 v7. The code aggregates daily data by month using `d3.rollup` and `d3.sum`, scales time and linear values with `d3.scaleTime` and `d3.scaleLinear`, and draws the line with `d3.line`. A `d3.brushX` brush overlay is attached to the chart, logging selected date ranges to the console, while axes are generated by custom React components.

Bbart

66% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes daily new positive COVID-19 cases over time using data from the Data Canvas Sense Your City Dataset. The React application, rendered as SVG, uses d3.scaleTime and d3.scaleLinear to map dates and case counts, with d3.line and curveNatural creating the smooth connection between points. Axis components generate ticks and labels, while the Poppins font and muted teal color scheme give the chart its distinctive aesthetic. The chart fetches its CSV data from a GitHub-hosted file, demonstrating a clean, minimal approach to temporal data visualization.

Aanduskong

66% match