Skip to main content
SimilarExport ZIP
100%

ERP DisCal Chart - Force Bubble start COMPLEX - DisCal v4

✓ Published0🌍 Public
JJimMaltby
Last edited Dec 19, 2020
Created on Dec 19, 2020

A force-directed bubble chart visualizes organizational impact data, mapping each node’s position along x- and y-axes representing response ability and disruption severity. Node color encodes organization budget via a quantized spectral scale, while link thickness reflects edge weight. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, and reads CSV data from Google Sheets. Interactive tooltips appear on mouseover via d3.select and transition, with SVG rendering and animation.

AI-generated description

Part of my ERP DataVis Project. This is the ERP Disruption Calculus chart. The Force Directed Bubble type format. This is a basis to build the elements for ERP DisCal visualisaiton Based on Austin Reads, blog: & Codepen: https://codepen.io/roundat/pen/rdvyJq

MIT Licensed

Similar vizzes

Loading thumbnail…

ERP DisCal Chart - Force Bubble type

This force-directed bubble chart visualizes ERP disruption by mapping nodes on a two-axis grid of game-changingness and response ability. The SVG is divided into four colored quadrants representing different strategic outcomes. Node positions are determined by d3.forceSimulation, while d3.scaleLinear and d3.scaleSqrt handle axis mapping and bubble sizing. Data comes from randomly generated JSON with group assignments, and a tooltip appears on hover. The chart uses D3 v5 with axis labels and custom CSS styling.

JJimMaltby
91% match
Loading thumbnail…

ERP DisCal Chart - Force Bubble start COMPLEX - DisCal

This force-directed bubble chart visualizes randomly generated data points on a quadrant grid that measures the "game-changingness" of an ERP system against the ability to respond in time. The four colored rectangles delineate strategic response zones, with bubble positions plotted using `scaleLinear` on the x and y axes and `scaleSqrt` for symbol sizing. The chart is rendered as an SVG using D3.js v5, with axis labels designating the quadrants and a tooltip showing circle details upon hover.

JJimMaltby
91% match
Loading thumbnail…

ERP DisCal Chart - Force Bubble type

This visualization presents a force-directed bubble chart of ERP disruption calculus, mapping items on axes for game-changingness and ability to respond in time. Randomly generated data points are plotted within four colored quadrants that categorize the disruption scenarios. The chart uses D3.js v5, specifically employing `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering includes custom tooltips and hover effects on circles, with animation implied through force simulation as noted in the adaptation source.

JJimMaltby
90% match
Loading thumbnail…

ERP DisCal Chart - Force Bubble type

Four colored quadrants position randomly generated data points along two axes: “game-changingness” horizontally and “ability to respond in time” vertically. Force-directed bubbles, rendered as SVG circles using d3.forceSimulation, repel and settle into clusters, with point size scaled by d3.scaleSqrt. The code builds axes with d3.axisBottom and d3.axisLeft, applies hover effects with CSS, and uses a tooltip div for interaction. Data is generated randomly, with no external dataset.

JJimMaltby
87% match
Loading thumbnail…

ERP DisCal Chart - Scatter Plot type

This scatter plot visualizes the ERP Disruption Calculus, positioning each scenario by its 'ValueX' and 'ValueY' coordinates, which are derived from a randomly generated CSV dataset. The chart uses colored rectangles to divide the space into four quadrants, and circles are colored by their 'Group' category using a D3 ordinal scale. A D3 tooltip reveals the scenario's title and its four summary values (SumBU, SumEvo, SumGC, SumDis) on mouseover. The visualization is built with D3 v5, rendering to SVG, and includes animated transitions for the tooltip's opacity.

JJimMaltby
79% match
Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani
72% 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
72% match
Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani
71% match