Tell us what works and what could be better. We read every submission.
@al1s·7 public vizzes
This visualization displays a chronological list of upcoming assignments from the Canvas learning management system, distinguishing between those still requiring submission and those already completed. The code fetches course data via the Canvas API, retrieves assignments filtered by the "upcoming" bucket, then sorts them by due date. Using the Fetch API and JSON parsing, it logs each assignment’s due date, submission status, and URL to the console, with warnings for unsubmitted work. The logic relies on JavaScript’s `Date` object and `toLocaleDateString` for formatting, without any external visualization libraries.
This example renders a minimal JavaScript console output using a plain HTML page. The code logs the string `'dsf'` to the browser console via `console.log`, with the same line duplicated in a separate script tag labeled as the source. No visualization libraries or data-processing APIs are present; the page relies solely on native JavaScript execution and the browser’s developer console for output. The rendering approach is static, with no graphical elements, charts, or interactive components beyond the console message.
Three bar charts are drawn as animated SVG rectangles that appear, update, and exit in sequence. The example demonstrates D3’s data-join lifecycle: `d3.scale.linear` maps data values to pixel positions, while `d3.transition` animates fill opacity over 2.75 seconds. Three timed `render` calls first draw two red bars, then five blue bars, then remove two while recoloring the remaining three green, with console logs showing the join state before and after each update.
Rectangles in an SVG scene enter, update, and exit as the data array randomly changes size every second. The example demonstrates D3 v4’s data join with a key function, using `d3.selectAll("rect").data(data, d => d)` and `d3.transition()` to animate positions and fill-opacity. Entering rectangles drop from y=60 to y=0 in green, updating ones stay red, and exiting ones fall back to y=60 in brown before removal. A linear `d3.scaleLinear` maps values 1–10 to pixel positions along the x-axis.
This example demonstrates how D3’s data join handles re-rendering when the dataset changes. It creates an SVG with five rectangles, first rendering three red rectangles from the array [1, 2, 2.5], then re-rendering with five blue rectangles from [1, 2, 3, 4, 5]. The code uses `d3.scaleLinear` to map data values to x-coordinates, and `selectAll`, `data`, `enter`, `exit`, and `merge` to update the DOM. Exiting rectangles are removed, while new ones are appended and colored according to the latest render call.
Letters animate in a horizontal line, appearing, moving, or fading out as a random alphabetical subset of the alphabet is selected every 1.5 seconds. The d3.v4 code uses data joins with enter, update, and exit selections, styling each state with distinct colors and animating positions and opacity via d3.transition. SVG text elements render the glyphs in a monospace font.
This resume visualization transforms the developer’s career history into an interactive, scroll-driven timeline. It shows work experience, skills, projects, and publications as nodes and text blocks arranged along a vertical path. The page uses React to manage state and rendering, with D3’s `forceSimulation` for node layout and CSS transitions for smooth scrolling animations. Data is hardcoded in a markdown file, parsed into structured sections. The visualization emphasizes chronological flow and skill grouping rather than spatial hierarchy.