31:T18b0,dataSample3 = [ { sepal_width: 3.5, petal_width: 0.2 }, { sepal_width: 3.0, petal_width: 0.2 }, { sepal_width: 3.2, petal_width: 0.2 }, { sepal_width: 3.1, petal_width: 0.2 }, { sepal_width: 3.6, petal_width: 0.2 }, { sepal_width: 3.9, petal_width: 0.4 }, { sepal_width: 3.4, petal_width: 0.3 }, { sepal_width: 3.4, petal_width: 0.2 }, { sepal_width: 2.9, petal_width: 0.2 }, { sepal_width: 3.1, petal_width: 0.1 }, { sepal_width: 3.7, petal_width: 0.2 }, { sepal_width: 3.4, petal_width: 0.2 }, { sepal_width: 3.0, petal_width: 0.1 }, { sepal_width: 3.0, petal_width: 0.1 }, { sepal_width: 4.0, petal_width: 0.2 }, { sepal_width: 4.4, petal_width: 0.4 }, { sepal_width: 3.9, petal_width: 0.4 }, { sepal_width: 3.5, petal_width: 0.3 }, { sepal_width: 3.8, petal_width: 0.3 }, { sepal_width: 3.8, petal_width: 0.3 }, { sepal_width: 3.4, petal_width: 0.2 }, { sepal_width: 3.7, petal_width: 0.4 }, { sepal_width: 3.6, petal_width: 0.2 }, { sepal_width: 3.3, petal_width: 0.5 }, { sepal_width: 3.4, petal_width: 0.2 }, { sepal_width: 3.0, petal_width: 0.2 }, { sepal_width: 3.4, petal_width: 0.4 }, { sepal_width: 3.5, petal_width: 0.2 }, { sepal_width: 3.4, petal_width: 0.2 }, { sepal_width: 3.2, petal_width: 0.2 }, { sepal_width: 3.1, petal_width: 0.2 }, { sepal_width: 3.4, petal_width: 0.4 }, { sepal_width: 4.1, petal_width: 0.1 }, { sepal_width: 4.2, petal_width: 0.2 }, { sepal_width: 3.1, petal_width: 0.1 }, { sepal_width: 3.2, petal_width: 0.2 }, { sepal_width: 3.5, petal_width: 0.2 }, { sepal_width: 3.1, petal_width: 0.1 }, { sepal_width: 3.0, petal_width: 0.2 }, { sepal_width: 3.4, petal_width: 0.2 }, { sepal_width: 3.5, petal_width: 0.3 }, { sepal_width: 2.3, petal_width: 0.3 }, { sepal_width: 3.2, petal_width: 0.2 }, { sepal_width: 3.5, petal_width: 0.6 }, { sepal_width: 3.8, petal_width: 0.4 }, { sepal_width: 3.0, petal_width: 0.3 }, { sepal_width: 3.8, petal_width: 0.2 }, { sepal_width: 3.2, petal_width: 0.2 }, { sepal_width: 3.7, petal_width: 0.2 }, { sepal_width: 3.3, petal_width: 0.2 }, { sepal_width: 3.2, petal_width: 1.4 }, { sepal_width: 3.2, petal_width: 1.5 }, { sepal_width: 3.1, petal_width: 1.5 }, { sepal_width: 2.3, petal_width: 1.3 }, { sepal_width: 2.8, petal_width: 1.5 }, { sepal_width: 2.8, petal_width: 1.3 }, { sepal_width: 3.3, petal_width: 1.6 }, { sepal_width: 2.4, petal_width: 1.0 }, { sepal_width: 2.9, petal_width: 1.3 }, { sepal_width: 2.7, petal_width: 1.4 }, { sepal_width: 2.0, petal_width: 1.0 }, { sepal_width: 3.0, petal_width: 1.5 }, { sepal_width: 2.2, petal_width: 1.0 }, { sepal_width: 2.9, petal_width: 1.4 }, { sepal_width: 2.9, petal_width: 1.3 }, { sepal_width: 3.1, petal_width: 1.4 }, { sepal_width: 3.0, petal_width: 1.5 }, { sepal_width: 2.7, petal_width: 1.0 }, { sepal_width: 2.2, petal_width: 1.5 }, { sepal_width: 2.5, petal_width: 1.1 }, { sepal_width: 3.2, petal_width: 1.8 }, { sepal_width: 2.8, petal_width: 1.3 }, { sepal_width: 2.5, petal_width: 1.5 }, { sepal_width: 2.8, petal_width: 1.2 }, { sepal_width: 2.9, petal_width: 1.3 }, { sepal_width: 3.0, petal_width: 1.4 }, { sepal_width: 2.8, petal_width: 1.4 }, { sepal_width: 3.0, petal_width: 1.7 }, { sepal_width: 2.9, petal_width: 1.5 }, { sepal_width: 2.6, petal_width: 1.0 }, { sepal_width: 2.4, petal_width: 1.1 }, { sepal_width: 2.4, petal_width: 1.0 }, { sepal_width: 2.7, petal_width: 1.2 }, { sepal_width: 2.7, petal_width: 1.6 }, { sepal_width: 3.0, petal_width: 1.5 }, { sepal_width: 3.4, petal_width: 1.6 }, { sepal_width: 3.1, petal_width: 1.5 }, { sepal_width: 2.3, petal_width: 1.3 }, { sepal_width: 3.0, petal_width: 1.3 }, { sepal_width: 2.5, petal_width: 1.3 }, { sepal_width: 2.6, petal_width: 1.2 }, { sepal_width: 3.0, petal_width: 1.4 }, { sepal_width: 2.6, petal_width: 1.2 }, { sepal_width: 2.3, petal_width: 1.0 }, { sepal_width: 2.7, petal_width: 1.3 }, { sepal_width: 3.0, petal_width: 1.2 }, { sepal_width: 2.9, petal_width: 1.3 }, { sepal_width: 2.9, petal_width: 1.3 }, { sepal_width: 2.5, petal_width: 1.1 }, { sepal_width: 2.8, petal_width: 1.3 }, { sepal_width: 3.3, petal_width: 2.5 }, { sepal_width: 2.7, petal_width: 1.9 }, { sepal_width: 3.0, petal_width: 2.1 }, { sepal_width: 2.9, petal_width: 1.8 }, { sepal_width: 3.0, petal_width: 2.2 }, { sepal_width: 3.0, petal_width: 2.1 }, { sepal_width: 2.5, petal_width: 1.7 }, { sepal_width: 2.9, petal_width: 1.8 }, { sepal_width: 2.5, petal_width: 1.8 }, { sepal_width: 3.6, petal_width: 2.5 }, { sepal_width: 3.2, petal_width: 2.0 }, { sepal_width: 2.7, petal_width: 1.9 }, { sepal_width: 3.0, petal_width: 2.1 }, { sepal_width: 2.5, petal_width: 2.0 }, { sepal_width: 2.8, petal_width: 2.4 }, { sepal_width: 3.2, petal_width: 2.3 }, { sepal_width: 3.0, petal_width: 1.8 }, { sepal_width: 3.8, petal_width: 2.2 }, { sepal_width: 2.6, petal_width: 2.3 }, { sepal_width: 2.2, petal_width: 1.5 }, { sepal_width: 3.2, petal_width: 2.3 }, { sepal_width: 2.8, petal_width: 2.0 }, { sepal_width: 2.8, petal_width: 2.0 }, { sepal_width: 2.7, petal_width: 1.8 }, { sepal_width: 3.3, petal_width: 2.1 }, { sepal_width: 3.2, petal_width: 1.8 }, { sepal_width: 2.8, petal_width: 1.8 }, { sepal_width: 3.0, petal_width: 1.8 }, { sepal_width: 2.8, petal_width: 2.1 }, { sepal_width: 3.0, petal_width: 1.6 }, { sepal_width: 2.8, petal_width: 1.9 }, { sepal_width: 3.8, petal_width: 2.0 }, { sepal_width: 2.8, petal_width: 2.2 }, { sepal_width: 2.8, petal_width: 1.5 }, { sepal_width: 2.6, petal_width: 1.4 }, { sepal_width: 3.0, petal_width: 2.3 }, { sepal_width: 3.4, petal_width: 2.4 }, { sepal_width: 3.1, petal_width: 1.8 }, { sepal_width: 3.0, petal_width: 1.8 }, { sepal_width: 3.1, petal_width: 2.1 }, { sepal_width: 3.1, petal_width: 2.4 }, { sepal_width: 3.1, petal_width: 2.3 }, { sepal_width: 2.7, petal_width: 1.9 }, { sepal_width: 3.2, petal_width: 2.3 }, { sepal_width: 3.3, petal_width: 2.5 }, { sepal_width: 3.0, petal_width: 2.3 }, { sepal_width: 2.5, petal_width: 1.9 }, { sepal_width: 3.0, petal_width: 2.0 }, { sepal_width: 3.4, petal_width: 2.3 }, { sepal_width: 3.0, petal_width: 1.8 }, ];32:T435,function select(config = {}) { let { value: formValue, title, description, submit, multiple, size, options } = Array.isArray(config) ? {options: config} : config; options = options.map( o => (typeof o === "object" ? o : { value: o, label: o }) ); const form = input({ type: "select", title, description, submit, getValue: input => { const selected = Array.prototype.filter .call(input.options, i => i.selected) .map(i => i.value); return multiple ? selected : selected[0]; }, form: html` ` }); form.output.remove(); return form; }33:T8dd,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) form.input.setAttribute(key, val); }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = e => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = e => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }34:[] 2f:{"title":"AutoChart - Automated Chart Dev Library by AntV","cells":[{"id":0,"value":"md`# AutoChart - Automated Chart Dev Library by AntV`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`---\n## Three Steps to Using the API\n
\n### 1. Choose A Dataset\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"viewof dataset = select({\n description: \"Choose a dataset\",\n options: [\"dataSample1 - Good for Bar Chart\", \"dataSample2 - Good for Pie Chart\", \"dataSample3 - Good for Scatter Chart\"],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"selectedDataset = chooseDataset(dataset);","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`\n~~~json\n${prettyJSON(selectedDataset)}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"md`\n
\n### 2. Specify Optional Configs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"viewof purpose = select({\n title: \"Purpose*\",\n description: \"Choose a Purpose of analysis (or not)\",\n options: [\"None\", \"Comparison\", \"Trend\", \"Distribution\", \"Rank\", \"Proportion\", \"Composition\"],\n value: \"None\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"anyPurpose = purpose !== \"None\" ? purpose : undefined;","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"viewof hasToolbar = select({\n title: \"toolbar*\",\n description: \"Hover on the chart, click the 'A' Button to switch in recommended chart types\",\n options: [true, false],\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`\nThere are many other options: doc (not yet)...\n\n
\n\nand now you have your options:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"options = ({ purpose: anyPurpose, toolbar: hasToolbar});","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"md`\n
\n### 3. Finally, One Line to Rule Them All\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"CA.autoChart(document.getElementById('container'), selectedDataset, options);","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`Hover on the chart, click the 'A' Button to switch in recommended chart types. Try it!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`---\n\n## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`\n#### Good For Bar Chart:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"dataSample1 = [\n { region: 'East', sales: 4684.44 },\n { region: 'North', sales: 4137.09 },\n { region: 'NorthEast', sales: 2681.46 },\n { region: 'SouthEast', sales: 2447.01 },\n { region: 'SouthWest', sales: 818.59 },\n { region: 'NorthWest', sales: 1303.50 },\n ];","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`\n#### Good For Pie Chart:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"dataSample2 = [\n {\n type: 'London',\n value: 10,\n },\n {\n type: 'Beijing',\n value: 300,\n },\n {\n type: 'Shanghai',\n value: 920,\n },\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`\n#### Good For Scatter Plot:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`---\n\n## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"CA = require(\"@antv/chart-advisor@0.1.3-alpha.17\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`---\n\n## Appendix\n\nfor making this Observable note\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function chooseDataset(str) {\n const dataSampleVar = str.split('-')[0].trim();\n const dataSample = {\n dataSample1,\n dataSample2,\n dataSample3\n };\n return dataSample[dataSampleVar];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"import { prettyJSON } from \"@jiazhewang/prettyjson\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}