Y

Yiorgos Bagakis

@yiorgosbagakis·21 public vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays a grid of 100 circular blue elements that turn red on hover, demonstrating how CSS styling and JavaScript interact to create interactive visuals. The code uses vanilla JavaScript with the Document Object Model (DOM) API, specifically `document.createElement` and `document.body.append`, to generate the circles dynamically. Styling relies on CSS flexbox for layout, `border-radius` for round shapes, and the `:hover` pseudo-class to change background color. The visualization shows a simple, responsive pattern where each circle responds independently to user interaction, illustrating basic DOM manipulation and event-driven styling without external libraries.

Loading thumbnail…

Circular packing chart of USA executions 2010-2022

This circular packing chart visualizes executions in the USA between 2010 and 2022. The code uses `d3.forceSimulation` with `forceCenter`, `forceManyBody`, and `forceCollide` to position circles that are colored by gender (turquoise for male, coral for female) and stroked by race (white for white, black for non-white). The data is loaded from a CSV file, and hovering over a circle displays a tooltip with the year, name, and surname. The visualization renders in an SVG element sized to the browser window.

Loading thumbnail…

Map of Greece

This example displays a map of Greece rendered as a gold SVG path on a blue background, with regions highlighted in salmon on hover. It uses D3 v4’s `d3.geoMercator()` projection and `d3.geoPath()` to draw the country from a GeoJSON file loaded via `d3.json()` from a GitHub-hosted world dataset, filtering features to Greece by name. The script initializes the SVG with a fixed width and height, applies a scale and translation to center the map, and uses CSS to style the path fill and hover effects.

Loading thumbnail…

Fork of D3 Starter

This example displays the outline of Greece as a gray, black-stroked SVG path centered on a blank page. It fetches a remote GeoJSON file containing Greek boundaries, filters the data to the single feature named “Greece,” and projects it using a Mercator projection (`d3.geoMercator`) with a scale of 3000. The path is drawn with `d3.geoPath`, and the code uses `d3.fetch` to load the data and D3 v7 to append the SVG element.

Loading thumbnail…

Fork of Project circularPacking

This example visualizes a hierarchical dataset of CERFACS researchers using a zoomable circular packing layout in D3. Clicking a non-root circle zooms into that node’s subtree, while clicking the background returns to the full view, with smooth animated transitions. It renders circles and text labels in SVG, using `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom`. The code also demonstrates ES6 module imports and loads data from a local JSON file.

Loading thumbnail…

Fork of D3 Starter

This example renders 50 static blue squares in a vertical layout using D3.js version 7. The code iterates fifty times without incrementing a counter, creating a loop that appends a single `div` with the class `item` to the body. The `d3.select` and `.append` methods place the element, while CSS styles define its dimensions and color. The visualization demonstrates basic DOM manipulation with D3’s selection API.

Loading thumbnail…

Fork of Japan Map

This example displays a map of Japan rendered as SVG paths, with each geographic region filled in a solid color and outlined by white borders. The visualization uses a Mercator projection configured with `d3.geoMercator` and applies a zoom behavior via `d3.zoom` to enable interactive panning and scaling. Geographic data is loaded as TopoJSON from a remote GitHub source and converted to GeoJSON using the `feature` function from `topojson`. Color encoding relies on `d3.scaleOrdinal` with `schemeCategory10`, though the code fetches a Greece dataset, so the map’s actual region boundaries may not match the title.

Loading thumbnail…

A scatter plot comparing EU fertility rate with urban population %

This scatter plot displays the relationship between EU countries’ fertility rates and their urban population percentages, with each circle labeled by country name. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data from a CSV file supplied by the author via a GitHub gist. Circles are positioned using the scaled values, and country labels are placed with adjusted vertical offsets to reduce overlap. The chart is rendered as an SVG that fills the browser window, with salmon-colored text labels distinguishing them from the default circle marks.

Loading thumbnail…

Fork of React & D3 Starter

This example presents a scatter plot of the Iris dataset mapping sepal length versus petal length, with circles colored by transparency. It serves as a starter template demonstrating how to integrate React and D3 in a real-world project. The code uses React hooks like `useState` and `useEffect` to load and parse CSV data, while D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` handle scaling and axes. The visualization is rendered as SVG through a decoupled architecture where D3's `select` and `join` methods manage the circle elements.

Loading thumbnail…

Reusable scatter plot with axis labels and tooltip

This reusable D3.js scatter plot visualizes the relationship between urban population percentage and fertility rate for EU countries in 2022, sourced from Worldometer population data. Written as a modular `scatterPlot()` function, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes with red labels, while circles display tooltips on hover via a styled HTML `div` that shows each country's name. The SVG output adapts to the full window size, and the code includes commented-out logic for animated cycling through data columns, though that feature is not active.

Loading thumbnail…

Episode 8: A scatter plot

This scatter plot compares EU countries’ fertility rates against their urban population percentages, with each circle labeled by country name. It uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale the data from a GitHub-hosted CSV, then renders SVG circles and text labels. The axes and point positions are computed from the raw dataset’s numeric fields, and the chart fills the full browser window.

Loading thumbnail…

Worm-5

A growing chain of circles undulates across a violet background, its length and radius expanding over time. The animation uses a repeating interval to update a dataset, repositioning each circle along a sine wave while shifting its fill color from green toward darker tones. Built with D3 v7, the code generates data procedurally via `dataMaker.js` and renders SVG circles with chained `.join()` calls in `vizMaker.js`, applying animated attributes for x, y, radius, and fill. Strokes remain white for contrast.

Loading thumbnail…

D3 v7 starter for Episode 5

A live animation renders fifteen bouncing circles across a tomato-red background. Each circle’s position, size, color, and opacity update every 100 milliseconds based on a sine wave and a time counter. The code uses D3 v7’s `select`, `range`, and data-join via `join('circle')` to bind and update SVG elements. It sets attributes directly, including `cx`, `cy`, `r`, `fill`, and a white stroke, with all values derived from the iterative time variable `t`.

Loading thumbnail…

Chromatic Hover Sol LeWitt Art with D3

This example generates an abstract, grid-based composition inspired by Sol LeWitt, rendered as an SVG using D3.js. Two sets of thin rectangular strips, one horizontal and one vertical, are drawn across the full screen and masked by overlapping circular regions, creating a dynamic interplay of visible and hidden lines. A CSS animation continuously toggles the SVG’s fill and background colors between black and white, producing an inverted chromatic hover effect. The code relies on D3 selections, `range()`, and SVG `mask` elements to construct and layer the visual.

Loading thumbnail…

Fork of D3 Starter

This example generates a grid of horizontal and vertical stripes that intersect to create a geometric pattern. It uses SVG masks with circles to reveal or hide different sections of the stripes, producing a composition reminiscent of Sol LeWitt’s wall drawings. The code leverages D3 v7 selection methods, including `select`, `append`, and `join`, along with `range` to create 100 rectangles for each direction. The visualization is fully responsive, sized to the browser window, and includes hover effects that change the fill color to magenta.

Loading thumbnail…

D3 Experiment

A scatterplot of 20 fictional student marks displays each value as a pink dot, positioned with its value as both horizontal and vertical offset in viewport units, alongside a red underlined title. The example uses D3 v7 selection and join APIs, specifically `d3.select` and `d3.selectAll` with `.data()` and `.join()` to create and bind the data, then appends an SVG circle for each point. Data is hardcoded as an array in the script, and rendering uses SVG elements with absolute positioning.

Loading thumbnail…

Sol LeWitt Remixed

This example renders a simplified Sol LeWitt-inspired geometric composition using vanilla JavaScript and the SVG DOM API. It creates a full-screen dark green background, centers a bright green circle, and overlays alternating vertical rectangles across the width to produce a striped pattern that masks the circle. The code computes element coordinates from `window.innerWidth` and `window.innerHeight`, and uses `document.createElementNS` to construct the SVG nodes directly without any external libraries.

Loading thumbnail…

A map path

A single red SVG path renders a hand-drawn, angular route across a 960-by-500 canvas. The code defines the path’s shape with an explicit `d` attribute containing absolute coordinates, then fills it with `fill="red"`. Using plain SVG directly in an HTML page, the example demonstrates how minimal markup can create a geographic-style map path without any JavaScript or external libraries.

Loading thumbnail…

Pseudo Cluster Visualisation

This example visualizes a pseudo cluster analysis using an interactive SVG scatterplot. It shows a set of points, colored pink and yellow, distributed across a white canvas, with a large black-outlined circle suggesting a cluster boundary. The rendering relies on raw SVG elements, including `circle` tags with specific coordinates and fill colors, and CSS `:hover` styles that turn points black on mouseover. The visualization is a static, hand-drawn representation of clustered data, using only basic SVG and HTML.

Loading thumbnail…

A pseudo visualization from a Figma exported SVG

A hand-built scatter plot rendered as a single inline SVG with hardcoded coordinates, drawn from a Figma export rather than generated programmatically. The chart displays ten circular points over a simple Cartesian axis, with red y-axis labels and one highlighted red point. The code uses no external JavaScript libraries, relying instead on raw SVG elements such as circle, path, and text. It serves as a test of extracting exported design markup directly through browser developer tools.

Loading thumbnail…

SVG Basics Experiment

This example demonstrates a cartoon smiley face drawn with SVG primitive shapes, including a head outline, eyes, nose, and mouth, set against a gradient-filled background. The animation shows the mouth expanding and contracting through elliptical size changes. The page uses raw SVG elements—`rect`, `path`, `ellipse`, `circle`, and `animate`—within an HTML document, with no JavaScript libraries. The gradient is defined in `<defs>` and applied via the `fill` attribute, while the mouth’s motion is driven by repeated `<animate>` tags on its radius properties.