);
}
/* ─── China map (real GeoJSON admin boundaries, fetched at runtime) ─── */
// Pinyin → Chinese province name mapping (for lookup in GeoJSON properties)
const PROV_CN = {
'Heilongjiang': '黑龙江省', 'Jilin': '吉林省', 'Liaoning': '辽宁省',
'Inner Mongolia': '内蒙古自治区', 'Xinjiang': '新疆维吾尔自治区',
'Tibet': '西藏自治区', 'Qinghai': '青海省', 'Gansu': '甘肃省',
'Ningxia': '宁夏回族自治区', 'Shaanxi': '陕西省', 'Shanxi': '山西省',
'Hebei': '河北省', 'Shandong': '山东省', 'Henan': '河南省',
'Sichuan': '四川省', 'Chongqing': '重庆市', 'Hubei': '湖北省',
'Anhui': '安徽省', 'Jiangsu': '江苏省', 'Hunan': '湖南省',
'Jiangxi': '江西省', 'Zhejiang': '浙江省', 'Fujian': '福建省',
'Guizhou': '贵州省', 'Yunnan': '云南省', 'Guangxi': '广西壮族自治区',
'Guangdong': '广东省', 'Hainan': '海南省', 'Beijing': '北京市',
'Tianjin': '天津市', 'Shanghai': '上海市', 'Hong Kong': '香港特别行政区',
'Macau': '澳门特别行政区', 'Taiwan': '台湾省'
};
// Single-character license-plate abbreviation per province
const PROV_PLATE = {
'Heilongjiang': '黑', 'Jilin': '吉', 'Liaoning': '辽',
'Inner Mongolia': '蒙', 'Xinjiang': '新', 'Tibet': '藏',
'Qinghai': '青', 'Gansu': '甘', 'Ningxia': '宁', 'Shaanxi': '陕',
'Shanxi': '晋', 'Hebei': '冀', 'Shandong': '鲁', 'Henan': '豫',
'Jiangsu': '苏', 'Anhui': '皖', 'Zhejiang': '浙', 'Fujian': '闽',
'Jiangxi': '赣', 'Hubei': '鄂', 'Hunan': '湘', 'Sichuan': '川',
'Chongqing': '渝', 'Guizhou': '贵', 'Yunnan': '云', 'Guangxi': '桂',
'Guangdong': '粤', 'Hainan': '琼', 'Beijing': '京', 'Tianjin': '津',
'Shanghai': '沪', 'Hong Kong': '港', 'Macau': '澳', 'Taiwan': '台'
};
/* Albers-like equal-area projection for China, returns [x,y] in viewBox units */
/* Equirectangular-style projection tuned for China.
Matches the flatter look of the chinaPlates reference (standard ~35°N parallel).
Returns [x,y] in viewBox units. */
function projectChina(lon, lat, vbW, vbH) {
// Bounds of mainland China
const LON_MIN = 73, LON_MAX = 135; // ~62° span
const LAT_MIN = 18, LAT_MAX = 54; // ~36° span
const phi0 = 35 * Math.PI / 180; // standard parallel
const k = Math.cos(phi0); // x-compression at center latitude
// Project lon/lat to a flat plane (degrees -> pseudo-meters)
const xp = (lon - (LON_MIN + LON_MAX) / 2) * k;
const yp = -(lat - (LAT_MIN + LAT_MAX) / 2);
// Fit-to-viewBox scaling
const xSpan = (LON_MAX - LON_MIN) * k;
const ySpan = (LAT_MAX - LAT_MIN);
const scale = Math.min(vbW * 0.95 / xSpan, vbH * 0.95 / ySpan);
const x = xp * scale + vbW / 2;
const y = yp * scale + vbH * 0.52;
return [x, y];
}
function geoToPath(geometry, vbW, vbH) {
const draw = (rings) => rings.map(ring => {
return ring.map((pt, i) => {
const [x, y] = projectChina(pt[0], pt[1], vbW, vbH);
return (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1);
}).join('') + 'Z';
}).join('');
if (geometry.type === 'Polygon') return draw(geometry.coordinates);
if (geometry.type === 'MultiPolygon') {
return geometry.coordinates.map(poly => draw(poly)).join('');
}
return '';
}
function centroidOfGeom(geometry, vbW, vbH) {
// Use polygon area-weighted centroid of the LARGEST ring only.
let ring = [];
if (geometry.type === 'Polygon') {
ring = geometry.coordinates[0] || [];
} else if (geometry.type === 'MultiPolygon') {
// pick the polygon with largest absolute area (in projected coords)
let bestRing = null, bestArea = 0;
geometry.coordinates.forEach(poly => {
const r = poly[0];
// shoelace area in projected coords
let a = 0;
for (let i = 0; i < r.length - 1; i++) {
const [x1, y1] = projectChina(r[i][0], r[i][1], vbW, vbH);
const [x2, y2] = projectChina(r[i+1][0], r[i+1][1], vbW, vbH);
a += x1 * y2 - x2 * y1;
}
a = Math.abs(a / 2);
if (a > bestArea) { bestArea = a; bestRing = r; }
});
ring = bestRing || [];
}
if (ring.length < 3) return [vbW / 2, vbH / 2];
// area-weighted centroid (proper polygon centroid)
let cx = 0, cy = 0, A = 0;
for (let i = 0; i < ring.length - 1; i++) {
const [x1, y1] = projectChina(ring[i][0], ring[i][1], vbW, vbH);
const [x2, y2] = projectChina(ring[i+1][0], ring[i+1][1], vbW, vbH);
const f = x1 * y2 - x2 * y1;
cx += (x1 + x2) * f;
cy += (y1 + y2) * f;
A += f;
}
A = A / 2;
if (Math.abs(A) < 1e-6) return [vbW / 2, vbH / 2];
return [cx / (6 * A), cy / (6 * A)];
}
function ChinaMap({ herbs, hovered, setHovered, onProvinceClick }) {
const [geo, setGeo] = useState(null);
const VB_W = 820, VB_H = 600;
useEffect(() => {
// Try a couple of CDN-hosted GeoJSON sources for China provinces
const sources = ['china-provinces.json'];
(async () => {
for (const url of sources) {
try {
const r = await fetch(url);
if (!r.ok) continue;
const data = await r.json();
setGeo(data);
return;
} catch (e) { /* try next */ }
}
})();
}, []);
const counts = useMemo(() => {
const m = {};
herbs.forEach(h => { m[h.origin] = (m[h.origin] || 0) + 1; });
return m;
}, [herbs]);
/* Extract feature → pinyin label mapping */
const features = useMemo(() => {
if (!geo || !geo.features) return [];
return geo.features.filter(f => {
// Drop the 9-dash-line feature (adcode 100000_JD, no name)
const props = f.properties || {};
const ad = String(props.adcode || '');
if (ad.includes('JD') || ad === '100000_JD') return false;
if (!props.name) return false;
return true;
}).map(f => {
const props = f.properties || {};
const cn = props.name || props.NAME_1 || props.fullname || '';
// Match against PROV_CN values, allowing partial matches
let pinyin = null;
for (const [py, zh] of Object.entries(PROV_CN)) {
if (cn === zh || cn.startsWith(zh.slice(0, 2)) || zh.startsWith(cn)) {
pinyin = py;
break;
}
}
const path = geoToPath(f.geometry, VB_W, VB_H);
const [cx, cy] = centroidOfGeom(f.geometry, VB_W, VB_H);
return { id: pinyin || cn, cn, pinyin, path, cx, cy, count: pinyin ? (counts[pinyin] || 0) : 0 };
});
}, [geo, counts]);
return (
道地药材
By Region
Hover a region to see how many herbs in this collection trace their finest grade to that province.
);
}
/* ─── Story mode controller ─── */
const STORY_STEPS = [
{ view: 'rarity', title: 'From staple to treasure', note: 'Reorder by rarity. Notice the long tail.' },
{ view: 'category', title: 'How they work', note: 'Tonifying, heat-clearing, blood-moving — the classical functions.' },
{ view: 'nature', title: 'Hot or cold?', note: 'Each herb has a thermal nature that guides its use.' },
{ view: 'taste', title: 'Five tastes', note: 'Bitter drains, sweet tonifies, sour astringes…' },
{ view: 'part', title: 'Roots, flowers, fungi', note: 'The medicine can be any part — even an animal bezoar.' },
{ view: 'origin', title: 'Terroir', note: '\u9053\u5730 — the right province makes the herb.' },
{ view: 'price', title: 'A market of extremes', note: 'From three dollars a kilo to sixty thousand.' }
];
/* ─── Main app ─── */
function App() {
const [view, setView] = useState('category');
const [search, setSearch] = useState('');
const [hover, setHover] = useState(null); // {herb, x, y}
const [pinned, setPinned] = useState(null); // pinned detail card on click
const [openCluster, setOpenCluster] = useState(null); // cluster id whose herb-list panel is open
const [openProvince, setOpenProvince] = useState(null); // province pinyin whose herb-list panel is open
const [compare, setCompare] = useState([]); // herb ids
const [compareMode, setCompareMode] = useState(false);
const [story, setStory] = useState(null); // index into STORY_STEPS
const [mapHover, setMapHover] = useState(null);
const [viewport, setViewport] = useState({ width: 1200 });
const chartRef = useRef(null);
/* viewport tracking */
useEffect(() => {
const onResize = () => {
if (chartRef.current) setViewport({ width: chartRef.current.clientWidth });
};
onResize();
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
/* dismiss pinned card on Esc */
useEffect(() => {
if (!pinned) return;
const onKey = e => { if (e.key === 'Escape') setPinned(null); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [pinned]);
/* scroll-reveal on .reveal sections */
useEffect(() => {
const els = document.querySelectorAll('.reveal');
if (!('IntersectionObserver' in window)) {
els.forEach(el => el.classList.add('in'));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(en => {
if (en.isIntersecting) {
en.target.classList.add('in');
io.unobserve(en.target);
}
});
}, { rootMargin: '0px 0px -10% 0px', threshold: 0.08 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
/* filter by search + map hover */
const filteredHerbs = useMemo(() => {
const q = search.trim().toLowerCase();
return HERBS.filter(h => {
if (mapHover && h.origin !== mapHover) return false;
if (!q) return true;
return (
h.zh.includes(q) ||
h.pinyin.toLowerCase().includes(q) ||
h.en.toLowerCase().includes(q) ||
h.latin.toLowerCase().includes(q) ||
(h.uses || '').toLowerCase().includes(q)
);
});
}, [search, mapHover]);
const dimSet = useMemo(() => {
if (!search.trim() && !mapHover) return null;
return new Set(filteredHerbs.map(h => h.id));
}, [filteredHerbs, search, mapHover]);
/* layout */
const layout = useMemo(() => {
return computeLayout(view, viewport, HERBS);
}, [view, viewport]);
/* story mode auto-advance */
useEffect(() => {
if (story === null) return;
const step = STORY_STEPS[story];
setView(step.view);
const t = setTimeout(() => {
setStory(s => (s === null ? null : (s + 1) % STORY_STEPS.length));
}, 5200);
return () => clearTimeout(t);
}, [story]);
/* compare handlers */
const onHerbClick = (h) => {
if (compareMode) {
setCompare(prev => {
if (prev.includes(h.id)) return prev.filter(id => id !== h.id);
if (prev.length >= 3) return [...prev.slice(1), h.id];
return [...prev, h.id];
});
return;
}
setPinned(p => p === h.id ? null : h.id);
};
const compareItems = compare.map(id => HERBS.find(h => h.id === id)).filter(Boolean);
const currentView = VIEWS[view];
return (
<>
{/* Editorial intro */}
A Visual Catalogue · 2026
中药本草
The Herbs of Chinese Medicine
One hundred and ninety-four plants, fungi, minerals and animal parts — from the ginger in your kitchen to a fungus that grows from a Himalayan caterpillar — laid out by what they do, where they come from, and what they cost.
By The Studio · Drawings rendered in the manner of classical běncǎo woodblocks
本草
For two thousand years Chinese physicians have catalogued the world by what it can do for the body. The earliest classic, the Shénnóng Běncǎojīng, lists 365 substances graded into three classes: superior herbs that nourish life, middle herbs that supplement nature, and lower herbs that attack disease. The categories below are descendants of that scheme.
Each circle is a single herb. Hover for its name in 中文 and pīnyīn, the meridians it enters, and the diseases it treats. Use the controls at top to recompose the catalogue — by category, by rarity, by what part of the plant or animal becomes the medicine, by where in China the finest material grows, or by what it sells for at market.