Skip to main content
SimilarExport ZIP
100%

ScatterPlot circlepacking D3 Version 05

✓ Published2🌍 Public
JJaloYang
Last edited Mar 17, 2020
Created on Jan 20, 2020
Forked from Cars Report

A hybrid visualization combines a scatter plot with circle packing to represent hierarchical sound design data. Using D3 v5 within a React framework, the SVG scene maps top-level sound categories (like Clap or Gunshot) as scatter points positioned by `xRange` and `yRange` scales, with nested child layers packed via `d3.pack`. Interactive hover events display sound names, while click events increment a visual counter. The interface integrates audio playback controls and a timer, though the core focus remains the layered spatial encoding of sound file relationships.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This interactive visualization merges a scatterplot with a circle-packing layout to map sound files and their component layers. Each top-level node represents a sound, positioned by its normalized x/y coordinates, while nested children are packed into circles whose sizes reflect their `value` attributes. The D3 v5 (d3.v5) code uses a force-directed simulation to resolve overlaps between nodes, rendering them as SVG circles. Hovering highlights nodes in red per the CSS. A JavaScript timer and sound-preview selector provide playback controls, though the core graphic remains a static, animated-free representation of hierarchical audio data.

Oocean1225
93% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example visualizes a hierarchical sound library as a circle-packing layout, with parent nodes representing sound categories like gunshots and explosions, and child nodes for individual layer files. The visualization uses D3 v5’s `d3.hierarchy` and `d3.pack` to generate the nested circles, rendered in SVG with hover effects that change circle fill color. Audio controls let users select and play a target sound, with a timer and play/mute buttons implemented in JavaScript, while leaf values modulate circle sizes.

JJaloYang
92% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example demonstrates a hybrid scatter plot and circle-packing visualization for layered sound effects, using D3.js v5 with SVG and animation. Hierarchical audio sample data, such as Clap01 and Gunshot01, is mapped to nested circles positioned by custom `scatX` and `scatY` coordinates. The visualization renders via `d3.select` and `d3.scaleLinear` for axes, with interactive hover styling through CSS. A timer interface and sound selection drop-down accompany the chart, enabled by jQuery and custom JavaScript timer functions.

Oocean1225
91% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example combines a scatter plot with a circular packing layout to visualize a hierarchical dataset of sound files, where each parent node represents a sound category and its children are individual audio layers. The visualization uses D3 v5 to render an SVG, with circles positioned according to normalized x/y coordinates from the data. Hovering highlights circles in red with reduced opacity, while a set of timer controls and a sound selection dropdown provide interactive utility features. The code leverages D3’s scales for coordinate mapping and jQuery for DOM manipulation.

Oocean1225
91% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example combines a scatter plot with circle packing to visualize hierarchical sound data. It shows a root node with children representing sound files, each containing layered sub-nodes with numeric values. The visualization uses D3 v5 to render SVG circles and text, with hover effects that change circle fill to red. The interface includes a timer with start, stop, and reset buttons, as well as a sound selection dropdown with a preview button. The data is embedded directly in the code, and the layout uses custom positioning based on scatX and scatY coordinates.

Oocean1225
91% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example combines a scatter plot with a circle-packing layout to visualize a hierarchical collection of sound files and their layers. Each parent node (such as Clap01.wav) is positioned using x and y coordinates defined in the data, while child nodes representing individual audio layers are packed into circles. The visualization uses d3.hierarchy and d3.pack to compute the nested circle layout, with d3.scaleLinear handling the spatial mapping. Hovering over any circle highlights it in red via CSS transitions, and all elements are rendered as SVG.

JJaloYang
90% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example visualizes a hierarchical dataset of sound files as an animated scatterplot and circle packing diagram using D3 v5. Root nodes represent audio categories positioned by their `scatX` and `scatY` coordinates, while child nodes appear as packed circles sized by their `value`. The layout is rendered as an SVG, with interactive hover effects that change circle colors. Additionally, the visualization includes a timer, audio playback controls, and a file selector, demonstrating integration of multiple JavaScript libraries alongside D3's selection and scale APIs.

Oocean1225
90% match
Loading thumbnail…

circle packing D3 Version 05

A circle packing visualization displays hierarchical sound effect data, with nested circles representing audio layers and their relative sizes. The visualization uses D3 v5's `d3.pack` layout to position circles, rendered as SVG elements within a React framework. Users can hover over circles to change their color and click on them to trigger audio playback via the Web Audio API, while transitions animate layout updates. The data comes from a JSON file containing sound effect names and layer sizes, demonstrating interactive hierarchical data exploration with embedded audio playback.

JJaloYang
88% match