Lead the README with a themed light/dark recording of the example - #297
Merged
Conversation
The README sold an interactive product with a static image. Replace the hero with a real recording of the getting-started chart being panned, zoomed, and hovered, and put an explicit link to the live docs demo directly beneath it. The getting-started example now builds two million points from the standard library (seeded random walks) instead of six months of revenue, so the first snippet exercises the large-data path the highlights claim. Both traces take the decimated tier and reach the browser as a measured 54.0 KB payload. Light and dark recordings are served through a <picture> element, so the GIF follows the reader's GitHub theme; the dark chart sits on GitHub's own dark canvas and carries the client's dark chrome. Series colors are the validated categorical slots (blue/orange) rather than blue/green, which sat too close together for red-green colorblind readers. The recorded chart is built from the snippet the README prints, so the caption describes the code exactly.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe README adds a live demo link, replaces the getting-started chart with a seeded 100-million-point density-surface example, updates related explanations, and moves the benchmarks section later in the document. ChangesREADME refresh
Estimated code review effort: 1 (Trivial) | ~5 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@README.md`:
- Around line 8-10: Reconcile the live-demo link label with the surrounding
documentation’s 2,000,000-point claim: update the label to match the actual demo
count, or explicitly state that the linked demo uses one million points if that
is intentional.
- Around line 128-131: Update the README description near the payload-size claim
so the 54 KB figure is tied to a specific benchmark mode, dataset size, and
viewport using the harness’s payload_bytes output; if those benchmark details
are unavailable, remove the fixed 54 KB number and describe the payload
qualitatively instead.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: a3a58c40-6a8e-46fe-8d8e-f77a2c89847d
⛔ Files ignored due to path filters (2)
spec/assets/xy-pan-zoom-2m-dark.gifis excluded by!**/*.gifspec/assets/xy-pan-zoom-2m-light.gifis excluded by!**/*.gif
📒 Files selected for processing (1)
README.md
Merging this PR will not alter performance
Comparing 
Footnotes
|
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@README.md`:
- Around line 49-50: Update the README image markup around the xy-density
recording to use a picture element with separate light and dark sources selected
via prefers-color-scheme, while retaining the existing GIF as the fallback image
and preserving its alt text and presentation attributes.
- Around line 47-84: Replace the README getting-started example’s NumPy-based
100,000,000-point spiral generator with the documented seeded standard-library
random-walk generator producing 2,000,000 points. Update the related imports,
data construction, and chart title to match that example, while preserving the
existing chart rendering configuration unless the documented example requires
otherwise.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: f1c86984-e588-4513-a8c0-ebaaed23cfa4
⛔ Files ignored due to path filters (1)
spec/assets/xy-density-100m.gifis excluded by!**/*.gif
📒 Files selected for processing (1)
README.md
Comment on lines
+47
to
84
| Chart a hundred million points as a density surface: | ||
|
|
||
| ```javascript | ||
| await pyodide.loadPackage("micropip"); | ||
| ``` | ||
| <p align="center"> | ||
| <img src="spec/assets/xy-density-100m.gif" alt="A hundred-million-point spiral rendered as a density surface, zoomed and panned; each view is re-aggregated by the engine." width="900"> | ||
| </p> | ||
|
|
||
| ```python | ||
| import micropip | ||
|
|
||
| await micropip.install("xy") | ||
| ``` | ||
|
|
||
| ## Getting started | ||
|
|
||
| Create a small business chart: | ||
| import numpy as np | ||
|
|
||
| ```python | ||
| import xy | ||
|
|
||
| months = [1, 2, 3, 4, 5, 6] | ||
| revenue = [42, 45, 48, 51, 55, 59] | ||
| pipeline = [35, 38, 42, 40, 46, 50] | ||
|
|
||
| chart = xy.line_chart( | ||
| xy.line(months, revenue, name="revenue", color="#2563eb"), | ||
| xy.line(months, pipeline, name="pipeline", color="#16a34a"), | ||
| xy.x_axis(label="month"), | ||
| xy.y_axis(label="USD thousands"), | ||
| xy.legend(), | ||
| title="Revenue vs pipeline", | ||
| rng = np.random.default_rng(7) | ||
| n = 100_000_000 | ||
|
|
||
| r = 6.0 * rng.beta(1.2, 3.0, n) | ||
| theta = 2.9 * np.log1p(r) + rng.integers(0, 4, n) * (np.pi / 2) + rng.normal(0, 0.045 + 0.016 * r, n) | ||
|
|
||
| chart = xy.scatter_chart( | ||
| xy.scatter( | ||
| r * np.cos(theta), | ||
| r * np.sin(theta), | ||
| color=np.exp(-r / 2.2), | ||
| colormap="magma", | ||
| density=True, | ||
| opacity=0.3, | ||
| ), | ||
| xy.theme( | ||
| background="#0d1117", plot_background="#0d1117", grid_color="#21262d", | ||
| axis_color="#30363d", text_color="#e6edf3", | ||
| ), | ||
| title="100 million points", | ||
| class_name="dark", | ||
| ) | ||
| # chart.to_html("chart.html") | ||
| # chart.to_png("chart.png") | ||
| # chart.to_svg("chart.svg") | ||
| chart | ||
| ``` |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | 🏗️ Heavy lift
Align the getting-started example with the stated two-million-point standard-library demo.
This example now uses NumPy, a 100,000,000-point dataset, and a spiral distribution. The PR objective requires a seeded, standard-library random walk with 2,000,000 points. The current version also allocates multiple very large arrays and can require several GB of peak memory, making it unsuitable as a getting-started example.
Replace the generator and related copy/title with the documented two-million-point standard-library example.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` around lines 47 - 84, Replace the README getting-started example’s
NumPy-based 100,000,000-point spiral generator with the documented seeded
standard-library random-walk generator producing 2,000,000 points. Update the
related imports, data construction, and chart title to match that example, while
preserving the existing chart rendering configuration unless the documented
example requires otherwise.
This was referenced Jul 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The README sells an interactive charting library with only static images. The
getting-started section now leads with a real recording of its own example being
panned, zoomed, and hovered, and the header gains an explicit link to the live
docs demo — previously that demo was reachable only through a generic
"documentation" link. The XY logo stays where it was.
Getting started now exercises the large-data path
The first snippet built a six-point revenue chart, which matplotlib does fine
and which quietly undercuts the "built for large data" highlight. It now builds
two million points from the standard library:
No numpy, builds in ~0.6 s. Both traces take the
decimatedtier and reach thebrowser as a measured 54.0 KB payload (52.3 KB blob + 1.6 KB spec JSON)
rather than two million JSON numbers — the number in the prose comes from
measurement, per §2.
Light and dark
The recordings are served through a
<picture>element keyed onprefers-color-scheme, so the GIF follows the reader's GitHub theme and eachvisitor downloads only one. The dark chart sits on
#0d1117— GitHub's own darkcanvas — so it blends into the page instead of glaring, and carries the client's
dark chrome (
class_name="dark"; the dark modebar/tooltip key off that class,not the media query).
Series colors moved from blue/green to the validated categorical slots
blue
#2a78d6/ orange#eb6834(dark:#3987e5/#d95926). Blue/green sattoo close for red-green colorblind readers; the new pair measures ΔE 24.7 under
protanopia (≥8 target) and 33.6 unsimulated (≥15 floor), passing on both
surfaces.
Also in this PR
paragraph and the Pyodide/
micropipwalkthrough are gone.subsection), so the reader meets the API before the numbers.
Notes for review
caption "the chart built by the example below" is literal. The hover frame
shows the tooltip reading back an exact source row (
x: 578852,y: 697.5602) from 2M points at 210% zoom.sequence ends on the chart's own double-click reset).
ship light-only if that is too much.
ruff check,ruff format --check,scripts/check_claim_guardrails.py, and thefull
pre-commit run --all-filesall pass.Summary by CodeRabbit