Skip to main content
Log in
J

JaloYang

@JaloYang·25 public vizzes

Loading thumbnail…

js操作svg实现整体缩放

This example demonstrates how to zoom an entire SVG scene using JavaScript, with a grid background and a red circle as the visual content. The zoom function updates the `transform` attribute of a group element containing the circle and grid, scaling it by a factor of 1.1 or 0.9 via buttons. The grid is dynamically drawn using SVG elements created with `document.createElementNS`, and the scaling applies to all grouped elements uniformly. It uses the native DOM API for SVG manipulation, without external libraries.

May 7, 2020
Loading thumbnail…

JS Bin

This example demonstrates scroll-position detection within a fixed-height container using vanilla JavaScript. The page defines two nested divs: an outer scrollable `divContainer` with a 200-pixel height and an inner `divContent` containing twelve sample paragraphs. When the user scrolls to the bottom, the code triggers an alert and dynamically expands the inner div’s height to 1000 pixels. The implementation relies on the container’s `onscroll` event handler and compares `scrollTop`, `scrollHeight`, and `offsetHeight` properties to determine when the bottom is reached.

May 5, 2020
Loading thumbnail…

新增按钮

This example demonstrates how to dynamically add and remove content blocks in a web page. Clicking the “新增” button creates a new row containing a text span and a “删除” delete button; clicking any delete button removes its corresponding row, but only if more than one row remains. The implementation uses plain JavaScript with the `document.createElement`, `appendChild`, and `addEventListener` methods to manipulate the DOM, and the page structure is defined in a single HTML file.

May 4, 2020
Loading thumbnail…

Untitled

This example demonstrates a fixed-position news list that remains visible while scrolling through a page layout with header, content columns, and footer. The right-side list box uses jQuery scroll events to switch between fixed positioning and bottom-anchored placement, depending on scroll position relative to the content area and footer height. The layout is built with HTML and CSS using floats and a clearfix hack, while the interactive behavior relies on jQuery’s `scroll()` and `height()` methods. The page uses a simple red header, tan content blocks, and a blue fixed box.

May 4, 2020
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.

Apr 14, 2020
Loading thumbnail…

Scatter Plot with Layers UMAP

This interactive scatter plot displays audio samples as draggable circles, UMAP-embedded by x/y coordinates, with each circle playing its associated sound on click. The visualization uses d3.v5 for SVG rendering, d3.zoom for pan/zoom controls, and d3.drag to move circles, while the WebAudiox API manages audio playback through a `createBufferSource`. Hovering reveals a sample's name via a `<title>` element, and a color legend filters sounds by category. The code also references a CirclePack.json for potential layer relationships, though not yet implemented.

Apr 14, 2020
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

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.

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

Mar 7, 2020
Loading thumbnail…

D3 v5 Circle-Packing

This example implements a circle-packing visualization using D3 v5, displaying a hierarchical dataset from the Flare library. The diagram shows a nested arrangement of circles, where each circle represents a data node, with its size proportional to a value and color indicating depth in the hierarchy. Built with D3’s `d3.stratify` and `d3.pack` APIs, it renders to SVG, applying a sequential magma color scale. Interactive mouseover highlights ancestor nodes, while leaf labels are clipped via `clipPath`, and tooltips show the node ID and value.

Mar 7, 2020
Loading thumbnail…

circle packing D3 Version 03

A circle packing visualization displays sound file names as nested circles, with each root circle representing a WAV file and child circles representing its layers. The SVG animation runs on D3 v3, using `d3.layout.pack` to position the hierarchy. Circles are colored blue, turn red on hover, and data is hardcoded as a JSON structure in the script.

Mar 7, 2020
Loading thumbnail…

circle packing D3 Version 05

This interactive circle packing visualization displays hierarchical audio file data as nested bubbles, with each node representing a sound effect and its associated layers. Built with D3 v5 and React, the visualization uses `d3.pack` to generate the circular layout and renders via SVG. Users can explore the hierarchy through hover effects that highlight leaf and ancestor circles, while a Web Audio API integration allows playback of individual audio files when clicking on nodes. The code also incorporates jQuery for keydown event handling and includes axis scales from `d3.scaleLinear` for coordinate reference.

Mar 7, 2020
Loading thumbnail…

circle packing D3 Version 05

A hierarchical circle packing visualization maps an audio effects library into nested bubbles, with root nodes representing sound categories (Clap, Gunshot, MetalHit) and child nodes encoding individual waveform layers. The D3 v5 layout uses `d3.hierarchy` and `d3.pack` to compute circle positions, while `d3.forceSimulation` applies force-directed scattering to separate clusters. SVG circles render with partial opacity, and hovering highlights nodes red through CSS transitions. The code reads from an embedded `soundData` JSON structure, assigning each leaf a proportional area based on its `value` attribute, with the visualization updating dynamically as the simulation settles.

Mar 7, 2020
Loading thumbnail…

circle packing D3 Version 05

This example visualizes a hierarchical audio sample library as a circle packing diagram, where parent nodes represent sound categories like Clap, Gunshot, and MetalHit, and leaf nodes correspond to individual audio layers with proportional values. Built with D3 v5, the SVG rendering uses the script’s inline `soundData` object, scaling circle areas by `value` attributes to convey layer weight. Interactive hover feedback is applied via CSS classes: leaf circles turn red and ancestor circles yellow, highlighting the nested structure. The code also includes commented-out axis scales, but the primary focus is the packed circle layout.

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

Mar 5, 2020
Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot visualizes sound-effect files and their layered components as color-coded circles, with each main sound accompanied by its sub-layers. Built with D3 v5, it uses SVG and canvas rendering, enabling users to play audio by clicking circles, pause with the Q key, drag overlapping circles, and zoom or pan the view. A legend filters sounds by category, and hover reveals file names. The visualization incorporates Web Audio API via webaudiox.js for sound playback and jQuery for keyboard event handling.

Mar 3, 2020
Loading thumbnail…

circle packing D3 Version 03

A hierarchical dataset of sound effect layers is visualized as a circle packing diagram, where each nested circle represents a file, with the outer circle naming the sound and inner circles its individual WAV layers. Built with D3 v3’s `d3.layout.pack`, the SVG renderer sizes circles by file size and applies radial gradients. Clicking a circle plays the corresponding audio file via the Web Audio API, creating an interactive sound exploration interface.

Feb 5, 2020
Loading thumbnail…

Scatter Plot with Legends

This interactive scatter plot maps sound samples by their audio features, with color-coded categories such as Clap, Gunshot, and Whoosh. Users click circles to play audio, press Q to stop playback, and select legend items to highlight categories. The visualization supports zooming, panning, and dragging circles to explore overlapping points, with hover tooltips revealing names. Built with D3 v5, it uses SVG rendering, d3-drag for interactions, and the WebAudiox API for audio playback, displaying data from a JSON file.

Feb 5, 2020
Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes audio samples (claps, gunshots, whooshes, punches, roars, metal hits, and swishes) from a sound dataset, plotting each sample’s x and y coordinates as circles. It uses d3.v5 with SVG rendering, featuring an interactive color legend that filters and highlights points by sound category via click events. The plot also supports zooming and panning through d3.zoom, and displays tooltips with sample names. Data is loaded from soundData.json, with colors assigned using d3.schemeCategory10.

Jan 28, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map of world economies uses a spectral color scale to represent income groups, with a clickable color legend that filters the map by category, dimming non-selected countries. The visualization supports pan and zoom via d3.zoom, and displays country names and values as tooltips. Built with d3.v5 and the geoNaturalEarth1 projection, it renders SVG paths from TopoJSON data enriched with TSV metadata.

Jan 28, 2020
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. The visualization renders geographic boundaries with d3.geoPath and a natural Earth projection, with zooming enabled via d3.zoom. Hover effects highlight individual countries, and a custom color legend built with SVG circles and text explains the color categories. Country names and economic data are loaded from TopoJSON and TSV files using d3.json and d3.tsv.

Jan 27, 2020
Loading thumbnail…

Car Report

This car report displays a filtered list of vehicles from a hardcoded JSON array, showing each car’s year, make, model, and price. It uses React with a simple DOM manipulation, fetching data from `cars.js` via `Cars` import. The `generateReport` function applies `Array.filter` to select cars under a maximum price (4000) and `Array.map` with `formatCar` to produce formatted text lines. The resulting text is rendered inside a `<pre>` element using `innerHTML`.

Jan 21, 2020
Loading thumbnail…

Car Report

This car report displays a filtered list of vehicles from a hardcoded JSON array, showing each car’s year, make, model, and price. It uses React with a simple DOM manipulation, fetching data from `cars.js` via `Cars` import. The `generateReport` function applies `Array.filter` to select cars under a maximum price (4000) and `Array.map` with `formatCar` to produce formatted text lines. The resulting text is rendered inside a `<pre>` element using `innerHTML`.

Jan 21, 2020
Loading thumbnail…

HTML Starter

This example displays the letter "B" in large, centered text on a plain HTML page. It demonstrates a minimal setup using vanilla JavaScript to set the text content of an HTML element, identified by its ID, via `document.getElementById`. The page's styling is applied through a CSS rule in a `<style>` block within the HTML. The code logs the element to the console and showcases fundamental DOM manipulation without external libraries.

Jan 21, 2020
Loading thumbnail…

Cars Report

This example displays a static "Cars Report" page rendered through React, with a large, centered body text and empty message container. The visualization uses HTML and CSS for layout, while the `index.js` file defines a simple message variable but does not attach it to the DOM. The page loads a precompiled `bundle.js` script, suggesting a build pipeline, but no interactive charts or data-driven graphics are present in the code.

Jan 20, 2020
Loading thumbnail…

Sound Effect Explorer

Sound Effect Explorer plots a collection of WAV file names as labeled points on a dark, space-themed canvas, using precomputed 2D coordinates from a static JSON dataset. The example demonstrates basic D3.js selection and DOM manipulation, setting the text content of a message div to display the first file name. It imports a local ES6 module, `myMessage.js`, to parse the data and relies on `d3.select` from the D3 v5 library, though it does not currently render the full scatter plot or any interactive or force-based layout.

Dec 5, 2019