year-in-font-size

100%

year-in-font-size

✓ Published0🌍 Public

Last edited Dec 28, 2017

Created on Dec 28, 2017

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.

AI-generated description

trends in type

Similar vizzes

Loading thumbnail…

?

This example shows a line chart of population values from 2005 to 2015, drawn as an SVG path using D3 v4’s `d3.line` and `d3.scaleTime`/`d3.scaleLinear` scales. The data is loaded from `data.json` with `d3.json` and parsed via `d3.timeParse`. A hover interaction uses a transparent overlay rectangle, `d3.mouse`, and `d3.bisector` to find the nearest year, then updates a focus circle, dashed hover lines, and a value label via direct SVG attribute manipulation. The y-axis labels are formatted in thousands with a custom tick format.

VVvgupta

64% match

Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl

64% match

Loading thumbnail…

year-in-graphics

A collection of end-of-year graphics links from major news organizations, organized by publisher into a two-column grid. Each link is a clickable anchor, with years missing from a series rendered as invisible or struck-through placeholders. Built with D3.js and Lodash, the code parses a plain-text URL list, groups entries by organization, and generates the layout using `d3.select().appendMany()`, with styling handled by CSS.

11wheel

64% match

Loading thumbnail…

D3 Line chart experiment

This experiment demonstrates a minimal D3 line chart setup, rendering a single HTML element with a large font size. The page loads D3 v7 from a CDN and applies a blue color style to a paragraph with the ID `#d3_p` using D3’s selection API. The layout uses a giant 13em font for the body, though no data or line geometry is actually drawn. The example serves as a starting point for basic DOM manipulation with D3, not a full chart.

Tthatsrogue

62% match

Loading thumbnail…

Timeline

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

MMauradion

62% match

Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged

62% match

Loading thumbnail…

Yearly Music Trend Signature

This visualization displays yearly music trends from 2010 to 2019, showing the average scores for different musical components (such as energy or danceability) as colored lines, with circle sizes encoding standard deviation. Using the vega-lite-api library with d3.csv for data loading, the view layers line and circle marks, adds interactivity through mouseover selections that filter data points and display tooltips, and renders axis labels with custom styling via a config object.

ZZiyang Gao

62% match

Loading thumbnail…

Dot Chart

This dot chart displays annual values from 2011 to 2021 as individual circles, with a tooltip revealing each dot's exact value on hover. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for tick marks. Circles are appended to SVG groups with mouseover, mousemove, and mouseleave handlers controlling tooltip visibility. The chart includes a title and uses a teal fill with black stroke for each dot.

Pprateekvasi

62% match