2d:null 2e:["$","title",null,{"children":"picasso.js theme editor | Miralem Drek | Observable"}] 33:T4bb,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' }, shape: 'circle', strokeWidth: 2, stroke: '#fff', opacity: 0.8, fill: { scale: 'col', ref: 'group' } } }] } })34: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' } } } }] } })35:[] 31:{"id":"fe7dbf831410d24d","slug":"picasso-js-theme-editor","title":"picasso.js theme editor","thumbnail":"65243ac4f46f50f779bc272ac664136df33ad56355b1bb7400aa16bb4a930e78","access_level":"public","create_time":"$D2018-02-11T19:51:58.749Z","update_time":"$D2024-05-21T06:12:34.920Z","view_time":null,"first_public_time":"$D2018-08-16T14:10:10.700Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null}],"members":[{"type":"individual","id":"b60aebf3db8d7639","login":"miralemd","name":"Miralem Drek","avatar_url":"https://avatars-next.observableusercontent.com/a5628f06f68bf111e4f498f6def88cb5371ba2b560eee7dc4f2a113abaa685e8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"276ea8b92642e19e","slug":"picasso-js","title":"picasso.js","owner":{"id":"28f613bb9ce5d0b7","login":"miralemd","name":"Miralem Drek"}},"type":"notebook","body":{"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","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof fontSize = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof fontFamily = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"viewof textColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof guideColor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof categoricalBase = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"html`\n

\n\t

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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: 1,\n stroke: 'rgba(255, 255, 255, 0.2)'\n },\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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, 'black']).scale().colors(5)\n \t]\n\t}, {\n key: 'sequential',\n colors: [\n ['orange', 'red', 'darkred']\n ]\n }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":76,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"