Skip to content

Instantly share code, notes, and snippets.

@dcsan

dcsan/SKILL.md

Forked from aparente/SKILL.md
Created May 23, 2026 23:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dcsan/c25efafa7880fc8f512b5fca992414c8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dcsan/c25efafa7880fc8f512b5fca992414c8 to your computer and use it in GitHub Desktop.
Download ZIP
tufte-viz Claude Code skill — Edward Tufte data visualization principles
Raw
demo__giss-temperature.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tufte-viz demo · NASA GISS temperature anomalies</title>
<style>
body { font-family: Georgia, serif; max-width: 900px; margin: 40px auto; padding: 0 24px; color: #1a202c; line-height: 1.55; }
h1 { font-size: 22px; margin-bottom: 4px; }
.sub { color: #4a5568; margin-bottom: 32px; font-size: 14px; }
h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: #718096; margin-top: 48px; margin-bottom: 8px; font-family: system-ui, sans-serif; }
.caption { font-size: 13px; color: #4a5568; margin-top: 8px; font-style: italic; }
.panel { margin-bottom: 16px; }
.shift { background: #f7fafc; border-left: 3px solid #1a202c; padding: 14px 18px; margin-top: 24px; font-size: 14px; }
.shift b { font-family: system-ui, sans-serif; }
.shift ul { margin: 8px 0 0 0; padding-left: 20px; }
.shift li { margin-bottom: 4px; }
</style>
</head>
<body>
<h1>NASA GISS land–ocean temperature anomalies by latitude band, 1880–2025</h1>
<div class="sub">A demonstration of how the <code>tufte-viz</code> skill shifts the design. Same data, two treatments.</div>
<h2>Pre — typical default chart</h2>
<div class="panel">
<svg viewBox="0 0 760 420" xmlns="http://www.w3.org/2000/svg" style="font-family:system-ui,sans-serif">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f7fafc"/>
<stop offset="100%" stop-color="#edf2f7"/>
</linearGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="0" dy="2"/>
<feComponentTransfer><feFuncA type="linear" slope="0.2"/></feComponentTransfer>
<feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
</filter>
</defs>
<rect width="100%" height="100%" fill="url(#bg)" rx="12"/>
<text x="380.0" y="26" text-anchor="middle" font-size="20" font-weight="700" fill="#1a202c" filter="url(#shadow)">Global Temperature Anomalies by Latitude Band</text>
<g transform="translate(70,40)">
<line x1="0" y1="320.0" x2="560" y2="320.0" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="324.0" text-anchor="end" font-size="12" fill="#4a5568">-3°C</text><line x1="0" y1="270.8" x2="560" y2="270.8" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="274.8" text-anchor="end" font-size="12" fill="#4a5568">-2°C</text><line x1="0" y1="221.5" x2="560" y2="221.5" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="225.5" text-anchor="end" font-size="12" fill="#4a5568">-1°C</text><line x1="0" y1="172.3" x2="560" y2="172.3" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="176.3" text-anchor="end" font-size="12" fill="#4a5568">+0°C</text><line x1="0" y1="123.1" x2="560" y2="123.1" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="127.1" text-anchor="end" font-size="12" fill="#4a5568">+1°C</text><line x1="0" y1="73.8" x2="560" y2="73.8" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="77.8" text-anchor="end" font-size="12" fill="#4a5568">+2°C</text><line x1="0" y1="24.6" x2="560" y2="24.6" stroke="#cbd5e0" stroke-width="1"/><text x="-10" y="28.6" text-anchor="end" font-size="12" fill="#4a5568">+3°C</text><line x1="0.0" y1="0" x2="0.0" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="0.0" y="338" text-anchor="middle" font-size="12" fill="#4a5568">1880</text><line x1="77.2" y1="0" x2="77.2" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="77.2" y="338" text-anchor="middle" font-size="12" fill="#4a5568">1900</text><line x1="154.5" y1="0" x2="154.5" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="154.5" y="338" text-anchor="middle" font-size="12" fill="#4a5568">1920</text><line x1="231.7" y1="0" x2="231.7" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="231.7" y="338" text-anchor="middle" font-size="12" fill="#4a5568">1940</text><line x1="309.0" y1="0" x2="309.0" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="309.0" y="338" text-anchor="middle" font-size="12" fill="#4a5568">1960</text><line x1="386.2" y1="0" x2="386.2" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="386.2" y="338" text-anchor="middle" font-size="12" fill="#4a5568">1980</text><line x1="463.4" y1="0" x2="463.4" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="463.4" y="338" text-anchor="middle" font-size="12" fill="#4a5568">2000</text><line x1="540.7" y1="0" x2="540.7" y2="320" stroke="#cbd5e0" stroke-width="1"/><text x="540.7" y="338" text-anchor="middle" font-size="12" fill="#4a5568">2020</text>
<path d="M0.0,211.2 L3.9,214.2 L7.7,238.3 L11.6,178.2 L15.4,234.3 L19.3,244.2 L23.2,248.1 L27.0,257.0 L30.9,234.3 L34.8,203.8 L38.6,226.0 L42.5,224.5 L46.3,225.0 L50.2,202.8 L54.1,218.1 L57.9,205.3 L61.8,215.1 L65.7,199.4 L69.5,228.9 L73.4,221.5 L77.2,197.9 L81.1,188.6 L85.0,245.7 L88.8,181.7 L92.7,181.2 L96.6,172.8 L100.4,184.6 L104.3,199.4 L108.1,183.1 L112.0,207.8 L115.9,202.3 L119.7,186.1 L123.6,197.4 L127.4,195.9 L131.3,189.0 L135.2,201.4 L139.0,196.9 L142.9,211.7 L146.8,221.5 L150.6,206.3 L154.5,172.8 L158.3,172.3 L162.2,185.6 L166.1,162.0 L169.9,145.7 L173.8,174.3 L177.7,144.2 L181.5,170.8 L185.4,139.8 L189.2,165.9 L193.1,147.2 L197.0,144.7 L200.8,149.7 L204.7,179.7 L208.6,128.5 L212.4,156.1 L216.3,152.1 L220.1,111.8 L224.0,97.5 L227.9,145.2 L231.7,124.1 L235.6,171.8 L239.4,136.9 L243.3,102.4 L247.2,114.2 L251.0,140.3 L254.9,174.3 L258.8,119.6 L262.6,166.4 L266.5,162.5 L270.3,163.4 L274.2,168.9 L278.1,159.0 L281.9,121.6 L285.8,132.9 L289.7,183.6 L293.5,171.8 L297.4,167.9 L301.2,181.2 L305.1,148.2 L309.0,155.6 L312.8,180.2 L316.7,150.6 L320.6,180.2 L324.4,204.8 L328.3,186.1 L332.1,209.7 L336.0,154.6 L339.9,188.6 L343.7,174.3 L347.6,182.2 L351.4,176.2 L355.3,190.5 L359.2,169.4 L363.0,181.7 L366.9,167.4 L370.8,176.2 L374.6,164.4 L378.5,180.2 L382.3,202.3 L386.2,159.5 L390.1,118.6 L393.9,192.0 L397.8,163.0 L401.7,154.6 L405.5,153.1 L409.4,171.8 L413.2,190.0 L417.1,143.3 L421.0,156.6 L424.8,143.8 L428.7,135.4 L432.6,180.7 L436.4,145.7 L440.3,155.6 L444.1,107.8 L448.0,134.9 L451.9,134.9 L455.7,130.0 L459.6,152.6 L463.4,124.6 L467.3,119.6 L471.2,110.8 L475.0,98.5 L478.9,149.2 L482.8,74.3 L486.6,85.7 L490.5,69.4 L494.3,96.5 L498.2,101.9 L502.1,61.5 L505.9,57.6 L509.8,67.4 L513.7,96.5 L517.5,70.9 L521.4,72.4 L525.2,11.8 L529.1,48.2 L533.0,65.5 L536.8,35.4 L540.7,31.0 L544.6,69.4 L548.4,56.1 L552.3,45.3 L556.1,28.6 L560.0,24.1" fill="none" stroke="#e74c3c" stroke-width="2.2" opacity="0.85"/><path d="M0.0,196.4 L3.9,194.0 L7.7,185.1 L11.6,198.9 L15.4,203.3 L19.3,205.8 L23.2,196.9 L27.0,196.9 L30.9,193.5 L34.8,183.6 L38.6,199.9 L42.5,188.1 L46.3,203.8 L50.2,198.4 L54.1,188.1 L57.9,197.9 L61.8,190.5 L65.7,195.0 L69.5,184.1 L73.4,176.2 L77.2,180.2 L81.1,177.2 L85.0,196.9 L88.8,193.0 L92.7,201.8 L96.6,183.6 L100.4,175.8 L104.3,207.8 L108.1,198.9 L112.0,202.8 L115.9,184.1 L119.7,193.0 L123.6,211.2 L127.4,188.6 L131.3,180.2 L135.2,180.7 L139.0,198.9 L142.9,196.9 L146.8,185.6 L150.6,199.9 L154.5,182.6 L158.3,163.9 L162.2,192.5 L166.1,179.7 L169.9,184.6 L173.8,163.9 L177.7,164.4 L181.5,183.1 L185.4,180.7 L189.2,202.3 L193.1,170.3 L197.0,174.3 L200.8,162.5 L204.7,195.0 L208.6,157.0 L212.4,174.8 L216.3,166.9 L220.1,170.8 L224.0,153.1 L227.9,158.5 L231.7,173.3 L235.6,177.2 L239.4,175.8 L243.3,158.5 L247.2,149.2 L251.0,173.3 L254.9,174.8 L258.8,178.7 L262.6,157.0 L266.5,163.9 L270.3,187.6 L274.2,171.8 L278.1,176.7 L281.9,154.6 L285.8,182.6 L289.7,177.7 L293.5,195.9 L297.4,161.5 L301.2,165.4 L305.1,163.4 L309.0,175.8 L312.8,153.6 L316.7,157.0 L320.6,157.0 L324.4,182.2 L328.3,184.1 L332.1,181.7 L336.0,159.5 L339.9,173.3 L343.7,202.3 L347.6,178.7 L351.4,171.8 L355.3,195.4 L359.2,159.0 L363.0,175.8 L366.9,153.1 L370.8,188.1 L374.6,160.5 L378.5,170.3 L382.3,168.9 L386.2,171.3 L390.1,133.4 L393.9,167.4 L397.8,138.3 L401.7,168.4 L405.5,185.1 L409.4,158.5 L413.2,165.9 L417.1,144.2 L421.0,138.3 L424.8,129.0 L428.7,139.8 L432.6,150.6 L436.4,158.0 L440.3,147.7 L444.1,123.6 L448.0,163.9 L451.9,128.0 L455.7,126.0 L459.6,132.9 L463.4,132.9 L467.3,130.0 L471.2,123.1 L475.0,124.1 L478.9,125.5 L482.8,111.8 L486.6,120.1 L490.5,107.3 L494.3,119.6 L498.2,142.8 L502.1,129.5 L505.9,126.0 L509.8,126.5 L513.7,121.1 L517.5,116.2 L521.4,99.4 L525.2,101.9 L529.1,104.4 L533.0,118.6 L536.8,101.9 L540.7,83.2 L544.6,105.4 L548.4,98.5 L552.3,80.7 L556.1,75.8 L560.0,74.3" fill="none" stroke="#e67e22" stroke-width="2.2" opacity="0.85"/><path d="M0.0,188.1 L3.9,184.1 L7.7,180.7 L11.6,186.1 L15.4,195.9 L19.3,195.9 L23.2,193.0 L27.0,188.1 L30.9,185.1 L34.8,186.1 L38.6,186.1 L42.5,190.0 L46.3,180.7 L50.2,195.4 L54.1,181.2 L57.9,185.6 L61.8,183.6 L65.7,184.6 L69.5,184.1 L73.4,179.7 L77.2,180.2 L81.1,179.7 L85.0,188.1 L88.8,199.9 L92.7,199.4 L96.6,202.8 L100.4,191.5 L104.3,197.9 L108.1,197.9 L112.0,194.0 L115.9,196.9 L119.7,195.4 L123.6,197.4 L127.4,197.4 L131.3,186.1 L135.2,181.7 L139.0,184.6 L142.9,194.0 L146.8,190.0 L150.6,187.6 L154.5,190.0 L158.3,177.2 L162.2,179.2 L166.1,185.1 L169.9,184.1 L173.8,181.7 L177.7,183.6 L181.5,178.7 L185.4,183.6 L189.2,191.5 L193.1,177.7 L197.0,179.2 L200.8,183.1 L204.7,178.7 L208.6,179.2 L212.4,180.7 L216.3,185.6 L220.1,174.3 L224.0,171.3 L227.9,168.4 L231.7,177.2 L235.6,168.4 L239.4,169.8 L243.3,167.4 L247.2,167.9 L251.0,170.3 L254.9,164.4 L258.8,170.3 L262.6,172.3 L266.5,170.3 L270.3,170.8 L274.2,166.4 L278.1,163.0 L281.9,165.4 L285.8,172.3 L289.7,161.0 L293.5,176.7 L297.4,177.7 L301.2,166.4 L305.1,169.8 L309.0,166.9 L312.8,163.4 L316.7,165.4 L320.6,165.9 L324.4,178.2 L328.3,178.2 L332.1,167.9 L336.0,174.8 L339.9,176.7 L343.7,180.7 L347.6,175.3 L351.4,177.2 L355.3,184.1 L359.2,171.3 L363.0,181.2 L366.9,174.8 L370.8,186.1 L374.6,169.4 L378.5,174.3 L382.3,167.9 L386.2,171.3 L390.1,168.4 L393.9,176.2 L397.8,175.8 L401.7,179.2 L405.5,173.3 L409.4,170.8 L413.2,166.4 L417.1,160.5 L421.0,160.0 L424.8,148.2 L428.7,159.5 L432.6,173.8 L436.4,177.7 L440.3,151.6 L444.1,156.6 L448.0,167.4 L451.9,161.0 L455.7,139.8 L459.6,135.9 L463.4,145.2 L467.3,138.8 L471.2,143.8 L475.0,145.7 L478.9,139.8 L482.8,144.2 L486.6,137.8 L490.5,138.3 L494.3,142.3 L498.2,138.8 L502.1,135.9 L505.9,143.8 L509.8,135.9 L513.7,138.3 L517.5,136.4 L521.4,123.6 L525.2,119.6 L529.1,121.6 L533.0,120.6 L536.8,123.6 L540.7,113.7 L544.6,110.3 L548.4,109.8 L552.3,100.4 L556.1,91.1 L560.0,97.5" fill="none" stroke="#f1c40f" stroke-width="2.2" opacity="0.85"/><path d="M0.0,179.7 L3.9,167.9 L7.7,175.3 L11.6,181.2 L15.4,179.2 L19.3,176.2 L23.2,183.6 L27.0,187.6 L30.9,170.3 L34.8,172.3 L38.6,186.6 L42.5,172.8 L46.3,189.5 L50.2,194.0 L54.1,197.4 L57.9,180.2 L61.8,171.3 L65.7,166.9 L69.5,182.2 L73.4,180.7 L77.2,168.9 L81.1,176.2 L85.0,174.3 L88.8,185.1 L92.7,195.0 L96.6,178.2 L100.4,182.6 L104.3,187.6 L108.1,193.5 L112.0,194.5 L115.9,197.4 L119.7,194.0 L123.6,186.6 L127.4,192.0 L131.3,178.2 L135.2,172.8 L139.0,196.9 L142.9,206.3 L146.8,192.0 L150.6,184.1 L154.5,191.0 L158.3,186.6 L162.2,188.6 L166.1,188.6 L169.9,185.6 L173.8,186.1 L177.7,172.3 L181.5,179.7 L185.4,179.7 L189.2,185.6 L193.1,176.7 L197.0,167.4 L200.8,181.7 L204.7,186.1 L208.6,185.6 L212.4,180.7 L216.3,175.3 L220.1,172.3 L224.0,181.7 L227.9,178.7 L231.7,160.0 L235.6,146.2 L239.4,167.4 L243.3,177.7 L247.2,167.4 L251.0,167.4 L254.9,173.8 L258.8,173.8 L262.6,183.6 L266.5,183.6 L270.3,187.1 L274.2,172.8 L278.1,173.3 L281.9,168.4 L285.8,179.2 L289.7,187.1 L293.5,186.6 L297.4,169.8 L301.2,159.5 L305.1,168.9 L309.0,169.4 L312.8,175.8 L316.7,174.3 L320.6,165.4 L324.4,178.7 L328.3,176.2 L332.1,164.4 L336.0,177.7 L339.9,173.3 L343.7,155.1 L347.6,168.9 L351.4,187.1 L355.3,169.4 L359.2,168.4 L363.0,183.6 L366.9,187.6 L370.8,178.7 L374.6,167.4 L378.5,167.4 L382.3,159.5 L386.2,156.1 L390.1,161.5 L393.9,160.0 L397.8,158.0 L401.7,168.9 L405.5,170.3 L409.4,163.4 L413.2,145.2 L417.1,156.6 L421.0,168.9 L424.8,153.6 L428.7,156.6 L432.6,162.5 L436.4,158.0 L440.3,158.5 L444.1,152.6 L448.0,157.0 L451.9,147.7 L455.7,142.8 L459.6,164.4 L463.4,162.0 L467.3,152.6 L471.2,145.2 L475.0,142.3 L478.9,144.7 L482.8,141.8 L486.6,144.2 L490.5,150.2 L494.3,155.6 L498.2,140.3 L502.1,136.9 L505.9,153.1 L509.8,148.7 L513.7,143.3 L517.5,137.8 L521.4,124.1 L525.2,125.0 L529.1,130.0 L533.0,135.9 L536.8,127.5 L540.7,129.0 L544.6,136.4 L548.4,140.8 L552.3,118.6 L556.1,111.8 L560.0,130.0" fill="none" stroke="#27ae60" stroke-width="2.2" opacity="0.85"/><path d="M0.0,177.7 L3.9,167.4 L7.7,174.8 L11.6,179.7 L15.4,180.7 L19.3,182.2 L23.2,181.2 L27.0,187.1 L30.9,166.4 L34.8,165.4 L38.6,195.4 L42.5,180.7 L46.3,185.1 L50.2,188.1 L54.1,182.2 L57.9,172.8 L61.8,165.4 L65.7,162.5 L69.5,185.1 L73.4,176.2 L77.2,159.5 L81.1,172.8 L85.0,174.8 L88.8,188.6 L92.7,196.9 L96.6,175.3 L100.4,181.7 L104.3,188.1 L108.1,195.4 L112.0,198.9 L115.9,197.4 L119.7,194.5 L123.6,177.7 L127.4,179.7 L131.3,173.3 L135.2,173.3 L139.0,192.0 L142.9,200.9 L146.8,186.6 L150.6,180.7 L154.5,178.7 L158.3,182.6 L162.2,187.6 L166.1,185.6 L169.9,184.1 L173.8,181.7 L177.7,170.8 L181.5,180.7 L185.4,179.7 L189.2,186.1 L193.1,178.2 L197.0,169.4 L200.8,179.2 L204.7,186.1 L208.6,184.1 L212.4,182.2 L216.3,182.6 L220.1,177.7 L224.0,185.6 L227.9,178.7 L231.7,158.0 L235.6,151.1 L239.4,170.3 L243.3,175.8 L247.2,159.5 L251.0,160.5 L254.9,176.2 L258.8,176.7 L262.6,179.2 L266.5,179.7 L270.3,186.1 L274.2,178.2 L278.1,169.8 L281.9,169.4 L285.8,186.6 L289.7,191.0 L293.5,190.5 L297.4,167.4 L301.2,164.9 L305.1,168.4 L309.0,173.3 L312.8,172.3 L316.7,174.8 L320.6,167.4 L324.4,179.2 L328.3,171.3 L332.1,172.8 L336.0,180.7 L339.9,177.7 L343.7,156.6 L347.6,168.9 L351.4,183.1 L355.3,159.0 L359.2,157.5 L363.0,180.7 L366.9,180.7 L370.8,177.7 L374.6,161.5 L378.5,169.8 L382.3,159.0 L386.2,158.5 L390.1,165.4 L393.9,158.0 L397.8,144.2 L401.7,158.0 L405.5,165.9 L409.4,159.0 L413.2,142.3 L417.1,151.6 L421.0,163.4 L424.8,154.6 L428.7,152.6 L432.6,154.6 L436.4,155.1 L440.3,155.6 L444.1,150.6 L448.0,156.6 L451.9,146.7 L455.7,133.9 L459.6,160.5 L463.4,159.0 L467.3,151.1 L471.2,141.3 L475.0,140.3 L478.9,146.7 L482.8,142.8 L486.6,146.2 L490.5,149.7 L494.3,152.6 L498.2,138.3 L502.1,141.3 L505.9,156.1 L509.8,145.2 L513.7,144.7 L517.5,141.3 L521.4,127.0 L525.2,121.1 L529.1,135.9 L533.0,142.3 L536.8,129.5 L540.7,132.4 L544.6,144.2 L548.4,148.2 L552.3,121.6 L556.1,115.7 L560.0,131.4" fill="none" stroke="#1abc9c" stroke-width="2.2" opacity="0.85"/><path d="M0.0,174.3 L3.9,175.3 L7.7,171.8 L11.6,174.3 L15.4,181.7 L19.3,189.0 L23.2,182.2 L27.0,186.1 L30.9,187.6 L34.8,180.2 L38.6,181.2 L42.5,181.2 L46.3,171.3 L50.2,168.9 L54.1,179.7 L57.9,181.7 L61.8,179.7 L65.7,181.7 L69.5,185.6 L73.4,179.7 L77.2,186.1 L81.1,185.6 L85.0,186.1 L88.8,189.5 L92.7,190.5 L96.6,188.1 L100.4,182.2 L104.3,182.6 L108.1,186.6 L112.0,190.5 L115.9,188.6 L119.7,194.0 L123.6,190.0 L127.4,186.1 L131.3,179.7 L135.2,179.7 L139.0,183.6 L142.9,183.6 L146.8,175.3 L150.6,179.7 L154.5,181.7 L158.3,183.6 L162.2,184.1 L166.1,185.1 L169.9,191.5 L173.8,184.1 L177.7,189.5 L181.5,187.1 L185.4,186.1 L189.2,193.0 L193.1,188.6 L197.0,193.0 L200.8,182.6 L204.7,183.1 L208.6,179.7 L212.4,187.1 L216.3,185.1 L220.1,181.7 L224.0,175.3 L227.9,174.3 L231.7,170.8 L235.6,170.8 L239.4,169.8 L243.3,168.9 L247.2,163.0 L251.0,170.3 L254.9,183.1 L258.8,181.7 L262.6,181.7 L266.5,180.7 L270.3,175.3 L274.2,183.1 L278.1,177.2 L281.9,176.2 L285.8,180.7 L289.7,180.2 L293.5,179.2 L297.4,176.7 L301.2,176.2 L305.1,173.8 L309.0,177.2 L312.8,165.4 L316.7,167.9 L320.6,177.2 L324.4,187.1 L328.3,183.6 L332.1,183.6 L336.0,176.7 L339.9,179.2 L343.7,172.3 L347.6,166.9 L351.4,170.8 L355.3,164.4 L359.2,162.0 L363.0,162.0 L366.9,165.9 L370.8,167.4 L374.6,162.0 L378.5,162.5 L382.3,158.0 L386.2,155.1 L390.1,158.5 L393.9,163.4 L397.8,162.0 L401.7,164.4 L405.5,157.5 L409.4,160.0 L413.2,156.6 L417.1,153.6 L421.0,154.6 L424.8,154.1 L428.7,157.0 L432.6,162.5 L436.4,159.0 L440.3,159.5 L444.1,158.0 L448.0,156.6 L451.9,151.6 L455.7,153.1 L459.6,149.7 L463.4,152.1 L467.3,143.8 L471.2,148.2 L475.0,150.6 L478.9,148.7 L482.8,148.2 L486.6,147.2 L490.5,147.7 L494.3,146.7 L498.2,142.8 L502.1,141.3 L505.9,140.8 L509.8,144.7 L513.7,141.8 L517.5,136.9 L521.4,135.9 L525.2,139.3 L529.1,134.9 L533.0,133.4 L536.8,135.9 L540.7,143.3 L544.6,136.9 L548.4,133.9 L552.3,128.0 L556.1,129.0 L560.0,125.0" fill="none" stroke="#3498db" stroke-width="2.2" opacity="0.85"/><path d="M0.0,169.8 L3.9,175.8 L7.7,170.3 L11.6,168.9 L15.4,173.3 L19.3,179.7 L23.2,182.2 L27.0,185.1 L30.9,183.1 L34.8,179.7 L38.6,185.6 L42.5,183.6 L46.3,182.6 L50.2,182.2 L54.1,189.5 L57.9,187.6 L61.8,178.7 L65.7,185.6 L69.5,182.6 L73.4,183.1 L77.2,186.6 L81.1,188.6 L85.0,193.5 L88.8,192.0 L92.7,196.4 L96.6,190.5 L100.4,183.1 L104.3,190.0 L108.1,195.9 L112.0,197.9 L115.9,194.5 L119.7,197.9 L123.6,186.6 L127.4,192.0 L131.3,181.2 L135.2,183.6 L139.0,180.7 L142.9,176.7 L146.8,183.1 L150.6,188.1 L154.5,195.9 L158.3,191.0 L162.2,186.1 L166.1,192.5 L169.9,194.5 L173.8,198.9 L177.7,194.5 L181.5,194.5 L185.4,195.9 L189.2,194.0 L193.1,195.0 L197.0,192.0 L200.8,198.4 L204.7,195.9 L208.6,191.0 L212.4,192.5 L216.3,188.6 L220.1,184.6 L224.0,177.7 L227.9,181.2 L231.7,182.2 L235.6,179.7 L239.4,174.8 L243.3,172.3 L247.2,176.7 L251.0,172.3 L254.9,184.1 L258.8,176.2 L262.6,181.7 L266.5,179.7 L270.3,180.2 L274.2,180.2 L278.1,173.3 L281.9,184.1 L285.8,182.2 L289.7,176.2 L293.5,171.3 L297.4,173.3 L301.2,176.2 L305.1,185.1 L309.0,175.8 L312.8,180.7 L316.7,175.8 L320.6,180.7 L324.4,175.8 L328.3,173.8 L332.1,179.2 L336.0,173.3 L339.9,172.3 L343.7,165.9 L347.6,170.8 L351.4,164.4 L355.3,173.3 L359.2,168.4 L363.0,176.2 L366.9,165.4 L370.8,161.5 L374.6,157.0 L378.5,165.9 L382.3,156.1 L386.2,154.1 L390.1,153.1 L393.9,156.6 L397.8,152.1 L401.7,156.6 L405.5,150.6 L409.4,160.0 L413.2,160.0 L417.1,162.5 L421.0,157.5 L424.8,154.1 L428.7,158.0 L432.6,156.1 L436.4,153.1 L440.3,161.0 L444.1,164.9 L448.0,158.5 L451.9,154.6 L455.7,157.0 L459.6,163.0 L463.4,167.4 L467.3,160.5 L471.2,156.6 L475.0,160.5 L478.9,161.0 L482.8,163.4 L486.6,163.0 L490.5,168.9 L494.3,167.9 L498.2,164.9 L502.1,162.5 L505.9,163.0 L509.8,162.5 L513.7,160.5 L517.5,162.5 L521.4,162.5 L525.2,158.5 L529.1,153.6 L533.0,152.1 L536.8,152.1 L540.7,152.6 L544.6,155.6 L548.4,152.1 L552.3,149.7 L556.1,145.2 L560.0,144.7" fill="none" stroke="#9b59b6" stroke-width="2.2" opacity="0.85"/><path d="M0.0,138.3 L3.9,142.3 L7.7,140.8 L11.6,146.7 L15.4,139.3 L19.3,131.0 L23.2,142.3 L27.0,155.6 L30.9,163.9 L34.8,149.7 L38.6,163.9 L42.5,179.2 L46.3,166.9 L50.2,173.3 L54.1,190.0 L57.9,200.4 L61.8,159.0 L65.7,151.6 L69.5,153.1 L73.4,142.8 L77.2,158.0 L81.1,158.5 L85.0,173.8 L88.8,196.4 L92.7,236.8 L96.6,188.6 L100.4,207.3 L104.3,230.9 L108.1,138.8 L112.0,199.9 L115.9,164.4 L119.7,169.4 L123.6,252.6 L127.4,223.0 L131.3,190.0 L135.2,269.8 L139.0,223.5 L142.9,168.9 L146.8,186.1 L150.6,162.5 L154.5,228.4 L158.3,213.2 L162.2,185.6 L166.1,198.9 L169.9,198.4 L173.8,214.6 L177.7,203.3 L181.5,240.2 L185.4,276.7 L189.2,225.0 L193.1,299.8 L197.0,192.5 L200.8,220.6 L204.7,228.4 L208.6,199.9 L212.4,256.5 L216.3,173.8 L220.1,154.1 L224.0,214.6 L227.9,251.1 L231.7,174.8 L235.6,195.0 L239.4,216.6 L243.3,116.2 L247.2,220.6 L251.0,261.4 L254.9,182.6 L258.8,184.1 L262.6,242.2 L266.5,271.8 L270.3,214.6 L274.2,206.8 L278.1,198.9 L281.9,228.9 L285.8,212.7 L289.7,113.2 L293.5,134.4 L297.4,148.2 L301.2,199.4 L305.1,191.5 L309.0,210.2 L312.8,162.0 L316.7,204.3 L320.6,173.8 L324.4,190.5 L328.3,172.3 L332.1,165.9 L336.0,157.0 L339.9,175.8 L343.7,180.2 L347.6,155.1 L351.4,148.2 L355.3,148.7 L359.2,155.1 L363.0,139.8 L366.9,157.0 L370.8,183.1 L374.6,158.5 L378.5,170.8 L382.3,182.6 L386.2,144.7 L390.1,141.8 L393.9,177.2 L397.8,167.4 L401.7,145.7 L405.5,168.9 L409.4,176.7 L413.2,171.8 L417.1,126.0 L421.0,154.1 L424.8,154.1 L428.7,124.1 L432.6,151.6 L436.4,186.1 L440.3,173.3 L444.1,164.4 L448.0,107.8 L451.9,170.8 L455.7,164.9 L459.6,171.3 L463.4,158.5 L467.3,160.5 L471.2,133.4 L475.0,154.6 L478.9,174.8 L482.8,138.3 L486.6,149.7 L490.5,109.3 L494.3,141.3 L498.2,123.6 L502.1,146.2 L505.9,118.2 L509.8,150.2 L513.7,130.0 L517.5,144.7 L521.4,189.5 L525.2,154.6 L529.1,146.7 L533.0,127.0 L536.8,132.4 L540.7,130.0 L544.6,157.5 L548.4,118.6 L552.3,142.8 L556.1,136.9 L560.0,94.0" fill="none" stroke="#e91e63" stroke-width="2.2" opacity="0.85"/>
<rect x="0" y="0" width="560" height="320" fill="none" stroke="#2d3748" stroke-width="1.5"/>
</g>
<text x="350.0" y="412" text-anchor="middle" font-size="13" fill="#2d3748">Year</text>
<text x="20" y="200.0" text-anchor="middle" font-size="13" fill="#2d3748" transform="rotate(-90 20 200.0)">Anomaly (°C)</text>
<g transform="translate(660,40)">
<rect x="0" y="20" width="14" height="14" fill="#e74c3c" rx="2"/><text x="22" y="31" font-size="12" fill="#2d3748">Arctic (64°–90°N)</text><rect x="0" y="42" width="14" height="14" fill="#e67e22" rx="2"/><text x="22" y="53" font-size="12" fill="#2d3748">High N (44°–64°N)</text><rect x="0" y="64" width="14" height="14" fill="#f1c40f" rx="2"/><text x="22" y="75" font-size="12" fill="#2d3748">Mid N (24°–44°N)</text><rect x="0" y="86" width="14" height="14" fill="#27ae60" rx="2"/><text x="22" y="97" font-size="12" fill="#2d3748">Trop N (0°–24°N)</text><rect x="0" y="108" width="14" height="14" fill="#1abc9c" rx="2"/><text x="22" y="119" font-size="12" fill="#2d3748">Trop S (24°S–0°)</text><rect x="0" y="130" width="14" height="14" fill="#3498db" rx="2"/><text x="22" y="141" font-size="12" fill="#2d3748">Mid S (44°–24°S)</text><rect x="0" y="152" width="14" height="14" fill="#9b59b6" rx="2"/><text x="22" y="163" font-size="12" fill="#2d3748">High S (64°–44°S)</text><rect x="0" y="174" width="14" height="14" fill="#e91e63" rx="2"/><text x="22" y="185" font-size="12" fill="#2d3748">Antarctic (90°–64°S)</text>
</g>
</svg>
</div>
<div class="caption">Eight rainbow lines on a shared grid with a side legend. The polar-amplification story is buried in color overlap.</div>
<h2>Post — Tufte-styled small multiples</h2>
<div class="panel">
<svg viewBox="0 0 800 676" xmlns="http://www.w3.org/2000/svg" style="font-family:Georgia,serif;background:#fdfdfb">
<text x="20" y="18" font-size="13" font-style="italic" fill="#1a202c">
Anomaly by latitude band, 1880–2025 — band in <tspan font-weight="700">black</tspan>, global average in <tspan fill="#718096">gray</tspan>; 2025 value at right.
All panels share y-scale −3°C to +3.5°C; black tick at the left of each panel marks that band's own data extent.
</text>
<g transform="translate(0,30)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">Arctic (64°–90°N)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip0"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip0)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,37.0 L3.4,37.5 L6.9,41.7 L10.3,31.2 L13.8,41.0 L17.2,42.7 L20.7,43.4 L24.1,45.0 L27.6,41.0 L31.0,35.7 L34.5,39.5 L37.9,39.3 L41.4,39.4 L44.8,35.5 L48.3,38.2 L51.7,35.9 L55.2,37.6 L58.6,34.9 L62.1,40.1 L65.5,38.8 L69.0,34.6 L72.4,33.0 L75.9,43.0 L79.3,31.8 L82.8,31.7 L86.2,30.2 L89.7,32.3 L93.1,34.9 L96.6,32.0 L100.0,36.4 L103.4,35.4 L106.9,32.6 L110.3,34.5 L113.8,34.3 L117.2,33.1 L120.7,35.2 L124.1,34.5 L127.6,37.0 L131.0,38.8 L134.5,36.1 L137.9,30.2 L141.4,30.2 L144.8,32.5 L148.3,28.3 L151.7,25.5 L155.2,30.5 L158.6,25.2 L162.1,29.9 L165.5,24.5 L169.0,29.0 L172.4,25.8 L175.9,25.3 L179.3,26.2 L182.8,31.4 L186.2,22.5 L189.7,27.3 L193.1,26.6 L196.6,19.6 L200.0,17.1 L203.4,25.4 L206.9,21.7 L210.3,30.1 L213.8,24.0 L217.2,17.9 L220.7,20.0 L224.1,24.6 L227.6,30.5 L231.0,20.9 L234.5,29.1 L237.9,28.4 L241.4,28.6 L244.8,29.6 L248.3,27.8 L251.7,21.3 L255.2,23.3 L258.6,32.1 L262.1,30.1 L265.5,29.4 L269.0,31.7 L272.4,25.9 L275.9,27.2 L279.3,31.5 L282.8,26.4 L286.2,31.5 L289.7,35.8 L293.1,32.6 L296.6,36.7 L300.0,27.1 L303.4,33.0 L306.9,30.5 L310.3,31.9 L313.8,30.8 L317.2,33.3 L320.7,29.6 L324.1,31.8 L327.6,29.3 L331.0,30.8 L334.5,28.8 L337.9,31.5 L341.4,35.4 L344.8,27.9 L348.3,20.8 L351.7,33.6 L355.2,28.5 L358.6,27.1 L362.1,26.8 L365.5,30.1 L369.0,33.3 L372.4,25.1 L375.9,27.4 L379.3,25.2 L382.8,23.7 L386.2,31.6 L389.7,25.5 L393.1,27.2 L396.6,18.9 L400.0,23.6 L403.4,23.6 L406.9,22.7 L410.3,26.7 L413.8,21.8 L417.2,20.9 L420.7,19.4 L424.1,17.2 L427.6,26.1 L431.0,13.0 L434.5,15.0 L437.9,12.1 L441.4,16.9 L444.8,17.8 L448.3,10.8 L451.7,10.1 L455.2,11.8 L458.6,16.9 L462.1,12.4 L465.5,12.7 L469.0,2.1 L472.4,8.4 L475.9,11.5 L479.3,6.2 L482.8,5.4 L486.2,12.1 L489.7,9.8 L493.1,7.9 L496.6,5.0 L500.0,4.2" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="2.1" x2="-2" y2="45.0" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="4.2" r="2.2" fill="#c53030"/>
<text x="506" y="7.2" font-size="11" font-weight="600" fill="#c53030">+3.01°</text>
</g>
</g>
<g transform="translate(0,102)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">High N (44°–64°N)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip1"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip1)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,34.4 L3.4,33.9 L6.9,32.4 L10.3,34.8 L13.8,35.6 L17.2,36.0 L20.7,34.5 L24.1,34.5 L27.6,33.9 L31.0,32.1 L34.5,35.0 L37.9,32.9 L41.4,35.7 L44.8,34.7 L48.3,32.9 L51.7,34.6 L55.2,33.3 L58.6,34.1 L62.1,32.2 L65.5,30.8 L69.0,31.5 L72.4,31.0 L75.9,34.5 L79.3,33.8 L82.8,35.3 L86.2,32.1 L89.7,30.8 L93.1,36.4 L96.6,34.8 L100.0,35.5 L103.4,32.2 L106.9,33.8 L110.3,37.0 L113.8,33.0 L117.2,31.5 L120.7,31.6 L124.1,34.8 L127.6,34.5 L131.0,32.5 L134.5,35.0 L137.9,32.0 L141.4,28.7 L144.8,33.7 L148.3,31.4 L151.7,32.3 L155.2,28.7 L158.6,28.8 L162.1,32.0 L165.5,31.6 L169.0,35.4 L172.4,29.8 L175.9,30.5 L179.3,28.4 L182.8,34.1 L186.2,27.5 L189.7,30.6 L193.1,29.2 L196.6,29.9 L200.0,26.8 L203.4,27.7 L206.9,30.3 L210.3,31.0 L213.8,30.8 L217.2,27.7 L220.7,26.1 L224.1,30.3 L227.6,30.6 L231.0,31.3 L234.5,27.5 L237.9,28.7 L241.4,32.8 L244.8,30.1 L248.3,30.9 L251.7,27.1 L255.2,32.0 L258.6,31.1 L262.1,34.3 L265.5,28.3 L269.0,28.9 L272.4,28.6 L275.9,30.8 L279.3,26.9 L282.8,27.5 L286.2,27.5 L289.7,31.9 L293.1,32.2 L296.6,31.8 L300.0,27.9 L303.4,30.3 L306.9,35.4 L310.3,31.3 L313.8,30.1 L317.2,34.2 L320.7,27.8 L324.1,30.8 L327.6,26.8 L331.0,32.9 L334.5,28.1 L337.9,29.8 L341.4,29.6 L344.8,30.0 L348.3,23.3 L351.7,29.3 L355.2,24.2 L358.6,29.5 L362.1,32.4 L365.5,27.7 L369.0,29.0 L372.4,25.2 L375.9,24.2 L379.3,22.6 L382.8,24.5 L386.2,26.4 L389.7,27.7 L393.1,25.8 L396.6,21.6 L400.0,28.7 L403.4,22.4 L406.9,22.1 L410.3,23.3 L413.8,23.3 L417.2,22.7 L420.7,21.5 L424.1,21.7 L427.6,22.0 L431.0,19.6 L434.5,21.0 L437.9,18.8 L441.4,20.9 L444.8,25.0 L448.3,22.7 L451.7,22.1 L455.2,22.1 L458.6,21.2 L462.1,20.3 L465.5,17.4 L469.0,17.8 L472.4,18.3 L475.9,20.8 L479.3,17.8 L482.8,14.6 L486.2,18.4 L489.7,17.2 L493.1,14.1 L496.6,13.3 L500.0,13.0" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="13.0" x2="-2" y2="37.0" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="13.0" r="2.2" fill="#c53030"/>
<text x="506" y="16.0" font-size="11" font-weight="600" fill="#c53030">+1.99°</text>
</g>
</g>
<g transform="translate(0,174)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">Mid N (24°–44°N)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip2"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip2)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,32.9 L3.4,32.2 L6.9,31.6 L10.3,32.6 L13.8,34.3 L17.2,34.3 L20.7,33.8 L24.1,32.9 L27.6,32.4 L31.0,32.6 L34.5,32.6 L37.9,33.3 L41.4,31.6 L44.8,34.2 L48.3,31.7 L51.7,32.5 L55.2,32.1 L58.6,32.3 L62.1,32.2 L65.5,31.4 L69.0,31.5 L72.4,31.4 L75.9,32.9 L79.3,35.0 L82.8,34.9 L86.2,35.5 L89.7,33.5 L93.1,34.6 L96.6,34.6 L100.0,33.9 L103.4,34.5 L106.9,34.2 L110.3,34.5 L113.8,34.5 L117.2,32.6 L120.7,31.8 L124.1,32.3 L127.6,33.9 L131.0,33.3 L134.5,32.8 L137.9,33.3 L141.4,31.0 L144.8,31.4 L148.3,32.4 L151.7,32.2 L155.2,31.8 L158.6,32.1 L162.1,31.3 L165.5,32.1 L169.0,33.5 L172.4,31.1 L175.9,31.4 L179.3,32.0 L182.8,31.3 L186.2,31.4 L189.7,31.6 L193.1,32.5 L196.6,30.5 L200.0,30.0 L203.4,29.5 L206.9,31.0 L210.3,29.5 L213.8,29.7 L217.2,29.3 L220.7,29.4 L224.1,29.8 L227.6,28.8 L231.0,29.8 L234.5,30.2 L237.9,29.8 L241.4,29.9 L244.8,29.1 L248.3,28.5 L251.7,28.9 L255.2,30.2 L258.6,28.2 L262.1,30.9 L265.5,31.1 L269.0,29.1 L272.4,29.7 L275.9,29.2 L279.3,28.6 L282.8,28.9 L286.2,29.0 L289.7,31.2 L293.1,31.2 L296.6,29.4 L300.0,30.6 L303.4,30.9 L306.9,31.6 L310.3,30.7 L313.8,31.0 L317.2,32.2 L320.7,30.0 L324.1,31.7 L327.6,30.6 L331.0,32.6 L334.5,29.6 L337.9,30.5 L341.4,29.4 L344.8,30.0 L348.3,29.5 L351.7,30.8 L355.2,30.8 L358.6,31.4 L362.1,30.3 L365.5,29.9 L369.0,29.1 L372.4,28.1 L375.9,28.0 L379.3,25.9 L382.8,27.9 L386.2,30.4 L389.7,31.1 L393.1,26.5 L396.6,27.4 L400.0,29.3 L403.4,28.2 L406.9,24.5 L410.3,23.8 L413.8,25.4 L417.2,24.3 L420.7,25.2 L424.1,25.5 L427.6,24.5 L431.0,25.2 L434.5,24.1 L437.9,24.2 L441.4,24.9 L444.8,24.3 L448.3,23.8 L451.7,25.2 L455.2,23.8 L458.6,24.2 L462.1,23.9 L465.5,21.6 L469.0,20.9 L472.4,21.3 L475.9,21.1 L479.3,21.6 L482.8,19.9 L486.2,19.3 L489.7,19.2 L493.1,17.6 L496.6,15.9 L500.0,17.1" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="15.9" x2="-2" y2="35.5" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="17.1" r="2.2" fill="#c53030"/>
<text x="506" y="20.1" font-size="11" font-weight="600" fill="#c53030">+1.52°</text>
</g>
</g>
<g transform="translate(0,246)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">Trop N (0°–24°N)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip3"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip3)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,31.4 L3.4,29.4 L6.9,30.7 L10.3,31.7 L13.8,31.4 L17.2,30.8 L20.7,32.1 L24.1,32.8 L27.6,29.8 L31.0,30.2 L34.5,32.7 L37.9,30.2 L41.4,33.2 L44.8,33.9 L48.3,34.5 L51.7,31.5 L55.2,30.0 L58.6,29.2 L62.1,31.9 L65.5,31.6 L69.0,29.6 L72.4,30.8 L75.9,30.5 L79.3,32.4 L82.8,34.1 L86.2,31.2 L89.7,32.0 L93.1,32.8 L96.6,33.9 L100.0,34.0 L103.4,34.5 L106.9,33.9 L110.3,32.7 L113.8,33.6 L117.2,31.2 L120.7,30.2 L124.1,34.5 L127.6,36.1 L131.0,33.6 L134.5,32.2 L137.9,33.4 L141.4,32.7 L144.8,33.0 L148.3,33.0 L151.7,32.5 L155.2,32.6 L158.6,30.2 L162.1,31.4 L165.5,31.4 L169.0,32.5 L172.4,30.9 L175.9,29.3 L179.3,31.8 L182.8,32.6 L186.2,32.5 L189.7,31.6 L193.1,30.7 L196.6,30.2 L200.0,31.8 L203.4,31.3 L206.9,28.0 L210.3,25.6 L213.8,29.3 L217.2,31.1 L220.7,29.3 L224.1,29.3 L227.6,30.4 L231.0,30.4 L234.5,32.1 L237.9,32.1 L241.4,32.7 L244.8,30.2 L248.3,30.3 L251.7,29.5 L255.2,31.4 L258.6,32.7 L262.1,32.7 L265.5,29.7 L269.0,27.9 L272.4,29.6 L275.9,29.6 L279.3,30.8 L282.8,30.5 L286.2,28.9 L289.7,31.3 L293.1,30.8 L296.6,28.8 L300.0,31.1 L303.4,30.3 L306.9,27.1 L310.3,29.6 L313.8,32.7 L317.2,29.6 L320.7,29.5 L324.1,32.1 L327.6,32.8 L331.0,31.3 L334.5,29.3 L337.9,29.3 L341.4,27.9 L344.8,27.3 L348.3,28.3 L351.7,28.0 L355.2,27.7 L358.6,29.6 L362.1,29.8 L365.5,28.6 L369.0,25.4 L372.4,27.4 L375.9,29.6 L379.3,26.9 L382.8,27.4 L386.2,28.4 L389.7,27.7 L393.1,27.7 L396.6,26.7 L400.0,27.5 L403.4,25.8 L406.9,25.0 L410.3,28.8 L413.8,28.3 L417.2,26.7 L420.7,25.4 L424.1,24.9 L427.6,25.3 L431.0,24.8 L434.5,25.2 L437.9,26.3 L441.4,27.2 L444.8,24.6 L448.3,24.0 L451.7,26.8 L455.2,26.0 L458.6,25.1 L462.1,24.1 L465.5,21.7 L469.0,21.9 L472.4,22.7 L475.9,23.8 L479.3,22.3 L482.8,22.6 L486.2,23.9 L489.7,24.6 L493.1,20.8 L496.6,19.6 L500.0,22.7" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="19.6" x2="-2" y2="36.1" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="22.7" r="2.2" fill="#c53030"/>
<text x="506" y="25.7" font-size="11" font-weight="600" fill="#c53030">+0.86°</text>
</g>
</g>
<g transform="translate(0,318)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">Trop S (24°S–0°)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip4"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip4)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,31.1 L3.4,29.3 L6.9,30.6 L10.3,31.4 L13.8,31.6 L17.2,31.9 L20.7,31.7 L24.1,32.7 L27.6,29.1 L31.0,28.9 L34.5,34.2 L37.9,31.6 L41.4,32.4 L44.8,32.9 L48.3,31.9 L51.7,30.2 L55.2,28.9 L58.6,28.4 L62.1,32.4 L65.5,30.8 L69.0,27.9 L72.4,30.2 L75.9,30.6 L79.3,33.0 L82.8,34.5 L86.2,30.7 L89.7,31.8 L93.1,32.9 L96.6,34.2 L100.0,34.8 L103.4,34.5 L106.9,34.0 L110.3,31.1 L113.8,31.4 L117.2,30.3 L120.7,30.3 L124.1,33.6 L127.6,35.2 L131.0,32.7 L134.5,31.6 L137.9,31.3 L141.4,32.0 L144.8,32.8 L148.3,32.5 L151.7,32.2 L155.2,31.8 L158.6,29.9 L162.1,31.6 L165.5,31.4 L169.0,32.6 L172.4,31.2 L175.9,29.6 L179.3,31.4 L182.8,32.6 L186.2,32.2 L189.7,31.9 L193.1,32.0 L196.6,31.1 L200.0,32.5 L203.4,31.3 L206.9,27.7 L210.3,26.4 L213.8,29.8 L217.2,30.8 L220.7,27.9 L224.1,28.1 L227.6,30.8 L231.0,30.9 L234.5,31.4 L237.9,31.4 L241.4,32.6 L244.8,31.2 L248.3,29.7 L251.7,29.6 L255.2,32.7 L258.6,33.4 L262.1,33.3 L265.5,29.3 L269.0,28.9 L272.4,29.5 L275.9,30.3 L279.3,30.2 L282.8,30.6 L286.2,29.3 L289.7,31.4 L293.1,30.0 L296.6,30.2 L300.0,31.6 L303.4,31.1 L306.9,27.4 L310.3,29.6 L313.8,32.0 L317.2,27.8 L320.7,27.6 L324.1,31.6 L327.6,31.6 L331.0,31.1 L334.5,28.3 L337.9,29.7 L341.4,27.8 L344.8,27.7 L348.3,28.9 L351.7,27.7 L355.2,25.2 L358.6,27.7 L362.1,29.0 L365.5,27.8 L369.0,24.9 L372.4,26.5 L375.9,28.6 L379.3,27.1 L382.8,26.7 L386.2,27.1 L389.7,27.1 L393.1,27.2 L396.6,26.4 L400.0,27.4 L403.4,25.7 L406.9,23.4 L410.3,28.1 L413.8,27.8 L417.2,26.4 L420.7,24.7 L424.1,24.6 L427.6,25.7 L431.0,25.0 L434.5,25.6 L437.9,26.2 L441.4,26.7 L444.8,24.2 L448.3,24.7 L451.7,27.3 L455.2,25.4 L458.6,25.3 L462.1,24.7 L465.5,22.2 L469.0,21.2 L472.4,23.8 L475.9,24.9 L479.3,22.7 L482.8,23.2 L486.2,25.2 L489.7,25.9 L493.1,21.3 L496.6,20.2 L500.0,23.0" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="20.2" x2="-2" y2="35.2" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="23.0" r="2.2" fill="#c53030"/>
<text x="506" y="26.0" font-size="11" font-weight="600" fill="#c53030">+0.83°</text>
</g>
</g>
<g transform="translate(0,390)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">Mid S (44°–24°S)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip5"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip5)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,30.5 L3.4,30.7 L6.9,30.1 L10.3,30.5 L13.8,31.8 L17.2,33.1 L20.7,31.9 L24.1,32.6 L27.6,32.8 L31.0,31.5 L34.5,31.7 L37.9,31.7 L41.4,30.0 L44.8,29.6 L48.3,31.4 L51.7,31.8 L55.2,31.4 L58.6,31.8 L62.1,32.5 L65.5,31.4 L69.0,32.6 L72.4,32.5 L75.9,32.6 L79.3,33.2 L82.8,33.3 L86.2,32.9 L89.7,31.9 L93.1,32.0 L96.6,32.7 L100.0,33.3 L103.4,33.0 L106.9,33.9 L110.3,33.3 L113.8,32.6 L117.2,31.4 L120.7,31.4 L124.1,32.1 L127.6,32.1 L131.0,30.7 L134.5,31.4 L137.9,31.8 L141.4,32.1 L144.8,32.2 L148.3,32.4 L151.7,33.5 L155.2,32.2 L158.6,33.2 L162.1,32.7 L165.5,32.6 L169.0,33.8 L172.4,33.0 L175.9,33.8 L179.3,32.0 L182.8,32.0 L186.2,31.4 L189.7,32.7 L193.1,32.4 L196.6,31.8 L200.0,30.7 L203.4,30.5 L206.9,29.9 L210.3,29.9 L213.8,29.7 L217.2,29.6 L220.7,28.5 L224.1,29.8 L227.6,32.0 L231.0,31.8 L234.5,31.8 L237.9,31.6 L241.4,30.7 L244.8,32.0 L248.3,31.0 L251.7,30.8 L255.2,31.6 L258.6,31.5 L262.1,31.4 L265.5,30.9 L269.0,30.8 L272.4,30.4 L275.9,31.0 L279.3,28.9 L282.8,29.4 L286.2,31.0 L289.7,32.7 L293.1,32.1 L296.6,32.1 L300.0,30.9 L303.4,31.4 L306.9,30.2 L310.3,29.2 L313.8,29.9 L317.2,28.8 L320.7,28.3 L324.1,28.3 L327.6,29.0 L331.0,29.3 L334.5,28.3 L337.9,28.4 L341.4,27.7 L344.8,27.1 L348.3,27.7 L351.7,28.6 L355.2,28.3 L358.6,28.8 L362.1,27.6 L365.5,28.0 L369.0,27.4 L372.4,26.9 L375.9,27.1 L379.3,27.0 L382.8,27.5 L386.2,28.4 L389.7,27.8 L393.1,27.9 L396.6,27.7 L400.0,27.4 L403.4,26.5 L406.9,26.8 L410.3,26.2 L413.8,26.6 L417.2,25.2 L420.7,25.9 L424.1,26.4 L427.6,26.0 L431.0,25.9 L434.5,25.8 L437.9,25.8 L441.4,25.7 L444.8,25.0 L448.3,24.7 L451.7,24.6 L455.2,25.3 L458.6,24.8 L462.1,24.0 L465.5,23.8 L469.0,24.4 L472.4,23.6 L475.9,23.3 L479.3,23.8 L482.8,25.1 L486.2,24.0 L489.7,23.4 L493.1,22.4 L496.6,22.6 L500.0,21.9" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="21.9" x2="-2" y2="33.9" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="21.9" r="2.2" fill="#c53030"/>
<text x="506" y="24.9" font-size="11" font-weight="600" fill="#c53030">+0.96°</text>
</g>
</g>
<g transform="translate(0,462)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">High S (64°–44°S)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip6"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip6)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,29.7 L3.4,30.8 L6.9,29.8 L10.3,29.6 L13.8,30.3 L17.2,31.4 L20.7,31.9 L24.1,32.4 L27.6,32.0 L31.0,31.4 L34.5,32.5 L37.9,32.1 L41.4,32.0 L44.8,31.9 L48.3,33.2 L51.7,32.8 L55.2,31.3 L58.6,32.5 L62.1,32.0 L65.5,32.0 L69.0,32.7 L72.4,33.0 L75.9,33.9 L79.3,33.6 L82.8,34.4 L86.2,33.3 L89.7,32.0 L93.1,33.3 L96.6,34.3 L100.0,34.6 L103.4,34.0 L106.9,34.6 L110.3,32.7 L113.8,33.6 L117.2,31.7 L120.7,32.1 L124.1,31.6 L127.6,30.9 L131.0,32.0 L134.5,32.9 L137.9,34.3 L141.4,33.4 L144.8,32.6 L148.3,33.7 L151.7,34.0 L155.2,34.8 L158.6,34.0 L162.1,34.0 L165.5,34.3 L169.0,33.9 L172.4,34.1 L175.9,33.6 L179.3,34.7 L182.8,34.3 L186.2,33.4 L189.7,33.7 L193.1,33.0 L196.6,32.3 L200.0,31.1 L203.4,31.7 L206.9,31.9 L210.3,31.4 L213.8,30.6 L217.2,30.2 L220.7,30.9 L224.1,30.2 L227.6,32.2 L231.0,30.8 L234.5,31.8 L237.9,31.4 L241.4,31.5 L244.8,31.5 L248.3,30.3 L251.7,32.2 L255.2,31.9 L258.6,30.8 L262.1,30.0 L265.5,30.3 L269.0,30.8 L272.4,32.4 L275.9,30.8 L279.3,31.6 L282.8,30.8 L286.2,31.6 L289.7,30.8 L293.1,30.4 L296.6,31.4 L300.0,30.3 L303.4,30.2 L306.9,29.0 L310.3,29.9 L313.8,28.8 L317.2,30.3 L320.7,29.5 L324.1,30.8 L327.6,28.9 L331.0,28.3 L334.5,27.5 L337.9,29.0 L341.4,27.3 L344.8,27.0 L348.3,26.8 L351.7,27.4 L355.2,26.6 L358.6,27.4 L362.1,26.4 L365.5,28.0 L369.0,28.0 L372.4,28.4 L375.9,27.6 L379.3,27.0 L382.8,27.7 L386.2,27.3 L389.7,26.8 L393.1,28.2 L396.6,28.9 L400.0,27.7 L403.4,27.1 L406.9,27.5 L410.3,28.5 L413.8,29.3 L417.2,28.1 L420.7,27.4 L424.1,28.1 L427.6,28.2 L431.0,28.6 L434.5,28.5 L437.9,29.6 L441.4,29.4 L444.8,28.9 L448.3,28.4 L451.7,28.5 L455.2,28.4 L458.6,28.1 L462.1,28.4 L465.5,28.4 L469.0,27.7 L472.4,26.9 L475.9,26.6 L479.3,26.6 L482.8,26.7 L486.2,27.2 L489.7,26.6 L493.1,26.2 L496.6,25.4 L500.0,25.3" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="25.3" x2="-2" y2="34.8" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="25.3" r="2.2" fill="#c53030"/>
<text x="506" y="28.3" font-size="11" font-weight="600" fill="#c53030">+0.56°</text>
</g>
</g>
<g transform="translate(0,534)">
<text x="160" y="32.0" text-anchor="end" font-size="12" font-weight="500" fill="#1a202c">Antarctic (90°–64°S)</text>
<g transform="translate(170,0)">
<defs>
<clipPath id="clip7"><rect x="-4" y="-4" width="560" height="64"/></clipPath>
</defs>
<g clip-path="url(#clip7)">
<line x1="0" y1="30.2" x2="500" y2="30.2" stroke="#cbd5e0" stroke-width="0.5"/>
<path d="M0.0,31.7 L3.4,30.9 L6.9,31.1 L10.3,31.6 L13.8,32.6 L17.2,33.1 L20.7,32.9 L24.1,33.3 L27.6,31.7 L31.0,31.1 L34.5,33.3 L37.9,32.0 L41.4,32.5 L44.8,32.8 L48.3,32.8 L51.7,32.1 L55.2,31.2 L58.6,31.1 L62.1,32.6 L65.5,31.7 L69.0,30.9 L72.4,31.5 L75.9,32.6 L79.3,33.3 L82.8,34.2 L86.2,32.4 L89.7,32.0 L93.1,33.5 L96.6,33.9 L100.0,34.4 L103.4,33.9 L106.9,34.0 L110.3,33.3 L113.8,33.2 L117.2,31.4 L120.7,31.4 L124.1,33.3 L127.6,34.1 L131.0,32.7 L134.5,32.6 L137.9,32.6 L141.4,31.8 L144.8,32.6 L148.3,32.5 L151.7,32.5 L155.2,32.0 L158.6,31.1 L162.1,32.0 L165.5,31.9 L169.0,33.3 L172.4,31.5 L175.9,30.9 L179.3,31.5 L182.8,32.7 L186.2,31.3 L189.7,31.9 L193.1,31.4 L196.6,30.4 L200.0,30.2 L203.4,30.3 L206.9,29.1 L210.3,28.6 L213.8,29.6 L217.2,29.4 L220.7,28.4 L224.1,29.4 L227.6,30.8 L231.0,30.4 L234.5,31.1 L237.9,31.1 L241.4,31.7 L244.8,30.8 L248.3,30.1 L251.7,29.5 L255.2,31.3 L258.6,31.4 L262.1,31.8 L265.5,29.7 L269.0,29.6 L272.4,29.9 L275.9,30.3 L279.3,29.6 L282.8,29.9 L286.2,29.7 L289.7,31.9 L293.1,31.1 L296.6,30.7 L300.0,30.3 L303.4,30.8 L306.9,29.7 L310.3,29.9 L313.8,30.8 L317.2,30.1 L320.7,28.8 L324.1,30.8 L327.6,30.2 L331.0,31.0 L334.5,28.6 L337.9,29.6 L341.4,28.8 L344.8,27.9 L348.3,27.4 L351.7,28.9 L355.2,27.5 L358.6,28.8 L362.1,29.1 L365.5,28.6 L369.0,27.4 L372.4,26.8 L375.9,27.8 L379.3,26.3 L382.8,26.7 L386.2,28.3 L389.7,28.2 L393.1,27.5 L396.6,26.4 L400.0,27.3 L403.4,26.2 L406.9,24.9 L410.3,26.9 L413.8,26.8 L417.2,25.6 L420.7,24.7 L424.1,24.9 L427.6,25.6 L431.0,24.3 L434.5,24.6 L437.9,24.5 L441.4,25.5 L444.8,24.5 L448.3,24.0 L451.7,24.9 L455.2,24.6 L458.6,24.3 L462.1,23.7 L465.5,22.4 L469.0,21.5 L472.4,22.2 L475.9,22.8 L479.3,21.7 L482.8,21.5 L486.2,22.8 L489.7,22.5 L493.1,20.1 L496.6,19.0 L500.0,19.9" fill="none" stroke="#a0aec0" stroke-width="0.8" opacity="0.6"/>
<path d="M0.0,24.2 L3.4,24.9 L6.9,24.6 L10.3,25.7 L13.8,24.4 L17.2,22.9 L20.7,24.9 L24.1,27.2 L27.6,28.7 L31.0,26.2 L34.5,28.7 L37.9,31.4 L41.4,29.2 L44.8,30.3 L48.3,33.3 L51.7,35.1 L55.2,27.8 L58.6,26.5 L62.1,26.8 L65.5,25.0 L69.0,27.7 L72.4,27.7 L75.9,30.4 L79.3,34.4 L82.8,41.4 L86.2,33.0 L89.7,36.3 L93.1,40.4 L96.6,24.3 L100.0,35.0 L103.4,28.8 L106.9,29.6 L110.3,44.2 L113.8,39.0 L117.2,33.3 L120.7,47.2 L124.1,39.1 L127.6,29.6 L131.0,32.6 L134.5,28.4 L137.9,40.0 L141.4,37.3 L144.8,32.5 L148.3,34.8 L151.7,34.7 L155.2,37.6 L158.6,35.6 L162.1,42.0 L165.5,48.4 L169.0,39.4 L172.4,52.5 L175.9,33.7 L179.3,38.6 L182.8,40.0 L186.2,35.0 L189.7,44.9 L193.1,30.4 L196.6,27.0 L200.0,37.6 L203.4,43.9 L206.9,30.6 L210.3,34.1 L213.8,37.9 L217.2,20.3 L220.7,38.6 L224.1,45.7 L227.6,32.0 L231.0,32.2 L234.5,42.4 L237.9,47.6 L241.4,37.6 L244.8,36.2 L248.3,34.8 L251.7,40.1 L255.2,37.2 L258.6,19.8 L262.1,23.5 L265.5,25.9 L269.0,34.9 L272.4,33.5 L275.9,36.8 L279.3,28.3 L282.8,35.8 L286.2,30.4 L289.7,33.3 L293.1,30.2 L296.6,29.0 L300.0,27.5 L303.4,30.8 L306.9,31.5 L310.3,27.1 L313.8,25.9 L317.2,26.0 L320.7,27.1 L324.1,24.5 L327.6,27.5 L331.0,32.0 L334.5,27.7 L337.9,29.9 L341.4,32.0 L344.8,25.3 L348.3,24.8 L351.7,31.0 L355.2,29.3 L358.6,25.5 L362.1,29.6 L365.5,30.9 L369.0,30.1 L372.4,22.1 L375.9,27.0 L379.3,27.0 L382.8,21.7 L386.2,26.5 L389.7,32.6 L393.1,30.3 L396.6,28.8 L400.0,18.9 L403.4,29.9 L406.9,28.9 L410.3,30.0 L413.8,27.7 L417.2,28.1 L420.7,23.3 L424.1,27.1 L427.6,30.6 L431.0,24.2 L434.5,26.2 L437.9,19.1 L441.4,24.7 L444.8,21.6 L448.3,25.6 L451.7,20.7 L455.2,26.3 L458.6,22.7 L462.1,25.3 L465.5,33.2 L469.0,27.1 L472.4,25.7 L475.9,22.2 L479.3,23.2 L482.8,22.7 L486.2,27.6 L489.7,20.8 L493.1,25.0 L496.6,24.0 L500.0,16.5" fill="none" stroke="#1a202c" stroke-width="1.1"/>
</g>
<!-- range frame: visual extent only; numeric labels removed (caption gives shared scale, red value gives precision) -->
<line x1="-2" y1="16.5" x2="-2" y2="52.5" stroke="#1a202c" stroke-width="1"/>
<circle cx="500" cy="16.5" r="2.2" fill="#c53030"/>
<text x="506" y="19.5" font-size="11" font-weight="600" fill="#c53030">+1.59°</text>
</g>
</g>
<text x="170.0" y="620" text-anchor="middle" font-size="10" fill="#4a5568">1880</text><text x="307.9" y="620" text-anchor="middle" font-size="10" fill="#4a5568">1920</text><text x="445.9" y="620" text-anchor="middle" font-size="10" fill="#4a5568">1960</text><text x="583.8" y="620" text-anchor="middle" font-size="10" fill="#4a5568">2000</text><text x="670.0" y="620" text-anchor="middle" font-size="10" fill="#4a5568">2025</text>
<line x1="170" y1="602" x2="670" y2="602" stroke="#1a202c" stroke-width="0.6"/>
</svg>
</div>
<div class="caption">Each band gets its own panel, ordered north → south, on a shared y-scale that contains all observed values. The global average sits behind every panel in light gray. A black tick at the left marks each band's own data extent. The 2025 value is annotated at the right end. Scanning down the stack: warming intensifies dramatically toward the Arctic; Antarctic shows wide historical variability around a smaller trend.</div>
<div class="shift">
<b>What the skill changed</b>
<ul>
<li><b>Rainbow lines → small multiples.</b> Comparison is the analytical act here; small multiples make it direct.</li>
<li><b>Legend → direct labeling.</b> Band name on the left, 2025 value at the right end. The eye never leaves the data.</li>
<li><b>Heavy grid → range tick + single zero line.</b> Each panel's y-axis is a single tick marking that band's data extent. Far higher data-ink ratio.</li>
<li><b>Color encoding → layering.</b> Gray global-average underlay lets each band's deviation from the planet read instantly.</li>
<li><b>Macro/micro.</b> Glance: warming concentrates in the Arctic; Antarctic is volatile. Close read: each panel's trajectory and 2025 value.</li>
</ul>
</div>
</body>
</html>
Raw
references__analytical-design.md

Analytical Design, Sparklines, and Layering

Extends tufte-principles.md with material from Envisioning Information (1990), Visual Explanations (1997), and Beautiful Evidence (2006).

1. The Six Principles of Analytical Design

From Beautiful Evidence. The most actionable framework Tufte produced — applies to any analytical presentation, not just charts.

  1. Show comparisons, contrasts, differences The fundamental analytical act. Every display should answer "compared to what?"

  2. Show causality, mechanism, structure, explanation Move beyond description. What's the why behind the pattern?

  3. Show multivariate data — more than 1 or 2 variables Real problems are multivariate. Reducing to a single variable hides interactions.

  4. Completely integrate words, numbers, images, diagrams Don't segregate by mode. Labels next to the data they describe; equations next to the curves they generate.

  5. Thoroughly describe the evidence Provenance, authorship, scales, sources, measurements. Documentation enables trust.

  6. Analytical presentations ultimately stand or fall depending on the quality, relevance, and integrity of their content. No amount of design fixes weak evidence. Content is paramount.

Use in critique: walk through all six. The lowest-scoring principle is usually the biggest improvement opportunity.

2. Sparklines

Word-sized, data-intense graphics. Tufte's signature Beautiful Evidence invention.

Defining properties:

  • Typographic resolution — sized like text, embedded inline with prose or tables
  • No axes, no labels, no decoration
  • Endpoints often marked (start/end values, or min/max)
  • Reveals shape, trend, variability at a glance

Design rules:

  • Height ≈ x-height of surrounding text (~14-20px)
  • Length ≈ a word or short phrase
  • Use a single red/colored dot to flag a key point (current value, anomaly)
  • Pair with the most recent numeric value: 120 ▁▂▃▅▇▇▆▅ 132
  • Stack in tables so eyes can scan vertically

When to use:

  • Dashboards with many metrics (one row per metric: name | sparkline | current | delta)
  • Inline prose: "revenue trended up ▁▂▄▆▇ over the quarter"
  • Anywhere a full chart would dominate but trend matters

When not to use:

  • When precise readings matter — sparklines show shape, not value
  • For categorical or part-to-whole data

3. Layering and Separation

From Envisioning Information. The most useful concept for dense displays.

The principle: Visually distinct elements can coexist in the same space if they're layered — separated by value, weight, hue, or transparency rather than spatial isolation.

Techniques:

  • 1+1=3 effect: two heavy lines next to each other create a phantom third line. Lighten one to suppress this.
  • Hierarchy by weight: primary data in dark/saturated; secondary in light gray; annotations even lighter.
  • Color for separation, not decoration: distinct hues let overlapping data remain readable.
  • Whisper, don't shout: grids, axes, reference lines should fade into the background — present but unobtrusive.

Test: squint at the graphic. The most important data should remain visible; chartjunk should disappear first.

4. Micro/Macro Design

Distinct from raw data density. A micro/macro graphic reveals different stories at different viewing distances.

  • Macro view (zoomed out, peripheral): overall pattern, shape, trend
  • Micro view (close inspection): individual data points, labels, exceptions

Canonical examples:

  • Vietnam Memorial: macro = sweep of names; micro = a single name
  • Galaxy maps: macro = structure; micro = individual stars
  • Financial tables with sparklines: macro = which rows trended up; micro = the actual values

Design implication: don't choose between overview and detail — show both simultaneously by layering.

5. Escaping Flatland

The 2D page/screen is inherently flat; good information design adds dimensions without 3D gimmicks.

Dimensions you can add on flat media:

  • Color (categorical or sequential)
  • Size (continuous)
  • Shape (categorical)
  • Position (2-3 axes via projection)
  • Time (small multiples, animation, or sparkline-style inline series)
  • Layering (foreground/background via value)

Anti-pattern: 3D bar charts, pie charts with depth, isometric projections that distort proportions. These add visual dimension without adding information dimension — pure chartjunk.

6. Range-Frame and Dot-Dash Plot

Tufte's signature reinventions of standard chart elements. Direct applications of data-ink maximization.

Range-frame:

  • Replace the full axis with a line that spans only the range of actual data
  • Axis ends at min/max values, not arbitrary round numbers
  • Tells the viewer the data extent without explicit annotation

Dot-dash plot:

  • Scatter plot where the axes are replaced by marginal rug plots
  • Each axis becomes a 1D distribution of the data on that variable
  • Same ink, more information — the axes now show marginal density

Pattern: every standard chart element (axis, tick, gridline) can be redesigned to carry data.

7. Confections, Parallelism, Narrative

From Visual Explanations.

Confections: assemblages of disparate visual elements (images, maps, text, diagrams) into a single explanatory composition. Examples: Minard's Napoleon march, Snow's cholera map, exploded technical illustrations. They work when each element serves the argument.

Parallelism: repetition of visual structure to enable comparison — small multiples are one form, but parallelism extends to side-by-side maps, before/after states, repeated annotation styles.

Narrative graphics of space and time: combine spatial and temporal dimensions in one frame. Minard's Napoleon graphic encodes troop size, geography, direction, temperature, and time simultaneously.

8. Cause and Effect

From Visual Explanations. Causality is hard to visualize because it requires showing both the variables and the mechanism linking them.

Techniques:

  • Show the intervention and the response in the same frame
  • Annotate the causal mechanism directly on the data
  • Use sequence (small multiples through time) to imply mechanism
  • Pair the data display with a process diagram showing the proposed cause

Worked example: Challenger O-ring decision. The available data, plotted against temperature, showed catastrophic risk — but the engineers presented it in a way that hid the causal relationship. Tufte's redesign makes the causality unavoidable.

Quick Reference: Extended Tufte Test

After applying the standard 7-question test in tufte-principles.md, add:

  1. Comparison: Does the graphic answer "compared to what?"
  2. Causality: Is the mechanism or explanation visible, not just the pattern?
  3. Multivariate: Are interactions among variables shown, or has the problem been over-reduced?
  4. Integration: Are words, numbers, and images interleaved — or segregated?
  5. Documentation: Can a stranger evaluate the evidence (sources, scales, authorship)?
  6. Layering: Do important elements dominate; do secondary elements recede?
  7. Micro/macro: Does the display reward both a glance and a close read?
Raw
references__tufte-principles.md

Tufte's Principles for Data Visualization

1. Graphical Excellence

Excellence in statistical graphics consists of complex ideas communicated with clarity, precision, and efficiency.

Core qualities:

  • Show the data
  • Induce the viewer to think about substance, not methodology or design
  • Avoid distorting what the data have to say
  • Present many numbers in a small space
  • Make large datasets coherent
  • Encourage eye comparison of different pieces of data
  • Reveal data at several levels of detail (broad overview to fine structure)
  • Serve a reasonably clear purpose
  • Integrate closely with statistical and verbal descriptions

Questions to ask:

  • Does the graphic show the data clearly?
  • Does it encourage thinking about content over decoration?
  • Can the viewer compare data elements easily?

2. Graphical Integrity

Graphics must tell the truth about the data.

The Lie Factor:

Lie Factor = Size of effect shown in graphic / Size of effect in data
  • Lie Factor = 1.0: Truthful
  • Lie Factor > 1.05 or < 0.95: Distortion

Six principles of graphical integrity:

  1. Representation of numbers should be directly proportional to quantities represented
  2. Clear, detailed, thorough labeling defeats distortion
  3. Show data variation, not design variation
  4. In time-series displays, standardize money (deflate) and use consistent baselines
  5. Dimensions of graphics should not exceed dimensions of data
  6. Graphics must not quote data out of context

Common violations:

  • 3D effects on 2D data (adds fake dimension)
  • Truncated axes that exaggerate change
  • Inconsistent intervals
  • Area/volume encoding of linear data
  • Missing context or baselines

3. Data-Ink Ratio

The data-ink ratio is the proportion of a graphic's ink devoted to the non-redundant display of data-information.

Data-Ink Ratio = Data-ink / Total ink used in graphic

Maximize the data-ink ratio within reason:

  1. Erase non-data-ink (decoration, heavy grids, boxes)
  2. Erase redundant data-ink (3D when 2D suffices)
  3. Revise and edit

Non-data-ink to eliminate:

  • Heavy gridlines
  • Unnecessary borders and boxes
  • Redundant labels
  • Decorative elements
  • Excessive tick marks
  • 3D effects that add no information

The eraser test: If you can erase something without losing data information, erase it.

4. Chartjunk

Chartjunk is the interior decoration of graphics that does not convey information.

Three categories of chartjunk:

A. Unintentional optical art (moiré vibration)

  • Busy patterns that create visual noise
  • Cross-hatching that vibrates
  • Competing visual frequencies

B. The Grid

  • Heavy grids compete with data
  • Grids should be muted or eliminated
  • If needed, use light gray or dotted lines

C. The Duck (self-promoting graphics)

  • Graphics that draw attention to their own design
  • Decoration masquerading as information
  • Style over substance

Chartjunk indicators:

  • Viewer notices the design before the data
  • Colors/patterns used for decoration not encoding
  • 3D effects, shadows, gradients without purpose
  • Clip art, icons, or illustrations that don't carry data

5. Small Multiples

Small multiples are series of graphics showing the same combination of variables, indexed by changes in another variable.

Characteristics:

  • Same design structure repeated
  • Changes in data, not design
  • Enables direct visual comparison
  • High information density
  • Eye moves across variations effortlessly

When to use:

  • Comparing across categories, time periods, or conditions
  • Showing change or variation
  • Revealing patterns across groups
  • When animation would work but static display is needed

Design guidelines:

  • Identical scales across all panels
  • Consistent visual encoding
  • Minimal between-panel decoration
  • Clear labeling of what varies
  • Tight spacing (data should dominate)

6. Data Density & Information Resolution

Data density = numbers plotted per unit area

High data density is a sign of graphical quality. Maps and time-series can achieve thousands of numbers per square inch.

Shrink principle: Graphics can often be reduced significantly while maintaining readability and gaining impact. Consider:

  • Sparklines (word-sized graphics)
  • Condensed time-series
  • Small multiple arrays

Resolution thinking:

  • What's the minimum size that remains readable?
  • Can we show more data in the same space?
  • Are we wasting white space?

7. Multifunctioning Graphical Elements

Every graphical element should serve multiple purposes when possible.

Data measures that can serve as:

  • Data point
  • Label
  • Scale marker
  • Grid reference

Examples:

  • Data points that also serve as labels (scatter plots with text)
  • Axis that is also a data series
  • Range frames (axis shows data range, not arbitrary extent)

8. Aesthetics and Technique

Balance complexity and simplicity:

  • Simple design, complex data
  • Complexity should come from data, not decoration

Visual hierarchy:

  • Data > Labels > Annotations > Grids > Borders
  • Prominent elements should carry the most information

Color use:

  • Use sparingly and purposefully
  • Ensure accessibility (colorblind-safe)
  • Gray as default, color for emphasis or encoding
  • Avoid "rainbow" color maps for sequential data

Typography:

  • Clear, readable fonts
  • Appropriate sizing hierarchy
  • Horizontal text when possible
  • Labels close to data they describe

Quick Reference: The Tufte Test

For any visualization, ask:

  1. Data-Ink: Can I erase any element without losing data? (Erase it)
  2. Integrity: Does the visual effect match the data effect? (Lie Factor ≈ 1)
  3. Chartjunk: Does any element exist for decoration only? (Remove it)
  4. Excellence: Does it reveal the data at multiple levels? (Broad + detailed)
  5. Comparison: Can the viewer easily compare data elements? (Enable it)
  6. Density: Could this show more data in the same space? (Condense)
  7. Context: Is all necessary context provided? (Labels, sources, scales)
Raw
SKILL.md
name tufte-viz
description Ideate and critique data visualizations using Edward Tufte's principles from "The Visual Display of Quantitative Information." Use this skill when: (1) Designing new data visualizations or charts (2) Critiquing or improving existing visualizations (3) Reviewing dashboards or reports for graphical integrity (4) Deciding between visualization approaches (5) Reducing chartjunk or improving data-ink ratio (6) Planning small multiples or high-density displays Applies principles: data-ink ratio, chartjunk elimination, graphical integrity, lie factor, small multiples, and data density.

Tufte Visualization Ideation

Apply Edward Tufte's principles to design clear, honest, high-density data visualizations.

Workflow

For new visualizations:

  1. Clarify the data story

    • What comparisons matter?
    • What's the key insight to communicate?
    • Who's the audience?

  2. Select approach using Tufte principles:

    • High comparison need → Small multiples
    • Dense data → Consider data tables, sparklines
    • Time-series → Line charts with minimal grid
    • Part-to-whole → Avoid pie charts; prefer bar/table

  3. Design with data-ink in mind

    • Start minimal, add only what's necessary
    • Every element must earn its ink
    • Default to grayscale; use color purposefully

  4. Apply the Tufte test (see references/tufte-principles.md)

For critiquing visualizations:

  1. Check graphical integrity

    • Calculate lie factor if proportions seem off
    • Verify baselines and scales
    • Look for 3D distortion

  2. Identify chartjunk

    • Decorative elements
    • Heavy grids
    • Unnecessary 3D effects
    • Moiré patterns

  3. Evaluate data-ink ratio

    • What can be erased?
    • What's redundant?

  4. Suggest improvements with specific before/after recommendations

Key Principles Reference

  • references/tufte-principles.md — core principles from Visual Display of Quantitative Information: lie factor, data-ink, chartjunk, small multiples, integrity.
  • references/analytical-design.md — extensions from Envisioning Information, Visual Explanations, and Beautiful Evidence: the 6 principles of analytical design, sparklines, layering & separation, micro/macro, range-frames, causality, confections. Load when designing dashboards, dense displays, sparklines, or explanatory graphics.

Quick checklist:

  • Lie Factor ≈ 1.0 (no visual distortion)
  • Maximum data-ink ratio
  • Zero chartjunk
  • Clear labeling
  • Answers "compared to what?"
  • Shows causality or mechanism where relevant
  • Multivariate (not over-reduced)
  • Words, numbers, images integrated — not segregated
  • Reveals multiple levels of detail (micro + macro)
  • Layering: primary data dominates, secondary recedes
  • Appropriate data density
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment