Mini Tables

100%

✓ Published0🌍 Public

Last edited Sep 29, 2017

Created on Sep 24, 2017

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.

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>

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/6fd7a74709e6d24bf327439c62a3f1c1'>Mini Charts</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/4204fc305e2da66c464ac663f96262e6'>Mini Tables</a>

mit Licensed

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

81% match

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

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

72% match

Loading thumbnail…

Type Table

This example visualizes a table of DPC website publication data, displaying monthly price changes across twelve time periods. Rows are sorted alphabetically by website name, while columns represent recent months in descending order. Cell background colors encode the magnitude of change, using a quartile-based color scale that ranges from red for low values through yellow to green for high values. The visualization uses D3.js, loading CSV data via `d3.csv`, grouping with `d3.group`, and building the HTML table dynamically with D3 selections. A custom menu component enables frequency selection.

Cchris.shimotake@gmail.com

70% match

Loading thumbnail…

Statistical Summaries

The visualization presents statistical summaries of three data samples, showing each sample’s count, min, quartiles, median, mean, and max as a row with a box plot. It uses D3.js (version 3.5.5) and the jStat library to build a custom `ParamLevelSummary` and `MinimalBoxPlot` function, rendering vector graphics via SVG. Data is loaded from a local CSV file, with each row displaying the count label and a horizontal box plot scaled to the overall parameter domain.

SSpaceActuary

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

69% match

Loading thumbnail…

Statistical Summaries

This example visualizes statistical summaries of three datasets, displaying each group’s count, minimum, quartiles, median, maximum, and mean. Each row shows a box plot of the parameter distribution alongside the sample count, with values formatted to three decimal places. Built with D3.js and jStat, the SVG chart uses a custom `ParamLevelSummary` function and `MinimalBoxPlot` to render the summaries, reading data from a local CSV file.

SSpaceActuary

69% match

Loading thumbnail…

Simple graph with table in v6

This example combines a simple line graph with an accompanying HTML table, both rendered from the same CSV dataset of date and closing price values. The line chart uses SVG with d3.scaleTime and d3.scaleLinear to map the data, while d3.line generates the path and d3.axisBottom and d3.axisLeft add the axes. A separate table is generated below the chart using d3.select to append elements, displaying the raw date and close values in a Courier font. The code relies on d3.csv for data loading and d3.timeParse for date formatting.

Dd3noob

68% match