3f:null 40:["$","title",null,{"children":"picasso.js theme editor | Hannes Lindquist | Observable"}] 46:T472,pic.chart({ element: document.querySelector('#c1'), data, settings: { scales: { s: { data: { field: 'Sales' }, expand: 0.2, invert: true }, m: { data: { field: 'Margin' }, expand: 0.1 }, col: { data: { extract: { field: 'Year' } }, type: 'color' } }, components: [{ type: 'grid-line', y: 's', x: 'm' }, { key: 'y-axis', type: 'axis', scale: 's', dock: 'left' }, { type: 'legend-cat', dock: 'right', scale: 'col' }, { key: 'x-axis', type: 'axis', scale: 'm', dock: 'bottom' }, { key: 'p', type: 'point', data: { extract: { field: 'Month', props: { y: { field: 'Sales' }, x: { field: 'Margin' }, group: { field: 'Year' } } } }, settings: { x: { scale: 'm' }, y: { scale: 's' }, opacity: 0.8, fill: { scale: 'col', ref: 'group' } } }] } })47:T46c,pic.chart({ element: document.querySelector('#c2'), data, settings: { scales: { s: { data: { field: 'Sales' }, include: [0], invert: true }, m: { data: { extract: { field: 'Year' } }, }, col: { data: { field: 'Sales' }, type: 'color' } }, components: [{ type: 'grid-line', y: 's' }, { key: 'y-axis', type: 'axis', scale: 's', dock: 'left' }, { key: 'x-axis', type: 'axis', scale: 'm', dock: 'bottom' }, { key: 'p', type: 'box', data: { extract: { field: 'Year', trackBy: d => d, reduce: 'first', props: { start: { reduce: () => 0 }, end: { field: 'Sales', reduce: 'avg' }, group: { field: 'Year' } } } }, settings: { major: { scale: 'm' }, minor: { scale: 's' }, box: { width: 0.7, fill: { ref: 'end', scale: 'col' } } } }] } })48:[] 44:{"id":"21bea69ac390381e","slug":"picasso-js-theme-editor","title":"picasso.js theme editor","thumbnail":"15ab9926dac40a5ce424ce8900f8cf606e96cde51d39cc6015f7c0b578b31a61","access_level":"public","create_time":"$D2019-09-02T08:31:40.642Z","update_time":"$D2019-09-02T14:08:06.141Z","view_time":null,"first_public_time":"$D2019-09-02T10:47:16.375Z","has_unpublished_edits":null,"fork":{"id":"fe7dbf831410d24d","slug":"picasso-js-theme-editor","title":"picasso.js theme editor","owner":{"id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5afb2bb2c93b43da","login":"carlhannes","name":"Hannes Lindquist","avatar_url":"https://avatars-next.observableusercontent.com/1a299c0d0e5ffd33089c1495967097e5f205438f14c705d2677610628943f4a9","tier":"starter_2024","bio":"Momentum is the key to successful innovation. Passionate about data, mobility, economy, UX & developing long-lasting products that people love to use every day.","following":false},"version":243,"publish_version":243,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7308a4e193f972d","login":"carlhannes","name":"Hannes Lindquist","avatar_url":"https://avatars-next.observableusercontent.com/1a299c0d0e5ffd33089c1495967097e5f205438f14c705d2677610628943f4a9","tier":null,"bio":"Momentum is the key to successful innovation. Passionate about data, mobility, economy, UX & developing long-lasting products that people love to use every day.","following":false}],"members":[{"type":"individual","id":"f7308a4e193f972d","login":"carlhannes","name":"Hannes Lindquist","avatar_url":"https://avatars-next.observableusercontent.com/1a299c0d0e5ffd33089c1495967097e5f205438f14c705d2677610628943f4a9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"picasso.js theme editor","cells":[{"id":0,"value":"md`# picasso.js theme editor\n\nBasic theming for picasso.js\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"html`

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof fontSize = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"html`

Font

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof fontFamily = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"html`

Stroke width

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof strokeWidth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"html`

Shape

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof shapeType = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"html`

Text color

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof textColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"html`

Guide color

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof guideColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"html`

Primary color

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof categoricalBase = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"html`

Secondary color

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"viewof secondaryColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

\n\t

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"style = {\n return {\n '$font-color': textColor,\n '$font-size': `${fontSize}px`,\n '$font-family': fontFamily,\n '$font-size--l': `${Math.floor(fontSize * 1.5)}px`,\n '$guide-color': guideColor,\n '$shape': { // data shape\n fill: categoricalBase,\n strokeWidth: strokeWidth,\n stroke: 'rgba(255, 255, 255, 0.2)',\n shape: shapeType.toLowerCase()\n },\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"pic = picasso({\n renderer: { prio: ['canvas'] },\n style,\n palettes: [{\n \tkey: 'categorical',\n \tcolors: [\n chroma.bezier([categoricalBase, secondaryColor]).scale().colors(5)\n \t]\n\t}, {\n key: 'sequential',\n colors: [\n [categoricalBase, secondaryColor]\n ]\n }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = [{\n type: 'matrix',\n data: [\n ['Year', 'Month', 'Sales', 'Margin'],\n ['2010', 'Jan', 1106, 7],\n ['2010', 'Feb', 5444, 53],\n ['2010', 'Mar', 147, 64],\n ['2010', 'Apr', 7499, 47],\n ['2010', 'May', 430, 62],\n ['2010', 'June', 9735, 13],\n ['2010', 'July', 7435, 15],\n ['2011', 'Jan', 1482, 45],\n ['2011', 'Feb', 2659, 76],\n ['2011', 'Mar', 1261, 73],\n ['2011', 'Apr', 3085, 56],\n ['2011', 'May', 3035, 91],\n ['2011', 'June', 7691, 88],\n ['2011', 'July', 3012, 81],\n ['2012', 'Jan', 7980, 61],\n ['2012', 'Feb', 2564, 22],\n ['2012', 'Mar', 7957, 98],\n ['2012', 'Apr', 5809, 1],\n ['2012', 'May', 429, 2],\n ['2012', 'June', 6757, 77],\n ['2012', 'July', 9415, 92],\n ['2013', 'July', 9415, 92]\n ]\n}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"