Skip to main content
SimilarExport ZIP
100%

Pseudo Waffle Chart

✓ Published0🌍 Public
Hhquazza@gmail.com
Last edited Dec 9, 2024
Created on Dec 9, 2024

This pseudo waffle chart displays a grid of rounded rectangular cells, with purple cells in the lower-left portion and gray cells filling the remainder. The visualization mimics the appearance of a waffle chart without using a dedicated charting library, instead rendering directly through SVG elements defined in the HTML. The React framework structures the component, while the SVG markup handles the visual output, positioning each 30x30 pixel rectangle with explicit coordinates and fill colors to create the patterned composition.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pseudo Bubble Chart

This pseudo bubble chart demonstrates a scatterplot-style visualization where circles of varying sizes represent data points along x and y axes. The visualization uses React to render an SVG scene containing multiple gray circles and one prominent purple circle, with axis labels and grid lines provided by plain SVG elements. The code utilizes standard SVG primitives such as `<circle>`, `<line>`, and `<rect>` within a fixed viewBox, while CSS styling controls the text appearance for axis tick labels.

Hhquazza@gmail.com
74% match
Loading thumbnail…

Psuedo Visualisations

This example presents a set of four gray rectangles in descending heights, arranged as a pseudo bar chart. The letter “A” hovers above, and a single rectangle transitions its fill and stroke on hover. Built with React, it renders using SVG, with CSS transitions and the Share Tech Mono font. The code directly uses SVG primitives like `rect` and `text` without external visualization libraries.

GGiorgi Xiaoyu Zhang
73% match
Loading thumbnail…

Waffles

Three waffle charts compare party percentages, each rendered as a 10-by-10 grid of 100 squares, with filled cells in party colors (steelblue, red, green) and unfilled cells in gray. Each chart labels its party and value, such as “M 72%,” using d3 v4 selections to append SVG `<rect>` elements and `<text>` labels. The code derives square positions via nested `for` loops and applies CSS classes for coloring, with the source data hardcoded in a `scores` array.

PPatrick Wojda
72% match
Loading thumbnail…

Pseudo Bar Chart (Horizontal)

This example displays a horizontal pseudo bar chart with five rounded bars of varying lengths. The bars are drawn as SVG `<rect>` elements within an `<svg>` container, with one bar highlighted in purple and the rest in gray. The chart includes text labels on the left side, rendered as SVG `<path>` elements, which appear to be custom-drawn glyphs rather than standard text nodes. The visualization is implemented using raw SVG markup in a React component, without any additional data visualization libraries.

Hhquazza@gmail.com
72% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart displays four black rectangles of varying heights and widths on a white background, suggesting categorical data through simple geometric shapes. The example demonstrates foundational SVG rendering with raw `rect` elements and explicit width, height, and fill attributes, all defined directly in the HTML markup. Built with React, the code uses no external visualization libraries, relying instead on static SVG coordinates to create a clean, minimalist chart. The layout follows a fixed 1512-by-982 pixel canvas, illustrating how basic shapes can communicate quantitative comparisons.

Jjinjuta.s.au@gmail.com
72% match
Loading thumbnail…

Cell Matrix

A grid of purple and yellow rounded rectangles forms a randomly generated 16-by-8 cell matrix, with each cell’s color determined by a Math.random() call within the React component. The visualization is rendered as SVG rectangles using React and JSX, with cell dimensions computed from the container’s inner width and height divided by the grid counts. The layout is managed by a VizContainer component that applies margins and translates the SVG group, while the page loads React and D3 v6 from a CDN in the HTML entry point.

Ddartigues
71% match
Loading thumbnail…

Pseudo Boxplot Chart

A pseudo boxplot chart illustrates the distribution of a dataset using static SVG shapes. The visualization shows a box-and-whisker diagram created from hand-coded SVG elements—a rectangle for the interquartile range, lines for whiskers, circles for median and outliers, and a row of circles for individual data points. The chart uses React to render an SVG canvas and applies the Share Tech font from Google Fonts. It constructs the pseudo boxplot entirely through explicit SVG primitives, including `rect`, `line`, and `circle` elements, without relying on a charting library.

MMarcus Vinicius da Silveira Richa
71% match
Loading thumbnail…

Pseudo Line Chart

This example presents a simple static composition of black text and rectangular bars arranged on a light gray background. Rendered as a single inline SVG using the `react` framework, the visualization uses basic SVG elements such as `rect` and `path` to form a pseudo line chart, where bars of varying lengths and labels suggest data values without actual plotting. The code is minimal, relying on hardcoded coordinates and no external libraries.

AAshwani Sajwan
71% match