Cheesecake

100%

✓ Published0🌍 Public

Last edited Jun 1, 2021

Created on Jan 25, 2021

This visualization transforms a cheesecake recipe into an edible infographic. It shows the recipe's sequential preparation steps by mapping each stage to a distinct slice of a pie chart, with ingredient quantities proportionally scaled. The chart is rendered using HTML5 Canvas, drawing the colorful sections and labels with the Canvas API. Data from the original gist is parsed to drive the chart’s geometry and text, directly reflecting the listed ingredients and instructions. The piece relies on custom JavaScript for canvas drawing and layout, without external visualization libraries.

AI-generated description

Similar vizzes

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

72% match

Loading thumbnail…

image of a cake

This example uses D3.js (v7) to draw a stylized strawberry cheesecake as a static SVG scene. The visualization layers a graham cracker crust, a creamy cheesecake filling, and a red strawberry glaze using SVG shapes like rectangles, ellipses, and circles, with green triangles for leaves and white circles for whipped cream. The code constructs the image procedurally by appending each element to the SVG canvas, using arrays to position repeated strawberries and cream dollops, and a curved path for chocolate drizzle. It serves as a playful, non-data-driven demonstration of D3's shape-drawing and layout capabilities.

Ppreethimedipelli@my.unt.edu

72% match

Loading thumbnail…

image of a strawberry cheesecake

This example draws a strawberry cheesecake using D3.js v7 with SVG shapes. It shows the dessert’s layered structure—a graham cracker crust, creamy filling, red strawberry glaze, and toppings—built from rectangles, ellipses, circles, triangles, and a curved path. The code selects a container div, appends an SVG canvas, and sets attributes like fill colors and stroke widths for each element. D3’s selection and append methods are used to create the simple geometric illustration programmatically.

Ppreethimedipelli@my.unt.edu

68% 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

68% match

Loading thumbnail…

Gist 937986

A single red donut chart fills the entire 800-by-800-pixel SVG canvas, showing five equal slices that together form a complete ring. The visualization uses D3's `d3.layout.pie` to compute the arc angles and `d3.svg.arc` with an inner radius set to 95% of the outer radius, producing a thin, ring-like donut rather than a thick pie. Each slice is filled with the same solid red color, and the data comes from a hardcoded array of five 20s in the sample.coffee file. The rendering approach relies on SVG `path` elements grouped in `<g>` elements, with the entire chart translated to the center of the canvas.

CCaged

68% match

Loading thumbnail…

Cuisine Pie Chart - Pseudo Viz

This example transforms a five-cuisine order dataset into a pseudo pie chart. It uses `d3.pie` and `d3.arc` to compute and draw the chart’s arcs, with `d3.scaleOrdinal` assigning a categorical color scale to each cuisine. The visualization is rendered as an SVG group centered within a 900x500 canvas. While the code imports various other chart primitives (e.g., circle, rect, symbol) from separate modules, only the pie chart function is executed, producing a static, labeled donut-like chart without interactivity.

Jjjlaber

67% match

Loading thumbnail…

Animated Fractal Pie Chart

This animated fractal pie chart displays a nested hierarchy of slices, where each slice recursively contains its own children, creating a visually intricate pattern with overlapping, scaled-down pie segments. The animation reveals the recursive structure by smoothly rotating and scaling each nested group. Built with D3 v4 and the d3-component library, the visualization renders with SVG elements whose transforms are animated over time. It recursively generates data using a set of fixed ratios and uses `d3.pie` and `d3.arc` for slice geometry, with a custom `d3.timer` to drive the animated transform sequence.

CCurran Kelleher

67% match

Loading thumbnail…

Fork of Fork of Fork to pie chart

This example visualizes cereal ratings as a pie chart using the Chart.js library, rendering each cereal’s rating as a slice on an HTML canvas. It fetches a CSV dataset from a GitHub gist, parses the rows to extract cereal names and their rating values, then feeds those into the chart with a custom color palette. The chart is configured to be responsive while maintaining a fixed aspect ratio, and it displays a title above the visualization. The code explicitly uses the `Chart` constructor with the `type: 'pie'` option, along with canvas 2D context, to draw the final output.

TTarun Kumar Bosupally

67% match