31:T6bd,G2Demo2 = { // for Observable Cell const wrapper = html`

`; const container = html`

` wrapper.appendChild(container); yield wrapper; // Demo Code function getTypeColor(type) { if (type === 'Transgenic crop area') { return '#1890ff'; } if (type === 'Cultivated area') { return '#2fc25b'; } if (type === 'Transgenic crop area percentage(%)') { return '#facc14'; } } // Data source: TOP 10 GMO Cultivation Countries - ISAA 2016 const data = data_G2Demo2; const chart = new G2.Chart({ container, autoFit: true, height: 500, padding: [20, 20, 20, 70] }); chart.data(data); chart.legend(false); chart.tooltip({ showMarkers: false }); chart.facet('rect', { fields: ['class'], columnTitle: { offsetY: -15, style: { fontSize: 14, fontWeight: 300, fill: '#8d8d8d' } }, eachView: (view, facet) => { view.coordinate().transpose(); if (facet.columnIndex === 0) { view.axis('country', { tickLine: null, line: null, }); view.axis('value', false); } else { view.axis(false); } const color = getTypeColor(facet.columnValue); view .interval() .adjust('stack') .position('country*value') .color('type', [color, '#ebedf0']) .size(20) .label('value*type', (value, type) => { if (type === '2') { return null; } const offset = (value < 30) ? 10 : -4; return { offset, }; }); view.interaction('element-active'); } }); chart.render(); }32:Ta94,F2Demo = { // for Observable Cell const wrapper = html`

`; yield wrapper; // Emulate touch event TouchEmulator(document.getElementById('container1')); // Emulate touch event TouchEmulator(document.getElementById('container2')); // Demo Code // Demo1 const demo1 = () => { const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 }, ]; const chart = new F2.Chart({ id: 'container1', pixelRatio: window.devicePixelRatio, }); chart.source(data); chart .interval() .position('genre*sold') .color('genre'); chart.render(); }; // Demo2 const demo2 = () => { const data = [ { time: 'Jan.', tem: 1000 }, { time: 'Feb.', tem: 2200 }, { time: 'Mar.', tem: 2000 }, { time: 'Apr.', tem: 2600 }, { time: 'May.', tem: 2000 }, { time: 'Jun.', tem: 2600 }, { time: 'Jul.', tem: 2800 }, { time: 'Aug.', tem: 2000 } ]; const chart = new F2.Chart({ id: 'container2', pixelRatio: window.devicePixelRatio }); chart.source(data); chart.scale({ time: { range: [ 0, 1 ] }, tem: { tickCount: 5, min: 0 } }); chart.axis('time', { label(text, index, total) { const textCfg = { textAlign: 'center' }; if (index === 0) { textCfg.textAlign = 'left'; } if (index === total - 1) { textCfg.textAlign = 'right'; } return textCfg; } }); chart.tooltip({ showCrosshairs: true, onShow(ev) { const { items } = ev; items[0].name = items[0].title; } }); chart.guide().tag({ position: [ 6, 2800 ], content: 'peak', offsetY: -2, direct: 'tc' }); chart.area().position('time*tem'); chart.line().position('time*tem'); chart.render(); const point = chart.getPosition({ time: 'Apr.', tem: 2600 }); chart.showTooltip(point); }; // run demos demo1(); demo2(); }33:T428,G6Demo1 = { // for Observable Cell const wrapper = html`

`; const container = html`

` wrapper.appendChild(container); yield wrapper; // Demo Code const graph = new G6.Graph({ container, width: 800, height: 600, layout: { type: 'force', preventOverlap: true, nodeStrength: -50 }, }); const data = data_G6Demo1; const nodes = data.nodes; // randomize the node size nodes.forEach(node => { node.size = Math.random() * 20 + 5; }); graph.data({ nodes, edges: data.edges }); graph.render(); graph.on('node:dragstart', function(e) { graph.layout(); refreshDragedNodePosition(e); }); graph.on('node:drag', function(e) { refreshDragedNodePosition(e); }); graph.on('node:dragend', function(e) { e.item.get('model').fx = null; e.item.get('model').fy = null; }); function refreshDragedNodePosition(e) { const model = e.item.get('model'); model.fx = e.x; model.fy = e.y; } }34:T1306,G6Demo2 = { // for Observable Cell const wrapper = html`

`; const container = html`

` wrapper.appendChild(container); yield wrapper; // Demo Code // the tree graph data const data = data_G6Demo2; // custom a node type G6.registerNode( 'flow-rect', { draw(cfg, group) { const { name = '', status, totalFinishIncomeAmtString, finishRate, collapsed, } = cfg; const rectConfig = { width: 200, height: 74, lineWidth: 1, fontSize: 12, fill: '#fff', radius: 4, stroke: status === 'I' ? '#DCDFE5' : '#1890FF', opacity: 1, }; if (finishRate < 0.95) rectConfig.stroke = '#EB2F96'; const textConfig = { textAlign: 'left', textBaseline: 'top', }; const rect = group.addShape('rect', { attrs: { x: 0, y: 0, ...rectConfig, }, }); // label title group.addShape('text', { attrs: { ...textConfig, x: 12, y: 8, text: name, fontSize: 14, fill: '#000', cursor: 'pointer', }, }); // label count group.addShape('text', { attrs: { ...textConfig, x: 12, y: 34, text: totalFinishIncomeAmtString, fontSize: 20, fill: '#000', }, }); // label percentage group.addShape('text', { attrs: { ...textConfig, x: 188, y: 37, text: `${((finishRate || 0) * 100).toFixed(2)}%`, fontSize: 14, textAlign: 'right', fill: rectConfig.stroke, }, }); // bottom line group.addShape('rect', { attrs: { x: 0, y: 70, width: rectConfig.width, height: 4, radius: [0, 0, rectConfig.radius, rectConfig.radius], fill: '#DCDFE5', }, }); // bottom percent group.addShape('rect', { attrs: { x: 0, y: 70, width: rectConfig.width * cfg.finishRate, height: 4, radius: [0, 0, 0, rectConfig.radius], fill: rectConfig.stroke, }, }); if (cfg.children && cfg.children.length) { // collapse circle group.addShape('circle', { attrs: { x: rectConfig.width, y: rectConfig.height / 2, r: 8, stroke: rectConfig.stroke, fill: '#fff', }, name: 'collapse-marker' }); // collpase text group.addShape('text', { attrs: { x: rectConfig.width, y: rectConfig.height / 2, width: 16, height: 16, textAlign: 'center', textBaseline: 'middle', text: collapsed ? '+' : '-', fontSize: 16, fill: rectConfig.stroke, cursor: 'pointer', }, name: 'collapse-marker-text' }); } return rect; } }, 'rect', ); // Instantiate the Graph const graph = new G6.TreeGraph({ container, // the html container for the graph // the size of the graph width: 800, height: 600, fitView: true, // fit the graph to the view modes: { // intraction modes default: [ 'drag-canvas', { type: 'collapse-expand', shouldBegin: e => { if (e.target.get('name') === 'collapse-marker' || e.target.get('name') === 'collapse-marker-text') { graph.setItemState(e.item, 'collapse', e.item.getModel().collapsed ? 'yes' : 'no'); return true; } return false; } }] }, defaultNode: { // global node configuration type: 'flow-rect' }, defaultEdge: { // global edge configuration type: 'cubic-horizontal' }, nodeStateStyles: { // node styles in different states 'collapse:yes': { 'collapse-marker-text': { text: '-', }, }, 'collapse:no': { 'collapse-marker-text': { text: '+', }, } }, layout: { // layout algorithm for the tree graph type: 'compactBox', direction: 'LR', getVGap: function getVGap() { return 50; }, getHGap: function getHGap() { return 130; }, } }); // Load the data graph.data(data); // Render the graph graph.render(); }35:Tfed,X6Demo = { // for Observable Cell const wrapper = html`

` wrapper.appendChild(style_X6Demo); yield wrapper; // Demo Code const { Graph, Dnd, MiniMap, UndoManager, Platform } = X6 const graph = new Graph(wrapper.querySelector('#container'), { guide: true, rubberband: true, connection: true, rotate: false, resize: true, infinite: true, keyboard: { enabled: true, global: true, escape: true, }, getAnchors(cell) { if (cell != null && this.model.isNode(cell)) { return [ [0, 0], [0.5, 0], [1, 0], [0, 0.5], [1, 0.5], [0, 1], [0.5, 1], [1, 1], ] } return null }, }) graph.render({ nodes: [ { id: 'node-0', x: 60, y: 60, width: 80, height: 30, label: 'Hello', }, { id: 'node-1', x: 240, y: 240, width: 80, height: 30, label: 'World', }, ], edges: [ { id: 'edge-0', source: 'node-0', target: 'node-1', label: 'Label', }, ], }) // graph.center() // keyboard const ctrlKey = Platform.IS_MAC ? 'command' : 'ctrl' const undoManager = UndoManager.create(graph) graph.bindKey(['del', 'backspace'], e => { e.preventDefault() graph.deleteCells() // delete selected cells }) graph.bindKey(`${ctrlKey}+Z`, e => { e.preventDefault() undoManager.undo() }) graph.bindKey(`${ctrlKey}+Shift+Z`, e => { e.preventDefault() undoManager.redo() }) // minimap new MiniMap(graph, { container: wrapper.querySelector('.minimap'), }) // dnd const dataMap = { rectangle: { width: 80, height: 30, label: 'rectangle' }, circle: { width: 48, height: 48, shape: 'ellipse', perimeter: 'ellipse', label: 'circle', }, ellipse: { width: 80, height: 48, shape: 'ellipse', perimeter: 'ellipse', label: 'ellipse', }, } function createDragElem(w,h){ const elem = document.createElement('div') elem.style.width = `${w}px` elem.style.height = `${h}px` elem.style.border = '1px dashed #000' elem.style.cursor = 'move' elem.style.zIndex = '9999' return elem } wrapper .querySelector('.sidebar') .querySelectorAll('div') .forEach(elem => { const type = elem.getAttribute('class') const data = dataMap[type] if (data) { const dnd = new Dnd(elem, { data: data, getGraph: () => graph, createDragElement: ({ element }) => { return createDragElem(element.offsetWidth, element.offsetHeight) }, createPreviewElement: ({ graph, element }) => { const w = element.offsetWidth const h = element.offsetHeight const s = graph.view.scale return createDragElem(w * s, h * s) }, }) dnd.on('dragPrepare', ({ dragElement }) => { dragElement.style.margin = '0' }) dnd.on('drop', ({ data, graph, targetPosition }) => { if (data != null) { const x = targetPosition.x const y = targetPosition.y const cell = graph.addNode({ ...data, x: x, y: y, }) graph.setCellSelected(cell) } }) } }) }36:T1467,data_G2Demo2 = [ { class: 'Transgenic crop area', country: 'India', type: '1', value: 10.8 }, { class: 'Transgenic crop area', country: 'India', type: '2', value: 89.2 }, { class: 'Transgenic crop area', country: 'United States', type: '1', value: 72.9 }, { class: 'Transgenic crop area', country: 'United States', type: '2', value: 27.1 }, { class: 'Transgenic crop area', country: 'China', type: '1', value: 2.8 }, { class: 'Transgenic crop area', country: 'China', type: '2', value: 97.2 }, { class: 'Transgenic crop area', country: 'Brazil', type: '1', value: 49.1 }, { class: 'Transgenic crop area', country: 'Brazil', type: '2', value: 50.9 }, { class: 'Transgenic crop area', country: 'Canada', type: '1', value: 11.6 }, { class: 'Transgenic crop area', country: 'Canada', type: '2', value: 88.4 }, { class: 'Transgenic crop area', country: 'Argentina', type: '1', value: 23.8 }, { class: 'Transgenic crop area', country: 'Argentina', type: '2', value: 76.2 }, { class: 'Transgenic crop area', country: 'Pakistan', type: '1', value: 2.9 }, { class: 'Transgenic crop area', country: 'Pakistan', type: '2', value: 97.1 }, { class: 'Transgenic crop area', country: 'South Africa', type: '1', value: 2.7 }, { class: 'Transgenic crop area', country: 'South Africa', type: '2', value: 97.3 }, { class: 'Transgenic crop area', country: 'Paraguay', type: '1', value: 3.6 }, { class: 'Transgenic crop area', country: 'Paraguay', type: '2', value: 96.4 }, { class: 'Transgenic crop area', country: 'Uruguay', type: '1', value: 1.3 }, { class: 'Transgenic crop area', country: 'Uruguay', type: '2', value: 98.7 }, { class: 'Cultivated area', country: 'India', type: '1', value: 175.4 }, { class: 'Cultivated area', country: 'India', type: '2', value: 24.6 }, { class: 'Cultivated area', country: 'United States', type: '1', value: 165.2 }, { class: 'Cultivated area', country: 'United States', type: '2', value: 34.8 }, { class: 'Cultivated area', country: 'China', type: '1', value: 108.4 }, { class: 'Cultivated area', country: 'China', type: '2', value: 91.6 }, { class: 'Cultivated area', country: 'Brazil', type: '1', value: 73.2 }, { class: 'Cultivated area', country: 'Brazil', type: '2', value: 126.8 }, { class: 'Cultivated area', country: 'Canada', type: '1', value: 46.9 }, { class: 'Cultivated area', country: 'Canada', type: '2', value: 153.1 }, { class: 'Cultivated area', country: 'Argentina', type: '1', value: 38.6 }, { class: 'Cultivated area', country: 'Argentina', type: '2', value: 161.4 }, { class: 'Cultivated area', country: 'Pakistan', type: '1', value: 22 }, { class: 'Cultivated area', country: 'Pakistan', type: '2', value: 178 }, { class: 'Cultivated area', country: 'South Africa', type: '1', value: 12.1 }, { class: 'Cultivated area', country: 'South Africa', type: '2', value: 187.9 }, { class: 'Cultivated area', country: 'Paraguay', type: '1', value: 5.5 }, { class: 'Cultivated area', country: 'Paraguay', type: '2', value: 194.5 }, { class: 'Cultivated area', country: 'Uruguay', type: '1', value: 1.8 }, { class: 'Cultivated area', country: 'Uruguay', type: '2', value: 198.2 }, { class: 'Transgenic crop area percentage(%)', country: 'India', type: '1', value: 6.2 }, { class: 'Transgenic crop area percentage(%)', country: 'India', type: '2', value: 93.8 }, { class: 'Transgenic crop area percentage(%)', country: 'United States', type: '1', value: 44.1 }, { class: 'Transgenic crop area percentage(%)', country: 'United States', type: '2', value: 55.9 }, { class: 'Transgenic crop area percentage(%)', country: 'China', type: '1', value: 2.6 }, { class: 'Transgenic crop area percentage(%)', country: 'China', type: '2', value: 97.4 }, { class: 'Transgenic crop area percentage(%)', country: 'Brazil', type: '1', value: 67 }, { class: 'Transgenic crop area percentage(%)', country: 'Brazil', type: '2', value: 33 }, { class: 'Transgenic crop area percentage(%)', country: 'Canada', type: '1', value: 24.7 }, { class: 'Transgenic crop area percentage(%)', country: 'Canada', type: '2', value: 75.3 }, { class: 'Transgenic crop area percentage(%)', country: 'Argentina', type: '1', value: 61.6 }, { class: 'Transgenic crop area percentage(%)', country: 'Argentina', type: '2', value: 38.4 }, { class: 'Transgenic crop area percentage(%)', country: 'Pakistan', type: '1', value: 13.2 }, { class: 'Transgenic crop area percentage(%)', country: 'Pakistan', type: '2', value: 86.8 }, { class: 'Transgenic crop area percentage(%)', country: 'South Africa', type: '1', value: 22.4 }, { class: 'Transgenic crop area percentage(%)', country: 'South Africa', type: '2', value: 77.6 }, { class: 'Transgenic crop area percentage(%)', country: 'Paraguay', type: '1', value: 65.7 }, { class: 'Transgenic crop area percentage(%)', country: 'Paraguay', type: '2', value: 34.3 }, { class: 'Transgenic crop area percentage(%)', country: 'Uruguay', type: '1', value: 73 }, { class: 'Transgenic crop area percentage(%)', country: 'Uruguay', type: '2', value: 27 } ];37:T87a,data_G6Demo2 = ({ id: 'g1', name: 'Totol Income', // name of this node totalFinishIncomeAmtString: '22.47 Billion', finishRate: 0.97, status: 'S', // the children of this node children: [ { id: 'g12', name: 'Project A', totalFinishIncomeAmtString: '10.27 Billion', finishRate: 0.457, status: 'S', children: [ { id: 'g121', name: 'Project A1', totalFinishIncomeAmtString: '3.10 Billion', finishRate: 0.302, status: 'S', collapsed: true, children: [ { id: 'g1211', name: 'Project A11', totalFinishIncomeAmtString: '3.10 Billion', finishRate: 1.0, status: 'I', }, ], }, { id: 'g122', name: 'Project A2', totalFinishIncomeAmtString: '6.27 Billion', finishRate: 0.611, status: 'S', }, { id: 'g123', name: 'Project A3', totalFinishIncomeAmtString: '1.10 Billion', finishRate: 0.107, status: 'S', collapsed: true, children: [ { id: 'g1231', name: 'Project A31', totalFinishIncomeAmtString: '1.10 Billion', finishRate: 1.0, status: 'I', }, ], }, ], }, { id: 'g13', name: 'Project B', totalFinishIncomeAmtString: '8.20 Billion', finishRate: 0.364, status: 'S', collapsed: true, children: [ { id: 'g131', name: 'Project B1', totalFinishIncomeAmtString: '22.47 Billion', finishRate: 0.123, status: 'I', }, { id: 'g132', name: 'Project B2', totalFinishIncomeAmtString: '22.47 Billion', finishRate: 0.123, status: 'I', }, ], }, { id: 'g14', name: 'Project C', totalFinishIncomeAmtString: '2.00 Billion', finishRate: 0.089, status: 'I', }, ], });38:T4b9,viewof style_X6Demo = collapsedCSS('style_X6Demo')` .wrapper { width: 960px; height: 400px; position: relative; padding-left: 200px; } .sidebar { position: absolute; width: 200px; height: 100%; left: 0; top: 0; padding: 1px 0; font-size: 12px; background: #f5f5f5; } .minimap { position: absolute; width: 228px; height: 120px; top: 24px; right: 220px; border: 1px solid #ccc; z-index: 9; background: #fff; } .rectangle, .circle, .ellipse { border: 1px solid #000; text-align: center; cursor: pointer; user-select: none; margin: 16px auto; } .rectangle { width: 80px; height: 30px; line-height: 28px; } .circle { width: 48px; height: 48px; border-radius: 100%; line-height: 46px; } .ellipse { width: 80px; height: 48px; border-radius: 100%; line-height: 46px; } .container-wrapper { width: 760px; height: 400px; padding: 0; float: left; border: 1px solid #ccc; outline: none; } `39:[{"id":"360e56680895214b08aedf2a8bb1c8e67e2bc7166024e88d43f94edd8788399c64087d0371187bffd81d3e65fc4f8c339bdd716631e74e8f91db1a465dd4f63f","href":"https://static.observableusercontent.com/files/360e56680895214b08aedf2a8bb1c8e67e2bc7166024e88d43f94edd8788399c64087d0371187bffd81d3e65fc4f8c339bdd716631e74e8f91db1a465dd4f63f","name":"antv-banner@1.jpg","type":"image/jpeg","lastModified":1584633981216.794,"size":1019513},{"id":"2d0fe5bacb19e3405c27fbbc0b15b2b04a065416f01d2dfb279d419be6828bb50e5526935793c303b7bf32db7c76c35be9a576739212be4099943f44981ac909","href":"https://static.observableusercontent.com/files/2d0fe5bacb19e3405c27fbbc0b15b2b04a065416f01d2dfb279d419be6828bb50e5526935793c303b7bf32db7c76c35be9a576739212be4099943f44981ac909","name":"chartcube.gif","type":"image/gif","lastModified":1584694893926.153,"size":252987},{"id":"546ef39f4ee31f26f22616b38d65150b403375d6d35e2f8bc99e1ac89cd74900218df47a2d07d00a4a14c34058964f8e91b7253d3ee33612768720de5cdeb104","href":"https://static.observableusercontent.com/files/546ef39f4ee31f26f22616b38d65150b403375d6d35e2f8bc99e1ac89cd74900218df47a2d07d00a4a14c34058964f8e91b7253d3ee33612768720de5cdeb104","name":"graphindemo.gif","type":"image/gif","lastModified":1584722883139.831,"size":1213598}] 2f:{"title":"Introduction to AntV","cells":[{"id":0,"value":"md`# Introduction to AntV`","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"coverImage = FileAttachment(\"antv-banner@1.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":756,"value":"md`\n[**AntV**](https://antv.vision/en) is an technology brand for data visualization. It contains multiple open-source JavaScript libraries to support visualization needs in various fields, including _statistical charts_, _graph visualization_, _geospatial visualization_ and even _automatic chart recommendation and generation_.\n\n\nTested by huge data business in Ant Financial Services Group and Alibaba Group, it can guarantee various data analysis scenarios.\n\nThis notebook will introduce the capabilities of **AntV** in various aspects and show you related demos.\n\n_To follow the latest updates of AntV: ✩ Star the repos you are interested in on [GitHub](https://github.com/antvis)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`
\n## Statistical Charts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"md`\nAntV supports basic statistical charts with the libraries named [**G2**](https://g2.antv.vision/en), [**G2Plot**](https://g2plot.antv.vision/en), [**F2**](https://f2.antv.vision/en), and [**AVA**](https://github.com/antvis/AVA). Feel confused? Don't worry! We can walk through them quickly.\n\n
\n### G2 - 📊 Visualization Grammars for Statistical Charts\n\n**G2** is a JavaScript library that implements [_the **G**rammar of **G**raphics_](https://www.springer.com/gp/book/9780387245447) _(Yes, this is the origin of the name \"G2\")_. These grammars divide graphics into specifications with mappings between data and visual variables, such as color, shape or length.\n\nHere is a very simple demo: A bar chart by G2.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"G2Demo1 = {\n // for Observable Cell\n const wrapper = html`

`;\n const container = html`

`\n wrapper.appendChild(container);\n yield wrapper;\n\n // Demo Code\n \n const data = [\n { genre: 'Sports', sold: 275 },\n { genre: 'Strategy', sold: 115 },\n { genre: 'Action', sold: 120 },\n { genre: 'Shooter', sold: 350 },\n { genre: 'Other', sold: 150 },\n ];\n\n // Step 1: declare Chart instance\n const chart = new G2.Chart({\n container, // specify DOM element\n width: 600,\n height: 300,\n });\n\n // Step 2: load data\n chart.data(data);\n\n // Step 3: grammar of graphics\n chart.interval().position('genre*sold');\n\n // Step 4: render\n chart.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"md`\nWe can see that the main part is the _Step 3_. It defines the chart by grammars in a chain syntax. By using this syntax flexibly, we can define countless types of graphics.\n\nFor example, here is an advanced implementation:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"md`\n> _To learn more about **G2**, visit its [**website**](https://g2.antv.vision/en) to see more [**demos**](https://g2.antv.vision/en/examples/gallery), or star its [**GitHub repo**](https://github.com/antvis/G2)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"md`\nHowever, the grammars seem very hard to get started... if you are not a visualization expert. So, we have a \"plan B\" for wider users.\n\n
\n### G2Plot - 📈 A Configurable Library Based on G2\n\nFor beginners, forget about the grammars, _configs_ (or _options_) are more friendly.\n\nWith **G2Plot**, \n\n1. choose a **chart type** (_Pie_, _Bar_, _Line_, _Rose_, _etc._)\n2. set the **configs**\n\nthen you are all done.\n\nTake a look at this example: a basic rose chart.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"G2PlotDemo = {\n // for Observable Cell\n const wrapper = html`

`;\n const container = html`

`\n wrapper.appendChild(container);\n yield wrapper;\n \n // Demo Code\n \n const data = [\n { type: 'Apple', value: 27 },\n { type: 'Banana', value: 25 },\n { type: 'Orange', value: 18 },\n { type: 'Peach', value: 15 },\n { type: 'Other', value: 8 },\n ];\n\n const rosePlot = new G2Plot.Rose(container, {\n forceFit: true,\n title: { visible: true, text: 'A Basic Rose Chart' },\n description: { visible: true, text: 'Declare (colorField) as the field maps to color channel.' },\n radius: 0.8,\n data,\n radiusField: 'value',\n categoryField: 'type',\n colorField: 'type',\n label: { visible: true, type: 'outer', content: (text) => text.value },\n });\n\n rosePlot.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"md`\n> _To learn more about **G2Plot**, visit its [**website**](https://g2plot.antv.vision/en) to see more [**demos**](https://g2plot.antv.vision/en/examples/gallery) and [**tutorials**](https://g2plot.antv.vision/en/docs/manual/getting-started), or star its [**GitHub repo**](https://github.com/antvis/G2Plot)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"md`\nTo use G2Plot, you don't have to worry about the grammars, but you still have to learn some \"taxonomy\". What chart type to use for a given dataset? What's the difference between _stacked_ and _grouped_ bar charts?\n\nTo help you stay away from these problems in some cases, we have an \"AI\" for you!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`
\n## Automatically Recommend & Generate Charts\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`\nWhat if... you just drop your dataset and tell what you want to know, and [**someone**](https://github.com/antvis/AVA) draws the graphics for you!\n\nTry this: _(import the function **autoChart** from [AVA/ChartAdvisor](https://github.com/antvis/AVA/tree/master/packages/chart-advisor) first)_\n\n
\n

\nautoChart(container, data, options);\n

\n💍 _ONE LINE TO RULE THEM ALL !!!_\n

\n
\n\n### AVA - 🤖 A Framework for Automated Visual Analytics\n\n**AVA** is a framework and a solution for more convenient visual analytics. It recommends visualization instances by understanding the given dataset and analysis needs.\n\nCheck the following dynamic chart:\n\n_Hover on the chart, click the switch button_ 🔀 _to change to other recommended chart types in the list. Click the \"Config\" button to explore more..._\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"AVADemo = {\n // for Observable Cell\n const container = html`

`;\n yield container;\n \n // Demo Code\n \n const data = AVA_chooseDataset(AVA_dataset);\n \n const options = { toolbar: true, development: true };\n \n AVA_CA.autoChart(container, data, options);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"viewof AVA_dataset = select({\n title: \"Change a dataset:\",\n description: \"Visual will change with different dataset selection\",\n options: [\"dataSample1\", \"dataSample2\", \"dataSample3\"],\n value: \"dataSample1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`\n~~~json\n${prettyJSON(AVA_chooseDataset(AVA_dataset))}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"md`\nAVA is still in the lab and there is a long todo list. Any contribution is welcome!\n\n> _To learn more about **AVA**, visit and star its [**GitHub repo**](https://github.com/antvis/AVA)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":679,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`\n## Statistical Charts on Mobile\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"md`\nWell, sometimes we develop charts on mobile devices. There is a library for optimized **F**ast and **F**lexible experience on mobile - **F2**.\n\n### F2 - 📱An Elegant Interactive Charting Library for Mobile\n\nThe following demo illustrates everything.\n\n> _To learn more about **F2**, visit its [**website**](https://f2.antv.vision/en/) to see more [**demos**](https://f2.antv.vision/en/examples/basic), or star its [**GitHub repo**](https://github.com/antvis/F2)._\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"md`
\n## Graphs\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`\nHow about visualizing relations? Those nodes and links in the graph theory?\n\n### G6 - 🖇️ A Graph Visualization Library\n\nIf you have ever heard about [_**6** degrees of separation_](https://en.wikipedia.org/wiki/Six_degrees_of_separation), that's why this **G**raph library was named **G6**.\n\nLet's see a simple demo:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"md`\nNodes, links, layout, force, ... Nailed it in one library!\n\nLooking for more advanced and customized example? Here it is:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":988,"value":"md`\n> _To learn more about **G6**, visit its [**website**](https://g6.antv.vision/en/) to see more [**demos**](https://g6.antv.vision/en/examples/tree/compactBox) and [**tutorials**](https://g6.antv.vision/en/docs/manual/introduction), or star its [**GitHub repo**](https://github.com/antvis/G6)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"md`
\n## Graph Edit\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md`\nWait, maybe you want to DRAW a graph, not to represent one? The tool you are looking for is a graph editor.\n\n
\n### X6 - 🛠️ A JavaScript Graph Editing Engine\n\nSimilarly with G6, but this one is for making graph editor. \n\nTry this playground: \n\n* Drag and Drop\n* Select\n* Pan and Zoom\n* Keyboard Shortcuts:\n * delete: ⌫\n * undo: ^ctrl/⌘cmd + Z\n * redo: ^ctrl/⌘cmd + ⇧shift + Z\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1002,"value":"md`\nX6 is still in the lab. Any contribution is welcome!\n\n> _To learn more about **X6**, visit and star its [**GitHub repo**](https://github.com/antvis/x6)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`
\n## Geographical Visualization\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"md`\nMaps! Of course there are.\n\n
\n### L7 - 🌎 WebGL-powered Geospatial Visualization Framework\n\n**L7** relies on Mapbox GL or AMap to render basemaps. It supports the illustration of large-scale maps.\n\nCheck this:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"L7Demo = {\n // for Observable Cell\n const container = html`

`;\n yield container;\n \n // Demo Code\n\n const scene = new L7.Scene({\n id: container,\n map: new L7.Mapbox({\n center: [-74.006, 40.7128],\n zoom: 14,\n style: \"dark\"\n })\n });\n \n const data = data_L7Demo;\n\n scene.on(\"loaded\", () => {\n const lineLayer = new L7.LineLayer()\n .source(data, {\n parser: {\n type: \"json\",\n coordinates: \"path\"\n }\n })\n .size(1.5)\n .shape(\"line\")\n .color(\"color\", v => `rgb(${v})`)\n .animate({\n interval: 0.6,\n trailLength: 1.5,\n duration: 6\n });\n\n scene.addLayer(lineLayer);\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"md`\n> _To learn more about **L7**, visit its [**website**](https://l7.antv.vision/en/) to see more [**demos**](https://l7.antv.vision/en/examples/gallery), or star its [**GitHub repo**](https://github.com/antvis/L7)._\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1020,"value":"md`---\n\n## Products\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"md`\nIn addition to libraries, AntV also have some out-of-the-box products.\n\n
\n### ChartCube: Online Charting Tool for both Designers and Developers\n\n[**ChartCube** (chartcube.alipay.com)](https://chartcube.alipay.com/) is an online tool for quick charting that anyone can use with a modern web browser.\n\nHere is an [article](https://medium.com/ant-design/new-charting-tool-for-designers-and-developers-chartcube-e60dd8ca061d) for the details.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1033,"value":"FileAttachment(\"chartcube.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"md`\n
\n### Graphin: A React Toolkit for Graph analysis\n\nand **Graphin Studio** for Comprehensive Graph Analysis\n\n[**Graphin**](https://graphin.antv.vision/en) stands for Graph Insight. It's a toolkit based on G6 and React, that focuses on relational visual analysis. It's simple, efficient, out of the box.\n\nHere is a [live demo](https://gs-share-cn-shanghai.aliyuncs.com/index8b5ab67a3e754e02a77aae7871465031.html#/)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"md`\n
\n\n---\n\n## The End\n\nAgain, if you are interested in anything of AntV, visit the official [**website** (antv.vision)](https://antv.vision/en) to learn more.\n\nAnd also, to follow the latest updates of AntV: ✩ Star the repos on [GitHub](https://github.com/antvis).\n\n_I'd like to thank the team of Observable for this excellent website and thank Mike for his help in my writing of this notebook._\n\n\n
\n\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"md`---\n\n
\n\n
\n\n## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"data_AVA_sample1 = [\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":697,"value":"data_AVA_sample2 = [\n {\n type: 'London',\n value: 90,\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":700,"value":"data_AVA_sample3 = [\n { \"A\": 3.52, \"B\": 0.21 },\n { \"A\": 3, \"B\": 0.24 },\n { \"A\": 3.23, \"B\": 0.22 },\n { \"A\": 3.14, \"B\": 0.26 },\n { \"A\": 3.65, \"B\": 0.22 },\n { \"A\": 3.92, \"B\": 0.44 },\n { \"A\": 3.44, \"B\": 0.32 },\n { \"A\": 3.46, \"B\": 0.23 },\n { \"A\": 2.93, \"B\": 0.24 },\n { \"A\": 3.16, \"B\": 0.16 },\n { \"A\": 3.78, \"B\": 0.21 },\n { \"A\": 3.43, \"B\": 0.24 },\n { \"A\": 3.2, \"B\": 0.16 },\n { \"A\": 3.6, \"B\": 0.13 },\n { \"A\": 4, \"B\": 0.2 },\n { \"A\": 4.41, \"B\": 0.42 },\n { \"A\": 3.9, \"B\": 0.41 },\n { \"A\": 3.53, \"B\": 0.34 },\n { \"A\": 3.84, \"B\": 0.38 },\n { \"A\": 3.8, \"B\": 0.33 },\n { \"A\": 3.46, \"B\": 0.25 },\n { \"A\": 3.7, \"B\": 0.46 },\n { \"A\": 3.68, \"B\": 0.22 },\n { \"A\": 3.3, \"B\": 0.51 },\n { \"A\": 3.42, \"B\": 0.23 },\n { \"A\": 3.33, \"B\": 0.24 },\n { \"A\": 3.4, \"B\": 0.42 },\n { \"A\": 3.53, \"B\": 0.23 },\n { \"A\": 3.4, \"B\": 0.28 },\n { \"A\": 3.21, \"B\": 0.29 },\n { \"A\": 3.1, \"B\": 0.27 },\n { \"A\": 3.44, \"B\": 0.45 },\n { \"A\": 4.17, \"B\": 0.17 },\n { \"A\": 4.29, \"B\": 0.24 },\n { \"A\": 3.13, \"B\": 0.14 },\n { \"A\": 3.2, \"B\": 0.24 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":562,"value":"data_G6Demo1 = fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/relations.json').then(response => response.json());","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"data_L7Demo = fetch(\"https://gw.alipayobjects.com/os/basement_prod/5592c737-1c70-4d6b-82c1-e74e5a019b04.json\")\n .then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`---\n\n## StyleSheets`","pinned":false,"hidden":false,"mode":"ojs"},{"id":587,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`---\n\n## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"G2 = require(\"@antv/g2@4.0.2\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"G2Plot = require(\"@antv/g2plot@1.0.1\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"F2 = require('@antv/f2@3.6.1');","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"G6 = require(\"@antv/g6@3.4.1\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"X6 = require(\"https://unpkg.com/@antv/x6@0.3.1/dist/x6.min.js\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"L7 = require(\"@antv/l7@2.1.5\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"AVA_CA = require(\"@antv/chart-advisor@0.1.3-alpha.17\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`---\n\n## Appendix\n\nfor making this Observable note\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"import { prettyJSON } from \"@jiazhewang/prettyjson\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"import { collapsedCSS } from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"TouchEmulator = require('f2-touchemulator')","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"function AVA_chooseDataset(datasetStr) {\n const dataSample = {\n dataSample1: data_AVA_sample1,\n dataSample2: data_AVA_sample2,\n dataSample3: data_AVA_sample3\n };\n return dataSample[datasetStr];\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}