Cyclone Record data structure

100%

Cyclone Record data structure

✓ Published0🌍 Public

Last edited Apr 23, 2013

Created on Apr 23, 2013

This example visualizes the nested structure of a Cyclone activity record, showing how heart rate, speed, cadence, temperature, and GPS coordinates are organized within a single JSON object. It uses d3.hierarchy and d3.tree to render the data as an interactive collapsible tree diagram. The JSON data comes from a gist by Restuta, with each node representing a key-value pair, including the nested GpsData object containing latitude and longitude. The visualization highlights the parent-child relationships between the main record fields and the GPS sub-object.

AI-generated description

Similar vizzes

Loading thumbnail…

CSV to JSON

This example demonstrates a hierarchical visualization of iNaturalist butterfly observation data, converting a CSV file into a nested JSON-like structure. The code loads the data using `d3.csv` and transforms each row into objects containing fields such as location coordinates, dates, and taxonomic classifications from kingdom down to species. The visualization displays this hierarchical taxonomic data using a tree layout, with nodes rendered as circles and connecting links as paths. The implementation relies on D3 v5’s selection and data-joining methods to bind the processed data to SVG elements.

Aatree-rohit

60% match

Loading thumbnail…

Tree Test

A hierarchical tree layout arranges data from a CSV file by a categorical column, with each leaf sized according to a rollup sum. The visualization shows the nested structure of the data2.csv dataset, grouping entries by activity and rendering the resulting hierarchy as a tree with curved links. The code uses d3.nest, d3.hierarchy, and d3.tree to compute the layout, and d3.linkHorizontal to generate the connecting paths.

Ppaularl

59% match

Loading thumbnail…

TREE STRUCTURE

A hierarchical tree chart displays temperature, pressure, and humidity measurements for five US cities under a "Global Climate Data" root node. Each city branches into three leaf nodes showing specific values, with distinct shapes and colors marking measurement types: red crosses for temperature, blue squares for pressure, and green diamonds for humidity. The visualization uses D3 v5 APIs including `d3.tree`, `d3.hierarchy`, `d3.symbol`, and `d3.linkHorizontal` to compute the layout and render the SVG output.

CChaturyaAkhilaPallem@my.unt.edu

58% match

Loading thumbnail…

ICE -8 Tree Graph

This interactive horizontal tree graph visualizes climate data, grouping records by city and then by timestamp. The final leaf for each city reveals its last recorded metrics—temperature, wind direction, humidity, and carbon emission—as distinct child nodes. D3.js fetches the dataset from a remote CSV file and transforms it into a hierarchical structure. The graph uses `d3.tree()` and `d3.hierarchy()` for layout, and renders nodes and connecting links as SVG paths with `d3.linkHorizontal()`. The interface presents a clear, top-down breakdown of environmental measurements across locations.

Cchalasanigayaetiri@gmail.com

58% match

Loading thumbnail…

tree with embedded data

This tree diagram visualizes a hierarchical dataset with collapsible nodes, where each leaf is represented by a rectangle and internal nodes by circles. The visualization uses D3.js v3’s tree layout and SVG rendering, with smooth animated transitions when expanding or collapsing branches via the provided buttons. Data is embedded directly in the code, and the layout separates parent and child nodes to clarify depth.

EEE2dev

57% match

Loading thumbnail…

ANY JSON tree (DRAFT)

This example visualizes any JSON object as an interactive, selectable tree. It converts nested data into a hierarchical structure using a custom `hierarchify` function, then renders nodes and links with D3’s `tree` layout and `linkHorizontal` generator as SVG. The tree supports zooming via `d3.zoom` and collapsing branches on click, displaying each node’s name, type, and value. The sample data includes a person’s records from NADRA, contacts, vehicles, and travel details, with node colors derived from a sequential rainbow scale.

Nnadia-el

57% match

Loading thumbnail…

Tree graph

A tree visualization displays a hierarchical data structure from a JSON file, showing parent-child relationships through vertical links and labeled nodes. The graph represents an object model with classes, attributes, and methods, using D3 v5's `tree`, `hierarchy`, and `linkVertical` layouts to position elements. Interactive pan and zoom functionality is implemented via `d3.zoom`, while nodes are rendered as SVG text with `foreignObject` elements containing input fields. The visualization supports exploration of complex nested data through its expandable tree layout.

66264kusuma@gmail.com

57% match

Loading thumbnail…

practice cars JSON

This example visualizes a small JSON dataset of two cars, each with make, model, year, and driver information. It shows the hierarchical relationship between each car and its associated driver, highlighting nested object structure in the data. The visualization uses D3.js force simulation (d3.forceSimulation) to lay out nodes and links, with JSON data loaded via d3.json. The rendering approach relies on SVG paths and D3’s data join to bind car and driver objects, while the source is a gist by Docwali777. The code does not display any additional attributes beyond the raw nested fields.

DDocwali777

57% match