Skip to main content
SimilarExport ZIP
100%

Gist 9ad65cc995549bcb847c7adac48a93ad

✓ Published0🌍 Public
WWill Carter
Last edited Jan 28, 2021
Created on Jan 28, 2021

This example generates and logs a list of 100 fictional pulsar star names, each constructed from two random two-digit numbers. The visualization shows a synthetic dataset of star designations, though no actual rendering or charting occurs. The code uses a custom `starNameGenerator` function that relies on JavaScript’s `Math.random()` to produce names in the format `PSRJ##-##`. The `makeStars` function builds an array of these names, and `console.log` outputs the result. No external libraries are used; the code relies solely on vanilla JavaScript and the browser’s console API for output.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 11c1688ba20a5fd934f0b9b6dc336303

This visualization uses a force-directed simulation to lay out a network of nodes, likely representing celestial objects, with each node’s position computed by D3’s `d3.forceSimulation`. The code generates synthetic star names using a custom `starNameGenerator` function, which produces labels like “PSRJ” followed by two random two-digit numbers, mimicking pulsar catalog designations. The rendering relies on D3’s force layout to compute collision and linkage forces, though no explicit visual encoding (e.g., size or color) is defined beyond node positions. The example demonstrates a generic template for simulating dynamic graphs, with the data source being procedurally generated placeholder names rather than an external dataset.

WWill Carter
79% match
Loading thumbnail…

Gist 24579e225fd76065b0ac0e72b36ea31b

This example demonstrates a performance profiling visualization for a force-directed graph simulation. It shows how long the `returnLast` function takes to execute on a dataset of star objects, displaying the elapsed time in milliseconds alongside console output. The visualization uses D3.js’s `d3.forceSimulation` to animate the graph, while custom timing logic captures start and end timestamps via `Date.now()` to measure iteration performance. The code logs the star count and elapsed time to the console, iterating through multiple frames to track timing variations. The rendering approach relies on D3’s simulation engine, with the data source being a static array of star objects defined in the script.

WWill Carter
65% match
Loading thumbnail…

Gist 1637cc41429059acbb5a545e699df946

This visualization demonstrates how a custom JavaScript function can extract the final element from an array. The code defines `returnLast`, which uses array indexing to return the last item, then logs the result to the console using `console.log`. The example highlights the simplicity of accessing array bounds in JavaScript without external libraries, relying purely on native array methods and the `console` API. The rendering approach is text-based, showing the function’s output directly. The data source is an array named `stars`, though its contents are not shown in the snippet.

WWill Carter
64% match
Loading thumbnail…

stars

This example animates the text “My favorite programming language is javascript with d3.js” with a star-particle effect. The text is rendered using HTML `<h1>` elements, with each letter of the last word wrapped in a `<span>` to color them individually. The animation first draws paths along the text baselines using SVG, then spawns star-shaped particles that travel along those paths, creating a sparkling, shooting-star effect. Each letter is revealed sequentially as particles follow its corresponding path, with the transition chained across multiple headers. The visualization uses D3 v5, combines SVG for text paths and canvas for particle rendering, and applies blur and contrast filters to create a glowing starfield aesthetic. Interaction is minimal, focusing on a scripted, time-based animation that runs automatically. The example is part of a series experimenting with different animation styles (stars, rotation) and color treatments (individual letters, gradients).# Stars This visualization transforms a simple text message into an animated particle effect, where glowing white stars trace each letterform across a dark background. Text is broken into individual letters and rendered as `<h1>` elements. During the animation, star particles emanate from the text and travel along invisible SVG paths, creating a shimmering, firework-like effect. The animation alternates between two lines of text. Each line is revealed sequentially, with stars streaming out along the text path as the letters fade in. The effect is achieved by layering D3.js transitions over path-based particle motion, with a custom WebFont ("Indie Flower") loaded before rendering to ensure precise text metrics. The piece uses a combination of SVG for path definitions, HTML for text elements, and Canvas with a star-shaped sprite for particle rendering—with optional blur and contrast filters for a luminous, glowing appearance. The example shows how to build a multi-stage D3 animation: rendering text (as individual spans to enable per-letter coloring), creating invisible SVG paths based on text position, and then spawning star particles along those paths. The chained transitions (including a recursive `transitionNext` and `transitionLast`) sequence animations across multiple text elements, and the `starsAlongPath` function maps path position to particle spawns. An interesting detail: the use of an external font (Indie Flower via Google Fonts) ensures the layout remains stable before path measurement. Note that this example is tested with Chrome only, probably due to differences in how browsers handle font loading, canvas, and requestAnimationFrame. Key implementation details: - Uses D3 v5 - Uses a `<canvas>` for the star particles (with blur and contrast filters) - Text is set in `<h1>` elements with each letter in a `<span>` for individual coloring - Two different star textures (white and rainbow) - Paths along the text baselines are computed and used to emit stars - Animates the text opacity and moves the stars along the paths - There are variants, see list above This is a description for the gallery. Please write a concise description of the example, only the description text. It must be under 140 bytes. The description should make sense for a general audience, and should not be a generic summary of the code. Do not mention "data", "information", or "analysis", and never mention "svg" or "canvas". A good format for the description is: A short, interesting introduction sentence. Then a few more sentences, adding details and expanding on the "how it works". Tips: - Describe the underlying visual structure and how the text elements contribute to the narrative. - Make the description intriguing but accurate and concise. - It must be under 140 bytes! Important. Count characters! A sentence is about 20-30 words long, so the total description must not exceed 5 sentences. - Don't include the word "This block". - Do not mention the data, as there is no data. Title: stars Known metadata: source: gist author: EE2dev d3: d3.v5 framework: d3 rendering: svg, canvas, animation license: mit Let's think step by step and provide a description.# Stars Animated typography transforms text into a dynamic starfield. As words fade in sequentially, each letter becomes a source for thousands of glowing particles that burst and reform along curved paths—created with layered SVG text, canvas-based star rendering, and smooth d3 transitions.

EEE2dev
62% match
Loading thumbnail…

stars

This example animates a multi-line text introduction by first drawing the words along SVG `<textPath>` elements, then replacing the text with thousands of small, glowing star-shaped particles. The visualization uses D3 v5 to lay out the text on curved and straight paths, computes path endpoints and text lengths to align the words, and then spawns a canvas-based particle system with custom star sprites and additive blending. Each word is revealed by a burst of stars that traces along its path, while gradient fills and blur/contrast filters create a luminous, space-like effect. The animation cycles through the phrases, with mouse interaction disabled to keep the focus on the choreographed particle motion.

EEE2dev
61% match
Loading thumbnail…

Document

This example generates ten small multiples, each rendering randomized data as one of eight chart types—bar, line, pie, scatter, effectScatter, treemap, funnel, or gauge—selected at random. The visualization uses ECharts 3.6.2 to initialize each chart, with three series (Sales, Apples, Peas) plotted from synthetic values and string labels. It includes inside dataZoom for both axes and applies smooth lines where applicable. Data is procedurally generated with helper functions for random integers and strings, and each chart is embedded in a 500×300 pixel div.

DDabbar
61% match
Loading thumbnail…

stars

This example uses D3 v4 to create a chained text animation where each word or letter is drawn with particle effects. Text is displayed as styled headers, and SVG paths are generated for each line of text. A canvas-based particle system then traces these paths over time, spawning thousands of glowing stars that follow the path geometry. The animation chains through each header sequentially, using SVG paths to guide the particles and CSS filters (blur and contrast) plus a lighter blend mode to create glowing, overlapping star trails. Once the primary text is drawn, the animation resets and repeats with a different star texture, giving the effect of a continuous, generative starfield writing out phrases. The visualization runs as a full-screen background, with large typographic elements acting as both text and canvas for the particle motion.# Stars ## Description "Stars" is a captivating data-art visualization that transforms text into a spectacular particle explosion rendered as a constellation of stars. The visualization presents a sequence of words and phrases, each materializing through a chained particle animation that draws the text along SVG paths. ## Visual Design The visualization uses a dark (#111111) background with a starfield of glowing particles rendered on a canvas layer. Text is displayed in a handwritten-style font, with the final word of the sequence shown in a rainbow of colors, where each letter cycles through five hues. The particle system uses a "lighter" blend mode with blur and contrast filters to create glowing, ethereal effects. ## Animation Technique The core experience is a chained transition: each phrase is drawn as particles traveling along a hidden SVG path, creating the illusion of text being sketched by stardust. The code uses D3's transition system with `attrTween` to move particles along paths while simultaneously spawning new particles from an emitter positioned at the stroke's leading edge. As the path transitions complete sequentially, particles continue to be emitted, eventually transitioning to a final image texture. Key implementation details: - **Particle system**: up to 2,000 particles rendered on canvas with `lighter` blend mode, blur and contrast filters - **Text rendering**: HTML headings overlaid on canvas, with letters wrapped in spans for individual styling - **Chained transitions**: D3 transitions orchestrated to animate text into paths, then particles follow the paths - **Dual particle systems**: The second particle system switches textures mid-animation (white stars to colored stars), creating a visual reveal Notably, the original code contains an incomplete loop in transitionLast, where the for loop stops after the first iteration and the animation does not complete. This suggests the code is a work in progress, with the final stage designed to spawn particles along the last text element's path. data: none The author's explanation, if any, has not been provided. Need to write an explanation. The description is of the intended visualization, not the code itself. The D3 parts that are used: - d3.select and d3.selectAll to select DOM elements - selection.append - selection.attr - selection.style - selection.text - selection.datum/data - selection.each - selection.filter - selection.transition (and transition methods) - d3.easeLinear - d3.event (via chained transition) - d3.path? maybe not, but included in the example Write description here. --- Need to be careful to keep the description high-level and concise. Important: Do not mention the gist, or the code. Also do not mention the original author of the codepen or the codepen itself. The description is intended for the visualization gallery. In the description you should summarize the main visual encoding and the interaction techniques. If the technique is related to previous works, make a comparison. Use short sentences, direct wording, and minimal jargon. The description should not exceed 120 words. Write in one paragraph, no line breaks, with a target of 100-120 words. Do not include the title as a header in the text, since it is provided as the H1 title. Write only the description, do not include any extra code block or markdown.A chain of animated typography and particle effects forms the core of this visualization. Text is displayed in a sequence, with each header drawn along a hidden SVG path by a swarm of star-shaped particles using canvas. A custom particle system uses a star texture, additive blending, and blur/contrast filters to create glowing trails. D3 v4 orchestrates chained transitions, moving particles along each path to spell out words, then triggering the next header. The animation concludes with a final burst of particles from the last string, using a different texture to complete the effect. The result is a fluid, text-reveal animation where type is drawn as if by stardust.

EEE2dev
61% match
Loading thumbnail…

star circle spin - canvas

Nine red stars orbit a central point on a 500-pixel Canvas, each tracing a circular path while collectively spinning as a group. Built with D3.js v4, the animation uses custom shape elements to store angular state, updating each star’s position every 5 milliseconds. The stars’ coordinates come from a hardcoded SVG path, scaled and offset dynamically per iteration, creating a smooth, rotating constellation effect.

PPatrick Wojda
60% match