Waffles

100%

✓ Published0🌍 Public

Last edited Jan 17, 2020

Created on May 16, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Election influence

This visualization compares Sweden’s 20 seats in the European Parliament against the 751 total members, using a waffle chart of colored blocks. Each block represents one seat, with Swedish seats highlighted by a black border and full opacity, while other countries’ seats appear faded. D3 v4 selects and appends block divs to render the overview and per-party breakdowns, with data structured by political group and nation.

PPatrick Wojda

66% match

Loading thumbnail…

oefening1

Three vertical rectangles display a small bar chart from a hardcoded data array of [20, 40, 50]. Each bar’s width is proportional to its value, multiplied by ten, while height is fixed at 50 pixels and vertical positions step by 100 pixels. d3.v4’s selection, data join, and enter methods render the SVG rectangles. The code also contains commented-out attempts at circles and d3.set usage. The page uses steelblue fill for the bars on a 500‑by‑500 SVG canvas.

GGeoJonna

65% match

Loading thumbnail…

Fork of Fork of Fork of Digital mockup of a line chart

This pseudo-visualization presents a stylized mockup of age distribution across major political parties, using horizontal bars to compare two groups. The chart encodes party affiliation through color, with red and blue rectangles representing different segments. Built with React and rendered as SVG, the visualization uses static positioned `<rect>` elements sized to suggest proportional differences between categories. The design incorporates the Share Tech font family from Google Fonts, creating a digital aesthetic that mimics a line chart while maintaining a fixed, non-interactive layout.

Ddsims2157

65% match

Loading thumbnail…

gems on top of square

A square chart area displays nine colored circles, each connected by a dashed line to a corresponding icon positioned evenly along the top edge. The visualization overlays two gradient backgrounds—one horizontal and one vertical—using CSS `mix-blend-mode` for a blended effect. Built with D3 v4 in SVG, the code uses `d3.pie`, `d3.scaleLinear`, and `d3.scaleOrdinal` to position data points randomly and assign colors. A crosshair grid and a legend-like icon row clarify spatial relationships.

PPatrick Wojda

65% match

Loading thumbnail…

Wafer Map

This visualization displays the spatial distribution of defect values across a semiconductor wafer, with each cell representing a coordinate from a CSV dataset. The code renders an SVG grid using D3 v6, where `d3.scaleLinear` maps x and y coordinates to pixel positions and axes are added via `d3.axisLeft` and `d3.axisBottom`. Rectangles are positioned with inverted y-scaling to match Cartesian orientation, and the steelblue fill is applied uniformly through CSS, though the value column remains unused in the current rendering.

HHan Jinseok

64% match

Loading thumbnail…

scatter chart.js

This scatter chart displays the popular vote counts for political parties and alliances in a Singapore election, with each party represented as a circle along a categorical y-axis. The x-axis uses a linear scale to show vote totals, while the y-axis uses d3.scalePoint to space parties evenly. The visualization is built with D3 v6, loading data from a CSV file and rendering SVG elements using d3.axisLeft and d3.axisBottom for the axes, with circles styled in steelblue via CSS.

CCyc-Evelyn

64% match

Loading thumbnail…

Shuffle blocks

Eight colored blocks, each labeled with a Swedish party abbreviation, shuffle through a three-by-three grid before returning to their original positions. The animation alternates between a forward sequence and a backward sequence after an initial delay. Built with D3 v4, the code selects SVG groups containing rectangles and text, applying `transition.attr` with `duration` and `delay` to update each block's `transform` attribute. The data consists of a hardcoded array of party codes, with movements defined as index, row, and column targets.

PPatrick Wojda

64% match

Loading thumbnail…

Line Charts

Two line charts display board game ratings from 2016 to 2020, comparing the number of ratings for games like Catan, Dominion, and Codenames across monthly dates. The example loads D3 v5 via a script tag and uses `d3.csv` to parse the data, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate SVG paths. Each game gets a distinct color from `d3.schemeCategory10`, with labels placed at the end of each line.

Oolin8

64% match