#DataScience #Visualization #AI
@ox-cs @Alipay @antvis *Plothis
Published
Edited
Mar 20, 2020
2 forks
141 stars
G2Demo1 = {
// for Observable Cell
const wrapper = html`<div style="text-align: center;"></div>`;
const container = html`<div></div>`
wrapper.appendChild(container);
yield wrapper;
// Demo Code
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
// Step 1: declare Chart instance
const chart = new G2.Chart({
container, // specify DOM element
width: 600,
height: 300,
});
// Step 2: load data
chart.data(data);
// Step 3: grammar of graphics
chart.interval().position('genre*sold');
// Step 4: render
chart.render();
}
G2PlotDemo = {
// for Observable Cell
const wrapper = html`<div style="text-align: center;"></div>`;
const container = html`<div style="height: 600px;"></div>`
wrapper.appendChild(container);
yield wrapper;
// Demo Code
const data = [
{ type: 'Apple', value: 27 },
{ type: 'Banana', value: 25 },
{ type: 'Orange', value: 18 },
{ type: 'Peach', value: 15 },
{ type: 'Other', value: 8 },
];
const rosePlot = new G2Plot.Rose(container, {
forceFit: true,
title: { visible: true, text: 'A Basic Rose Chart' },
description: { visible: true, text: 'Declare (colorField) as the field maps to color channel.' },
radius: 0.8,
data,
radiusField: 'value',
categoryField: 'type',
colorField: 'type',
label: { visible: true, type: 'outer', content: (text) => text.value },
});
rosePlot.render();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
