pkdvalis

Fork of Sankey Pseudo Visualization

This example presents a pseudo-Sankey diagram of a Bitcoin transaction, visualizing the flow of sats from multiple inputs to outputs, including a fee. The diagram uses static SVG paths and rectangles with linear gradients, bundled in a single HTML file and styled with CSS. D3.js v5 is loaded for potential data manipulation, though the visualization itself is manually defined in markup. The chart labels each side with values and includes a link to the transaction on blockchain.com.

Dec 10, 2023

fCC Treemap

This visualization displays a treemap of the top 100 highest-grossing movies, grouped by genre. Each rectangle’s size represents a movie’s box office value, and color encodes its category, with an interactive tooltip revealing the movie name and value on hover. Built with React and D3.js, it uses `d3.hierarchy` and `d3.treemap` for layout, and dynamically renders SVG rectangles and text labels. The color legend, defined in static SVG, maps seven genres to distinct fills, while data loads from a freeCodeCamp-hosted JSON dataset. The chart fills the entire browser window, with a tooltip that tracks the cursor.

Dec 7, 2023

Reuseable D3 Scatter Plot Exercise with Symbols

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, encoding petal width and sepal length on the x and y axes while using different D3 symbols to distinguish species. The chart is built as a custom `scatterPlot` function that leverages D3 scales like `scaleLinear` and `scaleOrdinal`, along with `axisLeft`, `axisBottom`, and the `symbol` generator to render SVG paths. Data is loaded asynchronously via `d3.csv`, and the plot is rendered into a full-window SVG using a React-compatible approach.

Dec 3, 2023

Reuseable D3 Scatter Plot Exercise

This example demonstrates a reusable D3 scatter plot component built with React, visualizing the classic Iris dataset. It shows the relationship between petal width and sepal length, with a tooltip revealing the flower species on hover. The implementation uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to handle scaling and axes, while applying the component via a functional `.svg` selection call. The data loads from a remote CSV file, and the SVG resizes to fill the browser window.

Dec 1, 2023

Scatter Plot Template

This scatter plot template displays the Iris dataset, plotting petal length against sepal length for individual flower samples, with hover tooltips revealing species names. The visualization uses D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map data coordinates to SVG circles within a full-window responsive layout. Data is loaded asynchronously via `d3.csv` from a remote GitHub Gist, parsed with numeric coercion, and rendered using D3’s data-join pattern with `selectAll(...).join(...)` to bind circles and append titles. Axes are added as SVG groups with margin-based transforms.

D3 Scatter Plot Color Animation

This is an animated scatter plot of the Fisher Iris dataset, where each point represents a flower. All points initially appear grey, then sequentially transition through a color animation, changing to red, green, or violet based on the species (setosa, versicolor, virginica), before fading back to grey in a repeating cycle. The visualization uses D3 v7 to load the CSV data and render SVG circles. It leverages `d3.scaleLinear` for axes, `d3.extent` for domain scaling, and applies `transition().duration().delay()` to stagger the fill color changes across data points.

Fork of Animated Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that dynamically switch the x and y axes. The visualization uses D3 v6 with SVG rendering, featuring animated transitions that smoothly reposition circles and axes over 1000 milliseconds using `selection.join` and `transition`. Data is loaded via `d3.csv` from a GitHub Gist, with size-coded points representing individual flowers.

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

This matrix of scatter plots compares every numeric field in the classic Iris dataset, with colors distinguishing the three species. Each of the sixteen small SVG charts shows the relationship between a pair of measurements. The code uses `d3.csv` to load the data, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisLeft`, and `d3.axisBottom` to build the plots, and `schemeSet1` for the categorical color palette. Diagonal charts display the field name as a title.

Fork of Moon Calendar 2022

This visualization displays a full year of moon phases as a calendar grid, with months on the y-axis and days on the x-axis. Each day renders a small moon using d3.geoPath and d3.geoOrthographic, with phase computed from a simple lunar period calculation based on a 1970 reference new moon. A click on the visualization adds a red pulsing ring around the current day’s moon via a transition. The code uses d3.timeDays and d3.axis scales to layout the calendar, with SVG animation for the highlighting effect.

Fork of Tree Fractal

This interactive tree fractal responds to mouse movement. The branching angle and branch length ratio change based on the cursor's horizontal and vertical position, dynamically altering the tree's shape in real time. The visualization uses the Canvas API with `drawTree` recursion, `beginPath`, `moveTo`, `lineTo`, and `stroke` to render branches, incorporating high-resolution display scaling via `window.devicePixelRatio`. The code originates from HTML5 Examples and is adapted for high pixel density screens.

Fork of Sierpinski Triangle

This interactive fractal displays a Sierpinski triangle that divides into recursively smaller subtriangles on an HTML5 Canvas. The branching depth changes dynamically based on mouse position, ranging from zero to ten subdivisions. The code uses the Canvas API’s `getContext` and `fill` methods, with `devicePixelRatio` to ensure sharp rendering on high-resolution displays. Moving the mouse horizontally triggers a `mousemove` event, recalculating depth and redrawing the triangle with `clearRect` and recursive function calls.

Sankey Pseudo Visualization

This example presents a pseudo-Sankey diagram visualizing the flow of Bitcoin transaction outputs, breaking down a total input into distinct output categories such as fees and transferred satoshis. Constructed entirely with hand-coded SVG paths and rectangles rather than a dynamic layout algorithm, the visualization manually positions colored flows and nodes to mimic a Sankey’s appearance. The code relies on D3 v5 only for basic SVG rendering, while all shapes and styles are defined statically in the HTML, with gradients and labels added via SVG definitions and text elements. The underlying data is sourced from a specific blockchain transaction broadcast on September 14, 2023.

D3 Selection exercise

This example demonstrates D3 selection and data-join concepts through an animated line chart with pulsating circles. The visualization renders two stacked SVG layers, with the lower layer drawing a sine wave using `d3.line` and the upper layer displaying circles whose radii scale with their y-position and x-coordinate. Colors cycle through a rainbow palette based on each circle's vertical position. Using `d3.select`, `d3.range`, and sequential joins, the code updates the visualization at 60 frames per second via `setInterval`, with transitions on circle fill attributes creating smooth color changes.

D3 Selection animation exercise

Fifteen circles oscillate in a sine wave pattern across the screen, with each circle’s radius enlarging as it descends and shrinks as it rises. The animation runs on a 60fps interval, updating positions based on time and index. Built with D3 v7, it uses `select`, `range`, and `join` to bind freshly generated data to SVG circle elements each frame.

JS Arrays exercise

This example demonstrates the results of JavaScript array operations by logging computed values to the browser console. It uses D3’s `ascending` import and the native `reduce`, `sort`, and `range` methods to generate an array of 40 numbers, sum them, and sort an array of key-value objects by their keys. The page itself renders only a blank screen with oversized text styling, as all output appears in the console via `console.log`. The source code is defined in `index.js` and loaded through a minimal `index.html` shell.

Sol LeWitt Exercise with D3

A grid of overlapping horizontal and vertical bars is partially revealed through two masked layers, creating a dynamic interplay of positive and negative space. The composition references Sol LeWitt's geometric wall drawings by generating repeating rectilinear forms across the full viewport. The code uses D3 selections with `range`, `join`, and `attr` to render SVG rectangles, while custom SVG masks employ `symbol` and `symbols` from the D3 API to shape the visible areas with large, repeated path icons. The bars are evenly spaced at 20-pixel intervals.