Sigfried

@Sigfried·6 public vizzes

d3.js - A zoomable treemap, dynamic width, with colors and wrap text

This zoomable treemap visualizes the budget of the Seine-Saint-Denis department, grouping datasets by political policy areas. Color encodes the rate of budget change, from negative (purple) to positive (blue), while rectangle size reflects monetary value. The d3.v3 layout uses `d3.layout.treemap` with dynamic width for mobile, animated transitions, and wrapped text labels. Data comes from `budget-data.json`, and the implementation builds on Mike Bostock's treemap and Zan Armstrong's adaptations.

Jun 1, 2018

Loading thumbnail…

d3.js v4 - Zoomable treemap

This zoomable treemap visualizes the provisional income budget for the city of Rome across three years (2016–2018), using nested rectangles to represent hierarchical budget categories. Built with D3 v4, it employs `d3.treemap`, `d3.hierarchy`, and linear scales for layout, with SVG rendering and animated transitions on zoom. Breadcrumbs in the navigation bar track the current hierarchy level, while tooltips appear via SVG title elements. The code supports dynamic width for mobile devices and wraps text labels within cells; it omits colors entirely, relying on structure and labels for readability.

Jun 1, 2018

Loading thumbnail…

Webpack ES6 Array Extend Bug Example

This example demonstrates a bug where Webpack’s Babel transpilation corrupts ES6 classes that extend the built-in Array constructor. It shows that a `ThingArray` instance, created via `new ThingArray(['baz', 42])`, loses its subclass identity when passed to a test function, even though the console displays `ThingArray` in the debugger. The code uses `babel-plugin-transform-builtin-extend` with the `globals: ["Array"]` option and `babel-preset-es2015` to compile the class, while comparing behavior between a browser running `webpack-dev-server` and plain Node execution. The page renders the array’s string representation into a div via `document.getElementById`.

Feb 1, 2016

Loading thumbnail…

Mister Super Nester

Mister Super Nester demonstrates hierarchical data wrangling and visualization through an interactive console that converts nested datasets into treemap layouts. Users can paste tabular data, write JavaScript using d3.nest() and supergroup’s nested grouping methods, and see the resulting hierarchical tree rendered as an animated SVG treemap. The tool uses d3.js version 3.5.5, Lodash, and the supergroup library to process data, with a provided sample dataset of California county demographics.

Jul 7, 2015

Loading thumbnail…

Supergroup Examples

This example demonstrates the Supergroup library for hierarchical grouping of tabular data, using patient visit records from a CSV file. It shows how supergroup compares with d3.nest’s `entries()` and `map()` methods, outputting JavaScript object structures and result summaries. The code parses the CSV with `d3.csv.parse`, applies nested groupings by physician and unit, and displays outputs like `namePath()`, `leafNodes()`, and flattened trees. Underscore.js’s `invoke` method is used for batch operations on leaf nodes.

Mar 19, 2015

Loading thumbnail…

Mister Nester

Mister Nester is an interactive console for learning and experimenting with d3.js data nesting. It presents sample data from California counties—including FIPS codes, population, and Hispanic percentage across census years—and lets users convert between flat data and nested JSON structures. The interface displays input text, editable nesting code, and the resulting output side-by-side, with syntax highlighting via highlight.js. Users modify the d3.nest() code in the middle panel and click a button to see the transformed output.

Feb 28, 2013