Skip to main content
100%

sparkline

✓ Published0🌍 Public
Aallyraza
Last edited Jul 3, 2018
Created on Jul 2, 2018

This visualization displays a sparkline chart comparing monthly values against target figures over time. The code uses D3 v4 with SVG rendering, plotting two line paths via `d3.line` and scaling axes with `d3.scaleTime` and `d3.scaleLinear`. Data from a CSV file is loaded asynchronously with `d3.csv`, with the target line drawn in gray and the value line in sky blue. The chart is fixed at 300 by 100 pixels with a thin border.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

sparkline

A small SVG sparkline plots a time series of 25 daily values from data.csv, using a smooth Catmull-Rom curve and a single highlighted circle at the first data point. The chart renders a 200x100 pixel graphic with light gray lines and darker point markers, scaled by d3.scaleTime and d3.scaleLinear. D3 v4 parses dates with d3.timeParse and draws the path via d3.line with the d3.curveCatmullRom interpolation. The minimal design focuses on trend shape rather than axes or labels.

Aallyraza
87% match
Loading thumbnail…

simple line

A line chart plots date-stamped values from a CSV file, showing a downward trend from early April to early May. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, and the line is styled with a skyblue stroke. The data is parsed using `d3.timeParse` and loaded via `d3.csv`.

Aallyraza
79% match
Loading thumbnail…

Inline Sparkline v4

This example embeds three miniature line charts directly into the flowing text of a paragraph, each sparkline visualizing a different measure (amount1, amount2, amount3) from the same CSV data across the years 2010–2015. The first sparkline shows raw counts, the second decimal values, and the third percentages, each with its own number format. The code uses D3 v4 APIs such as `d3.line`, `d3.scalePoint`, `d3.scaleLinear`, and `d3.pairs` to compute changes between consecutive points, rendering the SVG sparklines inline within HTML spans using the `d3.select` and `.call` pattern.

SSpaceActuary
78% 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
76% match
Loading thumbnail…

multiline chart

This example shows a small multiline chart comparing two data series over time: actual values and target values, with the target line appearing as a dashed path and the actual line as a solid path. The chart uses D3 v4’s `d3.line()` with `d3.curveCatmullRom` to smooth both lines, and `d3.scaleTime()` and `d3.scaleLinear()` to map dates and numeric values to SVG coordinates. Data is loaded from a local CSV file via `d3.csv`, and a circle is appended at the end of the target line to mark its final point. The visualization is rendered as an SVG with a simple margin-based layout.

Aallyraza
75% match
Loading thumbnail…

Inline Sparkline

Inline sparklines embed a compact line chart directly within a paragraph of text, showing a time series of three different measures (amount1, amount2, and amount3) from a CSV dataset. Each sparkline displays six yearly data points, with its own y-axis scale and end-label showing the latest value and percent change from the prior year. The visualization uses D3.js version 3.5, including `d3.csv`, `d3.nest`, `d3.svg.line`, and `d3.scale.ordinal`, and is rendered as inline SVG elements. Data is reshaped from wide to long format before being fed into a reusable `sparkline()` function.

SSpaceActuary
75% match
Loading thumbnail…

interactive line chart

An interactive line chart displays monthly values from a small dataset, with pink circular markers for each data point and a black polyline connecting them. Hovering over a circle highlights it in red, reveals its value in a tooltip, and draws a dashed vertical line from the point to the x-axis. The visualization uses D3 v4 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `transition.style` for the hover effects. Data is loaded from a JSON file and rendered as SVG, with axis labels shown at the bottom.

Aalicemontel
75% match
Loading thumbnail…

interactive line chart

This interactive line chart displays a time series of values over twelve months, with a circular marker at each data point. Hovering over a circle highlights it in red and reveals a tooltip showing the exact value, along with a dashed vertical line connecting the point to the x-axis. The visualization uses D3 v4 with an SVG canvas, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`. It loads external CSV data from a gist, parses dates with `d3.timeParse`, and animates the hover transitions with `transition().duration()`.

Aalicemontel
74% match