CosmosDude1

@CosmosDude1·6 public vizzes

js

A plain HTML page displays the static message “Hello HTML!” in large, centered text. The example uses CSS to size the text at 13em and center it, with JavaScript included but not exercised in the visible code. The page is a minimal demonstration of core web technologies, serving as a starting point for building interactive visualizations with React and D3, as referenced in the accompanying README. The package.json lists an empty d3 dependency but no D3 APIs are used in this file.

Feb 3, 2023

Loading thumbnail…

Get it Right - 3: Sol Lewitt (JS)

This example generates an abstract geometric composition in the style of Sol Lewitt, using an SVG canvas. Vertical and horizontal rectangles with thick beige strokes are layered over a darkslateblue background, with horizontal bands clipped by an SVG mask to create a central rectangular window. The code manipulates SVG elements directly with JavaScript, rebuilding the scene on an interval using `setInterval` and varying the line width to shift the pattern. The mask, defined with `mask` and `rect` elements, controls the visible region.

Jan 28, 2023

Loading thumbnail…

svg fundamentals

This example demonstrates fundamental SVG shapes and CSS interactions within a React-based visualization. It renders a large blue circle, two smaller red circles, navy lines, and a path on an SVG canvas, all styled with CSS. Hovering over a circle triggers a three-second transition that changes its fill color, stroke, width, and scale. The code uses raw HTML, CSS, and JavaScript, with SVG elements like `circle`, `line`, and `path`, showcasing basic styling and dynamic hover effects without external libraries.

Jan 27, 2023

Loading thumbnail…

javascript svg

This example generates a full-screen SVG visualization using the browser’s native Document Object Model (DOM) APIs. It creates 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the full height of the window. The rectangles are appended to an SVG element created via `document.createElementNS`, with dimensions set from `window.innerWidth` and `window.innerHeight`. The code runs directly in an HTML page with no external libraries, demonstrating a simple programmatic approach to SVG rendering in a React-hosted environment.

Jan 27, 2023

Loading thumbnail…

Untitled

A circle packing chart displays the top 250 IMDb movies, organized hierarchically by genre, with each bubble sized by gross earnings. Hovering over a film reveals a custom HTML tooltip containing the title, year, runtime, synopsis, and a movie poster image. The visualization uses AnyChart’s `circlePacking()` chart type with data loaded via `loadJsonFile()` from a remote JSON source. Tooltips employ `useHtml(true)` with a formatted number scale, while the chart applies dark fills and stroke styling based on source colors.

Jan 26, 2023

Loading thumbnail…

Untitled

This visualization presents three labeled horizontal bars (A, B, C) as a chart, with the bars rendered as gray rectangles of decreasing lengths. The first bar is overridden to red via a CSS class named `.first`. The SVG is drawn directly in the markup, using the Share Tech webfont for large 80px text labels. The code uses no external JavaScript or charting libraries; it relies on static SVG elements and inline CSS styling.

Jan 26, 2023