DevZeonec

@DevZeonec·3 public vizzes

Fork of Organization Graph Diagram

This force-directed graph maps the network of connections among Kenneth Rainin Foundation grantee organizations, with larger colored nodes representing major initiatives and smaller nodes for affiliated programs. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute layout, rendering nodes and edges as SVG circles and lines that users can drag and reposition. Data is generated programmatically in data.js using color palettes from paletton.com, with all interaction handled through d3.drag methods.

Apr 20, 2024

Loading thumbnail…

SVG

This example renders a static scatterplot of 100 points with randomized positions and radii. Each point’s x and y coordinates are generated using `d3.randomNormal` with a mean of 0.5 and standard deviation of 0.15, clamped between 0 and 1, then mapped to pixel positions. The radius of each circle also comes from `d3.randomNormal`, with a minimum enforced at 3 pixels. The code imports D3 version 7.9.0 and uses a simple SVG-based rendering approach within a React application, though the visualization itself does not involve any interactive or animated behavior.

Apr 20, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates a minimal HTML page that uses CSS for styling and JavaScript for structure, displaying the text “Hello HTML!” in a large, centered font. The code defines a `.message` class with a font size of 13em and centers the content using `text-align`. It serves as a bare-bones introduction to combining HTML, CSS, and JavaScript in a single file, without any external libraries or frameworks.

Apr 19, 2024