viewof stacked_plot_labeled = (async () => { // build rows array const rows = []; const idToName = typeof fields !== 'undefined' && Array.isArray(fields) ? Object.fromEntries( fields.map((f) => [f.id ?? f, f.display_name ?? f.id ?? f]), ) : {}; for (const [id, arr] of Object.entries(counts_by_year_all || {})) { const category = idToName[id] || id; for (const r of arr || []) { rows.push({ year: r.year, category, works_count: r.works_count ?? 0, cited_by_count: r.cited_by_count ?? 0, }); } } rows.sort((a, b) => a.year - b.year); // years and categories (initial) const years = Array.from(new Set(rows.map((d) => d.year))).sort( (a, b) => a - b, ); const lastYear = years[years.length - 1]; // derive unique categories const categories = Array.from(new Set(rows.map((d) => d.category))); // Create an explicit, deterministic color map to avoid collisions (biology vs medicine). // Use a categorical palette and assign by category name (stable across runs). const palette = [ '#4E79A7', '#F28E2B', '#E15759', '#76B7B2', '#59A14F', 'grey', '#B07AA1', '#FF9DA7', '#9C755F', '#BAB0AC', '#8DD3C7', '#7e7e25', '#BEBADA', '#FB8072', '#80B1D3', ]; // stable hash function to pick color index by category name const hash = (s) => { let h = 2166136261 >>> 0; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24); } return (h >>> 0) % palette.length; }; const colorMap = Object.fromEntries( categories.map((c) => [c, palette[hash(c)]]), ); // If you want to force specific colors for known fields: if (colorMap['biology']) colorMap['biology'] = '#4E79A7'; // blue if (colorMap['medicine']) colorMap['medicine'] = '#E15759'; // red // pivot values by year/category (numeric) const pivot = new Map(); for (const y of years) pivot.set(y, Object.fromEntries(categories.map((c) => [c, 0]))); for (const r of rows) pivot.get(r.year)[r.category] = Number(r[y_var] ?? 0); // Use d3 stack to compute stacking order and y0/y1 for lastYear, to get visual order const valuesMatrix = years.map((y) => categories.map((c) => pivot.get(y)[c])); // Compute stack with d3.stack to mirror Plot.stackY stacking const stack = d3 .stack() .keys(d3.range(categories.length)) .order(d3.stackOrderNone) .offset(d3.stackOffsetNone); const stacked = stack(valuesMatrix); // stacked is array per category index with [ [y0,y1] ... over years ] // Find stacking at lastYear index (last index of years) const lastIndex = years.length - 1; const labelData = []; for (let i = 0; i < categories.length; i++) { const seg = stacked[i][lastIndex]; const y0 = seg[0]; const y1 = seg[1]; const yMid = (y0 + y1) / 2; labelData.push({ category: categories[i], y0, y1, yMid, value: pivot.get(lastYear)[categories[i]] || 0, stackIndex: i, }); } // Order labelData in the same visual order from top to bottom as the stacked areas at lastYear const visualOrder = labelData.slice().sort((a, b) => b.yMid - a.yMid); // measure label widths to set marginRight; larger font for labels //const labelFontSize = 14; const svgNS = 'http://www.w3.org/2000/svg'; const meas = document.createElementNS(svgNS, 'svg'); const textEl = document.createElementNS(svgNS, 'text'); textEl.setAttribute('font-size', '18px'); textEl.setAttribute('font-family', 'sans-serif'); meas.appendChild(textEl); document.body.appendChild(meas); let maxLabelWidth = 0; for (const d of labelData) { textEl.textContent = d.category; const bbox = textEl.getBBox(); if (bbox.width > maxLabelWidth) maxLabelWidth = bbox.width; } document.body.removeChild(meas); const labelPadding = 8; const marginRight = Math.max( 20, Math.ceil(maxLabelWidth + labelPadding + 18), ); // Build the plot. Keep left margin small to align chart to left. const width = 1400; const height = 700; const marginLeft = 60; // compute screen y positions for each category at lastYear (use the stacked yMid values) const yScale = d3.scaleLinear() .domain([0, d3.max(stacked[stacked.length-1].map((d,i)=>d[1]))]) // overall max .range([height - 40, 20]); // match Plot.plot inner vertical range (adjust if needed) // build simple labels array positioned at the right year coordinate const labelRows = visualOrder.map(d => ({ category: d.category, y: d.yMid, x: lastYear // place at last year so Plot places it at right edge })); const plot = Plot.plot({ width, height, style: "font-size: 20px;", marginLeft, marginRight, color: { domain: Object.keys(colorMap), range: Object.values(colorMap), legend: false, }, x: { label: 'year', tickFormat: (d) => String(d), ticks: years }, y: { label: '↑ Works', nice: true, ticks: 5, tickFormat: d3.format('~s'), labelFontSize: 22 }, marks: [ Plot.areaY(rows, Plot.stackY({ x: 'year', y: y_var, fill: 'category' })), Plot.ruleY([0]), // simple text labels placed at the last year x and stacked yMid Plot.text(labelRows, { x: 'x', y: (d) => d.y, text: 'category', fill: (d) => colorMap[d.category], dy: '0.35em', textAnchor: 'start', fontSize: 14 }) ], }); return plot; })();