Skip to main content
SimilarExport ZIP
100%

Icon Chart using SVG Path Command

✓ Published0🌍 Public
PPeter Cordone
Last edited Sep 27, 2021
Created on Aug 28, 2021

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.

AI-generated description

This visualization contains simple SVG code for creating an icon chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Concentric circles chart using SVGt

A concentric circles chart displays two nested circles centered at the origin, rendered as an SVG viewBox with a range of -100 to 100. The outer circle has a radius of 50 and a fill of rgb(0,122,176), while the inner circle has a radius of 10 and a fill of rgb(162,207,225). The example uses the SVG `<circle>` element directly within an inline `<svg>` tag, with no JavaScript libraries or external data sources involved. It demonstrates a minimal, static visualization of hierarchical proportions through simple geometric layering.

PPeter Cordone
75% match
Loading thumbnail…

SVG Icons in JS

This example demonstrates how to embed SVG icons directly in JavaScript code as template strings, avoiding the need for separate image files. It displays three icons from heroicons.com—an arrow path, an external link, and a gear—centered in a flexbox layout. Using D3.js, the code maps over the icon keys and injects the SVG markup into div elements via the `.html()` method, then resizes each icon to 250 pixels wide. The approach highlights a clean, dependency-light way to manage icons in web visualizations.

CCurran Kelleher
74% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a grid of solid-color circles arranged to show basic SVG shape construction and layering. It uses inline SVG markup within an HTML document to render ten circles with varying radii and colors, including a stack of nested circles at the right center. The circles are positioned using explicit `cx` and `cy` coordinates, with `fill` attributes defining their color. No external libraries or JavaScript are involved; the rendering relies entirely on the browser’s native SVG support, making it a static, code-only illustration of fundamental vector graphics primitives.

WWannabeProgrammerr
74% match
Loading thumbnail…

SVG - Database Icon

This example shows a classic cylindrical database icon drawn entirely with SVG shapes. The code uses SVG elements such as `ellipse`, `path`, and `circle` to render the icon's body, connector lines, and data dots on a 960x500 canvas. The icon is composed of stacked curved paths creating a three-dimensional cylinder effect, with the top ellipse and side straight lines forming the container. Grey circles on the side represent stored records, while the stroke and fill attributes control the black-and-white aesthetic. No JavaScript libraries are used; the visualization relies purely on static SVG markup.

RRaul Gamez
74% match
Loading thumbnail…

Pseudo Bar chat

This example shows a set of six circles positioned diagonally across a white SVG canvas, creating a pseudo bar chart through the descending placement of the shapes. Each circle measures 34.5 units in radius, with coordinates that suggest a decreasing trend from left to right. The visualization uses raw SVG elements directly in an HTML file, with a `<rect>` for the background and `<circle>` elements for the data points. The code defines the chart statically without any JavaScript libraries or interactive features, relying solely on inline SVG markup and basic CSS to reset the body margins.

AAbhinash Mallick
73% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates four basic SVG circles arranged in a grid, each with a distinct fill color (default black, red, blue, and cyan) to illustrate fundamental shape rendering. The circles are drawn directly inside an `<svg>` element with fixed width and height of 300 pixels, using explicit `cx`, `cy`, and `r` attributes to position and size them. The page also includes a large CSS heading, “SVG Fundamentals,” styled with a 13em font size. No external libraries are used; the visualization relies solely on native SVG markup and inline HTML/CSS, showing how static vector graphics are defined without JavaScript or data binding.

PPratik S.
73% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using concentric circles stacked at the center of a 1000×1000 canvas. The circles decrease in radius from 100 to 50 pixels, each with a distinct fill color ranging from tan to salmon. The visualization also includes a black polyline path drawn from point (400,600) through (700,600) to (600,700). The code directly uses SVG elements like `<circle>` and `<path>` within plain HTML, with additional commented-out examples of `<rect>`, `<line>`, and other path configurations.

Sspace-captain96
73% match
Loading thumbnail…

Hello Data viz

This example displays five overlapping circles of varying sizes and colors, arranged to create a visually dense, colorful target-like composition on a 960 by 500 SVG canvas. The circles are manually positioned with fixed coordinates and radii, each using distinct fill and stroke colors such as red, green, purple, and magenta. The visualization is built with plain HTML, CSS, and JavaScript, rendering shapes directly through SVG circle elements without any external libraries or data-driven logic. It simply demonstrates static vector shapes with heavy strokes and overlapping layers for visual effect.

Iillyyo
72% match