Skip to main content
Log in
O

ocean1225

@ocean1225·15 public vizzes

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.

Mar 11, 2020
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.

Mar 11, 2020
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.

Mar 11, 2020
Loading thumbnail…

简易计时器

This example shows a simple timer interface with a text input displaying elapsed seconds and buttons for start, stop, and reset. The timer updates every second using `setInterval`, toggling an `index` flag to control whether the count increments. Clicking “开始” sets the flag to true, “停止” sets it to false, and “清零” resets both the counter and displayed value. The code directly manipulates the DOM via `document.getElementById` and `value` properties, without using a framework or external libraries.

Mar 11, 2020
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.

Mar 11, 2020
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.

Mar 11, 2020
Loading thumbnail…

JavaScript事件

This example demonstrates a simple user interface for selecting and previewing sound effects using native JavaScript event handling. The page provides a dropdown menu with four sound options and a "试听" (preview) button that triggers playback of a fixed audio file hosted remotely. The code uses the HTML `select` and `button` elements, with an inline `onclick` handler invoking the `playsound()` function. This function accesses the `audio` element by ID and calls its `play()` method, relying on the browser’s built-in HTML5 audio API rather than any external visualization libraries.

Mar 11, 2020
Loading thumbnail…

Untitled

This example demonstrates how HTML’s built-in audio element can be embedded directly into a React page, providing native playback controls. The code uses a standard `<audio>` tag with the `controls` attribute to render a play/pause interface and timeline for a horse.ogg file. It relies on React’s JSX syntax to declare the element, with no additional JavaScript libraries or custom audio APIs. The page is minimal, showing only the audio player without surrounding content, highlighting the simplicity of integrating media into a React application.

Mar 11, 2020
Loading thumbnail…

计时器

This example presents a functional digital stopwatch interface built with React. It displays elapsed time in hours, minutes, seconds, and milliseconds within a text input field. Three buttons control the timer: start, stop, and reset. The implementation uses JavaScript's `setInterval` and `clearInterval` to update the display every 50 milliseconds, incrementing time values and handling carry-over between units. The interface is rendered as plain HTML elements with inline event handlers, showing a simple interactive time-tracking tool without external data sources.

Mar 11, 2020
Loading thumbnail…

计时器

This example presents a functional digital stopwatch interface built with React. It displays elapsed time in hours, minutes, seconds, and milliseconds within a text input field. Three buttons control the timer: start, stop, and reset. The implementation uses JavaScript's `setInterval` and `clearInterval` to update the display every 50 milliseconds, incrementing time values and handling carry-over between units. The interface is rendered as plain HTML elements with inline event handlers, showing a simple interactive time-tracking tool without external data sources.

Mar 11, 2020
Loading thumbnail…

circle packing D3 Version 05(1)

This visualization combines a scatterplot with a circle-packing layout to display a hierarchical dataset of sound files. It positions parent nodes (sound names) according to their x and y coordinates while representing their child layers as nested circles, with circle sizes encoding the `size` attribute. The SVG rendering uses D3 v5, with axes and scales for numeric coordinates. Circles change color on hover, and the visualization includes a header displaying the filename. The data structure, defined in JavaScript, contains seven root sounds with multiple layer children.

Mar 5, 2020
Loading thumbnail…

Untitled

An interactive sound visualization displays a scatterplot of audio samples, each represented by a draggable circle colored by sound category (Clap, Whoosh, Punch, etc.) using d3.scaleLinear and d3.schemeCategory10. Clicking a circle plays the corresponding audio file via the Web Audio API and WebAudiox library, while a color legend filters highlights by category. Hovering shows tooltips, and the view supports zooming and panning through d3.zoom. The project uses D3 v3 with SVG rendering and imports from d3 modules for scales, axes, drag behavior, and data binding.

Mar 3, 2020
Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot displays sound samples categorized by type, such as Clap, Whoosh, or Gunshot, with each circle representing an audio file. Users can click circles to play sounds, drag them to reposition, and hover to see names. Selecting a legend item highlights matching sounds and dims others. Built with D3 v5, it uses SVG for rendering, d3.zoom for panning and scaling, d3.drag for circle movement, and the WebAudiox library with the Web Audio API for playback.

Feb 26, 2020
Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This example demonstrates a circle packing visualization that encodes hierarchical data as nested circles, where the area of each circle represents a numeric size value. The visualization shows a dataset of car acquisition and trading history, with parent-child relationships defined by the CSV structure. The implementation uses d3.v4's `d3.stratify` to process the tabular data, `d3.hierarchy` with a size summation function to compute the tree structure, and `d3.pack` to generate the circle layout. Circles are rendered as SVG elements with white strokes and semi-transparent blue fills.

Feb 24, 2020
Loading thumbnail…

Scatter Plot with Layers

A scatter plot displays sound samples as colored circles, organized by category such as Clap or Gunshot. Hovering reveals the sample name, clicking plays the audio via the Web Audio API, and dragging repositions circles. The visualization uses D3 v5 with SVG rendering, supporting zooming, panning, and a clickable legend that filters data by category. A drag behavior updates circle positions, while a color scale maps each sound type to a distinct category color.

Feb 16, 2020