P

pawelsapiecha

@pawelsapiecha·24 public vizzes

Loading thumbnail…

Animated D3 Scatter Plot including species

This animated scatter plot, built with React and D3, visualizes the classic Iris flower dataset. Users can dynamically select which quantitative measurements (sepal length/width, petal length/width) or the categorical species label to map to the x and y axes via interactive dropdown menus. The visualization employs SVG circles with a 20% opacity, and when axes are changed, the points smoothly transition to their new positions over a one-second duration using D3's `transition` and staggered delays. The code uses D3 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `extent` to handle scaling, axes, and data domains, with data loaded from a GitHub-hosted CSV file.

Loading thumbnail…

Animated D3 Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the x and y axes via two HTML dropdown menus. Built with React and D3.js, the visualization uses SVG elements and D3’s `transition` API to animate the movement of data points smoothly between states. The plot dynamically updates its axis labels and scales, with each of the 150 flowers represented as a circle, providing a flexible tool for comparing the dataset’s four numerical dimensions.

Loading thumbnail…

Animated Fork of Fork of Reusable D3 Scatter Plot - Idempotence

This example demonstrates an animated scatter plot that cycles through different Iris flower measurements (petal width, sepal width, petal length, and sepal length) as the x-axis variable every three seconds. Using a reusable D3 scatter plot component, it renders circles in SVG with smooth transitions via `d3.transition()`, where new points grow from radius zero and existing points move to their new positions with staggered delays. The plot uses `d3.scaleLinear` for axes and `d3.extent` for domains, with data loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot - Idempotence

This example shows a reusable D3 scatter plot of the Iris dataset that cycles through different x-axis variables every two seconds. Each transition is idempotent—re-calling the same plot function produces the same outcome, so animations smoothly update the existing SVG circles and axes. The code uses `d3.csv` to load data, `d3.scaleLinear` and `d3.extent` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes. It renders SVG with precomputed marks and leverages a setInterval to repeatedly invoke the chart’s `my()` function with a new `xValue`, demonstrating the reusable pattern in React.

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

A reusable D3 scatter plot displays the Iris dataset, encoding petal width against sepal length and distinguishing species by symbol type. The code builds a custom chart function using d3.scaleLinear, d3.axisLeft, d3.axisBottom, d3.scaleOrdinal, and d3.symbol to generate SVG paths. Data loads via d3.csv, with numeric parsing handled by a row function. The chart adapts to the window size and applies a fixed margin, rendering symbols sized 50 pixels within an SVG container.

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot, built with React and rendered as SVG, displays the Iris dataset, plotting petal width against sepal length. Implemented using D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, the visualization features a custom, configurable `scatterPlot` function that chains methods for setting dimensions, data, axes, and point radius. The code loads data via D3’s `csv` and uses a minimalist interface with Share Tech typography, showing how a flexible D3 component can be integrated into a React application.

Loading thumbnail…

D3 Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, mapping petal length to the x-axis, sepal length to the y-axis, sepal width to point radius, and petal width to color via `interpolateRainbow`. Built with React and D3 v7, it uses `scaleLinear` for all encodings and D3’s `csv` loader with a parse row function. The SVG rendering fills the viewport, with `axisLeft` and `axisBottom` producing labeled tick marks. Data is fetched from a GitHub gist and displayed at full window size.

Loading thumbnail…

JS in HTML_Redone

This example demonstrates the contrast between static HTML content and dynamic JavaScript data visualization within a single webpage. It displays a large "Hello HTML!" message while using D3 v7’s `select` function in the console, importing and concatenating strings from separate modules to log a composed message. The code relies on ES6 module imports, including a default and named export, and bundles them via `bundle.js` alongside the D3 library loaded from a CDN. No interactive or visual D3 elements are rendered; the visualization is purely textual and console-based.

Loading thumbnail…

JS in HTML

This example shows a minimal HTML page that combines CSS and JavaScript to display a static message. The page contains a styled `<div>` element with the text “Hello HTML!” centered and enlarged using a CSS class. The JavaScript files `index.js` and `something.js` demonstrate module imports and logging, with `index.js` logging a greeting that includes an exported value. It uses plain HTML, CSS, and ES6 modules, without any external libraries or data sources.

Loading thumbnail…

Homework compact D3 Selection Exploration

This example demonstrates dynamic D3 selection and data-binding techniques by rendering an animated line of circles that oscillates across the screen. A sine-wave function generates a series of points whose positions, radii, and color shift continuously, with the line path updating each frame. The visualization uses `d3.select('body')` to append an SVG, `d3.range` to create data, and `selection.join` to bind circles and paths. A `setInterval` loop triggers updates at 60fps, while a `d3.line` generator computes the connecting path. The animation highlights how D3’s enter/update/exit cycle manages changing data counts.

Loading thumbnail…

compact D3 Selection Exploration

This example demonstrates the enter-update-exit cycle in D3 data joins. An animated sine wave drives a set of circles across the screen, where the number of circles changes dynamically based on the oscillation, and each circle’s position and radius fluctuate over time. The visualization combines `d3.select`, `selection.data`, and `selection.join` from D3 v7 to bind data to SVG elements, with a `setInterval` loop updating the visualization at 60 frames per second. The data is generated procedurally using `d3.range` in the `makeData` function.

Loading thumbnail…

D3 Selection Exploration

Animated circles demonstrate D3’s enter-update-exit cycle through the `join` method, using `selectAll` and `data` with data-derived sine waves to shift positions and radii. The visualization renders in SVG within the browser, updating at 60 frames per second via `setInterval`. Each frame recalculates a dynamic dataset from `d3.range`, illustrating how `join('circle')` automatically creates, updates, and removes nodes as data count fluctuates. The source uses D3 v7’s modular imports (`select`, `range`) and properties like `cx`, `cy`, and `r` to bind values directly to DOM attributes.

Loading thumbnail…

JavaScript Arrays

This example demonstrates JavaScript array manipulation techniques, including `forEach`, `filter`, `sort`, `map`, and `reduce`, using a generated range of numbers and an array of key-value objects. The code highlights sorting differences between default lexicographic ordering and numeric sorting with a comparator, as well as using the `ascending` helper from d3. It also shows how `reduce` can transform an array into an object or sum values. The visualization is a code-based teaching tool with no visual output, focusing on logged results in the console.

Loading thumbnail…

Fork of Full Fork of Fork of Sol LeWitt Reproduction with D3_attempt2

This example reproduces a Sol LeWitt-style drawing by layering two sets of alternating horizontal and vertical bars, each clipped by a mask. The masks are generated from a sequence of large symbolic paths and checkered rectangles, using D3’s `scaleBand`, `range`, and `symbol` APIs. The code builds an SVG scene sized to the browser window with 120 divisions, setting fills to white or black based on an inverted parity rule. The rendering is purely procedural, driven by D3 7.6.1, with no external data source.

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3_test

This example reproduces a Sol LeWitt-inspired geometric artwork using D3.js. It renders a grid of thin, alternating horizontal and vertical lines by combining SVG `rect` elements with two custom masks, creating an intersecting pattern that visually shifts between the two orientations. The JavaScript code uses D3 APIs such as `select`, `range`, `symbol`, `scaleBand`, and the `join` method to generate the 120-line structure. Each mask cycles through symbols from D3’s symbol set to alternate black and white fill, producing the final composed effect. The SVG output is sized to the full browser window.

Loading thumbnail…

Fork of Full Fork of Fork of Sol LeWitt Reproduction with D3_final

Two alternating sets of thin rectangles and masked symbol shapes form an abstract, geometric composition reminiscent of Sol LeWitt's wall drawings. The code uses D3 v7 with `select`, `range`, and `symbol` to append SVG rectangles whose positions and dimensions alternate between horizontal and vertical lines. A mask, built via `append('mask')`, overlays diamond and square symbols from `d3.symbols`, with alternating black and white fills that reveal or hide the underlying grid. The result is a dynamic interplay of line, shape, and contrast driven by parity-based logic.

Loading thumbnail…

Full Fork of Fork of Sol LeWitt Reproduction with D3_progress

This example generates a grid of horizontal and vertical rectangles overlaid with two masks, producing a Sol LeWitt-inspired pattern. Each mask contains a row of distinct d3 symbols (from `d3.symbols`), rendered via `d3.symbol` with a fixed size, positioned along the canvas center. The first mask uses non-inverted fill, while the second is inverted, causing the symbol shapes to cut through or reveal the striped background. The visualization relies on D3 v7’s `select`, `range`, and `join` to bind data and construct SVG elements, with masks defined and applied through custom SVG `<mask>` elements.

Loading thumbnail…

Full Fork of Fork of Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is revealed through two overlapping masks, creating a dynamic composition where the stripes intersect and fade. The visualization uses D3 v7's `select`, `range`, and `join` to generate 100 rows and columns of semi-transparent rectangles. Two SVG masks, each containing a large circle symbol from `d3.symbol`, invert their fill to selectively hide and show portions of the stripe layers, producing a lens-like effect. The rendering is entirely SVG-based, with masks applied via `.attr('mask', ...)`.

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3 Method 1

This example reproduces a Sol LeWitt-inspired generative drawing as a full-screen SVG. It displays two sets of overlaid horizontal and vertical stripes, which are masked to reveal circular voids at the center. The artwork is built with D3 methods including `d3.select`, `d3.range`, and the `.join()` operator to create and position 100 rectangles in each direction. Two SVG masks (`circle-mask` and `circle-mask-2`) control which parts of the stripes remain visible, creating the interplay of lines and empty space.

Loading thumbnail…

Sol LeWitt Reproduction with D3

A grid of horizontal and vertical striped rectangles is partially visible through two circular masks, creating a layered crosshatch pattern reminiscent of Sol LeWitt's geometric wall drawings. The example uses D3 selections with `selectAll` and `join` to bind data from `d3.range` to SVG `rect` elements, rendered directly as SVG. Two SVG `mask` elements define the circular cutouts: one inverts the grid by showing only the intersection of shapes, while the other reveals the full pattern. The code dynamically sizes the visualization to the full browser window.

Loading thumbnail…

Svg Fundamentals_Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using two circular masks to reveal intersecting grids of horizontal and vertical rectangles. The code creates an SVG using the raw DOM API, defining one mask with a white circle on black and another with a black circle on white. Horizontal strips appear through the first mask, while vertical strips appear through the second, producing a layered, circular crosshatch pattern. The visualization dynamically sizes to the browser window and generates one hundred strips in each direction.

Loading thumbnail…

Fork of Fork of Svg Fundamentals 3_Dendrogram

A static SVG dendrogram depicts a hierarchical org chart with a CEO node at the root, branching to two managers, each leading three subordinates (A–F). The code uses raw SVG elements—`path` for links, `circle` for nodes, and `text` labels—styled with the Share Tech font. Node positions are manually calculated, and the visualization is rendered entirely via inline SVG in an HTML file.

Loading thumbnail…

Fork of Svg Fundamentals 2

This example displays a single polyline drawn with SVG, connecting five points across a 960-by-500 canvas on a white background. The path uses a black stroke with a width of 22, rounded line caps and joins, and renders as a bold, angular zigzag. Text is styled with the Share Tech font, and the SVG is embedded directly in the HTML without any additional JavaScript libraries. The rendering relies solely on native SVG elements, including `path` and `rect`, within an inline `svg` tag.

Loading thumbnail…

Svg Fundamentals 1

A minimalist SVG composition displays four horizontal bars of varying lengths against a white canvas, labeled A through D along the left margin. Each black rectangle rotates 90 degrees around its starting point, creating a stepped visual hierarchy. The example uses only raw SVG elements—`rect`, `text`, and `transform` attributes—with no external libraries. The bars and labels are rendered directly in the SVG namespace, styled with the Share Tech font loaded via Google Fonts, demonstrating fundamental vector shape positioning and rotation techniques.