Within the Mind's Eye

DBPedia Ontology Viz V2

This circle pack visualization displays a subset of the DBPedia ontology, showing hierarchical relationships between classes like "Work" and its subclasses. Data is loaded from a GitHub Gist CSV containing parent-child class pairs and instance counts. The visualization uses D3's `pack` layout to position nested circles, `stratify` to build the hierarchy, and a zoom behavior for navigation. Circle colors transition through a turbo scale based on depth, with radial gradients adding visual depth. Labels display subclass names, positioned above each circle with font size scaling based on circle radius.

84% match

DBPedia Ontology Viz V1

This circle pack visualization displays a subset of the DBPedia ontology hierarchy, using d3.pack and d3.stratify to compute a nested layout from SPARQL query results. It renders the taxonomy as nested circles with depth-based grayscale gradients, labels for ontology class names, and zoom interactions via d3.zoom. The dataset is loaded from a GitHub Gist CSV, and rendering is memoized through a custom computed function to optimize D3-based updates in a React framework.

83% match

DBPedia Ontology Viz V0

This circle pack visualization maps a subset of the DBPedia ontology, showing hierarchical relationships between classes like YAGO categories and time intervals. D3’s `stratify` and `pack` layouts compute the nested circle layout, with node depth driving a grayscale gradient and area encoding instance counts. The interactive view supports zooming via `d3.zoom`, while labels render with scaled font sizes based on circle radius. Data originates from a GitHub Gist containing SPARQL query results.

82% match

DBPedia Ontology Viz

This visualization displays a hierarchical subset of the DBPedia ontology, a taxonomy of classes categorizing Wikipedia articles, as a circle packing diagram. Circles are nested to show class relationships, with color based on depth and gradients creating a 3D sphere effect. Users can pan, zoom, and click any circle to open a SPARQL query listing related Wikipedia articles. The code uses d3.js functions like `stratify`, `pack`, and `zoom` to compute the layout and interactions, with data loaded from a provided CSV file.

80% match

Final Circle Packing

This interactive circle packing visualization renders a hierarchical medical dataset using D3.js v4, fetching JSON data from external URLs. The visualization displays nested circles colored along a linear hue scale, where users can search for specific nodes via an autocomplete search bar. The code uses `d3.hierarchy` and `d3.pack` for layout computation, with SVG circles representing hierarchy levels. Clicking a node displays its ancestor path, while hover states highlight nodes. The implementation includes a tooltip system for additional node information, all rendered through D3's selection and rendering API within an SVG container.

QQuinn Sebso

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

SAVE POINT Circle Packing

This interactive circle packing visualization displays a medical dataset as a hierarchical arrangement of nested circles, where each node represents a category or item and its size corresponds to its value. Users can click on any circle to zoom into that subtree, with the view smoothly animating to focus on the selected level. Built with D3.js v4 and React, the visualization uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom()` for the zoom transitions. Node colors are assigned via a linear scale with HCL interpolation based on hierarchy depth. The visualization loads its data from a remote JSON file hosted on GitHub.

QQuinn Sebso

Experiments with Rotating Nested Circles

This visualization renders a hierarchical JSON dataset as 300 rotating, nested circles that are projected onto the screen using a custom 3D-to-2D perspective transform with a tilt angle. The circles, representing packed hierarchy nodes via `d3.hierarchy` and `d3.pack`, are drawn as SVG ellipse paths, with each layer rotated slightly to create a depth illusion. Vivid colors highlight specific depth-2 nodes and their descendants, which are computed by sorting and filtering the pack layout. The rendering uses plain SVG with `createElementNS` and D3's array methods.