PanJ

@PanJ·13 public vizzes

Hassio Node-RED Air Quality Control

This example shows a home-automation flow that reads PM2.5 levels from three air-purifier sensors and converts them into fan-speed commands for Home Assistant. Using the HA poll-state node, it samples living, bedroom, and library sensors every two minutes, marks one input as "small" via a change node, and applies a linear formula in a function node to map fine-dust readings to a discrete fan-speed range. A switch node routes zero values to the fan.turn_off service, while positive speeds trigger the fan.turn_on service, both via api-call-service nodes, with entity names derived from the sensor topic through string replacement.

Feb 15, 2024

Loading thumbnail…

Film Flowers, Single Complete

This visualization displays a single film as a flower composed of animated petals, with each petal's shape, size, and color encoding the film's MPAA rating, IMDB rating, and vote count. The code uses D3 v4 to map data to SVG paths, scaling petal size by rating and the number of petals by votes, with rating-specific path definitions. Petals animate via chained `.transition()` calls, scaling up and down over time. The visualization reads from a local `movies.json` file and uses `d3.scaleLinear` and `d3.scaleQuantize` to handle data mapping.

Jan 31, 2018

Loading thumbnail…

Film Flowers, Single Starter Code

This example visualizes a single movie as a stylized flower, where each petal represents a unit of the film’s IMDb rating and its shape varies by the movie’s content rating (e.g., PG-13). The code uses D3 v4’s `scaleLinear` and `scaleQuantize` to map data values, and Lodash for data transformation, loading the movie from `movies.json`. It draws SVG paths with hardcoded petal shapes, using data-binding and enter-append to create petals, but only the first movie is processed and petals are not yet positioned or scaled.

Jan 26, 2018

Loading thumbnail…

Film Flowers Petal Starter Code

This example demonstrates a grid of empty petal shapes drawn as SVG paths, with a single petal predefined and a second slot left for the user to complete. The visualization uses D3 v4 to bind an array of path strings to `path` elements, setting stroke and fill attributes, and positioning each petal via a `transform` translation based on its index. The rendering relies on raw SVG path commands like `M`, `C`, and `L` to define the petal curves, with the starter code meant for users to author their own path data.

Jan 26, 2018

Loading thumbnail…

Sample Flutter

This sample shows a chat message interface built with Flutter, displaying a sender’s avatar, name, and either text or an image in a row layout. The code uses Flutter’s `StatelessWidget`, `SizeTransition` for animated entry, and `CircleAvatar` with a network image from `snapshot.value['senderPhotoUrl']`. Messages retrieve data from a `DataSnapshot`, likely from Firebase, and render network images via `Image.network`. The animation is driven by a `CurvedAnimation` with an ease-out curve, controlling the message’s vertical reveal.

Sep 18, 2017

Loading thumbnail…

secretArchivesLock

secretArchivesLock presents a puzzle where a grid of characters shifts in response to a sequence of directional commands. The code models a lock as an array of strings, removing '.' characters and then applying L, R, U, or D actions to repack rows or columns. Using JavaScript array methods and string manipulation, it illustrates a deterministic, text-based simulation without external libraries. The visualization demonstrates the transformation of the lock’s state through each action, showcasing the logical result of the programmatic operation.

Jul 14, 2017

Loading thumbnail…

Async/await 6

The example shows an asynchronous JavaScript flow where the program awaits one operation, then runs two independent tasks in parallel via `Promise.all`. The code displays `doA()`, followed by `doB(a)` and `doC(a)` as the two concurrent calls after the first result resolves. It uses native `async`/`await` syntax with `Promise.all()` to coordinate these dependent and independent steps. No rendering library or data source is visible; the visualization focuses purely on the sequence and branching of these promises.

Dec 24, 2016

Loading thumbnail…

Async/await 5

This example visualizes the flow of a sequential asynchronous function, showing how each awaited promise resolves in a chain before the next begins. The code defines an `async` function with three sequential `await` calls—`doA()`, `doB(a)`, and `doC(b)`—where each step passes its result into the next. The visualization maps this dependency chain, highlighting the blocking nature of each await and the data handoff between stages. It relies on JavaScript’s native `async`/`await` syntax, with no external libraries, and renders a linear timeline of the function’s execution order.

Dec 24, 2016

Loading thumbnail…

Async/await 4

This example visualizes JavaScript promise chains as animated, interactive force-directed graphs using D3’s `d3.forceSimulation`. The code shows two parallel promise sequences—one resolving `doA`, `doB`, and `doC` sequentially, and another matching a separate `do()` function—each drawn as nodes and links on a canvas. The graph uses D3’s force layout to position nodes, with links updating in real time as promises resolve. The rendering relies on D3’s canvas API, and the data source is the hardcoded promise structure from the gist, not external input. The animation communicates the order and dependency of asynchronous calls.

Dec 24, 2016

Loading thumbnail…

Async/await 3

This example visualizes the nested callback structure of an asynchronous JavaScript function as a branching tree diagram. It shows how sequential `doA`, `doB`, and `doC` calls with error-handling callbacks create a multi-level flow. The visualization uses a force-directed layout from D3’s `d3.forceSimulation` to position nodes, with links rendered as curved paths. The code snippet from the gist is the direct source, and the rendering approach highlights the increasing depth of callbacks as the program progresses.

Dec 24, 2016

Loading thumbnail…

Async/await 2

A force-directed network graph visualizes the branching control flow of an `if/confirm` dialog, showing the sequential execution paths after user confirmation. The JavaScript example uses D3.js's `d3.forceSimulation` for physics-based layout and `d3.geoPath` for rendering curved edges that trace possible program states. Nodes represent code checkpoints, while animated links highlight the active branch as the simulation converges. The source data comes from the inline `async-2.js` snippet, with the graph emphasizing how asynchronous code transitions between confirmed and canceled states.

Dec 24, 2016

Loading thumbnail…

Async/await 1

This example demonstrates the sequential and delayed execution of JavaScript console logs using the native `setTimeout` function. The code first prints “แสดงอันแรก” immediately, then schedules a second message, “แสดงอัน الثاني (بعد الأول 1 ثانية),” to appear after a 1000-millisecond delay. The visualization shows how asynchronous timing controls the order of output, highlighting the difference between synchronous and callback-based execution in a minimal, text-based format. No external libraries are used; the behavior relies solely on the browser’s JavaScript runtime and the standard `console.log` API.

Dec 24, 2016

Loading thumbnail…

Context-ful Architecture 1

This example shows a server-side deletion flow for a todo list, emphasizing how user roles and context determine the outcome. The code uses Express routes, `Todo.findByIdAndUpdate` and `Todo.remove` for database operations, and `Promise.resolve().then()` chains to sequence authorization and data mutations. It highlights conditional behavior based on user roles and query parameters, but the visualization is unclear from this code alone. The JavaScript runs in a Node.js context, with no mention of a charting library or rendering approach; the example appears to be a backend API snippet rather than a data visualization.

Dec 12, 2016