Ratio
A ratio is a quantitative comparison of two quantities expressed through their relative sizes or quotient.
Math for Web Design
A ratio is a mathematical comparison between quantities that expresses their relative sizes or how many times one contains another.
- How it is used
- Applies ratios to proportional layouts, responsive behavior, typography, sliders, and touch scaling.
- How deep it goes
- Defines ratios and works through CSS and JavaScript implementations, including modular-scale formulas and range mapping.
- Examples
- Uses 16:9 video thumbnails, 3fr 2fr 1fr grids, modular type scales, photo-editor sliders, and pinch-zoomed photos.
- What you can do after
- Apply it via CSS and JavaScript to preserve proportions, generate type scales, and map interaction input to values.
Starting Data Analytics with Generative AI and Python
A ratio is a quantitative comparison of two values expressed through their quotient or relative size.
- How it is used
- Uses normalized review shares to identify product groups with comparatively strong or weak customer satisfaction.
- How deep it goes
- Calculates group-level shares and visualizes them, but stops short of establishing causal explanations for the differences.
- Examples
- Uses positive and negative review counts, product groups, pandas aggregation, and a bar chart with a negative-ratio line.
- What you can do after
- Apply it via pandas to calculate review shares and compare them with raw counts in a visualization.
Read how Starting Data Analytics with Generative AI and Python explains ratio →
Data Storytelling with Altair and AI
A ratio is a quantitative comparison between two quantities obtained by division.
- How it is used
- Uses division-based comparisons to add context, normalize counts, and answer audience questions more accurately.
- How deep it goes
- Works through denominator choice, manual calculations, dataset joins, and chart encoding, without developing abstract ratio theory.
- Examples
- Compares cats’ and dogs’ participants-per-website rates and normalizes regional homelessness by population.
- What you can do after
- Apply it via pandas and Altair to calculate normalized rates and communicate comparisons through charts.
Read how Data Storytelling with Altair and AI explains ratio →
Related concepts
- proportional layoutused by · A proportional layout assigns element dimensions or positions according to relative shares of available space.
- grouped bar chartcontrasts with · A grouped bar chart displays multiple bars together for each category, enabling comparisons across subcategories or related groups.
- modular scaleconfigures · A modular scale is a sequence of related sizes generated by applying a consistent ratio to establish typographic hierarchy.
- aspect ratioincludes · An aspect ratio is the proportional relationship between the width and height of an object, image, or rectangular area.
- information ratioincludes · The information ratio is the expected return above a benchmark divided by the volatility of the portfolio's return difference from that benchmark.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.