30:T430,html`

The font I typically use comes from the IBM Plex family. These fonts are loaded in from Google Fonts. The text that you see here is a sample of the IBM Plex Sans font.

Some ipsum text, for good measure:

Farm-to-table hexagon tattooed, pitchfork la croix williamsburg vexillologist ugh neutra distillery. Poke blog activated charcoal selfies, fam mumblecore kale chips trust fund bitters stumptown dreamcatcher. Lo-fi tousled wayfarers vegan, readymade fanny pack organic blog. You probably haven't heard of them jianbing post-ironic cray. Drinking vinegar food truck activated charcoal poutine, affogato williamsburg mixtape health goth swag gentrify chartreuse bicycle rights. Offal pug fixie wayfarers flexitarian. Sartorial deep v coloring book blue bottle, gentrify franzen ennui disrupt keytar organic.

`31:[] 2e:{"title":"My Style Guide","cells":[{"id":0,"value":"md`# My Style Guide\n\nA notebook to document my typical styles and color palette.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`I often use these colors in my design for visualizations. Except in cases where I want to define a wider range of discrete or quantitative color values, I use these values for fills, strokes, fonts, text, and annotations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"viewof ltblue = colorPicker(\"#85b6c5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof blue = colorPicker(\"#004d80\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"viewof dkblue = colorPicker(\"#1d253c\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"viewof yellow = colorPicker(\"#f2ba42\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof red = colorPicker(\"#d34e23\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof dkbrown = colorPicker(\"#653727\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof ltbrown = colorPicker(\"#b88a57\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`For continuous quantitative information, I will often use the Viridis color ramp.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"ramp(d3.interpolateViridis) // A nice sequential color scheme.","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"md`Or a ramp based on my palette above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"ramp(d3.interpolateHclLong(\"#d34e23\", \"#004d80\")) // A color ramp based on my palette.","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`I will also sometimes use my own palette.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"build_colors(color_categorical)","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"color_categorical = d3.scaleOrdinal().domain(data)\n .range(['#1C2A39', '#5C6A79', '#5E2C0B', '#9E6C4B', '#932210', '#D3623B', '#A84410', '#E67E22', '#005C01', '#009C41', '#005B50', '#009B90', '#102770', '#0067B0', '#1E003D', '#6E248D', '#8A0028', '#CA2C68', '#870000', '#D73C2C'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`For quick exploratory data analysis, I prefer **Set1** from ColorBrewer.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"Set1 = swatches(\"Set1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`## Fonts and Typography`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function ramp(color, n = 512) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.margin = \"0 -14px\";\n canvas.style.width = \"calc(100% + 28px)\";\n canvas.style.height = \"40px\";\n canvas.style.imageRendering = \"pixelated\";\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"function swatches(name) {\n const colors = d3[`scheme${name}`];\n const n = colors.length;\n const dark = d3.lab(colors[0]).l < 50;;\n const canvas = svg`