Mini Charts

100%

✓ Published0🌍 Public

Last edited Sep 28, 2017

Created on May 3, 2016

This example presents a grid of mini charts that compare three metrics over time for three groups (ABC, XYZ, and Total). Each chart renders a sparkline with a highlighted final point, the latest value, and the percent change, using SVG and D3 v4. The code loads CSV data and applies a reusable `miniChart` function with `d3.scalePoint`, `d3.scaleLinear`, and a Catmull-Rom curve via `d3.line`, while formatting numbers with `d3.format`. A second dataset with temperature readings is included but not visualized.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/7ac04d6c0797b583c5c79bea0dcb2a3f'>Mini Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Mini Chart

This mini chart shows annual amounts for a single group (ABC) from 2010 to 2015, displayed as a sparkline with points, annotated with year labels and year-over-year percentage change below the axis. It uses D3.js (v3.5.5) with `d3.svg.line` for the line, `d3.scale.ordinal` for the x-axis and `d3.scale.linear` for the y-axis, plus `d3.pairs` to compute the percentage changes between consecutive years. The SVG renders within a fixed full-viewport layout, with Montserrat font and a minimal steelblue/white/gray palette, and data is loaded from `data.csv` via `d3.csv`.

SSpaceActuary

86% match

Loading thumbnail…

Mini Tables

This visualization displays three groups of time-series data as compact HTML tables. Each table shows yearly values for different variables, with columns for the amount and year-over-year percentage change. The code constructs multiple mini tables using a custom `miniTable()` function and renders them via D3’s `d3.select`, `d3.csv`, and formatting APIs like `d3.format`. Data comes from a local CSV file, and the tables are styled with flexbox CSS to arrange them side-by-side.

SSpaceActuary

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

76% match

Loading thumbnail…

Small multiples

This example shows monthly sales trends across five years as a grid of small multiples, with each chart displaying an area, line, and point series plus an average annotation. It is built with d3fc components, including `seriesSvgArea`, `seriesSvgLine`, `seriesSvgPoint`, `seriesSvgMulti`, and `chartSvgCartesian`, all rendered via a data-join on nested data from `d3.nest`. The charts are laid out using flexbox, and CSS media queries reduce chart height on narrower screens, while y-axes are hidden for repeated charts via opacity styling.

CColinEberhardt

74% match

Loading thumbnail…

Small multiples

This example demonstrates small multiples by rendering five separate line charts, one for each month, showing sales trends across the years 2011 to 2015. Each chart displays an area, line, and point series created with d3fc series components, alongside an average annotation line. The charts are generated using the d3fc chartSvgCartesian component, which is applied to each group of data via a data-join. The y-axis is hidden on all but the first chart using CSS, and the chart height adapts to screen width through a media query.

KKuerzibe

73% match

Loading thumbnail…

Charts for Fun

Two linked charts display temperature data over time, with a bar chart and a scatter plot sharing the same dataset and axes. The bar chart uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, while the scatter plot employs `scalePoint` for discrete timestamps. Both render as SVG and customize D3 v5 axes with `axisLeft` and `axisBottom`, removing domain lines and adding axis labels. The data comes from a CSV file loaded via `csv()`, with temperature values multiplied by 1000 for display.

AAdrianTNare

73% match

Loading thumbnail…

Basic Chart, simple dataset

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

NNoWizards

72% match

Loading thumbnail…

test

This example displays multiple small multiples line charts, each representing a different data group from a CSV file. The visualization uses d3.csv to load the dataset and d3.nest() to group data by the "name" column, then creates an SVG element for each group. Each chart shows a line colored by a d3.scaleOrdinal palette, with d3.axisBottom and d3.axisLeft for the x and y scales. The data source is a remote CSV from GitHub, rendered using D3 version 4's SVG path generation.

EEunice Tu

72% match