nore2310

@nore2310·4 public vizzes

Untitled

This example uses D3 v4 to bind an array of data values to list items in an HTML page. It selects all existing `<li>` elements within an unordered list with the ID `list`, assigns the data array `[10, ...]` to them, and provides a button that triggers a `remove()` function via inline JavaScript. The page demonstrates fundamental data joining and simple DOM manipulation with D3, rendering the bound values into the list items while the button interacts with the dataset. The approach relies on D3’s `selection.data()` method and native browser event handling.

May 10, 2021

Loading thumbnail…

BA 401 SMILEY FACE

A simple SVG smiley face rendered in React, using D3’s `arc()` to generate a curved mouth. The face consists of a yellow circle with a blue stroke, two black eye circles, and a half-ring mouth, all positioned within an SVG group. Built with React 17 and D3 v6, the visualization is purely static and displays centered on a 900×450 canvas. The code uses `ReactDOM.render` to mount the component and D3’s `arc` API to define the mouth’s inner and outer radii and its angular span.

May 6, 2021

Loading thumbnail…

BA401 SIMILEY FACE

This example visualizes a simple smiley face constructed from basic SVG shapes. A green circle with a red stroke forms the head, two black circles serve as eyes, and a mouth is drawn using a D3 arc path. The visualization is rendered through React, with D3’s `arc` API used to generate the mouth’s curved path. The SVG canvas is 700 by 700 pixels, and the face is centered using a translation transformation. The code demonstrates how D3 utilities can be integrated into a React component to create static, geometric graphics.

May 6, 2021

Loading thumbnail…

Smiley face with D3.JS

A yellow smiley face with a black outline is drawn on a red background using D3.js, and its rectangular eyebrows animate by moving upward and then returning to their original position. The visualization demonstrates fundamental DOM manipulation with d3.select and svg.append, using D3’s arc generator for the mouth, and chained transition methods with a 2000-millisecond duration to create the repeating eyebrow motion. The code imports select and arc from D3 and renders everything as SVG elements.

May 6, 2021