dragan.gorgiev@gmail.com

@DraganGyorgiev·3 public vizzes

Fork of Fork of HTML Starter

A force-directed network diagram visualizes relationships between arts and community organizations. Nodes are color-coded by parent category and sized by hierarchy level. The D3 v7 simulation applies many-body forces, distance-based link springs, and a centering force. The code uses `forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`, and `drag` APIs to create an interactive, draggable SVG graph.

May 7, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows a tiny force-directed graph with three nodes (Alice, Bob, Carol) and two directed links, animated as the nodes repel and attract each other within an SVG canvas. The simulation uses D3's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` APIs to calculate positions each tick. Avatar circles and connecting lines are rendered as SVG elements, with coordinates updated directly from the simulation's `tick` event.

May 6, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates the essential building blocks of SVG graphics by rendering a single circle element within an HTML document. The visualization showcases the core syntax of the SVG markup language, using attributes such as `cx`, `cy`, and `r` to define the circle’s center coordinates and radius on a two-dimensional plane. The code relies on native SVG support built directly into modern web browsers, requiring no external JavaScript libraries or frameworks. The circle is drawn with a default black fill, which can be customized through standard SVG presentation attributes for stroke and fill styling.

Apr 2, 2024