Miyamotodan

@miyamotodan·3 public vizzes

New Prj

This example demonstrates a node-link diagram of a small directed graph, where six nodes (A through F) are connected by weighted edges. The visualization uses an interactive SVG rendering with a custom zooming mechanism, allowing users to pan and scale the entire scene. The graph structure is defined in JavaScript, with nodes randomly positioned on the canvas. The implementation leverages D3.js v5, specifically using the `select` and `scaleLinear` APIs, alongside a custom `d3.zoom` interaction to handle transformations. Rendering is split into separate functions for nodes and edges, with path generation calculated via an arc formula to create curved connections. The animation is achieved through D3 transitions that smoothly update node and edge positions over time.

Jun 1, 2020

Loading thumbnail…

Bowl of fruit - nested

Five animated fruit objects—apples and lemons—populate a bowl and rearrange over time. A JavaScript array of fruit objects changes through removal and replacement, and each alteration triggers a re-render. Using D3 v5 with SVG, the `data join` pattern manages enter, update, and exit transitions. Fruits animate from random positions into a row and back out, with size and color mappings distinguishing types. The example uses D3's `select`, `range`, `scaleOrdinal`, and `.transition().duration()` for smooth movements.

May 24, 2020

Loading thumbnail…

Bowl of fruit

A bowl of fruit demonstrates data joins with enter, update, and exit selections. Apples and lemons appear as colored circles that animate in, move, and shrink away as the dataset changes over time. Built with D3 v5, the example uses `selection.data`, `merge`, and `transition` to handle dynamic updates, while `scaleOrdinal` maps fruit types to colors and radii. The SVG circles animate their position and size over one-second transitions.

May 23, 2020