{"version":"1.0","type":"rich","title":"Pictogram grid in d3js","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-d832fc03f6e6a91e99f4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}