Abstract Data Viz — Framer Usage Guide
Abstract Data Viz is a single Framer code component (Abstract_Data_Visualization.tsx) that renders one percentage or a set of segments as one of 21 interchangeable abstract chart styles. Switching the Style dropdown swaps the whole visual while reusing the same underlying data, so you can try several looks without re-entering your numbers.
Adding it to a page
1. Open the Framer project and go to the Assets panel (or the layers panel's component list).
2. Under Code Components, drag Abstract Data Viz onto your canvas, or insert it via Insert → Code Components if you're working from a blank frame.
3. Resize the frame however you like — the component fills its frame edge-to-edge and reflows at any width/height, including inside Stacks and auto-layout containers.
4. With the layer selected, open the right-hand Properties panel. Every control described below lives there. The panel is context-sensitive: most controls only appear once you've picked a relevant Style, so the panel stays short instead of showing all ~90 properties at once.
The data model
Every style reads from the same underlying list of "segments," which always sum to 100%. There are two ways to feed it data, switched with Percentage mode at the top of the panel:
Single value — the simple case. Set Percentage (0–100), plus a Value label and Remainder label (e.g. "Value" / "Remaining"). Internally this becomes two segments: the value and whatever's left over to 100%, colored with Color A / Color B.
Multiple segments — add a Segments list, each with its own Share, Color, and Label. Shares don't need to add up to exactly 100 — they're normalized automatically. This is what you want for anything with more than two categories (e.g. "Remote / On-site / No preference").
Every color field in the component — segment colors, Color A/B, and the style-specific accent colors described below — uses the same paint control: solid color, gradient, or repeating pattern, chosen from a Mode dropdown inside the color swatch.
Shared controls (apply to every style)
These sit near the top of the panel, above the style-specific section:
Size — Overall scale of the chart (4–100). Doesn't change the data, just how large the shape reads within the frame.
Scattered value — Randomness/jitter amount, used by the grid- and cluster-style layouts.
Gap — Spacing between elements — meaning varies by style (dot spacing, ring spacing, spoke dot size, etc).
Motion — Off / Always on / On hover / On appear. Adds a subtle float (or, for the radially-symmetric styles, a slow spin) to each element. Hidden entirely for Pill Cluster, Funnel Circles, Pie Chart, and Gradient Ring, since motion doesn't apply meaningfully to those.
Seed — Changes the random pattern (for jittered/scattered styles) without changing the data. Use it to "reroll" a layout you like the shape of but not the exact arrangement of.
Columns / Rows — Grid density, only shown for the grid-based styles (Dot Grid Split, Dot Grid Scatter, Radial Cluster, Pixel Mosaic, Dot & Square Grid, Pixel Pinwheel, Glitch Grid).
Color A / Color B — The two default colors used in Single value mode (and as fallbacks elsewhere).
Padding — Adds empty CSS space around the whole graph (inside the frame, outside the chart). Doesn't affect the data or the chart's own internal proportions.
Legend
Show legend toggles a color-swatch + label list for every segment.
Legend position (Top/Bottom/Left/Right) and Legend align (Start/Center/End) control placement.
Legend gap controls spacing between legend entries.
Legend typeface and Legend size control the legend's font — the typeface control is a full Framer font picker (family, size, weight, spacing) via Framer's "extended" font panel.
Labels
Label typeface is the default font used by every in-chart text label (percentages, segment names) across all styles, again via Framer's full font picker including a working size slider. A few styles layer a second, style-specific typeface on top of this (noted below).
Style reference
Pick a style from the Style dropdown; only that style's own controls appear beneath the shared ones.
Dot Grid — Split
Grid of dots split into color bands. Split direction (Horizontal/Vertical/Diagonal) controls which axis the color transition runs along.
Dot Grid — Scatter
Grid of dots with random dropout and size variance. Sparsity controls how many dots survive; Size variance controls how much their radius varies.
Radial Cluster
Dots clustered outward from the center, density fading toward the edge. Cluster radius sets how far the cluster spreads; Corner accents and Center mark toggle small decorative dots in the corners/center.
Density Rows
Rows allocated proportionally to each segment (so the number of visible rows per color is a literal, countable read of its share). Row style switches between dot-density rows and solid bars; Jaggedness adds noise to bar length / dot presence; Row count sets how many rows total (also shared with Wave Ridge).
Pixel Mosaic
A mosaic grid with optional gaps. Empty spaces (Abstract/Solid) toggles whether cells can be missing; Block density (only visible when Empty spaces is on) controls how full the mosaic looks.
Bubble Cluster
Organically packed circles. Pack tightness controls how close together the bubbles sit; Bubble count sets how many there are.
Concentric Rings
Nested rings, each an arc proportional to its segment's share. Ring thickness sets stroke width; Show labels toggles the percentage readout per ring; Label gap controls the actual clear space between each ring's outer edge and its label — increase it to pull the label further away from the ring, decrease toward 0 to bring it in close, or go negative to tuck it back onto the ring stroke.
Pill Cluster
Rows of capsule/circle shapes sized by value. Shape (Circle/Pill/Mixed) controls the shape used; Show labels toggles each shape's centered label. Motion is not available for this style.
Funnel Circles
A funnel wedge with circles sized by value, largest to an apex point. Show wedge toggles the background wedge shape; Wedge color sets its color; Apex label is the text shown centered inside the largest circle. Motion is not available for this style.
Radial Spokes
A center dot with spokes radiating outward, each ending in a dot. Show labels toggles per-segment percentage labels placed just outside the spoke ring. The graph's internal margin correctly accounts for both the outer dots and the label size, so nothing gets clipped regardless of Gap or font size — increase Padding separately if you also want empty space around the whole thing.
Pie Chart
A standard pie/donut. Inner radius (0 = full pie, up to 0.9 for a thin donut ring); Slice gap adds angular spacing between slices; Show labels toggles per-slice percentage text, with its own Percentage typeface control once enabled. Motion is not available for this style.
Polar Sunburst
A radial sunburst with a fine wedge texture. Wedge gap adds spacing between wedges; Texture lines sets how many fine radial lines render inside each wedge; Show labels toggles per-segment labels.
Radial Stripes
Concentric striped rings. Ring count sets how many rings; Sector gap adds angular spacing; Ring texture (Solid/Alternating) toggles a striped pattern within each ring; Show labels toggles labels, which always render outside the ring so they never get covered.
Dot & Square Grid
A grid mixing circular dots and rounded squares. Square ratio controls what fraction of cells are squares vs. dots; Corner radius controls the squares' rounding.
Bar Chart
A standard bar chart. Orientation (Vertical/Horizontal); Corner radius rounds the bar ends; Show labels toggles segment names; Show values toggles the percentage readout per bar.
Gradient Ring
A ring built from multiple gradient-colored segments. Ring thickness and Segment gap control the ring's geometry; Show center label toggles a center readout, with Center label (leave blank for an automatic value) and Value suffix (default "%") to customize it. Motion is not available for this style.
Pixel Pinwheel
A grid warped into a spiral/pinwheel. Spiral twist sets the rotation amount (can go negative for the opposite direction); Radial fade controls how much the pattern fades toward the edges.
Wave Ridge
A layered wave/ridge line chart. Crest spread, Notch depth, Ripple amount, and Ripple frequency shape the wave's silhouette; Echo shrink controls how much each successive echo line shrinks; Line style (Solid/Dashed/Dotted); Glow toggles a soft glow under the line; Dot mode switches the line to a dotted/beaded rendering; Padding controls the internal breathing room around the wave shape itself — turn it up if the wave feels too tight against the frame edge or the legend.
Radial Bar Wheel
A wheel of radial bars grouped into rings. Bar count, Wheel gap (the angular gap left open at the top), Sector gap, and Ring count control the geometry; Show ring numbers and Show category labels toggle the two label types.
Glitch Grid
A grid-based style where the "amount" reads as a light silhouette against a solid background field, with a jagged, staticky edge and occasional torn horizontal streaks for a glitch-art look. Glitch intensity controls edge raggedness and per-cell static noise; Streaks controls how often a row tears loose into a long horizontal smear; Cell shape (Dash/Block) sets the grid cell rendering; Background sets the field color behind the silhouette. Uses the shared Columns, Rows, Size, and Gap controls for grid density and overall scale.
Tips
Reordering segments matters for a few styles — Funnel Circles labels the largest-value circle, Radial Spokes fills its center dot with the last segment's color, and Density Rows / Glitch Grid allocate rows to segments in list order. If a specific segment should anchor a label or color, check its position in the Segments list.
Seed vs. Gap/Columns/Rows: Seed reshuffles the random placement (scatter, jitter, mosaic noise) without touching the data-driven proportions; Columns/Rows/Gap change the actual density and spacing.
Motion is a global toggle but is automatically hidden for styles where it doesn't apply (Pill Cluster, Funnel Circles, Pie Chart, Gradient Ring) — for the radially-symmetric styles (Concentric Rings, Radial Spokes, Polar Sunburst, Radial Stripes, Radial Bar Wheel) it spins the whole shape instead of floating individual elements.
Padding (top-level) only adds empty space around the whole graph via CSS — it won't fix content that's tight against its own internal shape (a few styles have their own dedicated internal spacing controls instead, like Wave Ridge's Padding or Concentric Rings' Label gap).
Refund Policy
Last updated: July 2026
30-Day Money-Back Guarantee
We want you to feel confident purchasing from [Company Name]. If you're not satisfied with your purchase, you can request a full refund within 30 days of your purchase date — no questions asked.
What's covered
This policy applies to all digital products purchased through [Company Name], including [downloads / software licenses / digital content / courses — adjust to match what you sell].
How to request a refund
1. Email hello@jamiederooij.com with your order number (found in your purchase confirmation email).
2. Let us know you'd like a refund. You don't need to give a reason.
3. We'll confirm your refund by email within 1–2 business days.
Processing time
Once approved, refunds are issued to your original payment method and typically appear within 5–10 business days, depending on your bank or card provider.
A few things to note
Refunds are limited to one per customer per product, to prevent misuse of this policy.
If you purchased through a third-party platform (e.g. Apple, Google Play, or a reseller), their refund process and timelines apply instead of this one — please contact them directly.
If a payment is disputed or charged back with your bank before contacting us, we're unable to also process a refund for the same transaction.
Questions?
Reach out anytime at hello@jamiederooij.com, I'm happy to help.
This is a template. Refund policies can carry legal and financial implications depending on your jurisdiction, payment processor terms, and consumer protection laws (e.g. EU/UK distance-selling rules). We'd recommend a quick review by a lawyer or your payment provider before publishing, and replacing the bracketed placeholders with your actual company name, contact email, and product details.