emberix@gmail.com

@rickNoise·34 public vizzes

Episode 9 - Reusable Charts (GIRIBAW)

This example demonstrates a reusable scatter plot that visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The chart is built using D3 v6 and rendered as SVG, with circles sized by a configurable radius and axes drawn using `axisLeft` and `axisBottom`. The code defines a `scatterPlot` function with a fluent API for setting width, height, data, margins, and value accessors, then invokes it via `svg.call()`. Data is loaded asynchronously from a remote CSV using `d3.csv`.

Dec 3, 2024

Loading thumbnail…

Horse Scatterplot

The visualization plots the racehorse "Hot Relation's" performance by comparing track condition against race distance. Each point's size represents the number of starts, with an overlay of places and wins on the same axes, using yellow, orange, and red circles. The data is derived from a JSON file containing the horse's form history, processed into a custom dataset before being rendered as an SVG scatterplot with D3.js v5. The chart uses `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom` and `d3.axisLeft` to construct the axes.

May 25, 2022

Loading thumbnail…

Untitled

A dropdown menu switches between three data series in this connected scatterplot, updating both a line path and circular points with smooth transitions. The visualization reads time-series data from an external CSV file and renders it as an SVG using d3.line, scaleLinear axes, and transition methods for animated updates. A second custom chart built with d3's modular API and scalePoint scales demonstrates categorical axis support with staggered circle entrance animations.

May 10, 2022

Loading thumbnail…

Episode 12 - Scatterplot Including Species w/ Axes (GIRIBAW)

This interactive scatterplot visualizes the Iris dataset, allowing users to compare measurements like petal and sepal width or length, with the option to map species to an axis. The visualization supports animated transitions between axis selections via D3’s `transition` and delayed updates. It uses `d3.csv` for data loading, `scaleLinear` and `scalePoint` for quantitative and categorical axes, and custom reusable modules (`scatterPlot.js`, `menu.js`) built on D3’s selection and dispatch APIs. The SVG renders semi-transparent circles with axis labels and menus for control.

Aug 21, 2021

Loading thumbnail…

Episode 12 - Scatterplot Including Species (GIRIBAW)

This interactive scatterplot allows users to explore the Iris flower dataset, comparing measurements like sepal and petal length and width, and species. The visualization uses D3.js to create an SVG plot with automatically scaled axes, supporting both quantitative and categorical variables. Users can change the x and y axes via dropdown menus, triggering smooth transitions of the data points. The iris data is loaded from a remote CSV file, and the plot updates with a 600ms transition and staggered delays for each circle.

Jun 15, 2021

Loading thumbnail…

Episode 11 - Animated Scatterplot with Menus (GIRIBAW)

This interactive scatterplot visualizes the Iris dataset, with dropdown menus letting viewers choose which sepal or petal measurements appear on the x- and y-axes. Built with D3.js v6, it uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for scaling and axes, while `transition()` animates circle positions and axes over 800ms when selections change. The menu component leverages D3's `dispatch` for change events, and data is loaded via `d3.csv` from a GitHub Gist, rendered as SVG with entering circles growing from radius 0.

Jun 9, 2021

Loading thumbnail…

Episode 10 - Animated Reusable d3 Scatterplot (GIRIBAW)

An animated scatterplot cycles through four Iris flower measurements, updating every three seconds. Built with D3 v6, it loads the Iris dataset from a GitHub Gist, renders SVG circles and axes, and reuses a custom `scatterPlot` function with setters. The code uses `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to smoothly move points and axes between states. Circle enter and update transitions stagger delays, animating positions and radii for a fluid exploratory view of the data.

Jun 8, 2021

Loading thumbnail…

Episode 10 - Reusable Charts w/ Idempotence (GIRIBAW)

This visualization demonstrates reusable scatter plots using the D3.js library, rendering an SVG of the Iris dataset. The chart cycles through four attributes—petal width, sepal width, petal length, and sepal length—as the x-axis variable every two seconds, with sepal length fixed on the y-axis. The code uses D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and the `join` pattern for idempotent updates. Data loads from a GitHub Gist via `d3.csv`, and the plot’s configuration (width, height, margins, radius, accessor functions) is set through a chained getter-setter API.

Jun 7, 2021

Loading thumbnail…

Episode 9 - Reusable Charts (GIRIBAW) w/ Symbols

This example demonstrates a reusable scatter plot built with D3 v6, visualizing the classic Iris dataset with petal width on the x-axis and sepal length on the y-axis. The scatterPlot.js module creates a configurable chart function that uses d3.scaleLinear for axes, d3.scaleOrdinal to map species to different d3.symbol shapes, and d3.symbol to generate the path data. Data is loaded asynchronously via d3.csv from a GitHub Gist. The chart is rendered as an SVG, with the reusable pattern allowing custom setters for dimensions, margins, accessors, and symbol size.

Jun 4, 2021

Loading thumbnail…

Episode 8 - Scatter Plot (GIRIBAW)

This scatter plot displays the relationship between petal length and sepal length for the Iris flower dataset, loaded from a GitHub Gist via `d3.csv`. The visualization uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data points and render axes, with each circle representing a flower sample positioned by its x and y values. The code applies a full-window SVG canvas, fixed circular radius, and margins for readability, drawing all marks and axes dynamically after the asynchronous data fetch completes.

Jun 3, 2021

Loading thumbnail…

Eloquent JS: Chapter 11

This example visualizes asynchronous programming concepts from Chapter 11 of Eloquent JavaScript using D3 v5. It renders a heading and an SVG canvas that uses d3.forceSimulation to demonstrate how JavaScript handles concurrent tasks. The visualization shows tick intervals with setTimeout, promise resolution ordering, and blocking code execution timing, all represented through animated SVG elements. The code displays timing diagrams showing when setTimeout callbacks and Promise.then handlers execute relative to synchronous code, using D3's force layout to arrange nodes and animated transitions to illustrate event loop behavior over time.

Apr 15, 2021

Loading thumbnail…

Eloquent JS: Chapter 10

This example visualizes the module system from Chapter 10 of Eloquent JavaScript, showing the road network between village locations as a graph. The visualization uses d3.v5 to render an SVG canvas with nodes and edges based on the `roads` array, which defines connections between named places. The code demonstrates modular programming by splitting functionality into separate files, including a `graph` module that exports a `buildGraph` function. It processes road pairs using string splitting and passes them to construct the final `roadGraph` object, highlighting how modular design organizes the data flow.

Apr 14, 2021

Loading thumbnail…

Eloquent JS: Chapter 9

This example demonstrates regular expression patterns from Chapter 9 of Eloquent JavaScript, testing and replacing text in a console. It uses JavaScript’s native `RegExp` methods like `test`, `exec`, and `replace` to match patterns such as car/cat, quoted phrases, and INI configuration parsing. The visualization renders results in an SVG-based React interface using D3 v5, displaying matched strings and substitution outputs as static text elements within the 960×500 canvas.

Apr 14, 2021

Loading thumbnail…

Eloquent JS: Chapter 8

This example demonstrates JavaScript exception handling and control flow from Chapter 8 of Eloquent JavaScript, using a React starter template. The code implements `reliableMultiply`, which retries a `primitiveMultiply` function that randomly throws a custom `MultiplicatorUnitFailure` error, and `withBoxUnlocked`, which temporarily unlocks a box object, executes a body function, and restores the lock state in a `finally` block. The page renders static HTML with inline CSS and empty script tags, showing error-catching patterns without visual output.

Apr 9, 2021

Loading thumbnail…

Eloquent JS: Chapter 7 (project)

This example demonstrates a simulated delivery robot navigating a network of roads connecting locations in a village. It shows three different robot strategies—random movement, a fixed mail route, and goal-oriented pathfinding—and measures their efficiency by running many simulated parcel-delivery tasks and comparing the average number of steps taken. The JavaScript code defines a graph from a static list of road connections, implements a `VillageState` class to track robot position and undelivered parcels, and uses a breadth-first search (`findRoute`) for the goal-oriented robot. The simulation runs entirely in the console, with no visual output.

Apr 9, 2021

Loading thumbnail…

Eloquent JS: Chapter 6

This example demonstrates three JavaScript exercises from Eloquent JavaScript, Chapter 6, implemented as plain JavaScript classes and console output. It shows a `Vec` class with vector addition, subtraction, and length calculation, a `Group` class with add, delete, has, and static from methods, and a custom `GroupIterator` making groups iterable via `Symbol.iterator`. The code runs directly in the browser console, logging results for each exercise, including a numeric accumulation loop and string iteration, with no external libraries or frameworks beyond vanilla JavaScript.

Apr 9, 2021

Loading thumbnail…

GIRIBAW Episode 5: D3 Selections

A series of animated circles moves in a sine-wave pattern across the screen, with each circle's vertical position and radius oscillating over time. The example demonstrates D3's data-join pattern in a React context, using `select` and the `join('circle')` API to bind array data to SVG elements. The animation updates at 60 frames per second via `setInterval`, regenerating data with `makeData` and passing it through `vizData`. This shows the modern D3 v6 approach to enter, update, and exit selections with minimal code.

Apr 6, 2021

Loading thumbnail…

Eloquent JS: Chapter 5

This example displays the output of four JavaScript exercises from Chapter 5 of Eloquent JavaScript, all run in the browser console. It shows array flattening using `reduce`, a custom `loop` function, an `every` predicate implementation with `filter`, and a `dominantDirection` function that uses `countBy` and `characterScript` to classify text direction. The code relies on the standard JavaScript array methods and the predefined `SCRIPTS` dataset. The page renders only static text and styled body text via CSS, with results logged to the console.

Apr 2, 2021

Loading thumbnail…

Eloquent JS: Chapter 4 (take 3)

This example demonstrates solutions to the Chapter 4 exercises from *Eloquent JavaScript*, covering range, sum, array reversal, list conversion, and deep comparison. It shows the implementation of functions like `range`, `sum`, `reverseArray`, `arrayToList`, and `deepEqual`, with expected outputs logged via `console.log`. The page uses plain HTML, CSS, and JavaScript without external libraries, rendering results in the browser console rather than as visual graphics. The code highlights recursive approaches, step handling, and in-place array mutation, with a note that the deep comparison exercise was not fully solved.

Apr 1, 2021

Loading thumbnail…

Eloquent JS: Chapter 4 (take 2)

This example shows the console output from solving several exercises from Chapter 4 of Eloquent JavaScript, focusing on array manipulation functions. The code defines and tests a `range` function that generates numeric arrays, a `sum` function that totals array values, and two reversal functions: `reverseArray` which creates a new reversed array using `unshift`, and `reverseArrayInPlace` which mutates the original array by repeatedly unshifting elements. Written in vanilla JavaScript with no external libraries, the page uses `console.log` to print intermediate results and styled text via CSS.

Mar 31, 2021

Loading thumbnail…

Eloquent JS: Chapter 4

This example demonstrates JavaScript array manipulation and function definitions from Eloquent JavaScript Chapter 4, using the browser console for output. The code pushes, pops, shifts, and unshifts elements in an array, logging each operation's result. It then defines a `range` function that attempts to generate an array from start to end values, though the loop condition uses assignment instead of comparison, preventing correct execution. The page uses plain HTML, CSS, and JavaScript APIs including `console.log`, `Array.push`, `Array.pop`, `Array.shift`, and `Array.unshift`.

Mar 31, 2021

Loading thumbnail…

Eloquent JS: Chapter 3

This example demonstrates solutions to three programming exercises from Chapter 3 of Eloquent JavaScript. It implements a minimum-finding function, a recursive even-number checker, and character-counting utilities, logging results directly to the browser console. The page uses plain JavaScript functions such as `returnMin`, `isEven`, and `countChar` to test various inputs. A minimal HTML file with inline CSS centers the title text, while all computation runs client-side without external libraries or frameworks.

Mar 30, 2021

Loading thumbnail…

Eloquent JS: Chapter 2

This example showcases the output of four JavaScript programming exercises from Chapter 2 of *Eloquent JavaScript*, rendered directly in the browser console. It demonstrates looping with `for` and `while` statements to print a triangular pattern of `#` symbols, the FizzBuzz sequence with conditional `if`/`else` logic, and a chessboard grid built through nested loops. The code uses plain JavaScript with `console.log` for output, and the accompanying HTML page uses inline CSS for styling. No external libraries are used, focusing purely on core language syntax and algorithmic thinking.

Mar 29, 2021

Loading thumbnail…

AAPL Stock Price

This scatter plot visualizes the daily closing price of Apple stock (AAPL) from December 2019 to March 2020, sourced from SEC filings. The visualization encodes each trading day as a steelblue circle, with the x-axis representing time and the y-axis representing price in dollars, revealing price fluctuations over the period. Built with D3 v5, the chart uses `svg` rendering with `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and includes interactive tooltips that display the exact closing price on mouseover. The data is loaded from a local CSV file, and the chart title and axis labels are styled using Garamond font from the accompanying stylesheet.

Mar 29, 2021

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion, using a horizontal tree layout rendered as SVG. The code uses D3 v5's `tree` layout and `linkHorizontal` path generator to position nodes and draw connecting links, with country names displayed as text labels sized by depth. Data comes from a JSON file containing a nested structure of world regions and countries, while zooming is implemented via D3's `zoom` behavior.

Dec 13, 2020

Loading thumbnail…

Blank Canvas

This example presents a blank, rounded rectangle drawn as an SVG element, filling the entire viewport. The visualization uses d3.v5’s `select` and `append` methods to create a `<rect>` with a fixed corner radius, while the page’s dimensions are pulled from `document.body.clientWidth` and `clientHeight`. The included data.csv, referencing the biblical family tree from Eve and Cain, is not loaded or processed in the displayed code, leaving the canvas intentionally empty. The stylesheet fixes the body to prevent scrolling, ensuring the graphic occupies the full screen.

Dec 13, 2020

Loading thumbnail…

Collapsible Tree Example

This interactive collapsible tree diagram displays a hierarchical dataset with a top-level node branching into two second-level nodes and sub-nodes. Using D3 v6’s `d3.layout.tree` and `d3.svg.diagonal`, it renders nodes as white circles with steelblue strokes and connecting links, positioning them by depth. The SVG layout is fixed-depth, with nodes manually offset horizontally based on hierarchy level. The example’s markup references an Airbnb S-1 revenue dataset, but the code itself uses static inline tree data for the visualization.

Dec 10, 2020

Loading thumbnail…

Bowl O' Fruit - General Update Pattern - with Nesting - with Transitions

A dynamic SVG visualization demonstrates the general update pattern with nested selections and transitions, showing a bowl of fruit where apples are gradually eaten or replaced by lemons over timed intervals. The code uses d3.scaleOrdinal for color and radius mapping, while the enter, update, and exit selections manage fruit groups with circles and text labels. Data updates occur via setTimeout calls that pop, modify, or filter fruit objects, triggering re-renders that transition positions and appearance. The d3-selection and d3-scale modules handle the data-driven SVG rendering.

Dec 5, 2020

Loading thumbnail…

Bowl O' Fruit - General Update Pattern - with Transitions

Five fruit circles animate in an SVG bowl, then sequentially disappear, change type, and filter out over time. This demonstrates D3's general update pattern with transitions, using a data join keyed by each fruit's unique `id`. The visualization shows how entering, updating, and exiting elements are handled smoothly, with `d3.selectAll` and `transition.attr` animating radius, position, and color. Fruits are rendered as red apples or yellow lemons, sized differently via ordinal scales, with a 1-second transition duration applied to all state changes.

Dec 5, 2020

Loading thumbnail…

Bowl O' Fruit - General Update Pattern - with Nesting

A dynamic fruit bowl demonstrates D3's general update pattern with nesting, using `d3.select` to bind an array of fruit objects to SVG groups and managing enter, update, and exit selections via `selection.enter()`, `merge()`, and `exit().remove()`. Circles and text elements inside each group update attributes like fill color and radius using `d3.scaleOrdinal`, with apples and lemons mapped to red and yellow. The animation, driven by `setTimeout`, removes apples, replaces one with a lemon, and filters another, showing how data joins and nested selections handle transitions in D3 v5.

Dec 5, 2020

Loading thumbnail…

ABNB Revenue - Vertical Bar Chart

This vertical bar chart displays ABNB revenue by year from 2015 to 2019, using a dark steel-blue line and circular points to emphasize the upward trend. The visualization loads data from revenue.csv via d3.csv, then maps years to a d3.scaleBand x-axis and revenue to a d3.scaleLinear y-axis with a reversed domain. It renders as an SVG with d3.axisLeft and d3.axisBottom for ticks, while a d3.line generator with curveBasis connects the data points. Axis labels and a title are added using SVG text elements.

Dec 5, 2020

Loading thumbnail…

ABNB Revenue - Line Chart

This line chart displays Airbnb’s annual revenue from its pre-IPO S-1 filing, spanning 2015 to 2019 with values in thousands of dollars. The visualization uses D3 v5 to render SVG circles at each data point, with axes and gridlines generated via `axisBottom` and `axisLeft`. The y-axis labels are formatted using D3’s `format` function, converting large numbers to billions. Styling is applied through a linked CSS file, including custom fill colors and tick formatting.

Dec 3, 2020

Loading thumbnail…

ABNB Revenue - Scatter Plot

This scatter plot displays Airbnb's annual revenue from 2015 through 2019, sourced from the company's pre-IPO S-1 filing. Each circle represents a year, with its horizontal position encoding revenue (in dollars) and vertical position encoding the year. The visualization uses D3 v5, rendering as an SVG, with `scaleLinear` for the x-axis and `scalePoint` for the discrete year categories on the y-axis. The chart includes labeled axes, a title, and uses D3's `axisBottom` and `axisLeft` for ticks, with revenue values formatted using `format('.2s')`.

Dec 3, 2020

Loading thumbnail…

ABNB Revenue

This bar chart shows Airbnb’s annual revenue from 2015 to 2019, increasing from roughly $0.9 billion to $4.8 billion. The visualization uses D3 v5 with an SVG rendering approach, applying `scaleLinear` for the revenue axis and `scaleBand` for the categorical years. Revenue values from the CSV are multiplied by 1000 and formatted with abbreviations using `format('.2s')`. Axes are built with `axisBottom` and `axisLeft`, while gridlines and labels are styled via CSS classes. The data originates from Airbnb’s pre-IPO S-1 filing.

Dec 3, 2020