aissatheprogrammer

@aissatheprogrammer·9 public vizzes

Fork of HTML Starter

This example renders a radar chart displaying twelve hours of the day as labeled radial axes. It uses the `d3-radar` module’s `radarChart` function, configured with a radius of 100 pixels and labels from the input array of numbers 1 through 12. D3’s `d3.select` binds the data to the chart and renders it into the body. The page includes minimal HTML and CSS styling for the centered message.

Dec 7, 2022

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 6.6.1, rendering directly to an SVG element. The visualization fills the entire browser window by setting the SVG dimensions to the screen width and height, and begins by drawing a single black circle at a fixed offset. The code imports `select` and `range` from D3, though only `select` is currently used to append the SVG and circle, leaving the artwork's full structure incomplete. The rendering approach relies on basic SVG primitives within an HTML page that hides scrollbars for a clean, full-screen presentation.

Nov 29, 2022

Loading thumbnail…

d3 tutorial code camp

This example generates a pattern of horizontal and vertical bars overlaid with two circular masks, revealing a cross-hatched grid within a circular window. The visualization uses D3 v6 to create SVG rectangles and mask elements, with `select` and `range` from the d3 library. Data is generated programmatically with a loop for horizontal bars and `range` for vertical bars, while masks combine white and black shapes to control visibility. The result demonstrates how SVG masks can create layered geometric compositions.

Nov 26, 2022

Loading thumbnail…

d3 art

This example renders a series of red horizontal rectangles across the full screen using SVG, with each rectangle positioned at a fixed y-coordinate. The code builds an array of mark objects and uses D3 v5's `select`, `range`, and `append` methods to create the shapes, while the HTML page loads D3 from a CDN. The visualization is minimal, showing only stacked red bands without interaction or animation.

Nov 25, 2022

Loading thumbnail…

D3

This example presents a blank canvas with no visible data visualization. It consists of a minimal HTML page with an empty stylesheet and a body containing no elements. The code uses only standard HTML structure, with no JavaScript libraries, APIs, or rendering logic implemented. It demonstrates a starting point for a project, showing an empty document ready for development, with no data sources or visual output to display.

Nov 24, 2022

Loading thumbnail…

Untitled

A minimal interactive visualization using React and D3 v6 displays a blank canvas that fills the browser window. The page sets the body to hide overflow and logs the computed height to the console, but no data or visual elements are rendered. The code imports the full D3 library but does not call any visualization functions, leaving the space empty. It demonstrates a bare-bones setup for future chart development, relying on `window.innerWidth` and `window.innerHeight` for sizing.

Nov 24, 2022

Loading thumbnail…

svg star

This example shows a simple geometric star composed of five black line segments arranged on a blank SVG canvas. The code uses raw SVG elements, specifically `<line>` tags, with hardcoded `x1`, `y1`, `x2`, and `y2` attributes to define each stroke, creating the outline of a five-pointed star shape. Rendered as static vector graphics, the visualization relies entirely on standard SVG syntax without any JavaScript or additional libraries, and the shape is fixed in the HTML markup without interactivity or data binding.

Nov 21, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL. It displays the file size in kilobytes, the row count, and the column count of the dataset using D3 v5’s `d3.csv` method. The visualization also includes commented-out alternatives using `fetch` with `async`/`await` and `d3.csvParse`. The data comes from a GitHub Gist containing CSS named colors, and results appear as text in a large `<pre>` element.

Nov 21, 2022

Loading thumbnail…

Smiley face part 1

A smiling face built from modular React components renders in SVG. The face is composed of a violet background circle, two green eyes, and a mouth drawn using a D3 arc generator with a specified inner and outer radius. The FaceContainer component manages the SVG dimensions and translates the coordinate system to center the face. No data is loaded; the visualization is purely declarative, using D3 only for the arc path calculation.

Nov 21, 2022