Chezka Siño

@chezka-sino·3 public vizzes

GG vs JDG

This Sankey diagram visualizes damage dealt by League of Legends teams GG and JDG to individual players during Game 3 on May 12, 2023. The flow splits from the match into team totals, then further distributes into per-player contributions, with node widths proportional to damage values. Built with D3 v4 and the `d3.sankey` layout, it uses SVG paths for links and draggable rectangles for nodes, loading data from a CSV file. The chart supports interactive node repositioning, which recalculates link paths via `sankey.relayout()`.

May 13, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational elements of SVG rendering in a browser, using plain HTML, CSS, and JavaScript without any external libraries. It shows how to construct a basic SVG scene by manipulating the Document Object Model (DOM) through JavaScript, though the code itself contains no visible drawing instructions or data. The page initializes an empty HTML structure with a title, leaving the SVG canvas and its contents entirely unpopulated. It serves as a minimal starting point for exploring SVG syntax and React integration, referencing a separate React Starter template for more advanced usage.

May 9, 2023

Loading thumbnail…

Smiley Face Part I

A yellow smiley face is rendered as three SVG circles inside a 960 by 500 viewport, with two black eyes positioned symmetrically around the center. The code uses React and ReactDOM to declaratively create the SVG elements, setting circle radii and offsets through variables like `centerX`, `centerY`, `eyeOffsetX`, `eyeOffsetY`, and `strokeWidth`. The face is drawn with a yellow fill and a black stroke, while the eyes are plain black circles.

Mar 8, 2022