Data Visual Style Guide

Patterns for numeric highlights, bar metrics, and donut charts that animate when scrolled into view. Use these for blog posts, offering memoranda, and seller / investor explainers.

1. Highlight numbers (count-up KPIs)

Use these cards for big numbers: total sales, properties settled, bidders reached, etc. Values count up smoothly once the user scrolls to this section.

Closed Residential Sales

Historic closing rate across our residential auctions.

Total Sales Volume

$0M+

Cumulative auction volume achieved for clients.

Properties Settled

Residential, commercial, and specialty assets.

Usage notes

One row of 2–4 KPIs per article is usually enough.
Keep labels punchy and use the description for context.
Use data-count-to and optional data-suffix or data-separator.

<div class="kpi-card" data-animate="kpi">
  <div class="kpi-label">Closed Residential Sales</div>
  <div class="kpi-value"
       data-count-to="97"
       data-suffix="%">0%</div>
  <div class="kpi-unit">Historic closing rate.</div>
</div>

2. Bar metrics (auction performance bars)

Horizontal bars are great for telling a quick story: conversion, volume, or progress toward a target. The bar fills from 0% to the configured value as it scrolls into view.

97% – CLOSED RESIDENTIAL SALES

ACHIEVED $250,000,000 FOR OUR CLIENTS

OVER 8,000 PROPERTIES SETTLED

Set data-bar-to to the percentage (0–100). The grey track represents the remaining opportunity.

HTML pattern

<div data-animate="bar">
  <div class="metric-label">
    <span>97% – CLOSED RESIDENTIAL SALES</span>
  </div>
  <div class="metric-bar">
    <div class="metric-bar-fill metric-bar-fill--gold"
         data-bar-to="97"></div>
  </div>
</div>

3. Donut charts (composition & mix)

Use donuts when you need to show mix: property type, buyer profile, or contract structure. The ring fills from 0 to the target percentage, and the number in the center counts up.

Investor Purchases

Owner-Occupant Purchases

Keep to 2–4 donuts per section; more than that becomes hard to read. Colors stay on-brand blue with a neutral track.

HTML pattern

<div class="donut-card" data-animate="donut">
  <div class="donut-wrap">
    <svg viewBox="0 0 120 120">
      <circle class="donut-bg" cx="60" cy="60" r="46"></circle>
      <circle class="donut-fg"
              cx="60" cy="60" r="46"
              data-donut-to="65"></circle>
    </svg>
    <div class="donut-center">
      <div class="donut-value"
           data-count-to="65"
           data-suffix="%">0%</div>
      <div class="donut-label">Investor Purchases</div>
    </div>
  </div>
</div>

4. Combining photos and data

When you want to keep the human feel of Ashland’s brand, pair a single image with a short strip of metrics that animate together.

Days to Auction

From launch to bidding deadline.

Registered Bidders

Verified and ready to bid.

In a blog context, this works well as a case-study sidebar or “By the numbers” section directly under a property photo.

Because the animations only trigger once per session (when scrolled into view), they feel deliberate rather than gimmicky.