unicode-arrow-size

100%

unicode-arrow-size

✓ Published0🌍 Public

Last edited Sep 26, 2018

Created on Jan 23, 2018

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.

AI-generated description

← and → aren't symmetric in Consolas and Courier!

I'm not sure why monaco, "consolas" doesn't match "monaco" or "consolas". How do fonts work??

Josh Katz points out that font subsitution works on a glyph level. "monaco" and "courier" don't have a left arrow glyph and so they default to the "Lucida Grande" left arrow. "monaco, consolas" uses the right arrow from "monaco" and the left arrow from "consolas". "consolas" has left and right arrows, so "consolas, monaco" uses both of them. Thanks Josh!

Found while working on Aaronson Oracle.

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that demonstrates drawing a single arrow using SVG. The page embeds SVG directly in the markup, defining a red arrow marker and applying it to a vertical path via the `marker-end` attribute. Styling is handled with a CSS rule that sets a large font size for a `.message` class, though no text element uses it. The code relies on native SVG elements—`defs`, `marker`, and `path`—rather than JavaScript libraries, showing a static vector graphic without interaction or data binding.

PPiotr Paszek

65% match

Loading thumbnail…

Gist 7330771

This example demonstrates how D3 transitions make data joins easier to follow by animating the entry, update, and exit states of SVG text elements. It shows a sequence of randomly selected alphabet letters that change every 1.5 seconds, with entering letters sliding down from above, exiting letters dropping below, and updated letters gliding horizontally to their new positions. The code uses D3’s selection joins with key functions, `transition.attr` and `transition.style` to animate positions and opacity, and relies on SVG text elements rendered in a single group. The data is a shuffled subset of the alphabet, sorted and re-joined with each interval.

11wheel

64% match

Loading thumbnail…

Fork of arrow

This network diagram displays relationships between actors, directors, and films from the provided JSON data, using colors to distinguish grouped node types. Built with D3 v6, it employs `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, which are rendered as SVG circles and draggable. Links are SVG lines with arrowhead markers, and the code attempts to attach relationship labels via `textpath`, though some rendering tasks remain incomplete. The visualization is centered in a 960x600 SVG canvas.

DDimitri Chauvel

64% match

Loading thumbnail…

Animating a line with an arrow in d3

A line animates from source to target as a blue stroke draws itself, while a red arrowhead travels along the same path. The arrow rotates to match the line's direction using `transition.attrTween` and `translateAlong`, which queries the path's geometry with `getPointAtLength`. The line's progress is shown via a `stroke-dasharray` offset transition. The example uses d3.v4's SVG and animation APIs, with the arrow marker defined as a custom `svg:marker` as well as a separate path.

RRSSBDAE

64% match

Loading thumbnail…

Arrow with Delay

A red arrow with a marker follows the mouse pointer, leaving a thin white trail behind it as the user moves across the screen. The visualization demonstrates unidirectional data flow: a `mousemove` event updates the state, which triggers a re-render of an SVG path using D3 v7. The path is drawn with a quadratic Bézier curve (`T` command) between offset coordinates, with its endpoint styled by an SVG marker definition. The code updates the `d` attribute on each render to reflect the latest cursor position.

LLauren

62% match

Loading thumbnail…

Text tween

A vertical bar chart displays letter frequencies from a CSV dataset, with each row featuring a green rectangle and a bold letter label. During a two-second transition, bars grow from zero width to their full value while accompanying text labels slide right and animate their numbers using `d3.interpolate` within a `.tween` callback. The code uses D3 v3 with SVG rendering, including ordinal and linear scales, axes, and `transition.ease` for smooth motion. The y-axis labels are styled bold, and the x-axis is hidden.

MMorganhaoyu

62% match

Loading thumbnail…

writing-mode

This example demonstrates the behavior of the SVG `writing-mode` attribute, which rotates text vertically along the y-axis, and compares it with the `glyph-orientation-vertical` attribute for controlling glyph orientation. It shows two vertical text labels, one relying solely on `writing-mode` and the other adding `glyph-orientation-vertical`, set against reference lines and stroke-cap style comparisons. Built with D3 v4, the visualization uses chained SVG elements—`text`, `polyline`, and `line`—to illustrate how text rotation interacts with graphic primitives. The code appends these shapes to an SVG container, styling them via inline attributes and CSS classes. The example serves as a low-level reference for text layout and stroke rendering in SVG.

335degrees

62% match

Loading thumbnail…

D3 Shapes

This example displays the seven built-in D3 symbol types (circle, cross, diamond, square, star, triangle, and wye) rendered as stroked SVG paths along a horizontal scale. It uses `d3.symbol()` with a `d3.scaleLinear()` to position each shape, and applies each symbol generator via `d3[d]` lookups. Labels below each path show the corresponding API name. The data is a static array of symbol type strings, with the visualization rendered entirely in SVG.

SSubhendu Karmakar

62% match