fresh block

100%

✓ Published0🌍 Public

Last edited Oct 31, 2017

Created on Oct 31, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

79% 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

79% 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

77% 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

75% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

75% match

Loading thumbnail…

fresh block

This example demonstrates an interactive force-directed graph of a hierarchical dataset, where nodes represent data points and links show parent-child relationships. The visualization uses D3.js version 3.5.5 with a force layout to position nodes, while a semantic zoom behavior (via `d3.behavior.zoom`) allows panning and scaling the entire graph. Nodes are colored by group or hierarchy level, with the root node highlighted in white, and can be dragged individually using `d3.behavior.drag`. The code applies linear scales for coordinate transformation during zoom and dynamically updates node positions and link lines on each tick event, with the data sourced from a Gist and rendered as an SVG.

DDinoJay

74% match

Loading thumbnail…

fresh block

A tree diagram displays hierarchical data with rounded rectangular nodes and connecting curved links, all rendered in a clean white-and-steelblue palette. The visualization uses D3 v4 to generate the layout, with each node labeled by text and positioned via an external vertical_tree.js script. The code loads D3 from a CDN and applies CSS styling to define node fills, strokes, and link thickness. The example demonstrates a static, non-interactive tree structure, relying on D3's core selection and data-join methods rather than force simulation or animation.

JJoseEduinCulmaCaviedes

74% match

Loading thumbnail…

fresh block

This example, built with D3 v5 and SVG, visualizes a Gapminder-style dataset using a bubble chart. The x-axis represents GDP per capita, the y-axis shows life expectancy, circle size encodes population, and color maps to geographic region. The chart animates through years 1964 to 2013, showing how countries' development indicators evolve over time. A play button and time slider allow users to scrub through the years, with circles transitioning smoothly between states. The visualization highlights global trends in health and wealth, with tooltips providing country-specific data on mouseover.

AAitorCCE

73% match