C

cssergio

@cssergio·41 public vizzes

Loading thumbnail…

Fork of Scatter Plot World Heritage List

This visualization of UNESCO World Heritage sites uses D3.js version 6 to render an interactive scatter plot. The initial view plots each heritage site by longitude on the x-axis and latitude on the y-axis, with colors representing continents, revealing Europe's concentration of sites. Users can switch axes through dropdown menus to compare fields like date inscribed and continent. The visualization employs D3's scale functions (`scaleLinear`, `scaleTime`, `scalePoint`) for axis mapping and `transition` for animated updates. Data comes from the UNESCO World Heritage List, with circles receiving jitter to reduce overplotting.

Loading thumbnail…

Fork of React 1

Fork of React 1 reproduces a Sol LeWitt art piece as a React application, using React 18 to render a shopping list interface alongside the visual work. The example demonstrates a basic React setup with a class component, using `ReactDOM.createRoot` to mount the application. The code includes a commented-out D3 v7 import and references a webpack configuration with externalized React dependencies, but does not actively implement any D3 visualization or data-driven rendering. The primary output is a static `Hello, world` heading generated through React's JSX syntax.

Loading thumbnail…

Untitled

This example reproduces a Sol LeWitt art piece using React and D3. The visualization generates geometric wall drawings according to the artist’s conceptual rules, displaying the resulting patterns on a canvas. The code imports React 18 and D3 v7, though the commented-out script tags suggest the D3 library may be conditionally included. The React component `ShoppingList` renders a simple list, but the primary focus is the algorithmic drawing derived from LeWitt’s instructions, demonstrating how programming can emulate generative art.

Loading thumbnail…

Fork of Analysis using scatterplots

An interactive scatterplot and bar chart explore median family wealth in the US from 1983 to 2016, with data from the Urban Institute, US Census, and TidyTuesday. A dropdown menu filters the visualization by race (White, Black, Hispanic). The scatterplot uses animated circles, while the bar plot shows the same data as lines, using d3’s scaleLinear, axisLeft, axisBottom, and transition APIs. The SVG rendering animates transitions when the race selection changes.

Loading thumbnail…

Fork of kaustav of Animated Scatter Plot with Menus

This animated scatter plot visualizes the Iris dataset, allowing selection of X and Y axis variables from menus. It uses D3 v6 with SVG rendering, implementing a reusable chart pattern with selection.join for enter, update, and exit transitions. Axis labels animate position changes, circles transition to new coordinates with staggered delays, and a tooltip appears on mouseenter. The scatterPlot module uses scaleLinear and scalePoint for quantitative and categorical axes, with d3.transition for smooth 1000ms animations.

Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot displays the Iris flower dataset, mapping sepal and petal measurements against each other with species indicated by color. Users select variables for the x and y axes from dropdown menus built with d3.dispatch. The visualization uses d3.csv for data loading, scaleLinear and scalePoint for positioning, scaleOrdinal for symbol types, and transitions with transition.attrTween for animated circle updates.

Loading thumbnail…

Animated Scatter Plot with Menu

This interactive scatter plot displays the Iris dataset, letting users explore relationships between sepal and petal measurements. The visualization uses two dropdown menus to dynamically select which numeric columns appear on the x and y axes. Points are colored by species (setosa, versicolor, virginica) and animate smoothly to their new positions using d3’s `transition` API. The chart is built with SVG, leveraging d3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` for scales and axes. The code implements a reusable `scatterPlot` module and a custom `menu` component using d3’s `dispatch` for event handling.

Loading thumbnail…

Animated Reusable D3 ScatterPlot

This animated scatterplot visualizes the Iris flower dataset, with points colored and shaped by species and mapped to petal length, sepal length, and width scales. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, and `transition` to animate circle positions and radii. The reusable `scatterPlot` module updates marks via data joins, while axes redraw smoothly as the view transitions.

Loading thumbnail…

Fork of Reusable D3 Chart ScatterPlot Covid

This example visualizes the Iris dataset as an animated scatter plot, cycling through four measurement combinations every two seconds. Each point is colored and shaped by species, with circle radius and symbol size mapping to petal and sepal widths. The visualization uses D3 v6 modules including `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom`, rendered as SVG with a reusable chart function pattern. Data loads as CSV and updates via `setInterval` calling the scatter plot component with new axis mappings.

Loading thumbnail…

Fork of COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

This interactive scatter plot displays the seven-day rolling average of COVID-19 deaths in the United States over time, using data from the New York Times. Built with D3.js, it employs a reusable scatter plot framework where the x-axis represents dates and the y-axis shows the death average per day. The visualization includes labeled axes, a title, and a source attribution. The SVG rendering uses D3 scales, axes, and circles, with data loaded from a remote CSV file parsed through D3's csv function.

Loading thumbnail…

Reusable D3 Chart ScatterPlot

This reusable D3 chart displays the classic Iris dataset, mapping petal and sepal measurements. Each flower species (setosa, versicolor, virginica) is distinguished by both color and symbol shape. The code uses d3.csv for data loading, scaleLinear for positioning and sizing, scaleOrdinal for symbol types, and d3.axisBottom and axisLeft for axes. Rendering is SVG via d3.select and .join, with symbols generated by d3.symbol.

Loading thumbnail…

Fork of 8 class D3 in HTML vanilla

This example visualizes the Iris dataset as a scatter plot with elliptical markers, where each flower’s petal and sepal lengths determine the x and y positions, and widths control the ellipse radii. Points are colored by species using a switch statement for setosa (blue), versicolor (red), and virginica (black). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` reusable function. Data is loaded from a remote CSV file and rendered as SVG ellipses with interactive titles.

Loading thumbnail…

8 class D3 in HTML vanilla

This example visualizes the Iris dataset as a scatter plot with elliptically shaped marks, encoding sepal and petal measurements across four axes. Each ellipse’s vertical and horizontal radii reflect petal width and sepal width, while its fill color distinguishes the three species (setosa, versicolor, and virginica). The code uses D3 v6 modules like `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map values to scales, and render axes. SVG ellipses are generated via a custom reusable `scatterPlot` function, with hover tooltips showing raw coordinates and color.

Loading thumbnail…

Daily new cases of Covid in Italy (Episode 8)

This example visualizes daily new COVID-19 cases in Italy alongside intensive-care admissions, using an SVG chart rendered with D3 v6. The x-axis shows time as a date scale, the y-axis plots new positive cases linearly, and the circle radius encodes intensive-care patients via a square-root scale. The code fetches a CSV from the Italian government’s GitHub repository and parses numeric fields. Interactive buttons toggle the visibility of the line and circle elements, demonstrating simple display toggling through D3’s selection API.

Loading thumbnail…

JS in HTML

This example reproduces a Sol LeWitt art piece using D3 v7. The code imports D3’s `select` function and logs it, along with strings built from custom modules `something.js` and `thing.js` that export default and named values. The HTML page sets a large font size and centers the body, though no DOM elements are appended or manipulated, so the visualization is limited to the console output demonstrating module imports and D3’s availability.

Loading thumbnail…

Fork of Fork of D3 Git History Streamgraph

This streamgraph visualizes commit activity across D3 repositories, with layer thickness representing smoothed weekly commit counts and vertical order reflecting each repository’s introduction date. It reveals the monolithic early development, the 4.0 package explosion in 2014, and later concentrated work on d3-delaunay. Built with D3 v6, it loads JSON data of all D3 commits, applies array-blur smoothing, and uses d3.stack, stackOffsetWiggle, and stackOrderAppearance to generate layered areas, with d3-area-label positioning labels. An SVG envelope backdrop and interactive hover effects highlight repository layers.

Loading thumbnail…

Fork of D3 Git History Streamgraph

This visualization shows the commit history of the D3.js organization’s GitHub repositories as a streamgraph, with each layer representing a different D3 package and its thickness indicating smoothed weekly commit counts. The layer order reflects when each repository was first created, revealing the monolithic early development of `d3` and the 2014 explosion of packages. Built with D3 v6, it uses `d3.stack` with `stackOffsetWiggle`, `stackOrderAppearance`, `d3.area`, and the `d3-area-label` library, rendering to SVG. Data comes from a JSON file of all D3 commits.

Loading thumbnail…

Fork of D3 Selection Exploration

This is an animated visualization of a sine wave pattern generated from synthetic data, displayed as a connected line with circular markers. Using D3.js version 7, it dynamically updates a dataset at 60 frames per second, redrawing the SVG elements with new x, y, and radius values based on a changing time parameter. The visualization employs D3's `line` generator for the path and data join operations to manage circle and path elements within the SVG canvas.

Loading thumbnail…

D3 Selection Exploration

A small set of circles animates in a sine wave pattern, with the number of circles oscillating between nine and nineteen based on time. This reproduction of a Sol LeWitt art piece uses D3 selections with the `join()` method to enter, update, and exit circle elements each frame. The SVG rendering updates at 60 frames per second via `setInterval`, with circle positions calculated using `Math.sin` and the time variable `t`. The code imports `select` and `range` from d3 and uses `.attr` to set circle radius and coordinates.

Loading thumbnail…

Fork of JavaScript Basics Array Sort

This example reproduces a Sol LeWitt art piece using an SVG canvas, with 960 by 500 pixel dimensions. The visualization is constructed through D3.js version 7.4.4, using functions like `select` and `range` to generate and manipulate data arrays. The code primarily demonstrates array sorting methods, including custom comparators and D3's `ascending` function, applied to entries with key-value pairs. The rendering approach is purely SVG-based, with the art piece emerging from the programmatic arrangement of visual elements based on sorted data structures.

Loading thumbnail…

JavaScript Basics Array

This example demonstrates fundamental JavaScript array operations through the D3 library. The code uses `d3.select` and `d3.range` to create an SVG container, though no explicit data is rendered visually. Instead, the example focuses on array manipulation methods including custom range generation, sorting with comparison functions, and console output of results. It reproduces a Sol LeWitt art piece concept while experimenting with array methods like `sort`, `filter`, `forEach`, and `reverse` on hardcoded numeric arrays. The rendering approach uses an SVG element sized 960×500 pixels, with all operations logged to the browser console.

Loading thumbnail…

Fork of Fork of Full of Joe LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece as a generative drawing in the browser. It creates a grid of horizontal and vertical lines that are partially revealed through two distinct masks, resulting in an intersecting pattern of geometric shapes. The visualization uses D3.js version 6.6.1, specifically the `select`, `range`, and `symbol` APIs, to render SVG elements based on procedural rules. The code generates a hundred stripes in each direction and applies mask filters to alternate their visibility, producing a complex, layered composition that mimics the artist's systematic style.

Loading thumbnail…

Fork of Full of Joe LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric drawing using a grid of horizontal and vertical stripes that interact through two SVG masks to reveal a central diamond shape. The visualization populates 100 rectangles in each direction, sized relative to the window, and applies the masks with inverted fills to create the overlapping cut-out effect. Built with D3 v6, it uses the `select`, `range`, `symbol`, and `symbols` APIs to construct the SVG elements and generate the diamond path.

Loading thumbnail…

Full of Joe LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece by layering two sets of thin, parallel lines—one horizontal and one vertical—across the full browser window. The lines are partially hidden by two overlapping circular masks, creating a geometric interplay of filled and empty space. It uses D3 v3 to generate SVG rectangles and applies masks via D3’s selection and data-join methods, along with `symbol` and `range` for positioning.

Loading thumbnail…

Fork of Fourth Class 2

A grid of thin, closely spaced horizontal and vertical black bars on a white background forms a woven, striped pattern. The bars are drawn only within the bounds of a central circle, creating the illusion of a textured disc. The code uses the D3.js `select`, `append`, and `data` APIs with `join` to generate the SVG rectangles. Two SVG masks, `circle-mask` and `circle-mask-2`, are defined to combine the bar patterns with a circular region, reproducing the geometric aesthetic of a Sol LeWitt art piece.

Loading thumbnail…

Fourth Class

This example recreates a Sol LeWitt-style geometric composition using two overlapping sets of striped rectangles: one set of horizontal bars and one of vertical bars. The bars are selectively revealed through two circular SVG masks, creating a layered grid pattern with a central circular intersection. The visualization is built with D3.js, using `select`, `range`, and data joins to generate 100 rectangles in each direction, and `mask` elements with `circle` shapes to control visibility. The piece is rendered as an SVG that fills the entire browser window.

Loading thumbnail…

Joe LeWitt con D3

A grid of horizontal and vertical rectangles overlays the full viewport, with SVG masks revealing a circular window at the center. The piece reproduces Sol LeWitt's geometric wall drawing style using D3's `select`, `range`, and `join` methods to generate 100 rects in each orientation. Mask `circle-mask` exposes the horizontal bars inside a white circle, while `circle-mask-2` inverts the effect, showing the vertical bars outside the same radius. The composition renders dynamically to the browser's current dimensions using an SVG container.

Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript : Mar 27,2021 : group of circles, more circles

This visualization reproduces a Sol LeWitt art piece as a dense 100×100 grid of randomly colored 10-pixel squares, filling the entire browser window. The code uses vanilla JavaScript to create SVG elements via the DOM API, setting each rectangle’s fill to a random RGB value. Though commented-out sections hint at alternative circle-based or masked-grid variations, the active code renders only the colorful square grid, with no interaction or animation.

Loading thumbnail…

Episode 3: Sol LeWitt in Vanilla JavaScript version 3

This example reproduces a Sol LeWitt-inspired art piece as an animated SVG composition. It shows a grid of thin vertical rectangles with randomized colors and staggered upward motion, overlaid with a large white circle. A second circle acts as a mask, revealing a hidden layer of horizontal rectangles beneath. The piece is built entirely with Vanilla JavaScript, creating SVG elements dynamically and animating them with the Web Animations API’s `animate()` method, using randomized durations and infinite iterations.

Loading thumbnail…

Fork of Joe LeWitt Reproduction

This piece generates 100 vertical and 100 horizontal rectangular bars across the full canvas. Two SVG masks, each combining a white rectangle with a black or white circle, constrain the bars into two circular regions at the center. The code directly creates SVG elements via the DOM API, with no external libraries, and is a reproduction of a Sol LeWitt artwork.

Loading thumbnail…

Joe LeWitt Reproduction Vertical

This SVG reproduction of a Sol LeWitt art piece creates a vertical composition of intersecting horizontal and vertical bands. The rendering uses JavaScript to generate 100 horizontal and 100 vertical rectangles, each with a height or width of 10 pixels and spaced 20 pixels apart, which are then constrained by circular masks centered on the canvas. Two masks, `circle-mask` and `circle-mask2`, define circular regions that reveal only a portion of the striped grid, producing a dynamic interplay between the geometric lines and the negative space. The artwork is built entirely with native SVG elements and the DOM API, sized to the full browser window.

Loading thumbnail…

Joe LeWitt Reproduction

This piece reproduces the geometric aesthetic of a Sol LeWitt wall drawing using SVG rectangles. The code generates one hundred vertical bars, each ten pixels wide, spaced evenly across the full height of the browser window. It directly manipulates the SVG DOM via `document.createElementNS` and `setAttribute` in vanilla JavaScript, without any external libraries. The composition fills the viewport based on `window.innerWidth` and `window.innerHeight`, creating a minimal, systematic grid that echoes LeWitt’s instructional art.

Loading thumbnail…

Psuedo Spider Chart

A pseudo spider chart approximates a scatter plot by positioning seven orange circular markers within a series of concentric grey circles, which act as radial gridlines. A translucent orange polygon connects the points, and thin orange lines link each marker to the central hub, suggesting a radar-like structure. The SVG also includes labeled concentric rings with values 5 through 45 along the vertical axis. This static visualization uses plain SVG elements—circles, lines, and paths—with no JavaScript libraries, rendering markers with fixed fill-opacity and stroke styling.

Loading thumbnail…

Pseudo Gantt Chart

A Pseudo Gantt Chart displays the duration of eight activities (A through H) across a numbered timeline of weeks. The chart uses a grid of horizontal bars and vertical week markers to approximate task scheduling without precise start or end points. Rendered as a static SVG, the visualization relies on styled `<rect>` and `<line>` elements for the grid, with `<text>` elements labeling activities and weeks. The design emphasizes a clean, structured layout over interactive functionality, serving as a lightweight alternative to traditional Gantt charts.

Loading thumbnail…

psuedo visualizations - venn diagram

A large blue circle dominates the canvas, serving as a basic Venn diagram with a white-stroked circle overlap region implied by two smaller, stroked circles. The graphic is a static SVG composition; the primary circle changes its fill to solid blue on hover via CSS transitions. The visualization uses raw SVG elements—`circle`, `rect`, and `text` tags—rendered in the browser, with no data-driven libraries or external datasets involved.

Loading thumbnail…

Pseudo Horizontal Bar Chart

This pseudo horizontal bar chart presents a sequence of five values as thick, rounded line segments. The SVG path connects points from the bottom-left to the top-right, with varying segment lengths and angles, visually approximating a bar chart without traditional rectangular bars. The visualization uses an SVG `<path>` element with a `stroke-linecap="round"` and `stroke-linejoin="round"` to create the bar-like appearance, while a large, custom font displays the title. The chart is rendered using raw SVG markup within an HTML document, with styling provided by CSS.

Loading thumbnail…

Fork of Pseudo Bar Chart

This is a simple SVG chart that uses filled rectangles to approximate a data visualization, resembling a scatter plot or bar chart. The rendering is achieved through hard-coded `<rect>` elements on a white background, without using any external libraries. The chart presents four distinct rectangular shapes of varying heights and positions, suggesting a comparison between different data points. A second HTML file demonstrates basic SVG shapes and CSS styling, including hover effects that change rectangle fill and stroke properties.

Loading thumbnail…

Pseudo Scatter Plot

This example presents a scatter plot using fixed, hand-coded SVG elements rather than data-driven generation. Seven circles act as data points, positioned at specific x and y coordinates on a white background. The rendering relies on raw SVG `<circle>` and `<rect>` tags, drawing directly within the markup without any JavaScript libraries or external data files. The visualization demonstrates how a simple coordinate system is approximated through static attributes, with each circle uniformly sized and colored. No interaction, axes, or tooltips are included, making it a purely static visual exercise.

Loading thumbnail…

Fork of Fork of SVG Fundamentals

A dynamic SVG landscape demonstrates fundamental shapes, gradients, and animation using native SMIL animations and CSS transitions. The main scene features an animated radial gradient sky, a pulsing sun moving via the `animate` element, and layered landscape paths filled with linear gradients. A second view shows interactive SVG primitives—including circles, rectangles, lines, and curved paths—with hover effects that scale elements and change fill colors. The work relies solely on standard SVG features without external libraries, rendering entirely through the browser's SVG engine.

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and their interactive behavior. Static geometry appears first, including circles, rectangles, lines, and paths with varied fills and strokes, while CSS transitions animate rectangle properties on hover. The visualization then explores advanced SVG features using embedded animations and gradients. A radial gradient defines a sun-like circle with an animated vertical position, while linear gradients fill layered landscape paths. The code also includes a path with an arc and quadratic curve, plus an incomplete gradient definition referencing a missing `sky-gradient` ID. SVG styling uses CSS selectors for shape customization and hover effects.

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG shapes—circles, rectangles, lines, paths, and arcs—along with interactive styling. It applies CSS transitions to rectangles on hover and scales paths via hover transforms, while also showing inline SVG attribute definitions and global style overrides. The code also defines radial and linear gradients with animation elements, though the accompanying `sunshine.html` contains incomplete markup and references undefined gradient IDs, making the animated scene non-functional. The primary `index.html` file serves as a static showcase of SVG fundamentals.