un-nest

100%

✓ Published0🌍 Public

Last edited Dec 4, 2015

Created on Dec 4, 2015

This example demonstrates a data transformation workflow using D3.js. It loads tabular data containing FIPS codes, population totals, and Hispanic population percentages for multiple census years, then nests the records by year. A custom function unnests the data, flattening the hierarchical structure back into individual records while preserving the parent year key. The code uses D3's `d3.select`, `d3.tsv`, and `d3.nest` APIs to handle SVG rendering, file parsing, and data grouping, with the unnested result logged to the console.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Transforming data using d3

This example demonstrates how D3's `nest()` function and custom mapping can transform SPARQL query results about ethnographic artefacts into a hierarchical, country-based dataset with calculated counts. The visualization first loads data from a SPARQL endpoint using `d3.json`, cleans the raw bindings by extracting property values, then groups entries by country label and computes each country’s total number of artefacts. The code uses D3 v5’s `nest().key().entries()` API to perform the grouping, and logs the raw, cleaned, and transformed data to the console for inspection.

RRoyCsuka

73% match

Loading thumbnail…

Transforming data using d3

This example demonstrates how to group a collection of ethnographic artefact records by date using the `d3.nest()` method. The visualization is generated from SPARQL query results, accessed via the Web API using `d3.json`, and the data is subsequently cleaned and transformed to calculate a count of records per entry. The final visualization is not rendered; instead, the process focuses on logging the transformed, nested data structure to the console, showcasing the data preparation stage before any visual encoding takes place. The code relies on the D3.js v5 library and its built-in nesting and data-loading utilities.

Kkimgarrard

73% match

Loading thumbnail…

nests1

This visualization presents a filterable bar chart of data on individuals under custody, using a nested hierarchy to organize records by status and priority. The interactive page, built with React and rendered as SVG, loads JSON data from a GitHub Gist and processes it through the `d3.nest()` API to create the structured dataset. The code imports `nest`, `select`, and `remove` from D3 v5, with data cleaning and transformation handled by custom functions in `prepareData.js`, while the `d3.json` method fetches the remote source.

EEvan Misshula

72% match

Loading thumbnail…

D3 nest examples

A collection of interactive tutorial examples demonstrates how to use the d3.nest() function to group, roll up, and sort tabular CSV data containing task management records. The page shows progressively more complex nesting operations, from single-key grouping by status to two-level hierarchies with custom sort orders and leaf-level sorting, while also demonstrating how rollup can compute counts and sums. Each example displays the JavaScript code alongside the resulting nested data structure in text areas.

GGerHobbelt

72% match

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.

SSigfried

72% match

Loading thumbnail…

Transforming data using d3

This example demonstrates how to transform SPARQL query results about ethnographic artefacts by cleaning and nesting the data per country using d3.nest(), then calculating the number of records per country. It loads data from a live SPARQL endpoint via d3.json and applies a custom cleanData function to extract property values. The transformed data structure, with country keys and value counts, is logged to the console, showing the grouping and aggregation process using d3 v5.

RRoyCsuka

72% match

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.

SSigfried

71% match

Loading thumbnail…

rollup-nestby

The visualization demonstrates nested data aggregation by grouping and rolling up values across multiple categorical levels. It uses `d3.nest()` with `.key()` and `.rollup()` functions to transform raw data into a hierarchical structure, which is then rendered as a treemap layout. The color scale applies sequential chromatic interpolation from `d3-scale-chromatic` to encode aggregated values. A custom D3 build bundles modules including `d3-jetpack` utilities, with the visualization rendered as a static treemap using `d3.hierarchy()` and `d3.treemap()`. The example shows how nested hierarchies can be computed and displayed through layered grouping operations.

11wheel

71% match