Martin Masevski

@Archetipo95·7 public vizzes

Untitled

This radial cluster diagram displays the hierarchical structure of world regions and countries, using a tree layout where continents branch into subregions and individual nations. The visualization encodes the parent-child relationships through elbow-shaped links, with each leaf node represented by a small circle and a text label. Built with D3.js v3, it loads hierarchical JSON data and applies a cluster layout algorithm to position nodes. The SVG rendering uses the `d3.layout.cluster()` method to calculate coordinates, and custom path-drawing functions to create the connecting lines between hierarchy levels.

Jun 22, 2021

Loading thumbnail…

Untitled

A hierarchical cluster dendrogram renders an SVG tree from JSON data using D3 v3's `d3.layout.cluster` and `d3.svg.diagonal` for curved link paths. Nodes appear as circles with labels, positioned via the cluster layout’s size settings and a translate transform. The code loads D3 from UNPKG, fetches `dendrogram01.json` asynchronously via `d3.json`, and appends the visualization to the page. A separate ES6 module shows an unrelated "Hello VizHub!" message, demonstrating local module imports alongside the D3 API.

Jun 8, 2021

Loading thumbnail…

Fork of D3 Scatter Plot Matrix (still and proudly Vanilla JS 🙃)

This visualization presents a 4x4 scatter plot matrix comparing all numeric attributes of the classic Iris dataset, with points colored by species using a categorical color scale. It employs D3 v6 (loaded from a CDN) with API methods such as `scaleLinear`, `scaleOrdinal`, `extent`, `axisBottom`, `axisLeft`, and the selection-join pattern to render SVG charts that fill the browser window. Each subplot shows an X-Y combination of sepal and petal measurements, and diagonal panels display the variable name as a title.

Jun 8, 2021

Loading thumbnail…

Fork of Solar System

This animated solar system model displays the orbital paths of the planets, including Pluto, orbiting a central sun against a background image of the solar system. Each planet moves along its own circular orbit at varying speeds, with the 5th ring representing the asteroid belt. The visualization uses React components with SVG elements, and D3.js version 6 for motion animation via `animateMotion` paths, creating a simplified, not-to-scale representation of planetary movement.

Jun 8, 2021

Loading thumbnail…

Fork of React Starter

Five circles move in a diagonal line across an SVG canvas, following the mouse position with staggered offsets. The React app uses `useState` and `useCallback` to track pointer coordinates and update the circles' `cx` and `cy` attributes on every `mousemove` event. Rendering is done declaratively with JSX, mapping over a static array of five elements to produce equally spaced circle components. The example demonstrates interactive state-driven SVG updates without external visualization libraries.

Apr 24, 2021

Loading thumbnail…

Fork of SPLOM

This visualization displays a scatter plot matrix of the Iris dataset, comparing pairs of sepal length, sepal width, petal length, and petal width across a 4×4 grid. Each cell shows the relationship between two quantitative columns using circles with a radius of 2 pixels. The code uses D3 v6 APIs including `csv`, `scaleBand`, `scaleLinear`, and `extent`, with a custom `scatterPlot` factory function managing the scales. Data loads from a GitHub Gist URL, and the SVG rendering fills the entire window.

Mar 2, 2021

Loading thumbnail…

HD VIZ scatter plot

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across species. The visualization displays data points as circles, with interactive dropdown menus enabling users to dynamically select which measurement attributes appear on the x and y axes. Built with React and D3 v5, the code uses `scaleLinear` for axis scaling, `extent` for domain calculation, and `csv` for data loading. The visualization renders as SVG, with separate React components handling axis generation and circle marks, while CSS classes style the tick marks and data points.

Mar 2, 2021