Milan Košir

@kosirm·6 public vizzes

D3 Tree with Multiple Parents Example

This example visualizes a hierarchical tree with multiple parents, where nodes like “Developer” and “Laborer” appear under several root categories such as “Stock market” and “Grape-market.” The data comes from a local JSON file, and the layout uses d3.tree combined with Underscore.js utilities to deduplicate nodes and reassign links by ID. SVG rendering includes horizontal links via d3.linkHorizontal, with zoom interaction and animated transitions for node positioning. A selected root category highlights its children with steelblue strokes and full opacity.

Dec 17, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js 7 starter template that renders the text “Hello D3 version 7” in the center of the page using the `select` API from the `d3` module. The code also defines a small array `data` and prints its minimum value to the console with `d3.min(data)`. The HTML page loads D3 from a CDN and applies a large font size via inline CSS, while the JavaScript is stored in an external `bundle.js` file, showcasing a basic setup for a D3 project.

Dec 17, 2023

Loading thumbnail…

Git Source Tree Radial Visualization Example

This interactive visualization displays the file structure of a Git repository as a radial tree, with branches and nodes colored by file extension. The code uses d3.hierarchy and d3.tree to compute the layout, while d3.zoom enables pan and zoom. A custom bar chart, built with d3.legendColor, lists file types and their counts. The data originates from a CSV hosted on VizHub, rendered with SVG paths and transitions.

Dec 12, 2023

Loading thumbnail…

Radial Tree of Countries Hierarchy Example

A radial tree visualization displays the hierarchy of world countries organized by continent and subregion. Built with D3 v4, it uses the `d3.cluster` layout and custom projection functions to position nodes in a circular arrangement. The visualization supports panning and zooming via `d3.zoom`, with interactive transforms applied to the SVG group. Node labels vary in font size based on depth, and curved paths connect parent-child relationships. The data comes from a local JSON file structured around geographic regions.

Dec 12, 2023

Loading thumbnail…

Sierpinski Triangle Example

This example shows a Sierpinski triangle fractal rendered as an interactive tree-like structure on a Canvas element. The fractal is drawn with recursive triangle subdivision, and the branching depth changes dynamically based on the mouse position. The code uses the Canvas 2D API with `beginPath`, `moveTo`, `lineTo`, and `fill` methods to draw triangles. It accommodates high pixel density displays by scaling the canvas resolution using `window.devicePixelRatio`. The mouse event listener recalculates the depth from the cursor's horizontal position, then clears and redraws the entire fractal.

Dec 12, 2023

Loading thumbnail…

Tree Fractal Example

An interactive tree fractal rendered on a Canvas element responds to mouse movement by altering branch length ratio and angle difference. The code uses the Canvas 2D API with `beginPath`, `lineTo`, and `stroke` to draw recursive branches up to a depth of 11. It accommodates high pixel density displays via `window.devicePixelRatio` and `c.scale`. Mouse position maps directly to the branching parameters, updating the tree in real time.

Dec 12, 2023