Skip to main content
100%

Gist c8e1760f2187bc14f88a

✓ Published0🌍 Public
Aabernier
Last edited Sep 13, 2015
Created on Sep 13, 2015

This visualization opens with a JavaScript prompt that asks the user for a date string, defaulting to the current month, day, year, hour, minute, and second. The entered date is then appended to the `src` of an embedded `<iframe>`, reloading the frame with that date as a query parameter. The code uses `window.prompt` to gather input and manipulates the `iframe` element directly, with the `pad` function formatting each date component to two digits. The visualization itself appears to live inside the iframe, whose content is not visible in this snippet.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist ad9b930cb1a6b840d214474df3c4770f

This visualization shows a network of interconnected nodes arranged in a circular layout, with links drawn as curved lines between them. The example demonstrates date parsing in JavaScript, converting string-formatted dates into proper Date objects within each data element. Using D3.js, the code likely employs d3.forceSimulation for node positioning and d3.linkHorizontal or similar path generators for the curved connections. The rendering approach relies on SVG elements, with the parsed dates potentially influencing node styling or link properties. The gist focuses on preprocessing data before visualization, highlighting the importance of format conversion in D3 workflows.

Aabonello
64% match
Loading thumbnail…

Gist 798b9a5ccb654ceebb5b29ce680c5707

This visualization presents a week of daily weather data for a single location, using a circular timeline to encode conditions such as temperature, humidity, wind, and cloud cover. Each day is a concentric ring, with hourly metrics plotted as colored arcs or bars. The code relies on D3.js for layout and rendering, specifically using `d3.forceSimulation` to position labels and `d3.scaleTime` for temporal axes. Data comes from a local JSON file containing Dark Sky API-style forecast fields, rendered in an SVG canvas.

MMbrownshoes
61% match
Loading thumbnail…

Gist 890029

This visualization maps the timestamps of Gist 890029 commits as a radial time-series layout, showing activity across days of the week and hours. It uses d3.forceSimulation to position circular nodes on a spiral, with each point encoded by day and time. The rendering relies on d3.quadtree for collision detection and a custom path generator via d3.curveLinear, while axis labels and tick marks are drawn using d3.axisTop and d3.axisLeft. The source data comes from the gist’s file list, where each line is a timestamp parsed into a Date object. Color intensity varies by frequency, and the visualization highlights daily rhythms through a stacked circular band.

CCaged
60% match
Loading thumbnail…

Gist 42c5413995001df2d448d010b837dc33

This example visualizes daily user activity by counting how many user records reference each date. It shows a timeline of update frequencies derived from a hardcoded JavaScript object mapping user IDs to date-keyed booleans. The code builds a string of user IDs and their associated dates, then uses `String.split(date)` on that concatenated string to count occurrences of each date in the `updates` object. It relies on the Moment.js library to generate the last ten dates via `moment().subtract()` and formats them as `DD-MM-YYYY`. The rendering itself is absent—the example focuses solely on data aggregation logic, with no charting or DOM output.

AA6Brgeuka
60% match
Loading thumbnail…

pirulo

This example shows a minimal HTML page with a date input and an OK button; clicking the button appends the selected date as a paragraph to the body. The visualization is essentially a simple DOM-based interaction, using plain JavaScript within the `doit` function to read the `bday.value` and manipulate the document. It relies on D3 v3 only for selecting the body element and appending a text paragraph via `d3.select("body").append("p")`. No external data source or rendering technique is present beyond this basic DOM manipulation.

Aaaizemberg
60% match
Loading thumbnail…

Gist 54bcba37ab92767d6ea819d7b4c7b3e4

This interactive animation demonstrates a timeline-based playback control system for scrubbing through temporal data. The visualization pairs a draggable slider and numeric time input with keyboard shortcuts (space, arrow keys, P, N) to navigate and reverse playback. Built on jQuery and GSAP’s TimelineMax, the code uses `totalProgress()` and `totalTime()` to synchronize the controls with the animation state. The data source is a local timeline object, with rendering handled entirely through DOM manipulation and GSAP’s tweening engine rather than a charting library.

Aabernier
59% match
Loading thumbnail…

Gist 0ea3280775a189e0e80fa93b2445e92e

This visualization embeds an interactive 3D astronaut model from the Icosa gallery. The page uses an iframe with the `icosa.gallery` embed URL, enabling fullscreen, autoplay, and WebXR spatial tracking for immersive viewing. The model is rendered in real time, likely using Three.js behind the scenes, and supports touch or mouse interaction through the iframe’s sandboxed environment. No additional data processing or charting libraries appear in the code; the focus is solely on presenting the pre-built 3D asset.

Aandybak
59% match
Loading thumbnail…

birthday guesser

This interactive visualization presents a birthday-guessing game in which a calendar highlights a subset of dates and the user answers yes/no questions. The tool displays a year grid, and each of nine cards recolors days according to a shuffled set of magic numbers; the user’s answers progressively narrow the possible dates. The code uses D3 v4 with SVG and animations, drawing calendars via `d3.timeDays`, `d3.timeFormat`, and a quantized color scale, and handles the interaction with click events that advance through the cards.

EEE2dev
59% match