bindas1

@bindas1·3 public vizzes

Fork of D3 Starter

This example demonstrates the simplest possible D3 setup: a blank page that displays the text “Hello D3 version 7” in the center, using a large 13em font size. It shows how to load D3 v7 from a CDN and write minimal code to manipulate the DOM. The implementation uses `d3.select` to target the `body` element and sets its text content directly, with the JavaScript logic contained in a separate `bundle.js` file while the HTML defines the styling and loads the library.

Nov 26, 2023

Loading thumbnail…

LeWitt Reproduction vertical

This example recreates a Sol LeWitt-inspired drawing using only SVG elements, producing a grid of alternating horizontal and vertical lines that intersect within two circular masks. The code generates 100 horizontal rectangles and 100 vertical rectangles, each 10 pixels thick, and uses two SVG masks—one with a white circle on black and another with a black circle on white—to reveal different line orientations in concentric regions. The visualization is built entirely with native DOM methods like `createElementNS` and `setAttribute`, without relying on D3.js, despite the accompanying `index.js` file importing `select` from D3.

Nov 26, 2023

Loading thumbnail…

Performance Spectrum

The visualization displays the classic Iris dataset as a parallel coordinates plot, with each axis representing a measured feature (sepal length, sepal width, petal length, petal width) and the categorical species class. Each line tracks an individual flower across the axes, and the CSS classes color-code the three species (Iris-setosa, Iris-versicolor, Iris-virginica). Users can drag the axis labels to reorder dimensions, triggering a redraw via `d3.scalePoint` and `d3.line`. The axes are rendered using `d3.axisLeft` and `d3.axisBottom`, with animated transitions managed through D3's `join` operation on SVG paths.

Nov 26, 2023