Skip to main content
SimilarExport ZIP
100%

courier-m

✓ Published0🌍 Public
11wheel
Last edited Jan 30, 2018
Created on Jan 29, 2018

A visualization of all printable ASCII characters rendered in Courier monospace, revealing that characters like "m" and "W" are markedly wider than others. The code uses D3 selections to place each character in a grid, then measures its rendered bounding box with `getBoundingClientRect` to display the exact pixel width beneath each glyph. Clicking triggers a transition that overlays semi-transparent rectangles, highlighting width discrepancies and the uneven spacing of the fixed-width font.

AI-generated description

Courier betrays me again!

Found while looking at Toph's Measure Text.

mit Licensed

Similar vizzes

Loading thumbnail…

thing 0001

A word rendered as text is represented by hundreds of small squares that drift randomly across the screen before settling into the letterforms. The visualization rasterizes the word "enj" onto a hidden canvas using `fillText` and `getImageData`, sampling pixel coordinates as target positions. Each square is a `<rect>` whose position is animated by `d3.forceSimulation`, using `forceX`, `forceY`, and `forceCollide` to move particles toward their targets while preventing overlap. The color and stroke width vary with distance from the center, drawn on both SVG and canvas elements using D3 v4 and the `d3-scale-chromatic` color scale.

FFrissAnalytics
60% match
Loading thumbnail…

THE SVG WIZARD

This engaging visualization presents the face of Curran from a YouTube video, using a portrait pathway turned into a scalable, interactive SVG illustration. The author crafted the image path using GIMP's `To Path` feature, manually fixing the vector data before embedding the complex path `d` attribute into an HTML document. The visualization employs inline SVG with CSS transitions to create a playful hover effect: the face smoothly scales via `transform: scale()` over two seconds, then expands further on mouse hover. This example showcases the meticulous hand-tracing of a digital image into a lightweight, scalable vector graphic that invites interaction.

MMunisbek-design
60% match
Loading thumbnail…

A quote from The Elements of Typographic Style by Robert Bringhurst

This example visualizes typographic guidance from Robert Bringhurst’s *The Elements of Typographic Style* as an interactive text layout. It shows how different dash characters—hyphens, en dashes, and em dashes—occupy varying horizontal widths, rendered as animated glyphs that respond to pointer movement. The visualization uses Three.js to draw each character as a 3D mesh, with `d3.forceSimulation` arranging the dash specimens in a scattered, weighted distribution that mirrors their typographic relationships. The scene’s depth-of-field and lighting are computed via WebGL shaders, while the source text is parsed from the included `quote.markdown` file.

DDylanFM
59% match
Loading thumbnail…

Code Speaking

Typed characters appear in a running transcript alongside their ASCII decimal codes, while a corresponding symbol image fades in for each code. The animation proceeds character by character, with a two-second delay between steps. D3 v5 loads a CSV table that maps ASCII values to image links, and the code also uses `d3.select` to update the text area. User input comes from an HTML form and is processed via a JavaScript loop with `setTimeout` to sequence the transitions.

JJoker-tr
59% match
Loading thumbnail…

test overflow

A short red sidebar hosts a vertical list of repeated French words, demonstrating how SVG text elements render beyond their container. The visualization uses D3 v4 to bind an array of string values to text elements inside a fixed-width SVG group, with each label positioned at increasing y-coordinates. The code explicitly sets the sidebar’s height to 100%, yet the appended texts overflow visually, showing that D3 does not clip or wrap text by default. This example illustrates basic data binding and manual text placement via the `attr` method without layout constraints.

BBrunoDumas
59% match
Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel
59% match
Loading thumbnail…

Wavy treemap

This visualization shows the D3.js source code as a treemap where rectangular cells are distorted into a wavy, custom shape. The layout uses a standard `d3.treemap` with `d3.stratify` to structure the data, then applies custom distortion functions to the computed rectangles, converting them into SVG paths. The wavy warping is animated over five seconds using a transition, with the final shape approximating the D3 logo. Hovering a cell reveals its file path and line count in a tooltip.

KKcnarf
59% match
Loading thumbnail…

wgs

This example displays the text “Hello D3 version 70” in the center of the browser window, rendered at an enormous font size of 13em. It demonstrates a minimal D3 v7 setup, where the `select` function from the d3 module targets the `<body>` element and sets its text content. The page loads D3 from a CDN and runs the JavaScript from a separate `bundle.js` file, highlighting a basic data-binding workflow.

Wwgs7909
59% match