STYLEGALLERY / STUDIESCODE + CURIOSITY / 17INDEPENDENT EXAMPLE

17 / Data-bound quantity calculator

One model. Every measure.

Choose a bar size, a quantity, and a made-up unit price. The stack, total mass and arithmetic all come from the same three inputs.

STUDIO WEIGHTS / DEMONSTRATION DATA

See the value
take shape.

TOTAL DEMONSTRATION UNITS2,160.00
What this study teaches

A local data model owns grams per bar, quantity and demonstration units per gram. Total mass and total price are derived by multiplication; original SVG bar dimensions, count and labels update together. No market-data, financial-quote or provider API is involved.

Independent implementation informed by “Making Animations Smarter with Data Binding: Creating a Dynamic Gold Calculator in Rive”, Daria Nevezhyna, Codrops. This is newly authored code and artwork, not a recovered original project. Use total = unit price × grams per bar × quantity. The article's prose formulas contain a '+' inconsistency; do not reproduce that arithmetic error. Label the input as demonstration data, not a live market quote.