salemprakash

@salemprakash·5 public vizzes

Untitled

This radial tree diagram displays the hierarchical structure of the Flare dataset, with nodes arranged in concentric circles around a central root. D3’s `stratify` and `tree` layouts compute the radial positions, while `d3.linkRadial` draws the curved connecting paths. Nodes are rendered as SVG circles and labels, with internal nodes distinguished by darker fills, and text orientation adjusts based on each node’s angular position.

Jan 31, 2023

Loading thumbnail…

Network Viz

This example presents a minimal web page titled “Network Viz” that displays the static text “Hello HTML!” in large, centered typography. It demonstrates a basic HTML structure styled with CSS and includes no interactive network visualization. The implementation uses plain HTML elements with a CSS class for styling, and the JavaScript file is referenced but not defined. It serves as a starting point for building React-based visualizations. The rendering relies on standard DOM manipulation without any external charting or network libraries.

Jan 31, 2023

Loading thumbnail…

Untitled

This example shows a static bar chart with three orange rectangles representing the values 5, 10, and 12, each labeled with white text. The chart is rendered as an SVG using d3.v4, though the bars are manually placed in groups rather than generated dynamically. The page also includes commented-out code demonstrating a CSS transition that changes a div’s background from magenta to red over ten seconds, alongside a basic README referencing a React starter template.

Jan 24, 2023

Loading thumbnail…

Untitled

A minimal D3 example demonstrates a simple color transition on a black square. The visualization shows a single `div` element changing its background color from black to red over ten seconds. The code uses D3 v4’s selection and transition API, calling `d3.select` and `.transition().duration().style()` to animate the style property. The page also includes a video tutorial link and a separate `index.js` file that imports `select` from D3 v7 to write text into the body, though this script is not referenced in the HTML.

Jan 24, 2023

Loading thumbnail…

First SVG

A minimal SVG scene contains two overlapping red and blue circles, a navy diagonal line, and a black polyline. The markup draws these shapes with hard‑coded coordinates: a large red circle with a smaller blue center, a rectangle stroke, a thick navy line, and a black path. The SVG is embedded directly in HTML without JavaScript or external libraries. The code includes commented‑out elements, and the path uses absolute coordinates, demonstrating basic vector primitives and SVG attribute syntax.

Jan 24, 2023