Skip to main content
100%

HP Mentions per Book Force Layout

✓ Published0🌍 Public
AAjayyy
Last edited Mar 13, 2019
Created on Mar 13, 2019

This example visualizes spell mentions in the Harry Potter series, clustered by book. A force-directed layout groups circles into seven clusters, one per book, using `d3.forceSimulation`, `d3.forceCluster`, and `d3.forceCollide`. Each circle represents a spell mention from a JSON dataset, with color encoding the book number. Hovering a circle triggers a tooltip via `d3-tip`, displaying the specific spell name and book. The SVG rendering uses D3 v4 within a React framework.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1804919'>Multi-Foci Force Layout</a>

forked from <a href='http://bl.ocks.org/lgodz15/'>lgodz15</a>'s block: <a href='http://bl.ocks.org/lgodz15/3e77681bddb788d52f391819cfdf51b7'>HP Mentions per Book Force Layout</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Spells in Harry Potter

The visualization displays every spell cast in the Harry Potter series as a single point, arranged along a horizontal axis by story position and grouped by book and spell name in the left panels. It uses the KSHF framework to load data from a Google Spreadsheet and renders an interactive concordance, where users can search or click to zoom into details. The implementation relies on D3’s force simulation for layout and a custom list view for records, with sortable columns for position and ID.

Aadilyalcin
72% match
Loading thumbnail…

Clustered Force Layout 4.0

This example shows a force-directed layout with 200 circles organized into 10 distinct clusters, each rendered in a different color from the `d3.schemeCategory20` palette. The circles are separated into their groups by the `clustering` custom force, while the `collide` function, which uses a quadtree, prevents overlap both within and between clusters. The visualization is built with D3 v4, uses the `d3.forceSimulation` API for physics, and renders via SVG. The `ticked` callback updates each circle’s `cx` and `cy` attributes as the simulation runs.

AAjayyy
68% match
Loading thumbnail…

Clustered Force Layout I

This clustered force layout visualizes 200 circles organized into 10 color-coded clusters, with each circle’s size varying by cluster. The d3.v3 force layout uses two custom forces: a cluster force that pulls circles toward the largest node of the same color, and a collide force using d3.geom.quadtree to prevent overlaps. Circle separation differs between same-color and different-color pairs. The SVG rendering updates circle positions on each tick event, with colors assigned via d3.scale.category10.

Mmbostock
67% match
Loading thumbnail…

ICE-8 Hasini 2B Network

This visualization uses a D3.js force-directed layout to map the Harry Potter universe as a three-level network, with Hogwarts at the root, the houses Gryffindor and Slytherin at the middle level, and characters such as Harry, Hermione, Draco, and Snape at the leaves. The code builds an SVG scene using `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, color-coded by level with `d3.scaleOrdinal`. Nodes are draggable via D3’s drag behavior, and labels are drawn alongside circles to identify each entity.

Hhasinipriyad7@gmail.com
67% match
Loading thumbnail…

Fork of HTML Starter

This interactive scatterplot visualizes a books dataset, plotting ratings count against average rating while encoding genre by color and page count by circle size. The visualization includes axis labels, a summary of dataset statistics, and highlights the Harry Potter and the Prisoner of Azkaban book with a distinct pink color. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.schemeTableau10` for color mapping, and `d3.scaleSqrt` for sizing, rendering all marks as SVG circles.

SSaba Siddiqi
67% match
Loading thumbnail…

Multi-Foci Force Layout

A multi-foci force layout clusters 100 circles into four groups using D3’s d3.layout.force with position Verlet integration. Custom forces push nodes up, down, and sideways based on their index, while d3.event and force.drag enable mouse interaction. Clicking the page perturbs node positions with random offsets, and the simulation resumes. SVG circles render with a categorical color scale and animate smoothly via the tick event.

Mmbostock
67% match
Loading thumbnail…

Force layout (foci)

A force-directed layout arranges 1,000 circles into four distinct clusters, each tied to one of four color-coded categories. The simulation uses `d3.forceSimulation` with `d3.forceX` and `d3.forceY` to pull nodes toward quadrant-specific foci, while `d3.forceCollide` prevents overlap and `d3.forceManyBody` applies a weak charge. A custom `pythag` function constrains every node inside a large circular boundary drawn as an SVG circle. The visualization renders in SVG, with node positions updated each tick via D3’s data join.

TTipTopCoder
66% match
Loading thumbnail…

Multi-Foci Force Layout

A multi-foci force layout arranges 200 nodes into 10 distinct color-coded clusters, each pulled toward its own focal point along the horizontal axis. The visualization uses a custom gravity function to move nodes toward cluster centers and a collision detection routine built on a quadtree to prevent overlapping circles. Rendered as SVG with D3 v3, the code employs `d3.layout.force`, `d3.scale.ordinal` for focal positions, and `d3.geom.quadtree` for efficient proximity checks, with node radii derived from a logarithmic distribution.

Mmbostock
66% match