2a:null 2b:["$","title",null,{"children":"G2Plot 2.3.23 Released 🎉 | 廖晓娟 | Observable"}] 30:T499,plot1 = { const p = new Facet("container1", { appendPadding: [0, 0, 16, 0], padding: 16, theme: "custom", type: "matrix", fields: ["SepalLength", "SepalWidth", "PetalLength", "PetalWidth"], data: data1, meta: { Species: { sync: true }, SepalLength: { sync: true, nice: true }, SepalWidth: { nice: true }, PetalLength: { nice: true }, PetalWidth: { nice: true } }, axes: {}, eachView: (view, facet) => { if (facet.rowIndex === facet.columnIndex) { return { type: "histogram", options: { data: facet.data, binField: facet.columnField, binNumber: 30, stackField: "Species", isStack: true, columnStyle: { stroke: null } } }; } return { type: "scatter", options: { data: facet.data, xField: facet.columnField, yField: facet.rowField, colorField: "Species", shape: "circle", pointStyle: { fillOpacity: 0.3, stroke: null }, size: 3 } }; } }); p.render(); return p; }31:T7d6,plot4 = { const p = new Facet("container4", { appendPadding: [0, 18, -50, 32], data: data4, type: "tree", theme: 'custom', fields: ["clarity"], meta: { cut: { sync: true, // 手动进行排序，保证颜色映射正确 values: ["Ideal", "Good", "Premium", "Very-Good", "Fair"] }, mean: { sync: true, tickCount: 5, formatter: (v) => `${Math.ceil(v)}` } }, // tree-facet 连接线样式和是否平滑 line: { style: { stroke: "#dedede" }, smooth: true }, axes: {}, tooltip: { showMarkers: false }, eachView: (view, facet) => { const { rowIndex } = facet || {}; const dv = new DataSet.DataView(); dv.source(facet.data).transform({ type: "aggregate", fields: ["price"], operations: ["mean"], as: ["mean"], groupBy: ["cut"] }); if (rowIndex === 0) { return { type: "pie", options: { data: dv.rows, meta: { mean: { // 关闭饼图 'mean'字段的 scale 同步 sync: false } }, angleField: "mean", colorField: "cut", radius: 1, pieStyle: { stroke: null }, theme: "custom", // 添加动画 animation: {}, // 添加交互 interactions: [{ type: "element-active" }] } }; } return { type: "column", options: { data: dv.rows, theme: "custom", meta: { mean: { // 关闭饼图 'mean'字段的 scale 同步 sync: rowIndex === 0 ? false : true } }, xField: "cut", yField: "mean", seriesField: "cut", columnStyle: { fillOpacity: 0.85 }, // 添加动画 animation: {}, // 添加交互 interactions: [{ type: "element-active" }, { type: "active-region" }] } }; } }) p.render(); return p; }32:[] 2e:{"id":"55c8337568b838dc","slug":"g2plot-2-3-23-released","title":"G2Plot 2.3.23 Released 🎉","thumbnail":"eac6fefc38b7df256dfecd25e1c3188e17f2bef9d98b0a6dbe9f3f6ad8c571e5","access_level":"public","create_time":"$D2021-06-09T12:08:10.263Z","update_time":"$D2021-06-10T09:26:09.578Z","view_time":null,"first_public_time":"$D2021-06-09T15:00:55.173Z","fork":false,"stars":53,"starred":false,"owner":{"type":"team","id":"43eb0216033f303e","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":"starter_2024"},"version":626,"publish_version":626,"role":null,"authored":false,"authors":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null}],"members":[{"type":"individual","id":"6c057a398a73f6b0","login":"visiky","name":"廖晓娟","avatar_url":"https://avatars-next.observableusercontent.com/f525ef0af81c7728535c96eda2de2ea96c17ff10563acfdf254c6b5f3fd1c7b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"title":"G2Plot 2.3.23 Released 🎉","cells":[{"id":0,"value":"# G2Plot 2.3.23 Released 🎉 \n\n> [G2Plot](https://g2plot.antv.vision) is an interactive and responsive charting library based on the grammar of graphics, which enables users to generate high-quality statistical charts through a few lines of code easily.\n\n> [G2](https://g2.antv.vision) in \"G2Plot\" means **the grammar of graphics** and pays homage to ggplot2.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":263,"value":"## What's New in G2Plot 2.3.23","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":256,"value":"We've added two new plot types: `Facet` and `Violin`, support `localization`, enhance several plots, like `Sunburst`, `Stock`, `Heatmap` and `Box` and so on. Learn more about details in [Version History](https://github.com/antvis/G2Plot/releases/tag/2.3.23), try it and enjoy these plots and features.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":23,"value":"## 📈 🆕 Facet plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":278,"value":"**Facet** is to use the recursive nesting ability of view provided by G2 to divide a piece of data into several subsets according to a certain dimension, and then create a set of charts to draw each data subset into the pane of the chart matrix.\n\nFaceting mainly provides two functions:\n\n- Divide the data set according to the specified dimension;\n- Arrange and layout visualizations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":283,"value":"Check out more [examples of Facet Plot](https://g2plot.antv.vision/en/examples/gallery#category-FacetPlot) in our gallery.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":288,"value":"### List Facet Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":69,"value":"data0 = fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json')\n .then((res) => res.json());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":70,"value":"plot0 = {\n const p = new Facet(\"container0\", {\n padding: [0, 10, 10],\n theme: \"custom\",\n appendPadding: [20, 10, 30, 30],\n type: \"rect\",\n fields: [\"cut\"],\n cols: 3, // 超过3个换行\n data: data0,\n axes: {},\n meta: {\n carat: {\n sync: true\n },\n price: {\n sync: true\n },\n clarity: {\n sync: true\n }\n },\n eachView: (view, f) => {\n return {\n type: \"scatter\",\n options: {\n data: f.data,\n xField: \"carat\",\n yField: \"price\",\n colorField: \"clarity\",\n shape: \"circle\",\n pointStyle: { fillOpacity: 0.3, stroke: null }\n }\n };\n }\n });\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"### Matrix Facet Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":32,"value":"data1 = fetch(\n \"https://gw.alipayobjects.com/os/antvdemo/assets/data/iris.json\"\n).then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":318,"value":"### Circle Facet Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":323,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":321,"value":"data2 = fetch(\n \"https://gw.alipayobjects.com/os/antfincdn/VnrXpYSuqW/circle-pie.json\"\n).then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"plot2 = {\n const p = new Facet(\"container2\", {\n type: \"circle\",\n fields: [\"clarity\"],\n data: data2,\n tooltip: { showMarkers: false },\n meta: {\n cut: {\n sync: true\n }\n },\n eachView: (view, f) => {\n return {\n type: \"pie\",\n options: {\n data: f.data,\n angleField: \"mean\",\n colorField: \"cut\",\n pieStyle: { stroke: null },\n theme: \"custom\"\n }\n };\n }\n });\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"### Mirror Facet Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":114,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":107,"value":"data3 = fetch('https://gw.alipayobjects.com/os/antfincdn/2Qttbqxmtw/symmetry-data.json')\n .then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"plot3 = {\n const p = new Facet(\"container3\", {\n type: \"mirror\",\n data: data3,\n fields: [\"gender\"],\n transpose: true,\n padding: [32, 16, 28, 16],\n meta: {\n age: {\n sync: true,\n tickCount: 11\n },\n total_percentage: {\n sync: true,\n formatter(v) {\n return v + \"%\";\n }\n },\n gender: {\n sync: true\n }\n },\n axes: {},\n eachView: (view, f) => {\n return {\n padding: [0, 48, 0, 0],\n type: \"column\",\n options: {\n data: f.data,\n xField: \"age\",\n yField: \"total_percentage\",\n seriesField: \"gender\",\n color: [\"#025DF4\", \"#DB6BCF\"]\n }\n };\n }\n})\n p.render();\n return p;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":310,"value":"### Tree Facet Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":123,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":125,"value":"data4 = fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json')\n .then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"## 📈 🆕 Violin Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":338,"value":"A **violin plot** depicts distributions of numeric data for one or more groups using density curves. The width of each curve corresponds with the approximate frequency of data points in each region. Densities are frequently accompanied by an overlaid chart type, such as **box plot**, to provide additional information.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":334,"value":"Check out more [examples of Violin Plot](https://g2plot.antv.vision/en/examples/more-plots/violin) in our gallery.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":346,"value":"### Basic Voilin Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"First import dataset of 'iris'.\n\n**Dataset**\n\n|| sepal_length | sepal_width | petal_length | petal_width | species |\n|---|---|---|---|---|---|\n| 0 | 3.5 | 3 | 1.4 | 0.2 | I. setosa |\n| 0 | 6.7 | 2.5 | 6.1 | 0.2 | I. versicolor |\n| 0 | 3.5 | 3 | 5.5 | 2.2 | I. virginica |\n| ... | ... | ...| ... | ... | ...|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":364,"value":"Then, you should transform the dataset into the structure as follow:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":162,"value":"violinData0 = fetch('https://gw.alipayobjects.com/os/bmw-prod/6b0a5f1d-5931-42ae-b3ba-3c3cb77d0861.json')\n .then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":375,"value":"💡 Specify the position mapping to **`x*y`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":164,"value":"violinPlot = {\n\n const p = new g2plot.Violin(\"violin0\", {\n theme: \"custom\",\n height: 500,\n data: violinData0,\n xField: \"x\",\n yField: \"y\"\n})\n\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":387,"value":"### Using `seriesField` to make grouped violin plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":176,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":178,"value":"violinData1 = fetch('https://gw.alipayobjects.com/os/bmw-prod/6b0a5f1d-5931-42ae-b3ba-3c3cb77d0861.json')\n .then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"violinPlot1 = {\n const p = new g2plot.Violin(\"violin1\", {\n theme: 'custom',\n height: 500,\n data: violinData1,\n xField: \"x\",\n yField: \"y\",\n seriesField: \"species\"\n});\n\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"## 📈 Sunburst Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":398,"value":"Check out more [examples of Sunburst Plot](https://g2plot.antv.vision/en/examples/more-plots/sunburst#basic) in our gallery.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":481,"value":"### Basic sunburst plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":191,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":189,"value":"sunburstData1 = fetch(\n \"https://gw.alipayobjects.com/os/antfincdn/gkxblF81Le/sunburst.json\"\n).then((data) => data.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"sunburstPlot1 = {\n const p = new g2plot.Sunburst(\"sunburst1\", {\n data: sunburstData1,\n autoFit: false,\n height: 400,\n theme: \"custom\",\n innerRadius: 0.3,\n interactions: [{ type: \"element-active\" }]\n });\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":405,"value":"## 📈 Stock Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":402,"value":"Check out more [examples of Stock Plot](https://g2plot.antv.vision/en/examples/more-plots/stock#basic) in our gallery.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":411,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":414,"value":"stockData1 = fetch('https://gw.alipayobjects.com/os/antfincdn/ZWgtj7pC%261/stock.json')\n .then((data) => data.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":415,"value":"stockPlot = {\n const p = new g2plot.Stock(\"stock1\", {\n appendPadding: [0, 10, 0, 0],\n data: stockData1,\n xField: \"trade_date\",\n yField: [\"open\", \"close\", \"high\", \"low\"],\n slider: {}\n})\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"## 📈 Box Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":457,"value":"Check out more [examples of Box Plot](https://g2plot.antv.vision/en/examples/more-plots/box) in our gallery.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":430,"value":"First prepare data. Data structure as as follows:\n\n| x | low | q1 | median | q3 |high | \n|---|---|---|---|---|---|\n|Oceania| 1| 9 | 16 | 22 | 24 |\n| ... | ... | ...| ... | ... | ...|","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":433,"value":"boxData1 = [\n { x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 },\n { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 },\n { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 },\n { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 },\n { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 },\n { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 },\n { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },\n { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 },\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":434,"value":"boxPlot = {\n const p = new g2plot.Box(\"box-container\", {\n width: 400,\n height: 500,\n data: boxData1,\n xField: \"x\",\n yField: [\"low\", \"q1\", \"median\", \"q3\", \"high\"],\n meta: {\n low: {\n alias: \"Lowest value\"\n },\n q1: {\n alias: \"Lower quartile\"\n },\n median: {\n alias: \"Median value\"\n },\n q3: {\n alias: \"Higher quartile\"\n },\n high: {\n alias: \"Highest value\"\n }\n },\n tooltip: {\n fields: [\"high\", \"q3\", \"median\", \"q1\", \"low\"]\n },\n boxStyle: {\n stroke: \"#545454\",\n fill: \"#025DF4\",\n fillOpacity: 0.3\n },\n animation: false\n });\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"## Built-in support for Drill down","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":488,"value":"Since version 2.3.23, G2Plot has built-in support for drilldown. By giving a `drilldown` option and configure **`drilldown.enabled`** to true, the plot could be extracted into a drilldown series when the `element` is clicked.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":503,"value":"It could be used in the plot with hierarchy data, such as `Treemap` plot and `Sunburst` plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":508,"value":"### 🥁 Drill down in Treemap plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":549,"value":"treemapData = fetch(\n \"https://gw.alipayobjects.com/os/antfincdn/s%24TVIlG5cB/treemap-1.json\"\n).then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":557,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":548,"value":"treemapPlot = {\n const p = new g2plot.Treemap(\"treemap-container\", {\n data: treemapData,\n theme: 'custom',\n colorField: \"name\",\n legend: {\n position: \"top-left\"\n },\n tooltip: {\n formatter: (v) => {\n const root = v.path[v.path.length - 1];\n return {\n name: v.name,\n value: `${v.value}(Percetage: ${((v.value / root.value) * 100).toFixed(2)}%)`\n };\n }\n },\n drilldown: {\n enabled: true,\n breadCrumb: { rootText: 'Root'}\n },\n // 开启动画\n animation: {}\n})\n\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"### 🥁 Drill down in Sunburst plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":519,"value":"drilldownData2 = fetch(\n \"https://gw.alipayobjects.com/os/antfincdn/Yh%24FZ%26I2%247/sunburst.json\"\n).then((res) => res.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":522,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":526,"value":"sunburstPlot2 = {\n const p = new g2plot.Sunburst(\"drilldown-container2\", {\n data: drilldownData2,\n theme: \"custom\",\n innerRadius: 0.3,\n interactions: [{ type: \"element-active\" }],\n hierarchyConfig: {\n field: \"sum\"\n }\n });\n\n p.render();\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"## Register custom theme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":208,"value":"customTheme = {\n g2plot.G2.registerTheme(\"custom\", {\n ...g2plot.G2.getTheme(\"light\"),\n defaultColor: \"#FF6B3B\",\n colors10: [\n \"#025DF4\",\n \"#DB6BCF\",\n \"#2498D1\",\n \"#BBBDE6\",\n \"#4045B2\",\n \"#21A97A\",\n \"#FF745A\",\n \"#007E99\",\n \"#FFA8A8\",\n \"#2391FF\"\n ],\n colors20: [\n \"#025DF4\",\n \"#DB6BCF\",\n \"#2498D1\",\n \"#BBBDE6\",\n \"#4045B2\",\n \"#21A97A\",\n \"#FF745A\",\n \"#007E99\",\n \"#FFA8A8\",\n \"#2391FF\",\n \"#FFC328\",\n \"#A0DC2C\",\n \"#946DFF\",\n \"#626681\",\n \"#EB4185\",\n \"#CD8150\",\n \"#36BCCB\",\n \"#327039\",\n \"#803488\",\n \"#83BC99\"\n ]\n });\n return g2plot.G2.getTheme(\"custom\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"Facet = g2plot.Facet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"DataSet = require(\"@antv/data-set\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"g2plot = require('@antv/g2plot')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"