Tell us what works and what could be better. We read every submission.
@adamnieman·7 public vizzes
This example displays a placeholder visualization on an SVG canvas, showing a large monospace text prompt that invites code editing. The page initializes a 960-by-500-pixel SVG and sets variables for block dimensions, spacing, and layout—though these are not yet used. It uses d3.v4 to append the SVG and a text element, relying on the D3 selection and attribute APIs. The visualization is built with Blockbuilder.org scaffolding and renders solely through SVG elements, with no data source or interactive behavior implemented yet.
An empty SVG canvas is set up with placeholder text and unused variables for block dimensions and layout. The code initializes a 960×500 SVG using d3.select and d3.append, but no data or visualization is rendered. It appears to be a scratchpad for experimenting with D3 v4, where the layout parameters (block width, height, spacing, and display offsets) are defined but not yet applied to any graphical elements.
A grid of small white rectangles with grey strokes appears on an SVG canvas, arranged in a loose formation based on coordinate pairs. Clicking any rectangle triggers a staggered transition where every block shifts diagonally by a fixed offset, using D3 v4’s `transition().duration()` and `delay()` methods. The animation recalculates each rectangle’s `x` and `y` attributes from updated array values, creating a cascading ripple effect across the entire grid.
This example displays the text “Adam's block” in large monospace type, centered on a blank SVG canvas. It shows a minimal static visualization with no interactive elements or data processing. The code creates an SVG container with fixed dimensions using d3.select and appends a single text element, setting its position, font size, and font family. It relies on the D3.js v4 library, specifically the core selection and attribute methods, to render the text as scalable vector graphics.
This example demonstrates a network graph of interconnected nodes, likely representing relationships or clusters within a dataset. The visualization uses a force-directed layout to position the nodes, with links drawn between them to show connections. The code employs `d3.forceSimulation` for the physics-based arrangement and D3’s SVG rendering for the nodes and edges. The data appears to be loaded from a local JSON or CSV file, as indicated by the gist’s raw text input. The visualization updates continuously as the simulation runs, allowing the user to see the network settle into a stable configuration.
This example uses D3.js to render a force-directed network graph. The visualization loads JSON data from a gist and displays nodes as circles connected by thin links, with the simulation’s velocity and collision forces determining the layout. The code relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while node positions are updated via the simulation’s tick handler. It also employs D3’s drag behavior (`d3.drag`) to let users reposition nodes interactively, with the graph redrawing on each drag event.
This visualization shows a blank page with a short HTML paragraph and heading, serving as a minimal test of GitHub’s gist embedding feature. The code uses no data or interactive elements, instead displaying static text rendered by the browser’s default HTML parser. It demonstrates that a gist can contain raw markup, with the heading and paragraph appearing as styled content. No JavaScript libraries or APIs are involved, and the rendering relies solely on standard HTML structure. The example confirms that gists support basic formatting without requiring external assets or scripts.