The curious incident of the dog in the night-time

100%

The curious incident of the dog in the night-time

✓ Published0🌍 Public

Last edited May 26, 2014

Created on May 26, 2014

This example shows the distribution of prices for a single book listing, encoded as a force-directed network of XML nodes. The visualization maps the document hierarchy onto a physics simulation, with parent-child relationships represented as links in a `d3.forceSimulation`. Each element and text node becomes a circle, with size and color encoding the price field’s presence and the node type. The code uses `d3.forceLink` for edges, `d3.forceCollide` for spacing, and renders with SVG `circle` and `line` elements. Data comes from an embedded `book-relaxng.xml` string, parsed via `DOMParser`, and the layout animates on each tick to reveal the structural nesting of the price attribute.

AI-generated description

Similar vizzes

Loading thumbnail…

Simple Books Document

This example visualizes a small set of books from an XML data source, grouping them by their `class` attribute (fiction or nonfiction). It first shows the hierarchical document structure as a simple indented list, then renders each book as a colored node in a force-directed graph. The visualization uses D3.js’s `d3.hierarchy` and `d3.tree` to lay out the XML tree, while `d3.forceSimulation` positions the book nodes, with the `class` value driving node color and tooltip text. The raw XML is loaded via `d3.xml`, and the document’s structure is directly mirrored in the layout, making the data’s grouping and classification immediately visible.

CCliffordAnderson

72% match

Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM

70% match

Loading thumbnail…

DataClips + D3.js Force-Directed

This example visualizes monthly book purchase amounts as a force-directed node graph, where each node’s size corresponds to spending and color encodes tiers (green, yellow, orange, red) based on dollar ranges. It consumes a JSON dataset from a Heroku DataClip, preprocessed by parsing dates and amounts. Using D3.js v3’s `d3.layout.force`, nodes are positioned with gravity and charge scaled by amount, while SVG circles and text labels render the data. The color scale uses `d3.scale.category10()` for categorical differentiation, and dragging is enabled via `force.drag`.

663anp3ca

69% match

Loading thumbnail…

New Books

This example visualizes the distribution of new books across fiction and nonfiction genres. It reads the `books.xml` file and renders each book as a point on a simple scatter plot, with the class attribute determining the point’s color. The visualization uses the D3.js library, specifically `d3.forceSimulation` for layout and `d3.select` with `svg.circle` to draw the data marks, providing a clear, immediate comparison of genre counts from this small gist dataset.

CCliffordAnderson

69% match

Loading thumbnail…

DataClips + D3.js Force-Directed

This example shows monthly book purchase amounts as a force-directed node layout, where each circle’s size and color encode spending (green for ≤800, yellow for ≤900, orange for ≤1000, red above), with date and dollar labels. It uses D3 v3’s `d3.layout.force` for physics simulation, `d3.json` to load local sample data (originally from a Heroku DataClips endpoint), and SVG for rendering. Nodes are draggable via `force.drag`, with tick updates repositioning them.

663anp3ca

69% match

Loading thumbnail…

Sample CSV for XQuery Book

This example visualizes the five-book dataset from CliffordAnderson’s gist, mapping each title to a node whose size encodes the year published and whose color distinguishes binding type. A force-directed layout using `d3.forceSimulation` positions the nodes, while `d3.select` and `transition.attrTween` animate the drag-and-drop interactions. The tooltip, rendered via SVG `<title>`, shows the full title and ISBN on hover. The chart reads the CSV directly from the embedded `books.csv` source, parsing fields with `d3.csvParse` and applying a categorical scale for the binding colors.

CCliffordAnderson

68% match

Loading thumbnail…

Gist 579bcba6019da7a932da70826f5d0c83

This interactive example visualizes the spatial layout of books from Project Gutenberg, mapping each title to a point based on its geographic coordinates and rendering them as a dense, globe-like scatter plot. Using D3.js’ `d3.forceSimulation` with gravitational and collision forces, the points are arranged into a spherical cluster, while user interaction—dragging or hovering—updates the positions in real time. The visualization employs `d3.forceX`, `d3.forceY`, and `d3.forceZ` to distribute points in three-dimensional space, and it relies on `d3.select` and event handlers to manage the dynamic behavior. The code uses a canvas-based rendering approach with `getImageData` for pixel-level color manipulation, giving the plot a glowing, heatmap-like appearance.

AAnaMal08

67% match

Loading thumbnail…

Concentric circle force layout graph in D3.v4

This example visualizes a network of research papers on Real-Time Bidding for online advertising, showing papers as nodes and citations as links. The force-directed layout organizes papers into concentric circles by publication year, with more recent papers near the center. Nodes are colored by year and are draggable, with the graph supporting zooming and panning. The visualization uses D3.v4's `forceSimulation` API with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` forces to compute dynamic node positions. It renders nodes and links as SVG elements with animated transitions, and loads paper metadata from a JSON data file. Zoom interaction is implemented via D3's `zoom` object with configurable scale extents.

FFrissAnalytics

67% match