PAD · {chart}
Every chart,
Every chart,
drawn on the server.
One tag turns rows of JSON, YAML, CSV or PHP into an accessible SVG chart - lines, areas, streams, bars, funnels, pyramids, waterfalls, pies, waffles, marimekkos, parliaments, venns, gauges, radars, roses, bullets, histograms, violins, scatters, heatmaps, candlesticks, spirals, sankeys, chords, networks, treemaps, packs, org charts and gantt charts. No JavaScript, so it prints, caches and shows up in an e-mail.
- 46 kinds
- 69 examples
- 0 lines of JavaScript
Line
Change over timeArea & stream
Amounts adding up over time
Electricity by source stacked lays the areas on top of each other, the top edge the total. Visits by device percent stacks every year to 100% - the shift from desktop to mobile. Two years of listening stream: the genres swell and shrink around a wandering middle, in smooth curves. Temperatures in nine cities multiples: a small chart per city, all on one scale, in a grid.
Bars
Categories compared
Sales per month Columns from a zero baseline - the data CSV, between the tags. Online against the shop Several series side by side, a legend above. The energy mix per year stacked puts the series on top of each other. Profit and loss Negative values hang below the baseline. The most spoken languages hbar lays the bars down - the data XML, between the tags. A survey, answer by answer Horizontal and stacked: every answer a part of the bar. From revenue to profit waterfall: each step floats from where the one before ended.
Funnel & pyramid
Steps that narrowPie & donut
Parts of a wholeWaffle, marimekko & more
More ways to part a whole
Where a home's energy goes waffle: 100 squares shared out by the largest remainder. Phones by region and brand marimekko: each column as wide as its region, the brands to 100% inside. A house of 150 seats parliament: a dot per seat, the parties from left to right. Languages 1,000 students speak venn: three sets, every region with its own count. Cats, dogs or both venn: two circles whose overlap has the area of the homes with both.
Scatter & bubble
How two numbers relateHeatmap
Patterns in dense dataGauge & radar
Measures at a glanceRose & radial bars
Values around a centreDistributions
How values spread
Heights of 400 adults histogram: two bell curves together give two humps. Delivery times Whole days are counted in bins of whole days. Salary per team boxplot: quartiles, median, whiskers and the outlier. Reaction times, rested or not density: a smooth curve per group over one axis, the medians dashed. Exam scores per class violin: the shape of each class, quartiles and median inside - a split class shows its two humps.
Bullet, rings & areas
Measures against goals
A quarter against its targets bullet: the value as a bar, the target a line, grey bands from poor to good. Today's activity rings: a progress ring per goal, a goal from a field of each row. Five projects, per cent done Rings against the default goal of 100, the share in the legend. CO₂ per country proportional: a circle's area is the value, wrapping into a second line. The five oceans square draws squares instead, on one baseline.
Gantt
Tasks in timeFinance
Prices and two measures at onceSpiral
Cycles in a long seriesSankey
Flows from stage to stageNetwork
ConnectionsChord, arc & parallel
Flows, links and many measuresTrees & packs
Parts of a hierarchy
A company budget levels= nests the posts in their departments. What fills the disk A flat treemap: one level, one colour. The world's people A sunburst: continents inside, regions around them. The files of a project pack: circles in circles, a folder around its files, sized by kilobytes. Who reports to whom orgchart: a box per person under their boss, the job title as a second line.