A considered imperfection
Tune roughness, fill patterns and stroke weight. Keep it crisp or let the pencil wander.
AN OPEN-SOURCE DRAWING TOOLKIT
Serious data.
A human touch.
Hand-drawn charts, expressive lettering, and beautifully imperfect shapes. Bring a little character to the things you build.
TypeScript·SVG + Canvas·Seeded & repeatable
a little less rigid.
A fresh perspective
Same data.
More character.
More character.
DRAWN BY BORROWDALE · ILLUSTRATIVE DATA
FOUR SMALL PACKAGES.01 @borrowdale/core ↗02 @borrowdale/text ↗03 @borrowdale/fills ↗04 @borrowdale/charts ↗
PRECISION, WITH PERSONALITY
Made by code.
Feels made by hand.
Not a filter on top of a chart. BorrowdaleJS lays out data, measures text, and builds every stroke from the same drawing language. A sketchbook feel, with numbers you can still read.
The same sketch, every time
Seeded drawings and DOM-free layout. Share the same input between server and browser.
Words belong in the picture
Measured Excalifont labels, from a tiny axis tick to a handwritten annotation.
THREE OPEN-DATA NOTEBOOKS
Real numbers. New perspectives.
A FEW LINES. YOUR OWN DRAWING.
Start with an idea.
Leave with a chart.
A plain JavaScript spec describes the data. BorrowdaleJS handles the marks, scales and labels. Every example in the playground comes with its working code.
Work in progress, ready to explore.
Browse the playground →The packages are not published yet. This site runs directly from the workspace—no npm release needed.
nvm use
npm ci
npm run siteimport { layoutChart, toSvgChart } from '@borrowdale/charts';
import { excalifontFiles } from '@borrowdale/text/excalifont-files';
const spec = {
"width": 480,
"height": 280,
"title": "Ideas per day",
"legend": "none",
"fontSize": 12,
"axes": {
"x": {
"type": "band",
"categories": [
"Mon",
"Tue",
"Wed"
]
},
"y": {
"type": "linear",
"grid": true
}
},
"style": {
"roughness": 0.8,
"fillStyle": "solid"
},
"series": [
{
"type": "bar",
"name": "Ideas",
"data": [
12,
19,
15
],
"color": "#de9b24"
}
],
"seed": 7
};
const svg = toSvgChart(layoutChart(spec), { fontFiles: excalifontFiles });
document.querySelector('#chart').innerHTML = svg;A little graphite goes a long way.
Named for the Lake District valley where the story of the pencil began.
Find your next mark ↗