Image Gallery

100%

✓ Published0🌍 Public

Last edited Feb 5, 2016

Created on Feb 5, 2016

This example displays a gallery of thumbnail images from the /r/earthporn subreddit, fetched as JSON via D3’s `d3.json` request. It filters the returned posts to keep only those with JPEG thumbnails, then appends each thumbnail to the page as an `<img>` element inside an anchor tag linking to the full-resolution image. The code uses D3 v3’s selection and attribute methods to set the thumbnail height and source, with a black background and rounded image corners defined in CSS.

AI-generated description

forked from <a href='http://bl.ocks.org/syntagmatic/'>syntagmatic</a>'s block: <a href='http://bl.ocks.org/syntagmatic/76739ae4271e8c111d2e'>Image Gallery</a>

Similar vizzes

Loading thumbnail…

VizHub Images

This example showcases a gallery of thumbnail images generated from VizHub examples, displayed in a grid layout. It uses the D3 library, specifically `d3.select` and `d3.range`, to create and arrange SVG elements for each image. The visualization reads image URLs from the README metadata and renders them as embedded `<image>` elements, providing a visual index of attached files. The code also includes a counter to display the total number of images in the collection.

CCurran Kelleher

69% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple D3 data-joining workflow that renders a collection of eleven image URLs as `<img>` elements on a page. It shows how to bind an array of string data to newly created DOM nodes using D3’s selection and `enter()` mechanism. The code uses `d3.select`, `.data()`, `.enter()`, and `.append()` to create each image, setting the `src` attribute with `.attr()`. The rendered result displays a row of images, with the page’s large font size acting as a visual backdrop. The example relies on D3 v6 and is minimal, focusing on the core enter-update-exit pattern.

MMTR

65% match

Loading thumbnail…

reddit base

This example displays the top posts from the Reddit "pics" subreddit, fetched from a JSON source, as a row of uniformly sized circles. The visualization uses d3.select to target the SVG canvas and appends a group element to contain the circles. Through d3's selectAll and data binding, each post is mapped to a circle positioned horizontally based on its index, creating a simple, static scatterplot-like strip that encodes the sequence of popular images without revealing their individual scores or details.

LLesGuessing

64% match

Loading thumbnail…

D3 map

This example displays a natural Earth projection world map populated with thumbnail images of photographs, each positioned by geographic coordinates derived from a SPARQL query against the Network Digital Heritage Netherlands API. The map is rendered as SVG using D3’s `geoPath` and `geoNaturalEarth1` projection, while country boundaries come from TopoJSON world-atlas data. Photographs are fetched, cleaned, and plotted as SVG `<image>` elements, with hover effects using CSS `mix-blend-mode`. The code leverages D3’s `json` loader and TopoJSON’s `feature` method.

BBryan Ray

63% match

Loading thumbnail…

Gist f27c27698d271fa3f54efa40338bff9a

This example uses the D3.js force-directed graph layout via `d3.forceSimulation` to arrange a collection of desktop-environment and operating-system screenshots, sourced from image URLs listed in a JSON array. Each image is rendered as a node using D3’s `d3.select` and `d3.image` with an HTML `img` tag, while `d3.force` pulls linked nodes together. The visualization shows a clustered network of related interfaces, with node positions updated iteratively through the simulation’s tick function. The code explicitly references `d3.forceSimulation`, `d3.force`, and `d3.select`, but does not include interactive filtering or hover effects.

DDarMontou

63% match

Loading thumbnail…

reddit base

This example visualizes a subset of Reddit’s /r/pics front-page data, showing each post as a point whose position and size can be explored dynamically. The code loads a static JSON file containing post metadata (score, title, thumbnail) and uses D3.js to bind that data to SVG elements. While the main script only logs the data array to the console, the accompanying configuration suggests the visualization is intended to render circles or similar marks, likely using D3’s data join and scales. The simple histogram variant hints at plotting numerical fields like scores or comment counts.

LLesGuessing

62% match

Loading thumbnail…

Hello HTML

The gallery displays a grid of 18 identical, cartoonish yellow faces with black outlines, each generated with randomized facial feature parameters. Built with React and rendered as SVG, the example uses D3’s `arc` generator to construct the mouth shape, while all other components—the background circle, eyes, and face container—are hand-coded React components. Each face’s stroke width, eye offset, eye radius, and mouth dimensions vary randomly, demonstrating how component-based composition with D3 utilities can produce varied visual output.

Cchipbrownlee

62% match

Loading thumbnail…

DPLA Data

This example queries the Digital Public Library of America (DPLA) API to fetch and display search results as a simple webpage. It shows a list of image thumbnails with titles, each linked to its source item. The code uses the XQuery `fetch:text` or `fn:json-doc` functions to retrieve JSON data from the DPLA API, then parses it with `json:parse` or direct JSON navigation. It constructs HTML `<li>` elements containing an `<img>` tag and anchor, filtering out results without a thumbnail or title.

CCliffordAnderson

61% match