Tell us what works and what could be better. We read every submission.
@andresin87·15 public vizzes
This example demonstrates how Sass variables with `!default` flags and scope-based overrides can produce conflicting CSS rules for an `<input>` element. The code defines a red `$color` token in a "sui-theme" partial, then overrides it to blue in a "vertical-theme" section, while the `$input-token` remains red. The final compiled output shows two separate `input` rules—one with a red background and another with a blue background—plus a `:focus` state using the red token for a box-shadow. The rendering relies on Dart Sass 1.32.12 with expanded output style, using SCSS syntax and no autoprefixer.
SassMeister demonstrates how Sass variables and CSS custom properties interact across theme layers. The input.scss file defines a `$color` variable defaulting to `var(--c-primary)`, then overrides it with a red value in `:root` before applying it to an `input` background. A second vertical-theme block reuses `$color` but relies on the earlier `$input-token` default, while the markup.html sets `--c-primary` to blue via inline styles. The Dart Sass compiler outputs expanded CSS where the focus state’s box-shadow references the token, showing how variable scope and defaults resolve across separate theme files.
This example demonstrates how Sass variable scoping and the `!default` flag control theme overrides across nested contexts. The SCSS source defines a `$color` variable that shifts from red to blue when a vertical-theme block overrides it, while the `$input-token` variable retains its default red value from the sui-theme. The resulting CSS shows two `input` rules—one applying a red background from the initial theme, another applying blue from the vertical theme—plus a `:focus` state that uses the red `$input-token` for a box-shadow. The code relies on Sass’s variable assignment and Dart Sass compiler settings, with no JavaScript or data visualization involved.
This example demonstrates how Sass variables with `!default` flags and comment-based theme sections control CSS output for an `input` element. The code shows two distinct themes—a red "sui-theme" and a blue "vertical-theme"—where the default variable is overridden, and a component layer applies the blue background while reusing the red token for the `:focus` color. Compiled with dart-sass 1.32.12 in expanded output style, the resulting CSS reveals the cascade order: the red background from the default, then the blue override, and the focus rule inheriting the original red token.
This example visualizes function memoization by showing how repeated calls to `memoizedAdd` return cached results. It uses plain JavaScript to implement a `memo` wrapper that stores computed sums in a `cache` object, keyed by a stringified hash of the arguments. The code defines `addFn` for addition and then wraps it with `memoizedAdd`, demonstrating that subsequent calls with the same inputs bypass the original function. The visualization relies on standard JavaScript object property access and `Object.keys` to check cache hits, with no external libraries or rendering APIs involved.
This example demonstrates an interactive popover component built with React, showcasing both controlled and uncontrolled usage. Users can select a placement position, toggle a close icon, and trigger the popover via buttons for show, toggle, hide, and unset actions. The component uses Reactstrap's Popover and UncontrolledPopover components with lazy loading via React Suspense, and manages positioning through the `PLACEMENTS` configuration. It demonstrates the AtomPopover API, including controlled visibility through `showPopover`, ref-based targeting, and callback throttling with `@s-ui/js`'s throttle utility.
This example presents four distinct JavaScript techniques for detecting touch or mobile devices, each demonstrated in a single file. It shows how developers can combine modern and legacy APIs to identify touchscreen capability, from checking the `ontouchstart` event and `navigator.MaxTouchPoints` to using `window.matchMedia` with `pointer: coarse` and `any-pointer: coarse` media queries. The code also includes a Modernizr-inspired approach that tests multiple vendor-prefixed queries, and a robust fallback method that checks for Pointer Events, `TouchEvent`, and event handlers. The example relies solely on native browser APIs without external libraries.
A donut chart displays a percentage value as a filled arc against an unfilled background, with the percentage text centered inside. The chart is generated using a jQuery plugin that wraps D3 v3’s `d3.svg.arc` and `d3.layout.pie` to compute and draw the arc geometry in SVG. The plugin accepts configurable options for dimensions, radii, colors, font styling, and transition duration, though no animation is invoked here. The example initializes the donut with a value derived from 70 out of 80, rendered at 600 by 600 pixels on a dark grey page.
This interactive calendar displays HBX course schedules by week, with each cell representing a day and color-coded progress bars tracking completion. The visualization uses D3.js (v3) to render the calendar grid and animated progress indicators, while Flickity provides carousel navigation for switching between course views. Data is loaded from static JSON files, and the interface relies on Bootstrap for layout, Font Awesome for icons, and custom CSS for the Harvard-themed styling.
This interactive web tuner visualizes the entire audible frequency range (A-1 at 13.75Hz to G#9 at 26578.5Hz) as a continuous circular scale, with the current note highlighted and animated as the user navigates. Built with D3.js for SVG rendering and Timbre.js for audio synthesis, it uses canvas for real-time sound visualization. Users explore the chromatic scale using arrow keys — Up/Down for adjacent semitones, Left/Right for octave jumps — while pressing S or Space toggles the generated sound on and off, linking visual position to auditory frequency.
This example visualizes a dynamic, abstract composition inspired by Max Bill’s geometric art, using a force-directed simulation to arrange colored nodes and links. The code loads data from an external JSON file and renders it with D3’s `forceSimulation` and SVG paths, updating positions each tick. Node colors and link widths are mapped from data attributes, while a canvas overlay uses `getImageData` to sample pixel colors for a subtle background texture. The visualization continuously animates as forces settle, blending modern art aesthetics with interactive data-driven layout.
Connect4 is an interactive, animated implementation of the classic Connect Four game, rendered with SVG, Canvas, and WebGL. Players take turns dropping colored discs into a 7x6 grid, with the interface built using Bootstrap-styled buttons for controls. The visualization uses multiple rendering technologies to draw the game board and pieces, with smooth animations for disc drops and win-state highlights. The source code is available as a gist by andresin87.
This example shows a closed cardinal spline path with a draggable circle that snaps to the closest point on the path. As the user drags the circle over the SVG area, a red tangent line appears at the nearest path location, with its angle and position continuously updated based on the path geometry. The visualization uses D3’s drag behavior, SVG path interpolation, and a binary search plus linear scan to compute the closest point and tangent. It also includes the pathseg.js polyfill to support the SVGPathSeg API in browsers that removed it.
Sociograma is an interactive social network visualization built with D3 v3 that renders a force-directed graph. Nodes representing individuals are connected by links, with the visualization supporting SVG, canvas, and WebGL rendering modes to display the network. The graph is animated, allowing users to explore relationships within a social education diagnostic context.
A draggable circle snaps to the nearest point along a closed, cardinal-interpolated path while a red tangent line updates to show the path's direction at that location. Built with D3 v3 and SVG, the example demonstrates the `closestPoint` algorithm using `getPointAtLength` with a linear scan and binary search, and `getTangent` to compute the tangent via nearby points. The code relies on the `pathSegList` API and the `pathseg.js` polyfill for compatibility with modern browsers.