25:["$","title",null,{"children":"Test font export | Data Visualisation Design | Observable"}] 49:Ta50,aaveLogo = (width = 115, color = aave.dark) => { const scale = width / 833; const h = Math.round(139 * scale); return html``; }4a:T670,aaveChart = (chart, { title = "", subtitle = "", width = 640, height = 400, bg = aave.ghost, textColor = aave.dark, logoColor = null, logoWidth = 90, gradient = null, accentWord = null } = {}) => { const g = grid(width, height); //const resolvedLogColor = logoColor || logoPairings[bg] || aave.dark; const bgStyle = gradient ? `background: ${gradient};` : `background: ${bg};`; // Build title HTML — supports one Aguzzo accent word let titleHtml = title; if (accentWord && title.includes(accentWord)) { titleHtml = title.replace( accentWord, `${accentWord}` ); } return html`

${title ? html`

${html`${titleHtml}`}

` : ''} ${subtitle ? html`

${subtitle}

` : ''}

${chart}

`; }4b:T5ef,{ const w = 640; const h = 500; const margin = { top: 70, right: 24, bottom: 80, left: 24 }; const chart = Plot.plot({ width: w, height: h, marginTop: margin.top, marginRight: margin.right, marginBottom: margin.bottom, marginLeft: margin.left, x: { label: null, tickSize: 0, tickPadding: 8 }, y: { label: null, ticks: 0 }, style: { fontFamily: "'Repro Mono', monospace", fontSize: "11px", textTransform: "uppercase", letterSpacing: "0.1em", background: aave.richPurple, color: aave.banana }, marks: [ Plot.barY(testData, { x: "chain", y: "tvl", fill: aave.banana, rx: 4 }), Plot.text(testData, { x: "chain", y: "tvl", text: d => fmt.B(d.tvl), dy: -12, fontFamily: "'Repro Mono', monospace", fontSize: 11, fill: aave.banana }), Plot.ruleY([0], { stroke: aave.banana, strokeOpacity: 0.15 }) ] }); // Wrap in a container with title top-left and logo bottom-right const container = html`

Test Chart

${chart}

`; return container; }4c:T256a,{ // ── Wait for fonts used in this cell ──────────────────────────── await Promise.all([ document.fonts.load("700 28px 'Repro'"), document.fonts.load("500 18px 'Repro'"), document.fonts.load("italic 400 15px 'Aguzzo'"), document.fonts.load("italic 700 13px 'Aguzzo'"), document.fonts.load("400 11px 'Repro Mono'") ]); // ── Fake data ─────────────────────────────────────────────────── const startDate = new Date("2025-01-01"); const fakeData = d3.range(90).map(i => { const date = d3.timeDay.offset(startDate, i); const supply = 200e6 + i * 12e6 + Math.sin(i * 0.3) * 40e6; return { date, supply }; }); // ── Dimensions ────────────────────────────────────────────────── const W = 960, H = 640; const pmL = 100, pmR = 40, pmT = 150, pmB = 80; // ── Colours ───────────────────────────────────────────────────── const bg = aave.ghost; const textCol = aave.deepPurple; const lineCol = aave.purple; const axisCol = aave.deepPurple; const gridCol = "rgba(76,31,94,0.12)"; // ── Scales ────────────────────────────────────────────────────── const yField = "supply"; const xDomain = d3.extent(fakeData, d => d.date); const yMax = d3.max(fakeData, d => d[yField]) * 1.08; const yDomain = [0, yMax]; const yTicks = d3.scaleLinear().domain(yDomain).ticks(5); const xTicks = d3.timeWeek.every(2).range(xDomain[0], xDomain[1]); const fmtDateCap = d => d3.timeFormat("%b %d")(d).toUpperCase(); const fmtValue = v => "$" + d3.format(".2s")(v).replace(/G/, "B"); const last = fakeData[fakeData.length - 1]; // ── Build a raw SVG (no Plot figure wrapper) ──────────────────── const svgEl = d3.create("svg") .attr("viewBox", `0 0 ${W} ${H}`) .attr("width", "100%") .attr("height", "auto") .style("display", "block") .style("background", bg) .style("border-radius", "8px"); const svg = svgEl; // ── Gradients ─────────────────────────────────────────────────── const defs = svg.append("defs"); const ag = defs.append("linearGradient") .attr("id", "areaGrad").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 1); ag.append("stop").attr("offset", "0%").attr("stop-color", lineCol).attr("stop-opacity", 0.5); ag.append("stop").attr("offset", "100%").attr("stop-color", lineCol).attr("stop-opacity", 0.02); const lg = defs.append("linearGradient") .attr("id", "lineGrad").attr("x1", 0).attr("y1", 0).attr("x2", 1).attr("y2", 0) .attr("gradientUnits", "objectBoundingBox"); lg.append("stop").attr("offset", "0%").attr("stop-color", lineCol).attr("stop-opacity", 0.1); lg.append("stop").attr("offset", "60%").attr("stop-color", lineCol).attr("stop-opacity", 1); lg.append("stop").attr("offset", "100%").attr("stop-color", lineCol).attr("stop-opacity", 1); // ── Scales for positioning ────────────────────────────────────── const xScale = d3.scaleTime().domain(xDomain).range([pmL, W - pmR]); const yScale = d3.scaleLinear().domain(yDomain).range([H - pmB, pmT]); // ── Grid lines ────────────────────────────────────────────────── yTicks.forEach(t => { svg.append("line") .attr("x1", pmL).attr("x2", W - pmR) .attr("y1", yScale(t)).attr("y2", yScale(t)) .attr("stroke", t === 0 ? axisCol : gridCol) .attr("stroke-width", t === 0 ? 1 : 0.5); }); // ── Y axis labels ────────────────────────────────────────────── yTicks.forEach(t => { svg.append("text") .attr("x", pmL - 10).attr("y", yScale(t)) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .attr("font-family", "'Repro Mono', monospace") .attr("font-size", 11).attr("font-weight", 400) .attr("fill", axisCol) .attr("text-transform", "uppercase") .attr("letter-spacing", "0.10em") .text(t === 0 ? "0" : "$" + d3.format(".2s")(t).replace(/G/, "B")); }); // ── X axis labels ────────────────────────────────────────────── const xAxisY = H - pmB; svg.append("line") .attr("x1", pmL).attr("x2", W - pmR) .attr("y1", xAxisY).attr("y2", xAxisY) .attr("stroke", axisCol).attr("stroke-width", 1); xTicks.forEach(t => { const tx = xScale(t); svg.append("line") .attr("x1", tx).attr("x2", tx) .attr("y1", xAxisY).attr("y2", xAxisY + 6) .attr("stroke", axisCol).attr("stroke-width", 1); svg.append("text") .attr("x", tx).attr("y", xAxisY + 20) .attr("text-anchor", "middle") .attr("font-family", "'Repro Mono', monospace") .attr("font-size", 11).attr("font-weight", 400) .attr("fill", axisCol) .attr("text-transform", "uppercase") .attr("letter-spacing", "0.10em") .text(fmtDateCap(t)); }); // ── Area ──────────────────────────────────────────────────────── const area = d3.area() .x(d => xScale(d.date)) .y0(yScale(0)) .y1(d => yScale(d[yField])) .curve(d3.curveMonotoneX); svg.append("path") .attr("d", area(fakeData)) .attr("fill", "url(#areaGrad)"); // ── Line ──────────────────────────────────────────────────────── const line = d3.line() .x(d => xScale(d.date)) .y(d => yScale(d[yField])) .curve(d3.curveMonotoneX); svg.append("path") .attr("d", line(fakeData)) .attr("fill", "none") .attr("stroke", "url(#lineGrad)") .attr("stroke-width", 2); // ── End dot ───────────────────────────────────────────────────── const dotX = xScale(last.date); const dotY = yScale(last[yField]); svg.append("circle") .attr("cx", dotX).attr("cy", dotY).attr("r", 5) .attr("fill", lineCol).attr("stroke", lineCol) .attr("stroke-width", 1.5).attr("stroke-opacity", 0.5); // ── Title — Repro 700 ────────────────────────────────────────── svg.append("text") .attr("x", 40).attr("y", 40) .attr("dominant-baseline", "hanging") .attr("font-family", "'Repro', sans-serif") .attr("font-weight", 700).attr("font-size", 28) .attr("fill", textCol) .text("Font test Chart"); // ── Subtitle — Repro 500 ─────────────────────────────────────── const sub = svg.append("text") .attr("x", 40).attr("y", 76) .attr("dominant-baseline", "hanging") .attr("font-family", "'Repro', sans-serif") .attr("font-weight", 500).attr("font-size", 18) .attr("fill", textCol).attr("opacity", 0.8); sub.append("tspan").text("Current value\u00A0"); sub.append("tspan").attr("fill", aave.purple).text(fmtValue(last[yField])); // ── Tagline — Aguzzo 400 italic ──────────────────────────────── svg.append("text") .attr("x", 40).attr("y", 106) .attr("dominant-baseline", "hanging") .attr("font-family", "'Aguzzo', serif") .attr("font-style", "italic") .attr("font-weight", 400).attr("font-size", 15) .attr("fill", textCol).attr("opacity", 0.55) .text("Testing all fonts in one chart"); // ── Dot label — Aguzzo 700 bold italic ───────────────────────── // ── Dot label — Aguzzo 700 bold italic ───────────────────────── svg.append("text") .attr("x", dotX - 12).attr("y", dotY - 8) .attr("text-anchor", "end") .attr("dominant-baseline", "auto") .attr("font-family", "'Aguzzo', serif") .attr("font-style", "italic") .attr("font-weight", 700).attr("font-size", 13) .attr("fill", aave.purple) .text(fmtValue(last[yField]) + " \u2190 Latest"); // ── Footer — Repro Mono ──────────────────────────────────────── svg.append("text") .attr("x", pmL).attr("y", H - 20) .attr("dominant-baseline", "auto") .attr("font-family", "'Repro Mono', monospace") .attr("font-weight", 400).attr("font-size", 10) .attr("fill", axisCol).attr("opacity", 0.4) .attr("letter-spacing", "0.12em") .text("REPRO 700 · REPRO 500 · AGUZZO 400i · AGUZZO 700i · REPRO MONO 400"); return svg.node(); }4d:[{"id":"9a8f6ba11814d7098eb2b80dd4b50370fc48e193caff9d65951e628de7b9e799ace9becf87373d32b26cc7a451d9b53ba72a87b860adb6ceda5a235d6cebeb77","href":"https://static.observableusercontent.com/files/9a8f6ba11814d7098eb2b80dd4b50370fc48e193caff9d65951e628de7b9e799ace9becf87373d32b26cc7a451d9b53ba72a87b860adb6ceda5a235d6cebeb77","name":"AaveAguzzo-BoldItalic-2.woff2","type":"font/woff2","lastModified":1774967882796.51,"size":75160},{"id":"bb49dc0fdf2cc1857ce5e61ce2c9d3f0c5846a58041eb372ede696d72495e4aadc5eff8d438238d737c3ddd5232de98c6b9c7b8983d231871dce2a3006f8c36c","href":"https://static.observableusercontent.com/files/bb49dc0fdf2cc1857ce5e61ce2c9d3f0c5846a58041eb372ede696d72495e4aadc5eff8d438238d737c3ddd5232de98c6b9c7b8983d231871dce2a3006f8c36c","name":"AaveAguzzo-RegularItalic.woff2","type":"font/woff2","lastModified":1774967882796.51,"size":75176},{"id":"f79ce0879e6b3ded75af07a4687a664cff078eec6f45376cc3239dd2e9bc4766a14aa5fedcf26472f8960b2aea3824c9562c22e0da4a5d11b5fc752107d59b1f","href":"https://static.observableusercontent.com/files/f79ce0879e6b3ded75af07a4687a664cff078eec6f45376cc3239dd2e9bc4766a14aa5fedcf26472f8960b2aea3824c9562c22e0da4a5d11b5fc752107d59b1f","name":"AaveReproMonoVariable@1.woff2","type":"font/woff2","lastModified":1774967882796.51,"size":291384},{"id":"f60d3f49dedb960fb6548e5c5ea2686922c2ad82ca099cbbabd7198d53f908460f3adb76cdd83dcf9b26edded941d89e3beed7acaed37971aaaa395e7da87c36","href":"https://static.observableusercontent.com/files/f60d3f49dedb960fb6548e5c5ea2686922c2ad82ca099cbbabd7198d53f908460f3adb76cdd83dcf9b26edded941d89e3beed7acaed37971aaaa395e7da87c36","name":"AaveReproVariable@1.woff2","type":"font/woff2","lastModified":1774967882796.51,"size":866728}] 29:{"id":"534edff75e0c67ad","slug":null,"title":"Test font export","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-03-31T14:38:02.796Z","update_time":"$D2026-03-31T15:03:45.074Z","view_time":null,"first_public_time":"$D2026-03-31T15:38:06.941Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"1c0eacfe4b65f783","login":"data-visualisation-design","name":"Data Visualisation Design","avatar_url":"https://avatars-next.observableusercontent.com/497105c95ef0f6b1ada7bd6dcbc47d441aa80835d08ea8826c3eda122f4ae478","tier":"enterprise_2024","bio":"","followed_by_you":false,"follows_you":false},"version":380,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e29451e20bd9dcb5","login":"muskeen3","name":"Muskeen","avatar_url":"https://avatars-next.observableusercontent.com/eeab01f13d1fc06478d5aa088b24e83686776c142a6171482417d2973dd8539d","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"e29451e20bd9dcb5","login":"muskeen3","name":"Muskeen","avatar_url":"https://avatars-next.observableusercontent.com/eeab01f13d1fc06478d5aa088b24e83686776c142a6171482417d2973dd8539d","tier":null,"role":"editor"},{"type":"team","id":"1c0eacfe4b65f783","login":"data-visualisation-design","name":"Data Visualisation Design","avatar_url":"https://avatars-next.observableusercontent.com/497105c95ef0f6b1ada7bd6dcbc47d441aa80835d08ea8826c3eda122f4ae478","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Test font export","cells":[{"id":0,"value":"# Test font export","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"# Load in fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"reproUrl = FileAttachment(\"AaveReproVariable@1.woff2\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"reproMonoUrl = FileAttachment(\"AaveReproMonoVariable@1.woff2\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"aguzzoRegItalicUrl = FileAttachment(\"AaveAguzzo-RegularItalic.woff2\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"aguzzoBoldItalicUrl = FileAttachment(\"AaveAguzzo-BoldItalic-2.woff2\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"# load font styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"# Gradients","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"gradients = ({\n sky: \"linear-gradient(180deg, #978EFF 0%, #EFEDFF 50%, #F9F8FF 96%)\",\n rise: \"linear-gradient(180deg, #4C1F5E 1%, #A3A1FF 34%, #EFFFA8 68%, #99F984 100%)\",\n sunset: \"linear-gradient(180deg, #4C1F5E 0%, #C18FFF 49%, #9896FF 80%, #E2E0FF 100%)\",\n sunrise: \"linear-gradient(180deg, #C18FFF 0%, #FFB0E8 62%, #FFB863 100%)\",\n night: \"linear-gradient(180deg, #030303 0%, #4C1F5E 54%, #8075FF 88%, #A3A1FF 100%)\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"# Colour Tokens","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"aave = ({\n // Core purples\n purple: \"#978EFF\",\n warmPurple: \"#C18FFF\",\n lilac: \"#BAB7FF\",\n richPurple: \"#8075FF\",\n dark: \"#251D2B\",\n fadedLilac: \"#D0CEFF\",\n deepPurple: \"#4C1F5E\",\n\n // Highlighters\n banana: \"#EFFFA8\",\n money: \"#99F984\",\n matcha: \"#80FFB9\",\n sunshine: \"#FFB863\",\n oldMoney: \"#26471F\",\n\n // Neutrals\n calm: \"#ECE0D1\",\n bone: \"#F6F7F4\",\n flatWhite: \"#FFFFFF\",\n ghost: \"#EFEDFF\",\n\n // Accent\n heart: \"#FFB0E8\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"# Chart Palettes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"categorical = [\n aave.purple,\n aave.banana,\n aave.money,\n aave.warmPurple,\n aave.sunshine,\n aave.matcha,\n aave.richPurple\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"sequentialPurple = [\n aave.fadedLilac,\n aave.lilac,\n aave.purple,\n aave.richPurple,\n aave.deepPurple\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"friendly = ({\n bg: aave.ghost,\n text: aave.dark,\n series: [aave.purple, aave.warmPurple, aave.banana, aave.money]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"reliable = ({\n bg: aave.dark,\n text: aave.bone,\n series: [aave.purple, aave.lilac, aave.warmPurple, aave.fadedLilac]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"boldTone = ({\n bg: aave.richPurple,\n text: aave.banana,\n series: [aave.banana, aave.money, aave.matcha, aave.flatWhite]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"# Number Formatting Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"fmt = ({\n M: (d) => `$${(d / 1e6).toFixed(1)}M`,\n B: (d) => `$${(d / 1e9).toFixed(1)}B`,\n K: (d) => `$${(d / 1e3).toFixed(0)}K`,\n pct: (d) => `${d.toFixed(1)}%`,\n usd: (d) => {\n if (d >= 1e9) return `$${(d / 1e9).toFixed(1)}B`;\n if (d >= 1e6) return `$${(d / 1e6).toFixed(1)}M`;\n if (d >= 1e3) return `$${(d / 1e3).toFixed(0)}K`;\n return `$${d.toFixed(0)}`;\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"# Typography Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"type = ({\n title: \"font-family: 'Repro'; font-weight: 700;\",\n subtitle: \"font-family: 'Repro'; font-weight: 500;\",\n body: \"font-family: 'Repro'; font-weight: 400;\",\n accent: \"font-family: 'Aguzzo'; font-style: italic;\",\n accentBold: \"font-family: 'Aguzzo'; font-weight: 700; font-style: italic;\",\n mono: \"font-family: 'Repro Mono'; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em;\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"lineHeight = (px) => {\n if (px >= 60) return 1.0;\n if (px >= 48) return 1.1;\n if (px >= 32) return 1.2;\n return 1.3;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"letterSpacing = (px) => {\n if (px >= 60) return \"-0.04em\";\n if (px >= 48) return \"-0.01em\";\n if (px >= 32) return \"0em\";\n return \"0.01em\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":" # Logo SVG Helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"# Grid & Layout Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"grid = (w, h, cols = 6) => {\n const margin = Math.ceil((w + h) * 0.03);\n const gutter = Math.ceil(margin * 0.5);\n const colWidth = Math.floor((w - margin * 2 - gutter * (cols - 1)) / cols);\n return { margin, gutter, colWidth, cols };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"# Chart Wrapper (reuseable chart)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"# Circle Label helper","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":184,"value":"circledLabel = (text, {\n color = aave.dark,\n bg = \"transparent\",\n borderColor = null,\n fontSize = 11\n} = {}) => {\n const border = borderColor || color;\n return html`${text}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"# data vis test","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":187,"value":"# line chart \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"testData = [\n { chain: \"Test1\", tvl: 11_400_000_000 },\n { chain: \"Test2\", tvl: 1_800_000_000 },\n { chain: \"Test3\", tvl: 1_200_000_000 },\n { chain: \"Test4\", tvl: 980_000_000 },\n { chain: \"Test5\", tvl: 640_000_000 },\n { chain: \"Test6\", tvl: 410_000_000 }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null