velitetik@gmail.com

@veli-tetik·4 public vizzes

Fill & Stroke

The gallery displays two sets of geometric shapes—rectangles, circles, and curved paths—positioned on a blank 960×500 SVG canvas. The first grouping renders with default black fills and no strokes, while the second demonstrates fill and stroke styling using white fills and thick black outlines. Curved path elements appear as interconnected arcs and irregular polygons, defined by explicit cubic Bézier coordinates. The example is authored by veli-tetik, rendered as standalone SVG markup, and uses no external libraries, relying solely on native SVG shape elements and their presentation attributes.

Aug 29, 2024

Loading thumbnail…

style

Six colored circles animate onto a light green background, expanding from zero radius to varied sizes at staggered intervals. After all circles are visible, a second, faster transition updates their positions, shifting them to new coordinates with a linear easing. The example uses D3 v7's `transition()` API with custom durations and delays, joining data to SVG circle elements via `selectAll().join()`. Entering elements grow slowly over two seconds, while updates move in 500 milliseconds, showcasing D3's built-in animation capabilities.

Aug 29, 2024

Loading thumbnail…

pivot D3.js

This example demonstrates a pivot table visualization built with D3.js v6, displaying aggregated expense data grouped by head group and expense type. The table organizes rows hierarchically, with parent rows for each head group and nested sub-rows for expense types, alongside a calculated total column derived from summing the 'Amount' field. The code employs D3's `d3.group()` and `d3.sum()` APIs for data grouping and aggregation, then constructs an HTML table structure dynamically using `select`, `append`, and `enter()` to render rows and cells. The source data is a static array of expense records, and the rendering approach uses standard D3 DOM manipulation to create the tabular layout.

Aug 28, 2024

Loading thumbnail…

fork

This example demonstrates the basic building blocks of SVG graphics using a static, hand-coded scene. It shows how to create primitive shapes—circles, a rectangle, and a line—within an SVG canvas, distinguishing between default black fills, explicit red fills, and styled strokes with custom colors and widths. The code uses the raw SVG API directly in an HTML document, with attributes like `cx`, `cy`, `r`, `x`, `y`, `stroke`, and `stroke-width` to define geometry and presentation. The scene serves as a minimal, non-interactive visualization, illustrating the foundational syntax for plotting points and drawing simple vector shapes.

Aug 28, 2024