Mini Chart

100%

✓ Published0🌍 Public

Last edited Apr 29, 2016

Created on Apr 29, 2016

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`.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Mini Charts

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.

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

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

74% match

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9

73% match

Loading thumbnail…

Area chart

This area chart visualizes the change in a numeric value over a sequence of years, with the area beneath the line filled in steel blue. The chart is rendered as an SVG and is built using D3.js v6’s modular API, including `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.area` to generate the area path. Axis ticks are added via `d3.axisBottom` and `d3.axisLeft`. Data is fetched from a remote CSV file hosted on GitHub.

Kkrishnavisheshkatta@my.unt.edu

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

71% match

Loading thumbnail…

Untitled

This example shows the annual variation of a single numeric value from 1895 to 2019, plotted as a time series using D3.js v6. The visualization calculates an SVG line chart from a CSV file with two columns, mapping the year to the x-axis and the value to the y-axis. The code loads the data with `d3.csv`, appends an SVG canvas with a fixed width and height, and prepares to render the dataset, though the drawing logic is incomplete. The chart relies on D3’s data-joining methods to bind the parsed rows to visual elements.

KKaitlyn Trudeau

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

71% match