fresh block

100%

✓ Published0🌍 Public

Last edited May 2, 2016

Created on May 2, 2016

This animated SVG visualization maps login events from two Unix servers over time. Each event is encoded as a small square, with rows grouped by server and the x-axis representing timestamps. The data, sourced from a gist and parsed from a CSV log, shows recurring authentication check messages at regular intervals. The animation reveals the rhythmic, almost musical cadence of system activity, with each server’s events forming a distinct temporal stripe. The minimal, grid-like layout emphasizes the periodic nature of the log entries, making patterns of frequency and gaps immediately visible.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

fresh block

This visualization displays monthly values as a line chart with circular markers, showing a basic time series of twelve data points from January through December 2016. The SVG rendering uses d3.svg.line with an ordinal x-scale and linear y-scale to map the data. Hovering over a grey circle highlights it in red, reveals the corresponding value as text above the point, and draws a dashed vertical line from the marker down to the chart baseline. The code relies on d3.json for data loading and d3.time.format for date parsing.

MMarineRu

70% match

Loading thumbnail…

test

This visualization shows an animated scatterplot of server monitoring data, where each point represents a server positioned by its ID and log file size, with color indicating the server pool. The animation cycles through time-stamped snapshots from the accompanying CSV, updating point positions and sizes to reflect changes in SAP start-up log file sizes across hosts. Rendered as an SVG, the chart uses a smooth linear transition over a 3-second duration, with 15 clone frames to create a fluid effect. The data highlights differences across Linux and AIX systems, with labeled pools like "Blade_Test" and "DEV/QA".

CCBasis

69% match

Loading thumbnail…

fresh block

This example shows a monthly time series as a simple line chart with circular markers for each data point, drawn using SVG. D3 v4 scales, a time parser, and a line generator map the dataset’s dates and values to positions. On mouseover, the code highlights the hovered circle in red, reveals its dashed vertical guide, and displays its numeric value with a font-size transition; mouseout reverses the effect. The data comes from a local JSON file, and all interactions rely on D3 selections and transitions.

AAminaSGitHub

69% match

Loading thumbnail…

fresh block

This visualization displays a set of genomic intervals as green rectangles along a linear x-axis, with each rectangle’s width corresponding to the difference between its start and stop coordinates from a small JSON data file. The rectangles are all positioned at the same y-coordinate and height, indicating that only horizontal position and length carry meaning. The code loads data via `d3.json`, appends a 960×500 SVG canvas, and uses `d3.select("svg").selectAll("rect")` to bind the dataset to rectangle elements, setting their x, width, and fill properties based on the data fields.

LLisaPicado

69% match

Loading thumbnail…

fresh block

A simple bar chart displays six hardcoded values as blue vertical bars on a 900 by 900 SVG canvas. Each bar’s height corresponds to its data value, while the `x` position is determined by an index multiplied by a fixed width. The visualization uses D3 v4’s selection and attribute methods to append rectangles and set their positions, dimensions, fill, and stroke. The data set is a static array, not loaded from an external source.

MMcZieuwa

68% match

Loading thumbnail…

fresh block

A line chart displays monthly values over time, with each data point shown as a semi-transparent grey circle. Hovering a circle highlights it in red, displays the numeric value as text, and draws a dashed vertical guide line to the baseline. The visualization uses D3 v4 with `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.json` to load and render the dataset, while `d3.select` and `transition` manage the interactive hover effects in an SVG container.

MMilowB

68% match

Loading thumbnail…

fresh block

A line chart displays monthly values for twelve categories labeled A through L, with circles marking each data point and dashed vertical guides from the baseline. Hovering a circle highlights it in red, fades in the corresponding value label and guide line, then restores them on mouseout. The visualization uses d3.line, d3.scaleTime, and d3.scaleLinear to position marks, with transitions on opacity for interactive feedback. Data comes from a local JSON file, and rendering occurs in SVG with a monospace font for numeric labels.

KKylaste

68% match

Loading thumbnail…

fresh block

A single large rectangle sits against a plain background, initially drawn in dark red before transitioning to a bright blue over three seconds. The animation uses a D3 transition with a bounce easing, applied to the rectangle’s fill style. The visualization is built with D3.js (version 3.5.5) and rendered as an SVG element that fills the viewport. The code originates from a Blockbuilder.org gist and demonstrates a minimal, animated color change without any data or interactivity.

JJonasHeylen

68% match