Skip to main content
100%

Renard font-size

✓ Published0🌍 Public
Aabernier
Last edited Oct 7, 2013
Created on Jul 21, 2012

Renard font-size visualizes Charles Renard’s preferred-number series applied to typography. A horizontal carousel of the letter “a” items scales each successive font size according to the formula `Math.round(Math.pow(10, i / b))`, where the base `b` is adjustable via an HTML range slider. The visualization uses jQuery, the carouFredSel plugin for carousel navigation, CoffeeScript for logic, and CSS to align baselines and display labels.

AI-generated description

Charles Renard

Similar vizzes

Loading thumbnail…

year-in-font-size

Trends in type sizes from 2013 to 2017 are shown in a line chart where each line represents a CSS selector—headline, body, and date—and the y-axis measures font size in pixels. The x-axis labels resize to reflect the average font size for that year, and data points are drawn as circles scaled to their font size. Built with D3.js, it uses nested data grouping, SVG paths, and axis manipulation to highlight the shift to Georgia font in 2014–2016.

11wheel
57% match
Loading thumbnail…

Pseudo visualizations

This SVG-based pseudo visualization demonstrates typographic hierarchy through nested black rectangles on a white field. A single large black letter “A” anchors the left side, while four descending width blocks create a bar-chart-like progression. The rendering uses plain SVG elements (`rect` and `text`) with Roboto italic type, with no JavaScript libraries or data binding. The example strips visualization to geometric abstraction, where proportional rectangle widths suggest diminishing categories or values.

LLorenzo Lazzarotto
55% match
Loading thumbnail…

jQuery.fn.caroufredsel.js

This gallery example demonstrates a jQuery plugin, `carouFredSel`, which transforms a set of DOM elements into an infinite, scrollable carousel. The visualization showcases the plugin's code architecture, including its constructor, prototype methods for initialization, event binding, and utility functions for item navigation, sizing, and effects. The example highlights how the plugin manages scrolling animations, navigation controls, and responsive sizing through a modular system of helper functions, all written in JavaScript with a CoffeeScript version provided.

Aabernier
53% match
Loading thumbnail…

Size Legend

A legend displays a square-root size scale mapping values from 0 to 10 to circle radii. Five tick marks, filtered to exclude zero and reversed, render as grey circles with opacity proportional to their value. Using d3.scaleSqrt and selection joins, the legend positions each tick vertically and labels it with green text. SVG rendering with D3 v5 shows the encoded relationship between circle area and numeric data.

AAlex Arobelidze
53% match
Loading thumbnail…

unicode-arrow-size

A table of font stack names and their rendered arrow glyphs demonstrates that font substitution operates glyph-by-glyph, not font-by-font. The visualization pairs each font-family string with a right arrow (→), a left arrow (←), and a left arrow mirrored to point right, using SVG `<text>` elements styled with the specified `font-family`. The code loops over an array of font names, placing each row with `d3.conventions` and appending circles and texts at fixed coordinates. A green and blue arrow pair, created by scaling a text element negatively, shows whether the right arrow glyph is truly symmetric within a given font stack.

11wheel
53% match
Loading thumbnail…

jsperf carouFredSel

This example shows a refactored version of the jQuery carouFredSel plugin, a carousel library for scrolling through sets of items. The code sets up an auto-playing, configurable carousel with support for mousewheel navigation, touch gestures, and cookie-based start positions. It handles responsive sizing, item pagination, and custom events for lifecycle hooks. The refactored version organizes the logic into a CarouFredSel constructor and prototype, separating concerns like scroll timing, animation queues, and configuration merging.

Aabernier
52% match
Loading thumbnail…

Color and Size Legends

Two legend components demonstrate distinct encoding strategies in a single SVG: an ordinal color legend maps fruit names to categorical hues, while a square-root size legend scales circle radii for numeric values. The color legend animates circle radii from zero using `transition().duration(1000)`, and both use D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data joins with enter/merge/exit patterns. Reusable functions `colorLegend` and `sizeLegend` render ticks with grouped `g` elements, circles, and text labels spaced via transform translations.

AAmol Kulkarni
52% match
Loading thumbnail…

Antoine BERNIER (abernier)

A canvas-based animation shows a red dot traveling along a circular path, with its position driven by a duration-controlled easing function that produces a bouncing effect. The code uses the HTML5 Canvas API (`getContext('2d')`, `clearRect`, `arc`, `fill`) for rendering, and relies on `requestAnimationFrame` (with a Paul Irish shim) for smooth frame updates. Play and stop buttons, plus a range slider, let the user set the animation duration from 100 to 10,000 milliseconds. The animation logic separates easing from drawing, applying a bounce ease to the normalized time position before calculating the dot's coordinates via trigonometric functions.

Aabernier
52% match