graphing

Graphing

You write the plotting code. The kit provides the parts that should stay consistent across every chart: typography, color derivation from the background, the title and caption frame, and offline HTML packaging. Everything about the chart itself is your judgement applied to the data in front of you.

The primitives

Import chartkit by putting this skill's scripts/ directory on sys.path. Use its absolute path, not a relative path, since your working directory is the user's project. The examples below write it as /path/to/graphing/scripts; substitute the real path.

Relevant primitives:

• theme(bg, font): sets matplotlib rcParams and returns resolved colors. Foreground colors derive from background luminance, so a dark bg produces a correct dark chart. Fields: bg dark text muted grid spine accent secondary series font_css.
• palette(n, base): n colors. No base cycles the default series, a hex base builds a ramp from it, a list cycles the list.
• finish(ax, title, subtitle, source): The typographic frame. Left-aligned bold title, muted subtitle, small provenance caption.
• save(fig, stem, formats, dpi): Writes stem.png, stem.svg, or both. Returns the paths.
• write_html(out, data, component_js, title, bg, font): Self-contained interactive page. Inlines React, ReactDOM, react-is, and Recharts from third_party/ so the file opens offline. Your component reads window.__CHART_DATA__ and renders into #root.
• zero_fill_days(pairs) rolling_mean(values, w) log_floor(values): Small data helpers for the gotchas listed below. Use them only when they fit.

Steps

1. Look at the data and decide what it deserves. Shape, count, and meaning drive the choice: trends over time want lines or day bars, ranked categories want horizontal bars, parts of a whole with few slices can be a pie, correlation wants a scatter. Nothing limits you to those: stacked areas, dual axes, small multiples, annotated thresholds are all just code you write.