year-in-graphics

100%

year-in-graphics

✓ Published0🌍 Public

Last edited Dec 31, 2020

Created on Dec 31, 2020

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.

AI-generated description

URLs of yearly visualization lists.

Collection from Lisa Waananen Jones; Maarten Lambrechts has more.

Similar vizzes

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

66% match

Loading thumbnail…

Meaningless Graphs with D3

An interactive stacked area chart renders eight time series from a CSV file, displaying aggregate values across years with a color-coded palette. The visualization uses D3 v6 to parse the data, then applies `d3.stack()` to compute layer offsets and `d3.area()` to generate the SVG paths. Axes are created with `d3.axisBottom` and `d3.axisLeft`, while labels for "Year" and "Points??" are added as SVG text elements. The data source is a remote CSV hosted on GitHub, and the chart updates reactively when loaded.

Sstevensmithj

66% 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

65% match

Loading thumbnail…

New Year Theme

A festive New Year visualization renders a fireworks display of colorful circles, squares, and radiating lines on a light pink background. It uses D3.js selections and data joins to bind hardcoded arrays of circle and square coordinates, drawing 60-70 radial lines per circle to simulate sparks, with overlapping translucent shapes creating depth. The code also appends centered text reading "Happy New Year 2024" using D3's SVG text API. The data is static and embedded directly in the script, with no external sources.

SSree Likhith

65% match

Loading thumbnail…

Simple line chart

A simple line chart displays twelve months of numeric values, with a black polyline connecting evenly spaced points and a large label showing the final value. The chart includes interactive circles that turn red on hover, revealing the corresponding value and a dashed vertical guide line using SVG transitions. Built with D3.js v3, it uses ordinal and linear scales, SVG paths for the line, and JSON data loaded via `d3.json`.

JJulesSauvinet

65% match

Loading thumbnail…

Untitled

This interactive stacked bar chart displays state-level data across two years. A dropdown menu selects the year, and the visualization animates the transition between the 2017 and 2018 views. The chart uses a categorical color scale to distinguish three data ranges. The code leverages D3 v5 APIs including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`. Built with SVG elements, the bars and their total value labels are rendered directly, with a 750ms transition on year change.

JJens Grochtdreis

65% match

Loading thumbnail…

fresh block

This example shows an interactive year-by-year view of GitHub-style contribution data, with each year’s activity rendered as a grid of colored cells. It uses D3 v4’s `d3.forceSimulation` to lay out the cells in a compact, force-directed arrangement, while the `data-yearStart` and `data-yearEnd` attributes in the HTML control the visible time range. The visualization is driven by a custom script from an external source, with `d3.select` and `d3.axis` used to manage the timeline and scale. The data is sourced from a gist and rendered responsively, though the exact encoding of color intensity or hover interactions is not exposed in the visible code.

GGerardoFurtado

65% 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

64% match