2a:null 2b:["$","title",null,{"children":"Control Panel for Observable (Now with better responsiveness) | Eric Lo | Observable"}] 30:T433,viewof cake = controlPanel([ [ Ctrls.radioGroup("flavor", ["Vanilla", "Chocolate", "Coffee", "Strawberry"], {label: "Flavor:", value: "Vanilla"}), Ctrls.radioGroup("shape", ["Circle", "Square", "Rectangle", "Triangle"], {label: "Shape:"}) ], [ Ctrls.slider("size", {label: "Size =", min:7, max:13, value:7}), Ctrls.toggle("candle", {label: "Candle?"}), Ctrls.dropdown("numOfCandles", [...Array(11).keys()].slice(1)), Ctrls.radioGroup("card", ["None", "Happy Birthday", "Congratulations", "Good Job!!", "Custom"], {label: "Card:"}), Ctrls.textBox("customText") ], [ // Each choice in the toggleGroup becomes a property (camel case) in the controlPanel object Ctrls.toggleGroup(["Flowers", "Wine", "Chocolates", "Ribbon"], {label: "Specials:", checked: false}), Ctrls.colorButton("ribbonColor", {value:"#ff0000"}) ], [ Ctrls.date("date", {label: "Date:"}), Ctrls.radioGroup("pickup", ["Pick up", "Deliver", "Ship"]) ], [Ctrls.rule()] ], {style: "font-family:sans-serif;font-size:10pt;pointer:default"});31:Tdb3,viewof sample = form(html` `)32:T538,viewof options = { const {colorButton, divider, dropdown, label, radioGroup, rule, toggleGroup} = Ctrls; return controlPanel([ [label({text: "👈👈 Expand to see the source code of the controlPanel version"})], [label({text: "BCG Matrix Demo", bold: true, fontSize: "larger"})], [ radioGroup( "highlight", ["None", "All", "Min", "Max", "Min/Max", "Top", "Bottom", "Top/Bottom"], {label:"Highlight:", value: "All"} ), dropdown("num", [2,3,4,5], {value:5}) ], [toggleGroup(["Show Tooltip", "Show Annotation", "Show Ticks"], {checked:true, namespace: "bcg"})], [ label({text: "Zones"}), colorButton("cow", {label: Icons.cow, value: "#edc949"}), colorButton("star", {label: Icons.star, value: "#59a14f"}), colorButton("questionMark", {label: Icons.questionMark, value: "#af7aa1"}), colorButton("dog", {label: Icons.dog, value: "#e15759"}), toggleGroup(["Show Icon", "Show Label", "Fill"], {checked: true, namespace: "bcg"}) ], [label({ text: "Drag vertical, horizontal or both rules to adjust the range of quadrants. Double click on rule to reset position.", bold:true, italic: true, fontSize: "10pt" })], [rule()] ], {style: "font-size:11pt"}); }33:T55b,chart = { const matrix = new BCGMatrix( sampleData, { width: width, height: 600, highlightScope: toCamelCase(options.highlight), numOfTopBottoms: options.num, showTooltip: options.showTooltip, showAnnotation: options.showAnnotation, showTicksOnRules: options.showTicks, columns: { name: { name: "Subcategory" }, x: { name: "Sales", label: "Sales (USD)", format: { short: ",.2s", long: ",.0f" } }, y: { name: "YOY", label: "YoY Growth %", format: { short: ".0%", long: ".1%" } }, radius: { name: "Profit", label: "Profit (USD)", format: { short: ",.2s", long: ",.0f" } } }, zones: { showIcons: options.showIcon, showLabels: options.showLabel, showBackground: options.fill, questionMarks: { icon: Icons.questionMark, color: options.questionMark }, dogs: { icon: Icons.dog, color: options.dog }, stars: { icon: Icons.star, color: options.star }, cows: { icon: Icons.cow, color: options.cow } } } ); invalidation.then(() => matrix.dispose()); return matrix.render(); }34:T4a4,viewof bubbleOptions = { const {colorButton, dropdown, label, radioGroup, rule, slider} = Ctrls; return controlPanel([ [label({text: "Bubble Matrix Demo", bold: true, fontSize: "larger"})], [ slider("width", {label: "Width = ", min: 300, max: width, value: width}), slider("height", {label: "Height = ", min: 300, max: height, value: height}) ], [ dropdown("column", ["Month of Year", "Sales Territory Region"], {label: "Column:"}), dropdown("measure", ["Sales Amount", "Gross Profit", "Ratio to All Products"], {label: "Measure:"}), radioGroup("highlight", ["Matrix", "Row", "Top", "Bottom"], {label: "Highlight:", value: "Matrix", namespace: "bubble"}), dropdown("num", [2,3,4,5], {value: 5}) ], [ colorButton("above", {label: "Above: ", value: "#ffd166"}), colorButton("below", {label: "Below: ", value: "#118ab2"}), colorButton("row", {label: "Row: ", value: "#caf0f8"}), ], [label({ text: "Click any row or column label to sort, keep clicking to toggle sort orders. Click bubble to show annotation.", bold:true, italic:true })], [rule()]], {style: "font-size:11pt"}); }35:T408,viewof pchartOptions = { const {label, divider, dropdown, radioGroup, slider, toggle, rule} = Ctrls; const shape = radioGroup("shape", ["Circle", "Square"], {label: "Dot Shape:", value: "Circle", namespace: "pchart"}), color = radioGroup("number", [{label: "Growth", value: "growth"}, {label: "Growth Rate", value: "rate"}], {label: "Color:", value: "rate"}), isolate = toggle("isounc", {label: "Isolate Unchanged", checked: true}), scheme = dropdown("scheme", ["Rd-Yl-Bu", "Rd-Pu-Bu", "Rd-Yl-Gn", "Rd-Gn", "Or-Bu"], {label: "Color Scheme:"}), theme = dropdown("theme", ["Dark", "Light"], {label: "Theme:", value: "Light"}), year = slider("year", {min: 2001, max: 2016, value: 2001}), timeFrame = dropdown("frame", [5,6,7,8,9,10].map(d => ({label: `${d} Years`, value: d}))); return controlPanel([ [rule()], [label({text: "Performance Chart Demo", bold: true, fontSize: "larger"})], [shape, color, isolate], [scheme, theme], [year, timeFrame]], {style:"font-size:11pt"}); }36:T4e6,pchartDemo = { const isDark = pchartOptions.theme === "Dark"; const svg = d3.create("svg") .style("cursor", "default") .style("background", isDark ? "black" : "white") .attr("viewBox", [0,0,width,500]); document.body.append(svg.node()); const {pp, np} = getPalettes(pchartOptions.scheme.replaceAll("-", "").toLowerCase()), tc = isDark ? "white" : "black", s = (pchartOptions.year - 2001) * 12 + 1, e = s + +pchartOptions.frame * 12; const pchart = new PerformanceChart(svg) .size([width, 500]) .data(unemp.slice(s, e)) .tick({ name: "Month", interval: 12, extractor: d => { const ss = d.split(" "); return ss.length === 2 ? ss[1] : d; }, color: tc }) .options({ number: pchartOptions.number, shape: toCamelCase(pchartOptions.shape), posPalette: pp, negPalette: np, isolateUnchanged: pchartOptions.isounc, showSlider: true }) .color({ legend: tc, hover: isDark ? "white" : "#999", highlighter: isDark ? "#999" : "#eee" }) .tooltip({boxOpacity: isDark ? 0.9 : 0.8}) .render(); svg.node().remove(); return svg.node(); }37:T42e,### Controls These build-in controls fit the most common scenarios. * [Radio Group](#cell-130) - choose one from a set. * [Toggle Group](#cell-139) - choose any from a set. * [Dropdown](#cell-156) - choose one from a set (drop-down menu). * [Toggle](#cell-148) - toggle between true or false. * [Slider](#cell-178) - choose a number in a range. * [Color Button](#cell-184) - choose a color. * [Textbox](#cell-152) - enter freeform single-line text. * [Date](#cell-162) - choose a date. * [Month](#cell-166) - choose a month. * [Week](#cell-170) - choose a week. * [Time](#cell-174) - choose a time. These are non-value controls for displaying information or for decorative purposes. * [Label](#cell-188) - display a label with customizable styles. * [Icon](#cell-192) - display a icon. * [Rule](#cell-196) - display a horizontal rule with customizable styles. * [Divider](#cell-200) - display a divider between controls. If you need anything not covered by the build-in controls, for example, a textArea. Control Panel allows you to add custom controls by using HTML: 38:[] 2e:{"id":"76f50c3bb617080a","slug":"controlpanel-for-observable","title":"Control Panel for Observable (Now with better responsiveness)","thumbnail":"8adc3168c8c88792a6db66168cda136141c1564f4e7d7fb87fc79e0f90e1ec14","access_level":"public","create_time":"$D2021-12-21T07:07:35.384Z","update_time":"$D2021-12-27T22:32:01.597Z","view_time":null,"first_public_time":"$D2021-12-21T18:09:28.486Z","fork":false,"stars":99,"starred":false,"owner":{"type":"team","id":"4d412f762b1c1ef6","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":"starter_2024"},"version":229,"publish_version":229,"role":null,"authored":false,"authors":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null}],"members":[{"type":"individual","id":"c4f3a94f7e70150e","login":"analyzer2004","name":"Eric Lo","avatar_url":"https://avatars-next.observableusercontent.com/cf09c832c8e8be23605d6badd8d8ca69d2a9cd86ec415f2bec108e06014e8a1d","tier":null,"role":"editor"}],"comments":[{"id":"008d2ae523b5b4c8","reply_to_id":null,"content":"I love the coloring on either side of the Sales Amount slider! This might be a terrible idea, but I wonder if the position of the handle could also reflect the relative values of the data, rather than being linear? So the slider would be informative on its own. As I say, perhaps a terrible idea, but thought I'd share it :)","create_time":"$D2022-01-03T18:45:04.693Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c07159641cb246d6","login":"dunstan","name":"Dunstan Orchard","avatar_url":"https://avatars-next.observableusercontent.com/a6df95de5f8238993d112347a8772215ce2fdb0ffbbe6d6d6770138aa0c7a1f8","tier":null}},{"id":"6d44a580552a44b4","reply_to_id":null,"content":"Is it possible to make the grouped select box allow multiple values to be selected? Awesome stuff in this notebook btw.","create_time":"$D2023-02-21T09:29:42.651Z","update_time":"$D2023-02-21T09:30:56.274Z","resolved":false,"user":{"type":"individual","id":"1125ba366576bacb","login":"novotny1akub","name":"novotny1akub","avatar_url":"https://avatars-next.observableusercontent.com/40e4321204a4470fbee5dcc275c513d1f8bc8dbd5732a4f01aad221d0426f271","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":25,"collection":null,"type":"notebook","body":{"title":"Control Panel for Observable (Now with better responsiveness)","cells":[{"id":0,"value":"# Control Panel for Observable (Now with better responsiveness) \n**Control Panel** is a set of components to assist in easily building a compact and neat argument UI for visualizations. This is extremely useful when the chart has a large number of arguments. It allows the user to adjust all the arguments while simultaneously seeing the changes without the need to scroll back and forth.\n\nTo get started, import **controlPanel** and **Ctrls** from [*\"@analyzer2004/control-panel\"*](control-panel):\n~~~js\nimport {controlPanel, Ctrls} from \"@analyzer2004/control-panel\"\n~~~\nDeclare your **Control Panel** with viewof:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"🍰 Here is the cake you ordered 🍰","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"cake","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"## Feature Showcase\n\nBelow are some real use cases ported from my other notebooks. The first example demonstrates the convenience of using **Control Panel**, compared to the HTML version shown in the next cell.\n\n**HTML version**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"**Control Panel version**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"## More examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":78,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"bubbleMatrixDemo = new BubbleMatrix()\n .size([bubbleOptions.width, bubbleOptions.height])\n .options({\n preserveColumnOrder: bubbleOptions.column === \"Month of Year\",\n numberIsPercentage: bubbleOptions.measure === \"Ratio to All Products\", \n sliderCaption: bubbleOptions.measure,\n highlightScope: toCamelCase(bubbleOptions.highlight),\n numberOfTopBottom: +bubbleOptions.num\n })\n .font({size: 11})\n .columns({\n row: \"Subcategory\",\n column: bubbleOptions.column,\n value: bubbleOptions.measure\n })\n .colors({\n above: bubbleOptions.above,\n below: bubbleOptions.below,\n row: bubbleOptions.row\n })\n .data(data)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":87,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"viewof funnelOptions = controlPanel([\n [Ctrls.rule()],\n [Ctrls.label({text: \"Funnel Chart Demo\", bold: true, fontSize: \"larger\"})], \n [\n Ctrls.dropdown(\"scheme\", [\"Tableau10\", \"Category10\", \"Set1\", \"Set2\", \"Dark2\"], {label: \"Color Scheme:\"}),\n Ctrls.radioGroup(\"style\", [\"2D\", \"3D\", \"Flat\"], {label: \"Style:\"}),\n Ctrls.toggle(\"showpct\", {label: \"Show percentage of the\", checked: true}),\n Ctrls.radioGroup(\"pct\", [[\"first\", \"first\"], [\"previous stage\", \"previous\"]])\n ]\n]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"funnelChart = {\n const svg = d3.create(\"svg\") \n .attr(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, 600]);\n\n document.body.append(svg.node());\n new FunnelChart(svg)\n .size([width, 600])\n .options({ \n palette: d3[`scheme${funnelOptions.scheme}`], \n style: funnelOptions.style.toLowerCase(),\n showPercentage: funnelOptions.showpct,\n percentage: funnelOptions.pct\n })\n .data(funnelData)\n .render();\n\n svg.node().remove();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"viewof weatherOptions = controlPanel([\n [Ctrls.rule()],\n [Ctrls.label({text: \"Whether Wheel Demo\", bold: true, fontSize: \"larger\"})],\n [Ctrls.dropdown(\"city\", [[\"Seattle\", \"seattle\", \"North West\"], [\"Portland\", \"portland\", \"North West\"], [\"San Francisco\", \"sanfrancisco\", \"South West\"], [\"Los Angeles\", \"losangeles\", \"South West\"]], {label: \"City\"})],\n [Ctrls.label({text: \"👆👆👆 optgroup\"})]\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"weatherChart = { \n const d = diameter;\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", `${-d / 2} ${-d / 2} ${d} ${d}`)\n .style(\"width\", d)\n .style(\"height\", d);\n \n const wheel = new WeatherWheel(svg)\n .size([d, d])\n .icon(icon)\n .data(weather[weatherOptions.city])\n .render();\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"viewof threed = {\n const {label, dropdown, divider, toggleGroup, toggle, rule} = Ctrls;\n return controlPanel([\n [rule()],\n [label({text: \"3D Clustered Chart Demo\", bold: true, fontSize: \"larger\"})],\n [\n dropdown(\"scheme\", [\"Tableau10\", \"Category10\", \"Set3\"], {label: \"Color Scheme\"}),\n dropdown(\"theme\", [\"Dark\", \"Light\"], {label: \"Theme\", value: \"Light\"})\n ],\n [\n toggleGroup([[\"Visible\", \"floor\"], [\"Ticks\", \"floorTicks\"]], {label: \"Floor\"}),\n toggleGroup([[\"Visible\", \"wall\"], [\"Ticks\", \"wallTicks\"]], {label: \"Wall\"}),\n toggle(\"animation\", {label: \"Animation\"})\n ],\n [label({text: \"Use mouse to rotate, pan and zoom the chart.\", fontSize: \"smaller\", italic: true})]\n ])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"{\n const isDark = threed.theme === \"Dark\"; \n const chart = new ClusteredChart() \n .size([width, height])\n .options({\n animation: threed.animation, \n font: helvetiker,\n backgroundColor: isDark ? 0x333333 : 0xffffff,\n textColor: isDark ? 0xffffff : 0x333333\n }) \n .bar({palette: d3[`scheme${threed.scheme}`]})\n .wall({\n visible: threed.wall,\n color: isDark ? 0xffffff : 0xeeeeee,\n showTicks: threed.wallTicks\n })\n .floor({\n visible: threed.floor,\n color: isDark ? 0xffffff : 0xeeeeee,\n showTicks: threed.floorTicks\n })\n .column({\n x: \"territory\",\n y: \"profit\",\n z: \"quarter\"\n })\n .data(threeData)\n .render(); \n \n invalidation.then(() => chart.dispose());\n \n return chart.renderer.domElement; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"## API Reference and Source Code\n[📒 Source Code](https://observablehq.com/@analyzer2004/control-panel)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":112,"value":"**controlPanel(rows, options)**\n* rows - rows can be one of the two types of arrays:\n * one-dimensional array - each control occupies a single row.\n * two-dimensional array - each array represents a single row that contains multiple controls.\n* options - the available options are:\n * width - the width of controlPanel; defaults to null.\n * lineSpace - the padding between rows; defaults to null.\n * style - CSS style for control freaks 😉; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":116,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":120,"value":"viewof userContent = controlPanel([\n Ctrls.label({text: \"Custom HTML Demo\", bold: true, fontSize: \"larger\"}),\n Ctrls.label({text: \"Comment\"}),\n ''\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"userContent","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"#### Ctrls.radioGroup(name, choices, options)\n* name - the name of this radio group.\n* choices - the choices can be the following types of arrays:\n * strings or numbers\n * [label, value] - label-value pair arrays.\n * {label, value} - objects contain label and value.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value; defaults to null (the first choice).\n * style - CSS style; defaults to null.\n * namespace - a unique name to prevent HTML id ambiguity; defaults to null.\n\nThe following example creates two groups using numbers and label-value pairs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":134,"value":"viewof radioGroups = controlPanel([\n Ctrls.radioGroup(\"group1\", [1, 2, 3], {label: \"numbers\"}), \n Ctrls.radioGroup(\"group2\", [[\"One\", 1], [\"Two\", 2], [\"Three\", 3]], {label: \"label-value pairs\", value: 2})\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"radioGroups","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"#### Ctrls.toggleGroup(choices, options)\nToggle Group doesn't have the name argument. Each toggle control in the group has its own name.\n* choices - the choices can be the following types of arrays:\n * strings - see example below.\n * numbers - see example below.\n * [label, name, *checked*] - checked is optional.\n * {label, name, checked}\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * checked - the initial checked status for all toggles in the group; defaults to true.\n * style - CSS style; defaults to null.\n * namespace - a unique name to prevent HTML id ambiguity; defaults to null.\n\nThe second toggleGroup demonstrates how to use the namespace to avoid the ambiguity of \"Show Ticks\" which already existed in the [BCG Matrix Demo](#cell-469).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":143,"value":"viewof toggleGroups = controlPanel([\n Ctrls.toggleGroup([1, 2, 3], {label: \"numbers\"}),\n Ctrls.toggleGroup([\"Show Axes\", \"Show Ticks\", \"Show Border\"], {label: \"strings (auto camelcase)\", namespace: \"tgexample\"}),\n Ctrls.toggleGroup([[\"Cake\", \"cake\"], [\"Cookies\", \"cookies\", true], [\"Coffee\", \"coffee\", true]], {label: \"tea time\", checked: false})\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":145,"value":"toggleGroups","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"#### Ctrls.toggle(name, options)\n* name - the name of this toggle input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * checked - the initial checked status; defaults to false.\n * style - CSS style for control freaks; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":152,"value":"#### Ctrls.textBox(name, options)\n* name - the name of this text input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value; defaults to null.\n * width - the width of the text input; defaults to \"100px\".\n * style - CSS style; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":156,"value":"#### Ctrls.dropdown(name, choices, options)\n* name - the name of this dropdown.\n* choices - the choices can be the following types of arrays:\n * strings or numbers\n * [label, value, *group*] - arrays of label-value pair with optional group.\n * {label, value, *group*} - objects contain label, value, and optional group.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value; defaults to null (the first choice).\n * style - CSS style; defaults to null.\n \nThe second dropdown demonstrates how to create a select contains option groups:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"controlPanel([[\n Ctrls.dropdown(\"dropdown1\", [\"Tableau10\", \"Category10\", \"Set3\"], {label: \"Strings\"}),\n Ctrls.dropdown(\"dropdown2\", [[\"Seattle\", 0, \"North West\"], [\"Portland\", 1, \"North West\"], [\"San Francisco\", 2, \"South West\"], [\"Los Angeles\", 3, \"South West\"]], {label: \"Option Group\"})\n]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"#### Ctrls.date(name, options)\n* name - the name of this date input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value; defaults to today.\n * min - the earliest date to accept (in yyyy-mm-dd format); defaults to null.\n * max - the latest date to accept (in yyyy-mm-dd format); defaults to null.\n * style - CSS style; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":166,"value":"#### Ctrls.month(name, options)\n* name - the name of this month input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value; defaults to this month.\n * min - the earliest year and month to accept (in yyyy-mm format); defaults to null.\n * max - the latest year and month to accept (in yyyy-mm format); defaults to null.\n * style - CSS; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":170,"value":"#### Ctrls.week(name, options)\n* name - the name of this week input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value (in yyyy-Www format); defaults to this week.\n * min - the earliest year and week to accept (in yyyy-Www format); defaults to null.\n * max - the latest year and week to accept (in yyyy-Www format); defaults to null.\n * style - CSS style; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":174,"value":"#### Ctrls.time(name, options)\n* name - the name of this time input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value (in hh:mm format); defaults to null.\n * min - the earliest time to accept (in hh:mm format); defaults to null.\n * max - the latest time to accept (in hh:mm format); defaults to null.\n * style - CSS style; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":178,"value":"#### Ctrls.slider(name, options)\n* name - the name of this slider input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * showNumber - whether to display the number; defaults to true.\n * value - the initial value; defaults to null.\n * min - the lowest value in the range of permitted values; defaults to 0.\n * max - the greatest value in the range of permitted values; defaults to 100.\n * step - a number that specifies the granularity that the value must adhere to; defaults to 1.\n * width - the width of the range input; defaults to \"100px\".\n * style - CSS style; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":182,"value":"controlPanel([[\n Ctrls.slider(\"slider1\", {label: \"No Number\", showNumber: false}),\n Ctrls.slider(\"slider2\", {label: \"Value = \", min: 100, max: 500, step: 50, value: 400})\n]])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"#### Ctrls.colorButton(name, options)\n* name - the name of this week input.\n* options - the available options are:\n * label - a label; either a string or an HTML element.\n * value - the initial value; defaults to null (#000000).\n * width - the width of this color input; defaults to \"4em\".\n * height - the height of this color input; defaults to \"18px\".\n * style - CSS style; defaults to null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":188,"value":"#### Ctrls.label(options)\n* text - sets the text of this label.\n* fontSize - sets the font size. Default is null.\n* bold - sets the font weight to bold. Default is false.\n* italic - sets the font style to italic. Default is false;\n* color - specifies the color of text. Default is null.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":192,"value":"#### Ctrls.icon(options)\n* src - specifies the path to the icon image.\n* width - the width of the image; defaults to \"18px\".\n* height - the height of the image; defaults to \"18px\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":196,"value":"#### Ctrls.rule(options)\nA rule inserts a horizontal line in control panel to separate sections.\n* style - CSS border-style; defaults to \"dotted\".\n* color - CSS border-color; defaults to \"#aaa\".\n* height - CSS border-width; defaults to \"1px\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":200,"value":"#### Ctrls.divider(options)\nA divider inserts a vertical line between controls to divide or separate sections.\n* width - the width of the divider; defaults to 2.\n* color - the color of the divider; defaults to \"#ccc\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":34,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"toCamelCase = s => {\n const ss = s.split(/,|-|_|\\/| /);\n if (ss.length > 0) {\n ss[0] = ss[0].toLowerCase();\n return ss.join(\"\");\n } \n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"height = width * 0.65","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import {controlPanel, Ctrls} from \"@analyzer2004/control-panel\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"import {PerformanceChart, getPalettes, data as unemp} from \"@analyzer2004/performance-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"import {BubbleMatrix, data} from \"@analyzer2004/bubble-matrix\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"import {BCGMatrix, Icons, sampleData} from \"@analyzer2004/bcgmatrix-source\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"import {ClusteredChart, data as threeData, helvetiker} from \"@analyzer2004/3d-clustered-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"import {FunnelChart, data as funnelData} from \"@analyzer2004/funnel-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"import {WeatherWheel, weather, diameter, icon} from \"@analyzer2004/west-coast-weather-from-seattle-to-san-diego\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"md`🌐[ericlo.dev](https://ericlo.dev) 🐱[GitHub Repositories](https://github.com/analyzer2004?tab=repositories) 🐦[Twitter](https://twitter.com/analyzer2004)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 2f:"$2e:body"