Tell us what works and what could be better. We read every submission.
@annabsmylie·16 public vizzes
The visualization displays a grid of 7 by 10 quilt squares, each filled with a randomly selected geometric texture pattern. Every 500 milliseconds, the entire grid regenerates with new textures and color combinations, creating an animated patchwork effect. The code uses d3.js v4 to construct SVG rectangles, textures.min.js to generate patterns like lines, circles, and paths, and d3-timer to manage the looping updates. Each square’s fill is set to a texture URL, producing a continuously shifting mosaic.
A 200-by-200 pixel SVG canvas displays a 4x4 grid of 50-pixel squares, each filled with the same circular texture pattern. The example uses D3 v4 to append the SVG container and rect elements, while the texture is generated with the textures.js library, specifically via `textures.circles()`. Each square’s fill is set to `t.url()`, which returns a data URI referencing the shared texture, demonstrating how to apply a repeating pattern across multiple shapes without duplicating the pattern definition.
This example generates a quilt-like grid of 50 by 30 rectangles, each filled with one of three random texture patterns. The textures—lines, circles, and lighter lines—are applied using the `textures` library, and each cell selects a texture via a random index. The SVG is built with D3 v4, using data joins to create rows and columns, while the texture API’s `.url()` method assigns the fill. The result is a visually varied, patterned mosaic whose texture placement is entirely stochastic.
A grid of 1,500 small squares fills the screen, each cell randomly assigned a harmonious golden-ratio-based color from a custom HSL-to-RGB function. The visualization shows how a quilt-like pattern emerges from uniform geometry with varied fills. Built with D3 v4, the code generates row and column data arrays, then binds them to SVG rectangles using `selectAll`, `data`, and `enter`. The `randomColor` closure iterates through hues via the golden ratio, while white strokes separate each square, creating a subtle grid structure.
This example generates a 50-by-30 grid of colored and textured rectangles, forming a quilt-like pattern where vertical bands define colors and horizontal bands define texture patterns. The visualization uses D3 v4 with SVG rendering, plus the textures library to create circle and path-based patterns. A nested ordinal scale maps three color categories from ColorBrewer to three texture generators, applying each texture in each color. The code initializes texture definitions using D3’s selection `.call` method, then binds grid data to rectangles positioned in a fixed 25-pixel cell layout.
A quilt-like grid of 1,500 small squares fills an SVG canvas, each tile rendered with a yellow circular texture pattern over a dark background. The code generates the grid data programmatically with nested loops, assigning each cell an x, y, width, and height. It uses the textures library’s `textures.circles()` to create the pattern, applies it via `t.url()` as the fill, and relies on D3 v4 selections to append and position the rectangles.
A grid of 144 circles displays a factorial combination of three colors and three textures, creating a visual test for encoding categorical data. The circles are grouped into nine blocks, each pairing one color from a ColorBrewer palette with one texture from the Textures.js library, including lines, circles, and paths. Every second, a transition animates the circles to new random radii, using D3’s `transition.attr` and `setInterval`. The code builds nested ordinal scales to map color and texture pairs, generating unique SVG patterns via `textures.lines()`, `textures.circles()`, and `textures.paths()`.
This block converts uploaded images into ASCII art by downsampling them to 72 pixels wide and mapping pixel brightness to characters from a d3 linear scale. The scale's domain and range are editable: double-click to add new values, and drag the numbers to remap intensity thresholds in real time. Rendered with canvas-based image processing and styled with monospace typography, the visualization lets you explore how different character mappings alter the appearance of the resulting text portrait.
This zoomable circle packing diagram visualizes odor-related food inspection violations in Chicago from 2010. The hierarchical layout nests circles to represent categories, with node sizes reflecting how frequently smell-related terms appear in violation comments. Built with D3 v3, the visualization uses SVG rendering and supports interactive zooming to explore the data structure. The data is sourced from Chicago food inspection records, focusing on three specific violations related to odor and trash maintenance.
This example shows a world map with country boundaries and river centerlines rendered as dark gray vector layers over an OpenStreetMap tile base. It demonstrates how to combine Leaflet’s interactive map with D3’s `d3.json` to load GeoJSON data. The map initializes with a global view centered at [30, 0], and each dataset is added as a `L.geoJson` layer with a uniform fill and stroke weight. The code uses Leaflet 0.7.7 and D3 3.5.5, pulling from Natural Earth datasets hosted on GitHub.
This example displays global river centerlines on an interactive Leaflet map with a dark gray stroke style. It loads GeoJSON data from a hosted world rivers dataset and renders it as vector features over OpenStreetMap tiles. The code uses Leaflet’s `L.map`, `L.tileLayer`, and `L.geoJson` APIs, with D3’s `d3.json` to fetch the external data file asynchronously. The map is centered on the world with an initial zoom level of 2.
Interactive zoomable circle packing visualization of software package hierarchies, rendered as nested circles in SVG. Built with D3 v3, it displays the flare.json dataset with circles sized by package size and grouped by category. Clicking any circle smoothly animates the view to zoom into that package’s children, while clicking again zooms back out. Leaf nodes appear as white circles, and hover effects highlight nodes with a black stroke. The visualization supports drill-down exploration of the hierarchical structure with animated transitions.
This visualization plots police violence incidents as circles, with age on the y-axis and date on the x-axis, using data loaded from a CSV via `d3.csv`. It filters out records with unknown ages, computes the maximum age for a linear y-scale, and derives the date extent for a time scale. Circles are appended with `d3.selectAll` and `.enter()`, and clicking a circle logs its age and scaled y-value. The SVG is rendered full-screen with D3 v3.5.5, and the animation is minimal, relying only on the initial data-bound circle placement.
This visualization uses D3 4.0’s improved pack layout to render a hierarchical circle packing diagram of the flare.json dataset, displayed on a 960×960 canvas. Each node is represented by a circle whose size corresponds to its value, with parent nodes containing child nodes. The layout computes the smallest enclosing circle for each node, resulting in a tighter, more compact arrangement than earlier implementations. The visualization is rendered entirely with canvas and appears as a network of nested circles—an "offensive" clustering of many small bubbles grouped into larger categories by color.
This visualization presents police violence data collected by Mapping Police Violence, displaying each victim as a small square labeled with the first letter of their race. The data is loaded from a Google Spreadsheet via Tabletop.js, normalized to a consistent schema, and then visualized as a grid of hoverable tiles. When the user hovers over a victim tile, a detail panel shows the victim's name, race, gender, state, date of death, and a link to the source article. The visualization uses Crossfilter to explore and group the data by race, gender, and armed status.
A scatterplot visualizes the relationship between confidence and smiling in selfie data from Selfiecity, plotting five data points with circle size scaled to the smiling value. The visualization includes axes, hover effects that change circle color to yellow, and a tooltip displaying coordinate percentages. Built with D3.js version 3.5.5, it uses linear scales, SVG axes, and mouseover events to show interactive details, with a click feature allowing users to update the value range and zoom into new ranges.