31: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' } } }] } })32: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' } } } }] } })33:[] 2f:{"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"},{"id":17,"value":"viewof fontSize = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"viewof fontFamily = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof textColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"viewof guideColor = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"viewof categoricalBase = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"html`\n

\n\t

`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":76,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"picasso = require(\"picasso.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}