Skip to main content
100%

fresh block

✓ Published0🌍 Public
YYkelf
Last edited Oct 31, 2017
Created on Oct 31, 2017

A force-directed bubble chart visualizes a project backlog from a CSV file, with each task's priority level determining the node's radius (WISH, COULD, SHOULD, MUST) and color, while labels show the assignee. The chart uses d3.layout.force for physics simulation, with collision detection via d3.geom.quadtree, allowing nodes to repel each other and cluster while a fixed root node pulls them via negative gravity. The visualization is rendered as SVG circles and text, updated on each simulation tick.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Jdlv00/'>Jdlv00</a>'s block: <a href='http://bl.ocks.org/Jdlv00/9ce43418ca737e18fc2c8b0f19f2d4a7'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A force-directed bubble chart visualizes task priorities and assignees from a CSV dataset. Node radii encode a priority scale (WISH, COULD, SHOULD, MUST), while colors distinguish priorities and labels show team members. The D3 v3 layout applies gravity and collision detection via a quadtree, and a fixed root node follows the mouse to repel bubbles interactively.

JJdlv00
92% match
Loading thumbnail…

fresh block

This example shows a force-directed network of circles, each representing a task from a CSV dataset. The circle radius encodes task priority, and labels display the assignee's name. The visualization combines a static node layout with a separate, smaller draggable force simulation. It uses d3.csv for data loading, d3.forceSimulation with link, charge, and centering forces, and d3.drag for interactive node movement. The code initially positions nodes from the data, then runs a second simulation on a hardcoded graph of six red nodes.

YYkelf
81% match
Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto
76% match
Loading thumbnail…

fresh block

This interactive circle-packing visualization displays a hierarchical dataset from flare.json, using nested bubbles to represent categories and their relative sizes. The view begins with a zoomed-out root node and supports click-to-zoom transitions between hierarchy levels, with labels fading in for parent nodes. Built with D3 v4, it uses the `d3.pack` layout, `d3.hierarchy` for tree traversal, and `d3.interpolateZoom` for smooth zoom animations. Circle fills follow a linear color scale applied by depth, while SVG rendering and CSS hover effects highlight nodes. The root background shifts to a warm hue, and clicking anywhere resets the view.

AAkriti97
76% match
Loading thumbnail…

fresh block

A radial bubble chart shows the relative frequency of 50 data points, where each count is rendered as a red or blue circle. Clicking any bubble increments its count and repositions all circles along a ring, with the selected bubble moving to the center. The visualization uses d3.scaleSqrt and d3.scaleLinear to map count values to circle radius and color, and d3.select transitions animate the position and fill changes over 800 milliseconds. The data is generated randomly with d3.range and Math.random.

MMadelijn
75% match
Loading thumbnail…

fresh block

A bubble chart displays Medium articles grouped by category, with circle size encoding article views and color distinguishing Design, Development, and Data Science. The visualization uses D3’s `d3.forceSimulation` to position overlapping bubbles and `d3.scaleOrdinal` for categorical coloring. Hovering reveals a tooltip with the article’s title, category, and view count, based on data loaded from a CSV via `d3.csv`.

335degrees
75% match
Loading thumbnail…

fresh block

A small force-directed simulation places three colored circles, representing nodes, in a 500-by-500 SVG canvas. The code uses `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to animate node positions, while a `tick` handler updates the circles' `cx` and `cy` attributes. The simulation restarts at timed intervals, first removing a node from the data array, then re-adding it, and finally pushing a new node, demonstrating how the layout adjusts to dynamic data changes.

EEE2dev
74% match
Loading thumbnail…

fresh block

A stylized area chart displays layered time-series data using a silhouette offset to show relative values across categories. The visualization uses D3 v2 with SVG rendering and cardinal interpolation to create smooth, overlapping curves in an orange color palette. Users can hover over any layer to highlight it while dimming others, with a tooltip revealing the specific category name and value at the cursor position. The chart loads data from an external CSV file and includes both left and right y-axes with a weekly time scale on the x-axis.

PPardhu448
74% match