Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aannanimara
Last edited Jun 28, 2017
Created on Jun 28, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A choropleth-style data visualization titled "fresh block" maps sequential values from a CSV file (df_vis.csv) onto a rectangular grid of cells, where each cell's fill color encodes the numeric value of the `gor_dv` column (ranging from -9 to 10). The visualization renders an SVG grid using D3.v3, with each row representing an index value and each column representing a data point. The color scale maps the discrete integer values to a palette, creating a striped block pattern where the dominant value 7 appears as a uniform background, interrupted by occasional contrasting cells (such as 1, 2, 4, 6, 8, 9, 10, and -9) that stand out as visual anomalies or events. The result is a minimalist, pixel-like display of temporal or sequential data, emphasizing the distribution and outliers in the dataset. The file is built with Blockbuilder.org and released under the MIT license.# fresh block A minimalist SVG visualization of sequential categorical data from a CSV file, rendered as a grid of colored cells using D3.v3. Each cell represents one data point in a time series, where the dominant value (7) forms a consistent baseline, with occasional anomalous values (1–10 and -9) creating sparse but noticeable visual interruptions. The example demonstrates how a simple tile-based encoding can reveal patterns and outliers in a dataset, with the fresh color palette and block layout inviting closer inspection of the underlying data. Built with Blockbuilder.org and released under the MIT license.

VVickyLouise
84% match