2b:null 2c:["$","title",null,{"children":"My Style Guide | Jason Heppler, PhD | Observable"}] 31: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.

`32:[] 2f:{"id":"05bcbe303b73ccf4","slug":"my-style-guide","title":"My Style Guide","thumbnail":"c327ab8854b38d48ee72c325e358de7cc981582f1748684631f3d9e93541c13a","access_level":"public","create_time":"$D2019-11-14T22:34:11.711Z","update_time":"$D2019-11-15T14:14:10.973Z","view_time":null,"first_public_time":"$D2019-11-14T22:46:19.723Z","fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"142ed46234827fe1","login":"hepplerj","name":"Jason Heppler, PhD","avatar_url":"https://avatars-next.observableusercontent.com/b137b1b68b9f07d03f16d6f42fd27148efa89ee7751c9aae13dc42537996f57e","tier":"starter_2024"},"version":133,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c513de3a61b655d","login":"hepplerj","name":"Jason Heppler, PhD","avatar_url":"https://avatars-next.observableusercontent.com/b137b1b68b9f07d03f16d6f42fd27148efa89ee7751c9aae13dc42537996f57e","tier":null}],"members":[{"type":"individual","id":"6c513de3a61b655d","login":"hepplerj","name":"Jason Heppler, PhD","avatar_url":"https://avatars-next.observableusercontent.com/b137b1b68b9f07d03f16d6f42fd27148efa89ee7751c9aae13dc42537996f57e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"1329ad955cec0f74","slug":"maps","title":"Misc. Visualization","owner":{"id":"142ed46234827fe1","login":"hepplerj","name":"Jason Heppler, PhD"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":45,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":13,"value":"viewof ltblue = colorPicker(\"#85b6c5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"viewof blue = colorPicker(\"#004d80\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"viewof dkblue = colorPicker(\"#1d253c\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof yellow = colorPicker(\"#f2ba42\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof red = colorPicker(\"#d34e23\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"viewof dkbrown = colorPicker(\"#653727\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"viewof ltbrown = colorPicker(\"#b88a57\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"md`For continuous quantitative information, I will often use the Viridis color ramp.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"ramp(d3.interpolateViridis) // A nice sequential color scheme.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"md`Or a ramp based on my palette above.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"ramp(d3.interpolateHclLong(\"#d34e23\", \"#004d80\")) // A color ramp based on my palette.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"md`I will also sometimes use my own palette.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"build_colors(color_categorical)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":76,"value":"md`For quick exploratory data analysis, I prefer **Set1** from ColorBrewer.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"Set1 = swatches(\"Set1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"md`## Fonts and Typography`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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`