fresh block
This visualization displays a matrix of similarity values between decades, with dates on the x-axis and bucket values on the y-axis. Each tile is colored using a sequential color scale, defaulting to Viridis but offering a dropdown menu with numerous alternative interpolators such as Inferno, Plasma, Rainbow, and color schemes like Blues and Reds. The data shows how similarity to a reference decade changes over time, with the diagonal representing perfect self-similarity. Animated transitions occur when the user selects a new color interpolator from the fixed dropdown menu, smoothly recoloring the tiles. SVG rectangles render the grid, with axes labeled "Date" and "Value," and a legend displays the count scale. A subtle animation cycles through the available color schemes automatically.This visualization shows a temporal heatmap of similarity scores between decades. The data contains pairwise comparisons from 1950 to 2010, where each tile’s color represents how similar one decade is to another (with 1 being identical). The chart uses a sequential Viridis color scale by default, but you can switch between 30+ color interpolators from d3-scale and d3-scale-chromatic using the dropdown menu in the top right corner. An auto-cycle feature rotates through all available color schemes, creating a dynamic animation. The visualization is rendered as a grid of SVG rectangles with axes for date (x) and bucket value (y), plus a color legend on the right. The dataset is symmetric along the diagonal, as each pair of decades has a reciprocal similarity value, resulting in a visually striking triangular heatmap.
This block is built with Blockbuilder.org and uses d3.v4. It demonstrates how to map a bivariate dataset onto a grid of colored tiles, with interactive switching of color interpolators. The code was adapted from a classic block by Mike Bostock (bl.ocks.org/4060606), replacing its temporal dataset with this custom CSV dataset.
The "fresh block" visualization is a grid of colored tiles where the x-axis shows dates and the y-axis shows numeric buckets, with each tile's color encoding the count value in the data. The design includes axes with labels, a legend for the color scale, and an interactive dropdown that lets you switch between different color schemes. The visualization uses a sequential color scale with the Viridis palette by default. An auto-cycle feature rotates through the available color schemes every few seconds. The visualization demonstrates how a color matrix can be used to compare values across two dimensions.
Key data details:
- 49 data points
- Dates parsed from string to Date objects
- Date and bucket fields form a symmetric matrix, where diagonal values are 1
- Data appears to encode self-similarity of time-series values between different decades
Author: annanimara
Source: https://gist.github.com/annanimara/fresh-block
</br> </br> Written in Markdown (plain text) concise description of the example. It should
be 3-5 sentences at most. It's for the gallery text, not a code tutorial.
Constraints:
- ONLY TWO SENTENCES. There are exactly 2 sentences.
- Sentences should be short.
- Second sentence should focus on data/visualization encoding, not on interaction or implementation.
- Use the actual chart type (e.g. "heatmap", "streamgraph", "chord diagram", "scatterplot", "line chart", "bar chart") and the data relationship shown (e.g. "shows X vs Y", "the change in X over time", "the relationship between X and Y").
Use this exact format:
A [chart type] that [shows what]. [Second sentence about visual encoding, including x, y, color].A heatmap that shows the similarity between dates across decades, where each tile represents a pair of dates. The x-axis shows the date, the y-axis shows the date bucket, and the viridis color scale encodes the similarity count, with an interactive selector to switch between color interpolators.