2c:null 2d:["$","title",null,{"children":"AutoChart - Automated Chart Dev Library by AntV | Jiazhe Wang | Observable"}] 32: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 }, ];33: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; }34: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; }35:[] 30:{"id":"b0c2fe5ecba0ef53","slug":"autochart-automatic-chart-dev-library-by-antv","title":"AutoChart - Automated Chart Dev Library by AntV","thumbnail":"e69900a36a5985f1ab65d53fc467d55f1e1e196347df61c0a2ad1e443269e119","access_level":"public","create_time":"$D2019-12-20T12:57:13.503Z","update_time":"$D2020-03-20T04:36:38.071Z","view_time":null,"first_public_time":"$D2019-12-21T05:07:13.912Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"266d6ce454a14065","login":"jiazhewang","name":"Jiazhe Wang","avatar_url":"https://avatars-next.observableusercontent.com/0e9c971843a349a3d58339a8f273ecd6a8caee0fd0ac3cd89b770e25bfb2ee29","tier":"starter_2024"},"version":274,"publish_version":274,"role":null,"authored":false,"authors":[{"type":"individual","id":"0a1ba48c3593d3a2","login":"jiazhewang","name":"Jiazhe Wang","avatar_url":"https://avatars-next.observableusercontent.com/0e9c971843a349a3d58339a8f273ecd6a8caee0fd0ac3cd89b770e25bfb2ee29","tier":null}],"members":[{"type":"individual","id":"0a1ba48c3593d3a2","login":"jiazhewang","name":"Jiazhe Wang","avatar_url":"https://avatars-next.observableusercontent.com/0e9c971843a349a3d58339a8f273ecd6a8caee0fd0ac3cd89b770e25bfb2ee29","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`---\n## Three Steps to Using the API\n
\n### 1. Choose A Dataset\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"selectedDataset = chooseDataset(dataset);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"md`\n~~~json\n${prettyJSON(selectedDataset)}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`\n
\n### 2. Specify Optional Configs\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"anyPurpose = purpose !== \"None\" ? purpose : undefined;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"options = ({ purpose: anyPurpose, toolbar: hasToolbar});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`\n
\n### 3. Finally, One Line to Rule Them All\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"CA.autoChart(document.getElementById('container'), selectedDataset, options);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"md`---\n\n## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`\n#### Good For Bar Chart:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`\n#### Good For Pie Chart:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`\n#### Good For Scatter Plot:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`---\n\n## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"CA = require(\"@antv/chart-advisor@0.1.3-alpha.17\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`---\n\n## Appendix\n\nfor making this Observable note\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"d3format = require(\"d3-format@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"import { prettyJSON } from \"@jiazhewang/prettyjson\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"