Skip to main content
Log in
M

Mo

@M0JaX999429·5 public vizzes

Loading thumbnail…

Red-Black Binary Tree

This example visualizes a red-black binary tree, demonstrating node insertion and layout in real time. It uses D3.js v4 with a force-directed simulation (`d3.forceSimulation`) to position nodes, applying forces for body repulsion, link attraction, and depth-based horizontal/vertical positioning. Users can toggle between SVG and Canvas rendering, with an optional low-resolution Canvas mode on high-DPI displays. The tree structure is built via `d3.binaryTree`, and the code instruments the `insert` method to animate each new node’s placement before re-rendering.

Oct 21, 2020
Loading thumbnail…

Red-Black Binary Tree

This example visualizes a red-black binary tree, demonstrating node insertion and layout in real time. It uses D3.js v4 with a force-directed simulation (`d3.forceSimulation`) to position nodes, applying forces for body repulsion, link attraction, and depth-based horizontal/vertical positioning. Users can toggle between SVG and Canvas rendering, with an optional low-resolution Canvas mode on high-DPI displays. The tree structure is built via `d3.binaryTree`, and the code instruments the `insert` method to animate each new node’s placement before re-rendering.

Oct 21, 2020
Loading thumbnail…

First tutorial with d3.js

This example shows a yellow cartoon face drawn with basic SVG shapes, including two eyes and a curved mouth, all centered in a 960×500 viewport. The code uses d3-selection to manipulate the SVG and d3-shape’s `arc()` function to generate the mouth path. Circles form the head and eyes, with a `g` element translating the group to the center. The face’s proportions are derived from the SVG height and fixed numeric constants for spacing and radius.

Oct 10, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example displays a set of geometric shapes—a circle, a rectangle, a line, and a path—arranged in a 960 by 500 SVG canvas. The SVG elements are wrapped in groups that use transform attributes for scaling and translation, while CSS classes style the line and path with strokes and rounded joins. Rendered through React, the code uses inline SVG with attributes like `fill` and `stroke-width`, and the stylesheet defines the `.lines` group’s properties.

Oct 9, 2020
Loading thumbnail…

Cars Report

This example demonstrates a dynamic car report that displays a list of vehicles priced under a specified threshold. It fetches car data asynchronously using a custom Promise-based `getCars` function, filtered and formatted via `generateReport` and `formatCar`. The report renders in a `<pre>` element, initially showing “Loading…” before populating with the formatted car details after a simulated 2-second delay. This React project also includes an `index.html` that logs a message to the browser console for debugging.

Oct 9, 2020