Georgi Dimitrov

@georgedimmitrov·7 public vizzes

OrganizationGraphDiagram

This example shows an interactive organization graph diagram representing connections between arts and social impact organizations. Large colored main nodes branch into smaller child nodes with anonymous leaf nodes, simulating a network of related entities and partnerships. The visualization uses d3.forceSimulation with forceLink and forceManyBody to calculate node positions, while dragging interactions let users move nodes and update the simulation. Node colors and link distances come from a predefined colors array and data.js configuration, rendered as SVG circles, lines, and text labels.

Jul 19, 2022

Loading thumbnail…

Fork of Reusable scatterplot

This example visualizes the classic Iris dataset, showing the relationship between petal length and petal width. Each flower is drawn as a distinct SVG path symbol, with different symbol types corresponding to the three Iris species, and color encoding species using the viridis scale. The code imports from D3 v6, using `scaleLinear` for axes, `scaleOrdinal` for symbol and color mapping, and the `symbol` generator to create shapes. It loads data from a CSV file hosted on GitHub and renders within a full-screen SVG.

Jul 3, 2022

Loading thumbnail…

Reusable scatterplot

This example demonstrates a reusable scatterplot component built with D3.js, visualizing the classic Iris dataset loaded from a CSV file. The chart plots petal length and width measurements as circles, with axes generated using D3's scaleLinear and axisLeft/axisBottom functions. The scatterPlot function exposes configurable setters for width, height, data, margins, and radius, allowing the chart to be adapted and reused. The visualization renders as SVG, sized to fill the browser window.

Jul 3, 2022

Loading thumbnail…

d3 scatterplot

This visualization displays the Iris dataset, plotting petal length against petal width as a scatterplot of circles rendered in SVG using D3 v6. It loads CSV data via `d3.csv`, maps quantitative values using `scaleLinear` with `extent`, and sets circle positions through `attr('cx')` and `attr('cy')`. Axes are added using `axisLeft` and `axisBottom`, with margins applied to position the plot within the full window dimensions. The code uses `select`, `data`, and `join` to bind the parsed data points to circle elements.

Jul 2, 2022

Loading thumbnail…

d3 selections

This example demonstrates animated, data-driven updates of SVG circles using D3’s selection API. A set of circles oscillates vertically and horizontally, with their count varying sinusoidally over time. The code uses `d3.select`, `d3.range`, and the classic pre-v6 `selectAll`, `enter`, `merge`, and `exit` methods to manage additions, updates, and removals, running on a 60 FPS timer. It relies on D3 v6.6.1, rendering SVG with real-time animation.

Jun 30, 2022

Loading thumbnail…

Fork of SVG Fundamentals

Horizontal and vertical stripes cross an SVG canvas to form a grid, while two mask layers reveal or hide rows and columns based on overlapping d3 symbols. The code uses d3.select, range, join, and symbol to generate 100 rectangles in each direction, with masks built via d3.mask and inverted fills. Both masks position five symbol paths (from d3.symbols) across the center, controlling visibility of the striped pattern. The rendering relies entirely on SVG elements and D3’s data-join to create the layered visual effect.

Jun 29, 2022

Loading thumbnail…

SVG Fundamentals

An SVG-based visualization demonstrates how masking layers create intersecting geometric patterns. The code renders 100 horizontal and vertical rectangles using D3's `select` and `range`, each masked by a circular region. Two SVG masks invert their black-and-white fills, producing a visible cross-shaped overlap at the center where the circles align. The grid lines only appear within the masked circular areas, creating a dynamic interplay of light and dark stripes against a blank canvas.

Jun 29, 2022