Code Interpreter Chart
A notebook cell of pandas runs: the In [*] marker spins to In [3], the status flips to a 1.2s check, and the output bar chart of signups by plan grows up from the baseline bar by bar.
Also known as: python notebook animation, data analysis ai ui, code execution output chart.
df = pd.read_csv("signups.csv")
df.groupby("plan").size().plot.bar()HTML
<div class="aia-code-interpreter-chart" role="status" aria-label="Running Python and plotting a chart">
<div class="aia-code-interpreter-chart-cell">
<span class="aia-code-interpreter-chart-n" aria-hidden="true"><span>[*]</span><span>[3]</span></span>
<pre class="aia-code-interpreter-chart-code"><code><i>df</i> = pd.read_csv(<s>"signups.csv"</s>)
<i>df</i>.groupby(<s>"plan"</s>).size().plot.bar()</code></pre>
<span class="aia-code-interpreter-chart-state" aria-hidden="true"><span>Running</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5.5 12.5 4 4 9-9.5"/></svg>1.2s</span></span>
</div>
<div class="aia-code-interpreter-chart-out" aria-hidden="true">
<span class="aia-code-interpreter-chart-n">Out</span>
<ul class="aia-code-interpreter-chart-plot">
<li><i><b>8.2k</b></i><span>Free</span></li>
<li><i><b>5.6k</b></i><span>Pro</span></li>
<li><i><b>3.1k</b></i><span>Team</span></li>
<li><i><b>1.2k</b></i><span>Enterprise</span></li>
</ul>
</div>
</div>CSS
@property --aia-code-interpreter-chart-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-code-interpreter-chart {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
position: relative;
box-sizing: border-box;
padding: 0.9em 1em;
border-radius: 0.9em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
--d: 7.5s;
--t: var(--aia-code-interpreter-chart-t);
--ok: color-mix(in srgb, #16a34a 78%, currentColor);
--k: clamp(0, (var(--t) - 1) * 8, 1);
width: 22em;
padding: 0.75em 0.85em 0.7em;
animation: aia-code-interpreter-chart-clock var(--d) cubic-bezier(0.4, 0, 0.3, 1) infinite;
}
.aia-code-interpreter-chart-cell,
.aia-code-interpreter-chart-out {
display: grid;
grid-template-columns: 2.1em 1fr;
align-items: start;
}
.aia-code-interpreter-chart-cell { position: relative; }
.aia-code-interpreter-chart-n {
display: grid;
padding-top: 0.55em;
color: color-mix(in srgb, currentColor 45%, transparent);
font: 600 0.68em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-code-interpreter-chart-n > * { grid-area: 1 / 1; }
.aia-code-interpreter-chart-cell .aia-code-interpreter-chart-n span:first-child {
color: color-mix(in srgb, var(--c) 80%, currentColor);
opacity: calc(1 - var(--k));
}
.aia-code-interpreter-chart-cell .aia-code-interpreter-chart-n span:last-child { opacity: var(--k); }
.aia-code-interpreter-chart-code {
position: relative;
margin: 0;
padding: 0.55em 0.7em;
overflow: hidden;
border-radius: 0.5em;
background: color-mix(in srgb, currentColor 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent);
font: 0.68em / 1.6 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-code-interpreter-chart-code code { font: inherit; }
.aia-code-interpreter-chart-code i {
color: color-mix(in srgb, var(--c) 80%, currentColor);
font-style: normal;
}
.aia-code-interpreter-chart-code s {
color: color-mix(in srgb, #16a34a 78%, currentColor);
text-decoration: none;
}
/* the run bar along the cell's edge */
.aia-code-interpreter-chart-code::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0.22em;
background: linear-gradient(var(--c), var(--c)) 0 0 / 100% 40% no-repeat;
opacity: calc(1 - var(--k));
animation: aia-code-interpreter-chart-run 0.9s ease-in-out infinite alternate;
}
.aia-code-interpreter-chart-state {
position: absolute;
right: 0.5em;
top: 0.45em;
display: grid;
justify-items: end;
font: 600 0.6em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-code-interpreter-chart-state > * {
grid-area: 1 / 1;
display: inline-flex;
align-items: center;
gap: 0.3em;
padding: 0.15em 0.5em;
border-radius: 999em;
}
.aia-code-interpreter-chart-state span:first-child {
background: color-mix(in srgb, var(--c) 14%, transparent);
color: color-mix(in srgb, var(--c) 80%, currentColor);
opacity: calc(1 - var(--k));
}
.aia-code-interpreter-chart-state span:last-child {
background: color-mix(in srgb, #16a34a 12%, transparent);
color: var(--ok);
opacity: var(--k);
}
.aia-code-interpreter-chart-state svg {
width: 1.1em;
height: 1.1em;
stroke-width: 3;
}
.aia-code-interpreter-chart-out {
margin-top: 0.8em;
opacity: calc(0.4 + var(--k) * 0.6);
}
.aia-code-interpreter-chart-plot {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.75em;
height: 4.6em;
margin: 0;
padding: 0 0.6em;
list-style: none;
background: repeating-linear-gradient(to top, color-mix(in srgb, currentColor 8%, transparent) 0 1px, transparent 1px 1.05em) 0 calc(100% - 1.05em) / 100% 3.2em no-repeat;
}
.aia-code-interpreter-chart-plot li {
--v: 1;
--i: 0;
--b: clamp(0, (var(--t) - 1.15 - var(--i) * 0.2) * 2.4, 1);
display: grid;
grid-template-rows: 1fr auto;
align-items: end;
}
.aia-code-interpreter-chart-plot li:nth-child(2) { --v: 0.68; --i: 1; }
.aia-code-interpreter-chart-plot li:nth-child(3) { --v: 0.38; --i: 2; }
.aia-code-interpreter-chart-plot li:nth-child(4) { --v: 0.15; --i: 3; }
.aia-code-interpreter-chart-plot i {
position: relative;
height: calc(var(--v) * var(--b) * 3.2em);
border-radius: 0.25em 0.25em 0 0;
background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 70%, transparent));
}
.aia-code-interpreter-chart-plot b {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
padding-bottom: 0.2em;
color: color-mix(in srgb, currentColor 65%, transparent);
font: 600 0.6em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
text-align: center;
opacity: clamp(0, (var(--b) - 0.7) * 4, 1);
}
.aia-code-interpreter-chart-plot span {
padding-top: 0.3em;
border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
margin: 0 -0.38em;
color: color-mix(in srgb, currentColor 55%, transparent);
font-size: 0.6em;
text-align: center;
white-space: nowrap;
}
@keyframes aia-code-interpreter-chart-clock {
0%, 5% { --aia-code-interpreter-chart-t: 0; }
30% { --aia-code-interpreter-chart-t: 1; }
62%, 97% { --aia-code-interpreter-chart-t: 2.3; }
97.5%, 100% { --aia-code-interpreter-chart-t: 0; }
}
@keyframes aia-code-interpreter-chart-run {
from { background-position: 0 -20%; }
to { background-position: 0 120%; }
}
@media (prefers-reduced-motion: reduce) {
.aia-code-interpreter-chart {
animation: none;
--aia-code-interpreter-chart-t: 2.3;
}
.aia-code-interpreter-chart-code::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.aia-code-interpreter-chart, .aia-code-interpreter-chart *, .aia-code-interpreter-chart::before, .aia-code-interpreter-chart::after, .aia-code-interpreter-chart *::before, .aia-code-interpreter-chart *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.