Showcase index

Start

Overview

Actions

Forms

Navigation

Authentication

Feedback

Feedback

Content

Data and media

The four surfaces that bring a dependency: chart, map, carousel and editor. They sit together on purpose, because seeing the weight in one place is what makes the choice visible.

Charts

ECharts in SVG, with colors read from the theme tokens and repainted when the theme flips. The text summary is mandatory: the drawing is aria-hidden, and for someone who cannot see it the summary is all there is.

Bars

Week of August 17 to 23: 641 orders, peaking on Saturday (144) with Sunday the weakest (73). Use it to compare one measure across a few categories.

From March to August revenue goes from US$ 294k to US$ 396k, peaking in May (US$ 435k, Mother's Day); the app grows the most, from 64 to 104. Stacking shows the total and each channel's share at once.

660 tickets: late delivery leads with 212, followed by defective product (143); cancellation closes with 38. Horizontal bars fit long labels, and sorted they become a ranking.

Lines

New and returning visitors from March to August; both jump in May with the Mother's Day campaign (71.4k in total) and August closes at 60.7k.

Stock falls from 142 to 67 units by Thursday, near the 60-unit minimum (dashed line), and Friday's restock takes it to 180. Steps show a value that only changes at set moments.

From 06/24 to 09/21 latency swings between 150 and 240 ms, under the 300 ms SLO (dashed line), with an incident on 08/20 reaching 612 ms. The mouse wheel or the bar below zoom into the period.

Pie

2,780 orders: Pix 46% (1,279), credit card 38% (1,057), boleto 9% (250) and digital wallet 7% (194). A donut for a few parts of a whole.

Southeast US$ 198k, South 84, Northeast 57, Center-West 38 and North 19, adding up to US$ 396k. In the rose the slice radius grows with the value, which stresses the gap between regions.

Radar

Target and actual across five percentage indicators: the team beats the target on first-contact resolution (81 vs 75) and tickets not reopened (76 vs 70), and falls short on response within 1 h (72 vs 85) and SLA (69 vs 80).

Gauges

Needle at 78% of the month's target, with the month still running. A gauge for a single number against a known scale.

Progress ring at 94%: of August's orders, 94 in every 100 arrived within the promised time.

Funnel

Of the 4,800 leads captured in August, 1,920 were qualified by marketing (40%), 672 became sales opportunities (35%), 302 got a proposal (45%) and 121 signed (40%): 2.5% of leads become customers. The biggest drop is from MQL to SQL.

4,800 active leads: 2,640 cold at the base, 1,380 warm, 610 hot and 170 sales-ready at the top. The pyramid is the funnel in ascending order: the cold mass below, the few sales should call today on top.

Scatter

Twelve campaigns this year: the bigger the discount, the bigger the sales lift, up to about 25%; beyond that the gain levels off around 23%. A scatter to see the relation between two measures.

Seven products by price and average rating, bubble size by August sales: capsules sell the most (940) rated 4.1, the gift kit has the best rating (4.8) and sells 95, and the thermal mug has the worst (3.9).

Heatmap

The same week as the bars, split by shift: nights hold most orders and Saturday night is the peak (62); Tuesday and Thursday mornings are the weakest (12).

Over 20 thousand readings (one every half metre in a 100 × 50 m warehouse), from −90 to −30 dBm, drawn progressively so the page does not freeze: the cold patches are dead zones. Simulated data, new on every visit.

Hierarchy and flow

Area proportional to revenue: coffees US$ 214k (specialty 118, traditional 58, capsules 38), equipment 96, subscriptions 64 and gifts 22.

1,310 sessions in a day: Google brings 600, the product page takes in 1,130 and sends 390 to the cart; from the cart, 170 buy and 220 abandon. Each band's thickness is the volume flowing through it.

The store's catalogue in four branches (coffees, equipment, subscriptions and gifts) and their subcategories, laid out left to right; click a node to collapse it.

Statistics

Ten sessions from 09/01 to 09/15 with open, close, low and high: the bag rises from US$ 2,180 to US$ 2,318, and the biggest daily drop is on 09/04 (from 2,231 to 2,190).

Minimum, quartiles, median and maximum per region: the Southeast delivers in 3 days at the median, and the North in 8, with the widest spread (4 to 16 days).

Relational

Each node is a product, sized by its sales, and each link is how many orders carried both: Coffee 500 g is the hub, and the strongest pair is with paper filters (164 orders). Overlapping labels are hidden.

Three suppliers on four criteria: Caparaó has the best score (88) with the highest price (US$ 96/kg) and lead time (12 days); Cerrado is the cheapest and fastest, with the lowest score and the largest minimum order.

Networks and matrices

Force graph of 492 WebKit modules and 806 dependencies in five categories (HTMLElement, WebGL, SVG, CSS and other). The wheel zooms, dragging pans; the corner map shows the visible region.

A 16×16 compatibility matrix between MBTI types, grouped into the four temperaments (NF, NT, SJ, SP). Cell opacity and the percentage give the degree; the diagonal and pairs within the same temperament tend to score highest.

3D

A photograph turned into a 3D surface with ECharts GL: each pixel becomes a point whose height is its darkness and whose colour is its own, so the portrait rises in relief. Drag to rotate and use the wheel to zoom.

Each hour's orders on each day as translucent 3D bars, coloured by count from 0 to 20: the peak is mid-afternoon, Wednesday to Friday. Drag to rotate.

Life expectancy for 19 countries from 1800 to 2015 as 3D bars read straight from a dataset: height is life expectancy, colour is population. Bars rise in every country across the 20th century.

A 21×21×21 grid of sensors every half metre in a 10 m room, from 2 to 6 °C: size, colour and opacity follow the temperature, and warm pockets show up as clouds. Simulated data, new on every visit.

A 51×51 survey with a point every 10 m, as 3D bars lit with shadows: height is the rise above the lowest point, 100 to 300 m, coloured cold to hot. Simulated data, new on every visit.

A surface generated from an equation, z = sin(πx)·sin(πy): the displacement of a 2 m vibrating plate, with alternating peaks and troughs and a mounting hole in the centre. Drag to rotate.

Project

Five stages between February and April, from research to pre-sale; recipes and testing is the longest, at six weeks, and overlaps with photos and site.

Three people's roasting shifts, each with separate blocks on the same row; Bruno has three periods.

QR and barcode

Two ways to carry a value from the screen to another device. The QR takes any text (address, phone, token); the barcode is the counter one, and each standard accepts its own value format.

<echo-qr-code>

This page's address

https://template.echosistema.online/en/componentes/dados

Phone

tel:+555431234567

Order token

ECHO-7F3A-2K9D-4M1P

Point a camera at it: the address QR opens this very page.

<echo-barcode>

SKU (CODE128)

EAN-13

Map

Leaflet with the OpenStreetMap layer. The attribution is not decoration: the data licence requires it. Controls and popup follow the theme.

<echo-map> · OpenStreetMap

Map of the triple border, with markers at Foz do Iguaçu and Ciudad del Este.

<echo-map-google> · Google Maps

A Google map centred on Ciudad del Este, with the same three markers as the map beside it.

Which of the two

OpenStreetMap costs nothing, needs no account and ships with the bundle - it is the template’s default. Google carries the addresses and place names a client recognises, charges per use and needs a key. A derived site picks by the question the page asks, not by the looks.

Both in the theme

Google is not dressed by CSS: its palette is a JSON array, and ours is built from the tokens at runtime - switching theme or palette repaints the map. OpenStreetMap’s tiles are ready-made images in a single light set, so in the dark theme they go through a filter (invert, rotate the hue back, lower the contrast) applied to the tile pane alone, so markers and popups are not inverted with them.

Carousel

Swiper with arrows, pagination and loop. Autoplay pauses on hover and is switched off entirely for anyone who asked for less motion, because a self-advancing carousel is the textbook case for that preference.

Brand tokens

Light and dark themes

Three languages

Native components

Rich text editor

TipTap. What sets it apart from a raw contenteditable is pasting: text from another editor brings dirty markup, and TipTap filters it against a schema. The content inherits the system typography through the es-prose class.

Generated HTML

<h2>Escreva aqui</h2><p>O conteúdo herda a tipografia do sistema pela classe <code>.es-prose</code>.</p>

For AI agents

This page’s specification

A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.

Download: Data and media Download the full guide Read in the browser

/agents/data-media.md