AS251998

@AS251998·5 public vizzes

Exclusive data

This example shows a zoomable sunburst visualization of the Flare software package’s module hierarchy, where each arc segment represents a class and its size corresponds to the class’s value. Clicking a segment animates the layout to focus on that subtree, with smooth transitions handled by `transition.attrTween` and interpolated arc geometry. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` with SVG rendering, and loads hierarchical data from the `@observablehq/flare` dataset via Observable’s stdlib `require` mechanism.

May 13, 2021

Loading thumbnail…

Loading( BA401)

This example demonstrates dynamic list manipulation with D3.js, showing how to generate and display data-driven list items in an HTML page. The visualization uses D3's `select` and `selectAll` APIs to target HTML list elements and populate them with an array of numeric values [10, 20, 30, 25, 15]. Each dynamically created list item displays its corresponding value via a text function, and an interactive button triggers the removal of the fourth value from the list. The code relies on D3 v4 in a plain HTML/CSS/JavaScript environment, without external data sources.

May 10, 2021

Loading thumbnail…

Untitled

This example demonstrates a dynamic HTML list that displays five numeric values, with a button that removes the fourth value from the list. The page uses D3.js v4 to select the list items and bind the data array to them, dynamically generating each list item with a text string that includes the corresponding data value. The `d3.select` and `selectAll` methods apply the data to the existing `<li>` elements, while a custom `remove()` JavaScript function is defined but not implemented in the visible code. The styling uses basic CSS with an Arial font, and the page is built as a standalone HTML file.

May 10, 2021

Loading thumbnail…

Is it Really Fun?

A yellow smiley face with eyes, eyebrows, and a mouth is animated using D3.js. The code demonstrates fundamental DOM manipulation by selecting SVG elements and using D3 transitions to move the eyebrows up and down over two-second intervals. The face is rendered entirely with SVG shapes, including circles for the eyes and an arc path for the mouth. This example illustrates basic D3 selection, attribute setting, and transition chaining without external data.

May 7, 2021

Loading thumbnail…

TRYING!

This example uses React to render a single centered message, “Hello React!”, at a very large font size. The page displays the text as a static visual statement, with styling applied through a CSS class. The code creates a functional component, `App`, and mounts it into the DOM using `ReactDOM.render`. It loads React and ReactDOM from UMD builds via a script tag, with the application logic bundled separately. The visualization is purely typographic and does not involve data processing or external datasets.

May 6, 2021