Tell us what works and what could be better. We read every submission.
@akre54·22 public vizzes
This visualization maps taxi trip paths across London using a deck.gl renderer on an SVG basemap. The trips data consists of sequences of GPS coordinates tracing vehicle routes through the city. A custom code node transforms the raw JSON into trip polylines, which are then passed to the DeckRendererOp for visualization. The example demonstrates a noodle-based workflow where a file loader reads trip data and feeds it through a code operation to render animated or static path overlays on a geographic basemap.
A dark map of central London shows three animated taxi trips as glowing line traces. Using deck.gl’s TripLayer with MapLibre GL as the base map, each route is drawn as a sequence of colored trail segments that progressively reveal and then fade over time. The animation runs in a loop, with the three trips moving simultaneously through the city streets at different speeds, creating a sense of journey and flow. The WebGL rendering keeps the trails smooth and responsive, with subtle color differentiation between the three routes. The visualization is self-contained in a single HTML file, with a minimal UI and a map constrained to a square viewport.
TheatreJS animates a scene through keyframed sequences, driving a canvas to render each frame at a fixed simulation time. This example shows how to capture those frames and encode them into a WebM video file using the WebM Muxer library and the browser’s VideoEncoder API with VP9 codec. It uses a rAF driver to tick the animation, a MediaStreamTrackProcessor to read canvas frames, and a file picker to save the output. The capture loop advances the sequence position frame by frame, requesting new canvas frames and writing them as video chunks with periodic keyframes.
This example demonstrates a workflow for converting Lottie animations into TouchDesigner-compatible SVG geometry. The Node.js script `clean_svg.js` uses `lottie-to-svg` to render each animation frame to SVG, then processes the output through SVGO, svg-flatten, and paper.js to resolve `<use>` references, flatten paths, and apply clipping masks. A companion Python script `svg_to_sop.py` parses the cleaned SVG paths with svgpathtools and converts them into TouchDesigner SOP geometry—cubic Béziers become Bézier SOPs and line segments become polygon SOPs. The result bridges After Effects Bodymovin/Lottie exports to TouchDesigner-friendly SVG files for further procedural manipulation.
NYC Tow Check is a server-side monitoring tool that periodically queries the NYC towing department’s website to determine if a specific vehicle has been towed. It uses Puppeteer to automate a browser, solves the site’s ReCAPTCHA via 2Captcha, submits a license plate, and checks the result page for the phrase “The NYPD towed the vehicle.” If found, it sends an SMS notification through AWS SNS. The system runs as an AWS Lambda function using chrome-aws-lambda, with a Dockerfile provided for local development.
Twenty rows of unchecked checkboxes render through React, with a highlight state updating randomly every 50 milliseconds. The example demonstrates component lifecycle management via `componentDidMount`, state changes through `setState`, and programmatic DOM creation using `React.createElement`. After 200 milliseconds, the interval clears and the animation stops. The sketch uses React and ReactDOM to build a simple SVG-free interface, sourced from a RequireBin gist that loads modules from the browserify CDN.
This interactive map clusters geographic points across multiple zoom levels, showing marker density from state and county summaries down to individual locations. It uses the Supercluster library for hierarchical point clustering and Tilebelt for tile calculations, with PostGIS spatial queries fetching points within tile bounding boxes. Clusters are cached per tile and zoom level, and D3’s max function determines cluster size scaling, while marker data comes from a geocoded node database.
This example demonstrates a Reflux mixin that syncs store actions with a REST API, exposing fetch, save, and delete operations that return promises. It uses the `window.fetch` API wrapped in a custom `sync` function, with `whatwg-fetch` polyfill and `defaults` for request headers. The mixin maps GET, POST, PUT, and DELETE requests to Reflux actions, triggering `.completed` or `.failed` handlers, and supports query-string serialization for GET params. Data flows through Reflux stores with `assign` for merging model updates and `JSON` for request/response bodies.
This example demonstrates how to replace Backbone’s default AJAX implementation with the browser’s native `fetch` API. It defines a `Backbone.ajax` override that handles GET parameter serialization, sets JSON headers, and chains promise-based responses through status checking and JSON parsing. The code uses `Backbone.ajax`, `fetch`, `Response.status`, and `Response.json()` to connect Backbone model and collection calls directly to modern fetch promises.
This example demonstrates how Backbone and Zepto are bundled together using webpack, showing a minimal module dependency setup. The code creates a new `Backbone.View` instance and logs it to the console, confirming that the libraries load correctly. The webpack configuration uses `exports-loader` to strip Zepto’s global `$` and `Zepto` objects, aliasing `jquery` to `zepto/zepto.min.js`. The `out.js` file is generated from `index.js` with source maps enabled, illustrating a basic dependency-resolution workflow.
This example demonstrates a utility for detecting when a user begins and ends typing in a given DOM element, triggering custom `start` and `stop` callback functions. It uses the native `addEventListener` API to listen for `keypress`, `keydown`, and `keyup` events, distinguishing backspace and delete keys from regular input. A configurable `delay` (defaulting to 400ms) controls the idle period before the `stop` notification fires, and the code avoids repeated `start` calls while typing continues. Written in CoffeeScript, the module exports a function that accepts the element and an options object.
This example demonstrates a React technique for rendering SVG filter effects, specifically Gaussian blur, by patching React’s SVG property configuration. It shows how to enable support for the `mask`, `filter`, and `stdDeviation` attributes, which React’s default DOM property whitelist omits. The code imports ReactDOM, ReactElement, and SVGDOMPropertyConfig from React’s internal libraries, then marks these properties as `MUST_USE_ATTRIBUTE`. It also creates custom React factories for the `<filter>` and `<feGaussianBlur>` SVG elements, allowing them to be used as JSX components. The patch runs conditionally based on development mode, using `ReactElementValidator.createFactory` in development and `ReactElement.createFactory` in production.
This canvas animation depicts a field of 2,500 circles, each randomly positioned and colored red or blue, drawn initially to a background canvas. Every 1.5 seconds, a new large circle (radius 80) is added to the foreground and progressively shrinks over time. While shrinking, circles are rendered as thick-outlined strokes; once they reach the minimum radius of 4, they are filled solid and permanently drawn to the background canvas, where they join the original static circles. The foreground canvas is cleared and redrawn every 20 milliseconds, creating a smooth pulsing effect as the shrinking circles fade into the static backdrop. The visualization uses the canvas API and requestAnimationFrame via a custom requestInterval helper for animation.
This example visualizes a force-directed network graph, showing how nodes and links are positioned and animated in a 2D space. The code uses Backbone.js for data structuring, while the simulation is driven by d3.forceSimulation to calculate node physics and link forces. A jQuery shim provides DOM compatibility for the visualization. The rendering approach relies on canvas-based drawing, though the specific drawing calls are not shown in the provided snippet. The graph’s layout emerges from the force simulation’s iterative updates, with nodes repelling and links constraining their positions.
This visualization shows a transcript of Frank Costanza’s monologues from *Seinfeld*, rendered as a dense, flowing network of lines. The text is split into individual lines, and a force-directed layout using `d3.forceSimulation` arranges them into a tangled, organic cluster. Each line’s position and the connecting curves are drawn with SVG paths, while the overall composition emphasizes the chaotic, overlapping nature of the dialogue. The data comes from a plain-text transcript, and the rendering uses D3’s simulation and path utilities to create the visual.
This example demonstrates how to extend JavaScript’s module system to load Handlebars templates directly from `.hbs` files. It shows a custom `require.extensions` handler that reads a template file synchronously and compiles it with `Handlebars.compile`, returning the compiled function as the module export. The code uses the `handlebars` and `fs` Node.js APIs, and pairs with browserify to bundle the helper for client-side use, enabling seamless template inclusion alongside JavaScript modules.
This example converts a GPS track from a KML file into a GeoJSON MultiLineString for use in web mapping. It reads `history.kml`, parses it with the `xml2js` library, extracts the coordinates from the `gx:Track` element, and writes the resulting GeoJSON to `points.json`. The conversion relies on Node.js’s `fs` module for file input/output and `parseFloat` to clean each coordinate pair. The output is a single-feature GeoJSON object with a MultiLineString geometry, ready for visualization with tools like D3’s `d3.geoPath`.
This visualization displays the media queries from all stylesheets on the page as a flat list of text strings, extracted directly from the browser’s CSSOM. It shows each unique media condition—such as screen widths or print rules—in the order they appear across linked and embedded stylesheets. The code uses the native `document.styleSheets` collection and iterates over `cssRules`, filtering for rules that have a `media` property and pushing the first media query string into an array. No external libraries are used; it relies solely on vanilla JavaScript DOM APIs.
This example demonstrates a multi-select dropdown interface built with Backbone.js and jQuery, showing how users can filter, select, and clear items from a list. The code includes a typeahead input for filtering, checkbox toggles for selecting multiple entries, and a clear-all button. It uses Backbone views and collections, with event handling for selection state changes and filtering callbacks. The dropdown also supports a threshold for limiting visible items, though infinite scroll behavior is only described in a test comment.
A rotating carousel cycles through a list of slider frames, each displaying a distinct visual effect. The code uses `requestInterval` to trigger frame transitions every four seconds, removing the first frame and appending a cloned copy to the end. Stylus styles define three transition effects—fade, scroll-down, and scroll-left—using CSS `transition` properties with `transform: translate3d` and opacity changes. The example demonstrates pure CSS-based animation without a charting library, relying on DOM manipulation and hardcoded item dimensions for offset calculations.
A Backbone.js example demonstrates how a dropdown select and a list view stay synchronized through model collections. The page shows a `<select>` element populated with items from a Backbone Collection, while a second collection drives an adjacent `<ul>` list. Selecting an option triggers a `change` event, adding the chosen model to the other collection, which re-renders the list via the `add` event listener. The code uses Backbone Views, Collections, and the `listenTo` API, with jQuery handling DOM updates and event binding.
The visualization lists every theater in Manhattan that accepts MoviePass, totaling the unique venues across the sampled ZIP codes. It queries the MoviePass nearby-theaters API via jQuery’s `$.getJSON`, iterating over a hardcoded array of Manhattan ZIP codes with a 2-mile radius. The code uses Underscore’s `_.pluck` and `_.uniq` to extract theater names and consolidate duplicates, then logs the final array and count to the console. No map or graphical rendering is shown; the output is purely a text-based data collection.