{"version":"1.0","type":"rich","title":"fresh block","description":"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.\n\nThis 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.\n\nThe \"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.\n\nKey data details:\n- 49 data points\n- Dates parsed from string to Date objects\n- Date and bucket fields form a symmetric matrix, where diagonal values are 1\n- Data appears to encode self-similarity of time-series values between different decades\n\nAuthor: annanimara\nSource: https://gist.github.com/annanimara/fresh-block\n\n

Written in Markdown (plain text) concise description of the example. It should\nbe 3-5 sentences at most. It's for the gallery text, not a code tutorial.\n\nConstraints:\n- ONLY TWO SENTENCES. There are exactly 2 sentences.\n- Sentences should be short.\n- Second sentence should focus on data/visualization encoding, not on interaction or implementation.\n- 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\").\n\nUse this exact format:\nA [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.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"","width":960,"height":500,"cache_age":3600}