Pictogram grid in d3js

100%

Pictogram grid in d3js

✓ Published0🌍 Public

Last edited Jun 19, 2017

Created on Sep 17, 2014

A pictogram grid displays 100 identical SVG icons arranged in a 10x10 layout, with a jQuery UI slider controlling how many icons are highlighted in a contrasting color. The code defines the icon geometry once in an SVG `<defs>` element and reuses it via `<use>` elements, a technique that simplifies repeating graphics. D3.js (v3) generates the grid using `d3.range`, calculates each icon’s position with modulus and division, and updates the display through `d3.selectAll("use")` in response to slider input. The visualization demonstrates an interactive isotype approach for quantity comparison.

AI-generated description

Pictograms, or isotypes, in the form of repeating icons, can be used to effectively contrast quantity/magnitude comparisons in infographics and data visualisation. For more background information on the topic, I'd recommend the article by Robert Kosara:

The ISOTYPE may be close to 100 years old, but many of the ideas behind it are still very relevant and visualization might benefit from considering some of them.

Scalable Vector Graphics (SVG), the vector markup language exploited by d3.js, makes it easy to generate repeating graphics by declaring icon geometry once in the <defs> element and then calling them whenever needed via a <use> element. This simple example shows how to use d3 to create a grid of icons. A jQuery slider shows how those icons can then be addressed for interactive purposes.

The complex geometry needed to define an icon can be created by any vector graphics editor capable of generating SVG markup - Inkscape or Illustrator will work just fine. To see a project that uses this approach, have a look at the interactive census quiz of England & Wales.

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

An interactive SVG pictogram displays ten identical icons arranged in a single row, with a jQuery UI slider controlling how many are highlighted in black versus white. The code defines a reusable icon path in `<defs>`, generates each instance via `d3.selectAll("use").data().enter()`, and updates classes through `d3.selectAll("use").attr("class", …)` based on the slider’s `ui.value`. A text label shows the current count.

SSokrates86

79% match

Loading thumbnail…

Icon Chart using SVG Path Command

This example shows a 10-by-10 grid of circles that form an icon chart, with the first five circles in the top row highlighted in a lighter blue to mark a distinct subset. The visualization is built entirely with SVG and JavaScript, creating each circle dynamically using `document.createElementNS` and setting `cx`, `cy`, `r`, and `fill` attributes directly. The data is hard-coded in nested loops, and the SVG is appended to the page body, demonstrating a minimal, manual approach to icon-based charting without external libraries.

PPeter Cordone

73% match

Loading thumbnail…

grids

This visualization displays a grid-based layout with multiple colored panels, including a header bar, a slider-controlled range display, and a large SVG canvas. The interface uses Bootstrap’s grid system for responsive column and row structuring, while d3.v5 handles SVG sizing and element selection. A slider appears to adjust a numeric value shown in the adjacent label, with the main chart area left empty. The page uses a fixed full-viewport layout with distinct color-coded sections for headers, controls, and content areas.

AAnimesh Nautiyal

73% match

Loading thumbnail…

Grid with d3

A 10×10 grid of black circles is rendered in an SVG, with each circle positioned at evenly spaced intervals and sized by its data-defined width. The visualization uses React to manage the component structure and d3-selection to append and bind data to SVG elements. The code generates the grid data programmatically, then applies a nested join pattern with `selectAll` and `.join()` to create rows and columns of circles.

MMark Lam

72% match

Loading thumbnail…

GRID

A 10x10 grid of square cells responds to clicks by cycling through four fill colors: white, blue, orange, and gray, based on a per-cell click counter. The SVG is generated with D3 v4, using data binding to create rows and columns of `rect` elements. Each cell maintains its own click state, and the `d3.select(this)` method directly updates the clicked square’s style. The grid itself is static, with no animation or external data source beyond the locally generated coordinate and dimension objects.

CChristoph Diefenthal

71% match

Loading thumbnail…

Square Grid

This visualization displays a changing quantity as a grid of colored squares, where each square represents one unit, arranged so small rows of ten, groups of one hundred, and large rows of one thousand allow quick reading of exact counts by powers of ten. The count updates randomly, with squares animating in and out using `transition.attr("width", 0)` and `transition.delay` based on index. The SVG rendering uses `d3.select` and `d3.range` to manage the cells, and a `d3.interpolateNumber` tween animates the text label. The code uses the D3 v3 library and an interval timer to trigger updates.

Mmbostock

71% match

Loading thumbnail…

Axis Grid

This example showcases a static, abstract axis grid rendered as an SVG. The central visual features a series of grid lines with deliberate, small gaps at their intersections, creating a dotted or segmented pattern that echoes the look of analog signal interference. The code constructs the grid using D3.js scaling and axes, specifically `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with tick sizes set to span the full chart width and height. It further annotates the grid with small clusters of black dashes and two alternating rows of dots, all generated procedurally within the script.

KKelvinZCH

71% match

Loading thumbnail…

JS Bin

This example uses D3 to generate a 40-by-40 grid of SVG rectangles, each initially filled red. The visualization responds to mouseover events, changing a hovered rectangle’s fill to green via the `style` method. The grid is positioned using an ordinal scale with `rangeBands` across an 800-pixel square. The code defines an `onClick` function that toggles a rectangle’s color between red and green, though this handler is not attached to any event in the visible code.

WWillNetsky

71% match