Skip to main content
100%

INSTALL

✓ Published0🌍 Public
Aabernier
Last edited Apr 24, 2014
Created on Feb 15, 2013

PAC0SS is a playful demonstration of creating pie charts entirely with CSS, animated via JavaScript. It uses a Pac-Man-themed design to illustrate how a simple `<span>` element can be transformed into a dynamic pie chart by rotating two half-circle pseudo-elements. The example includes an interactive slider that lets users adjust the chart’s value from 0 to 360 degrees, with the pie updating live. Rendering is handled with SVG-based CSS transforms, and the code is structured for both client-side use with jQuery and server-side use via npm. The visualization showcases the versatility of CSS for data representation in a retro, game-inspired aesthetic.

AI-generated description

DEMO is here: http://bl.ocks.org/abernier/raw/4961058/

Explanation here: http://stackoverflow.com/questions/2280127/css-pie-charts#answer-15015424

INSTALL

client-side

<link rel="stylesheet" href="https://gist.githubusercontent.com/abernier/4961058/raw/index.css">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://gist.githubusercontent.com/abernier/4961058/raw/index.js"></script>
<script>
var mypie = new Pacss('#mypie');
</script>

server-side

npm install https://gist.github.com/abernier/4961058/download

then simply:

var pacss = require('pacss');
new Pacss('#mypie')
ISC Licensed

Similar vizzes

Loading thumbnail…

pacman

This example visualizes the classic Pac-Man character and dots using SVG shapes. It shows a yellow circle with a wedge-shaped mouth, created with a path, and a small black eye. Three yellow dots trail the character to the right. The code uses hand-coded SVG elements, including `circle` and `path`, combined with CSS for styling and a `transform` to flip the mouth shape. The static vector graphics are drawn directly in HTML.

Aadonisacruz0@gmail.com
73% match
Loading thumbnail…

CSS Pac-Man

A CSS-only Pac-Man character is rendered as a circular red disc with a triangular bite removed, created by a single `div` element styled with a 60-pixel red border, a transparent right border, and a `border-radius` of 50%. The example relies entirely on CSS borders and the `border-right-color` property to simulate the open mouth, with no JavaScript or external libraries involved. The HTML consists of one element with the ID `pacman`, and the styling is defined in a separate CSS file using the universal box model. The result is a static, two-dimensional shape that evokes the classic arcade sprite.

Aackuser
72% match
Loading thumbnail…

Pie Css Rendering Data with React & D3

This visualization displays CSS named colors as a radial burst of pie slices, with each slice filled using its corresponding hex value from a CSV dataset of color names. The code combines React hooks for state management and data loading with D3 utilities, specifically `d3.csv` for fetching the data and `d3.pie` and `d3.arc` for computing and rendering the arc paths as SVG elements. React renders the SVG markup, while D3 handles the geometric calculations, producing a colorful circular chart that showcases the color palette.

JJeyasuriya M
72% match
Loading thumbnail…

Rotating Animated Fractal Pie Chart

This rotating animated fractal pie chart recursively subdivides each pie slice into smaller slices, creating a deeply layered, spiraling visual effect. The animation continuously rotates each level of the hierarchy, while scaling down slice size and stroke thickness through SVG transforms. The code uses D3 v4 with the d3-component library, building the structure via d3.pie, d3.arc, and d3.timer for the animation loop. The data is procedurally generated with fixed child ratios, and the rendering emphasizes aesthetic appearance over exact area preservation.

Aamtur8
72% match
Loading thumbnail…

Pie

This example shows a radial burst of colored arcs, each representing a CSS named color from a dataset loaded via `d3.csv`. The visualization renders a full circle of pie slices with no gaps, using React to manage state and render SVG paths. It leverages `d3.pie` to compute arc angles and `d3.arc` to generate the path geometry, with each slice filled using the color’s hexadecimal value from the data. The code demonstrates a hybrid approach where D3 handles data loading and calculations while React handles the DOM updates.

SStarkerRegen
71% match
Loading thumbnail…

Canvas - Pie

A grid of twelve small pie charts renders on table cells using the Canvas API, with each chart displaying a percentage value from a hardcoded data attribute. The code creates each chart via the `pie` function, which draws a light blue background circle and a tomato-colored wedge proportional to the ratio, then labels it with the percentage. All charts are generated in pure JavaScript without any frameworks, using `document.createElement`, `canvas.getContext("2d")`, and the `arc` and `fillText` methods.

11Cr18Ni9
71% match
Loading thumbnail…

Pie Explode

A pie chart of fruit counts from a CSV file explodes into separated slices when the page loads, with each category rendered as an individual SVG path. The visualization uses d3.layout.pie to compute slice geometry, d3.svg.arc to define the pie shape, and d3.scale.category20 for color encoding by fruit name. A transition with a 2-second duration and 500-millisecond delay animates the slices outward via a custom explode function that calculates translation offsets from each slice's midpoint angle. The data comes from the included fruit.csv, and the rendering relies on SVG with d3.v3.

DDarienLiang
71% match
Loading thumbnail…

Untitled

This example presents a static SVG pie chart inside a centered HTML layout, rendering data slices with D3.js version 5.7.0. The chart uses the `d3.pie` API to compute arc paths, which are then drawn as SVG `path` elements within a 960×500 viewport. The visualization is styled via an external `pie.css` stylesheet, while the JavaScript logic resides in a bundled `pie_bundle.js` file. The chart displays categorical proportions directly, with no interactivity or animation, relying solely on D3’s arc generation and SVG rendering.

TTharun2022
71% match