Published
Edited
Sep 1, 2021
md`# Charts`
chart6 = {
const container = DOM.element('div');
const data = [
{ year: 'Services', type: 'Railway', sales: 80 },
{ year: 'Products', type: 'Colle', sales: 70 },
{ year: 'Sales', type: 'Global', sales: 20 },
{ year: 'Services', type: 'Automotive', sales: 20 },
{ year: 'Products', type: 'Gaines et tubes', sales: 30 },
{ year: 'Accounts', type: 'Global', sales: 1 }
];
const chart = new G2.Chart({
container,
width: 700,
autoFit: true,
height: 300
});
chart.data(data);
chart.scale({
sales: {
max: 100,
tickInterval: 50,
nice: true
}
});
chart.tooltip({
showMarkers: false
});
chart
.interval()
.position('year*sales')
.color('type')
.adjust('stack');
chart.interaction('element-link');
chart.render();
return container;
}
Chart4 = {
const w = Math.min(width, 640);
const container = html`<div></div>`;
const data = [
{ genre: "Flexible insulation", sold: 1.05 },
{ genre: "Papers & fibers", sold: 0.7 },
{ genre: "Tech films - special products", sold: 3.65 },
{ genre: "Glue", sold: 1.5 }
];
const chart = new G2.Chart({
container,
width: w,
height: 250
});
chart.source(data);
chart
.interval()
.position("genre*sold")
.color("genre");
chart.render();
return container;
}
Chart78 = {
const w = Math.min(width, 640);
const container = html`<div></div>`;
const data = [
{ genre: "Automotive special vehicles", sold: 3 },
{ genre: "Railway", sold: 0.7 },
{ genre: "Energy", sold: 2.7 },
{ genre: "Aerospace and defense", sold: 0.9 }
];
const chart = new G2.Chart({
container,
width: w,
height: 250
});
chart.source(data);
chart
.interval()
.position("genre*sold")
.color("genre");
chart.render();
return container;
}
donutChart2 = {
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height])
svg.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.category))
.attr("d", arc)
.on("mouseenter", onMouseEnter)
.on("mouseleave", onMouseLeave);
svg.append("g")
.attr("font-family", "'Work sans', sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("y", "-1.2em")
.attr("font-weight", "400")
.text(d => d.data.category));
svg.append("g")
.attr("font-family", "'Work sans', sans-serif")
.attr("font-size", 24)
.attr("font-weight", 900)
.attr("text-anchor", "middle")
.append("text")
.text("A Scone");
const chart = svg.node();
const caption = `<figcaption style="padding-bottom: 12px; text-align: center; font-family: 'Work sans';">Source: <a href="https://www.sarahcooks.com.au/2020/04/small-batch-scones.html" style="fill: #3c72d7;">Sarah Cooks: Small batch scones</href></figcaption>`;
const tooltip = d3.create("div")
.attr("id", "tooltip")
.attr("class", "tooltip")
.html(`
<div class="tooltip-name">
<span id="category"></span>
</div>
<div class="tooltip-value">
<span id="quantity"></span>g
</div>
`);
function onMouseEnter(d) {
const x = arc.centroid(d)[0] + (width / 2);
const y = arc.centroid(d)[1] + (height / 2);
tooltip.style("opacity", 1);
tooltip.style("transform", `translate(calc( -50% + ${x}px), calc(-100% + ${y}px))`);
tooltip.select("#category")
.text(d.data.category);
tooltip.select("#quantity")
.text(d.data.quantity);
}
function onMouseLeave() {
tooltip.style("opacity", 0);
}
return html`
<figure style="max-width: 100%;">
<div id="wrapper" class="wrapper">
${tooltip.node()}
${chart}
</div>
${caption}
</figure>
</div>`;
}
chart3 = {
const container = DOM.element('div');
const data = [
{ type: '汽车', value: 34 },
{ type: '建材家居', value: 85 },
{ type: '住宿旅游', value: 103 },
{ type: '交通运输与仓储邮政', value: 142 },
{ type: '建筑房地产', value: 251 },
{ type: '教育', value: 367 },
{ type: 'IT 通讯电子', value: 491 },
{ type: '社会公共管理', value: 672 },
{ type: '医疗卫生', value: 868 },
{ type: '金融保险', value: 1234 }
];
const chart = new G2.Chart({
container,
width: 1000,
height: 600
});
chart.data(data);
chart.scale({
value: {
max: 1400,
min: 0,
alias: '销量（百万）'
}
});
chart.axis('type', {
title: null,
tickLine: null,
line: null
});
chart.axis('value', {
label: null,
title: {
offset: 30,
style: {
fontSize: 12,
fontWeight: 300
}
}
});
chart.coordinate().transpose();
chart
.interval()
.position('type*value')
.size(20)
.label('value', {
style: {
fill: '#8d8d8d'
},
offset: 10
});
chart.interaction('elements-highlight');
chart.render();
return container;
}
chart6 = {
const container = DOM.element('div');
const data = [
{ type: '论坛', value: 1.77 },
{ type: '网站', value: 1.44 },
{ type: '微信', value: 1.12 },
{ type: '客户端', value: 1.05 },
{ type: '新闻', value: 0.81 },
{ type: '视频', value: 0.39 },
{ type: '博客', value: 0.37 },
{ type: '报刊', value: 0.17 },
];
const data = new G2.Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.legend(false);
chart.tooltip({
showMarkers: false,
});
const view1 = chart.createView({
region: {
start: {
x: 0,
y: 0,
},
end: {
x: 0.5,
y: 1,
},
},
});
view1.coordinate('theta', {
radius: 0.7,
startAngle: 0 + otherOffsetAngle,
endAngle: Math.PI * 2 + otherOffsetAngle,
});
view1.data(data);
view1.interaction('element-highlight');
view1
.interval()
.adjust('stack')
.position('value')
.color('type', ['#38c060', '#2593fc'])
.label('value', function () {
return {
offset: -10,
content: (obj) => {
return obj.type + '\n' + obj.value + '%';
},
};
});
const view2 = chart.createView({
region: {
start: {
x: 0.5,
y: 0.1,
},
end: {
x: 1,
y: 0.9,
},
},
});
view2.axis(false);
view2.data(other);
view2.interaction('element-highlight');
view2
.interval()
.adjust('stack')
.position('value')
.color('type', ['#063d8a', '#0b53b0', '#1770d6', '#2593fc', '#47abfc', '#6dc1fc', '#94d6fd', '#bbe7fe'])
.label('value', {
position: 'right',
offsetX: 5,
offsetY: 10,
content: (obj) => {
return obj.type + ' ' + obj.value + '%';
},
});
chart.render();
drawLinkArea();
chart.on('afterpaint', function () {
drawLinkArea();
});
/* ---------绘制连接区间-----------*/
function drawLinkArea() {
const canvas = chart.getCanvas();
const container = chart.backgroundGroup;
const view1_coord = view1.getCoordinate();
const center = view1_coord.getCenter();
const radius = view1_coord.getRadius();
const interval_geom = view2.geometries[0];
const interval_container = interval_geom.container;
const interval_bbox = interval_container.getBBox();
const view2_coord = view2.getCoordinate();
// area points
const pie_start1 = {
x: center.x + Math.cos(Math.PI * 2 - otherOffsetAngle) * radius,
y: center.y + Math.sin(Math.PI * 2 - otherOffsetAngle) * radius,
};
const pie_start2 = {
x: center.x + Math.cos(otherOffsetAngle) * radius,
y: center.y + Math.sin(otherOffsetAngle) * radius,
};
const interval_end1 = {
x: interval_bbox.minX,
y: view2_coord.end.y,
};
const interval_end2 = {
x: interval_bbox.minX,
y: view2_coord.start.y,
};
const path = [
['M', pie_start1.x, pie_start1.y],
['L', pie_start2.x, pie_start2.y],
['L', interval_end2.x, interval_end2.y],
['L', interval_end1.x, interval_end1.y],
['Z'],
];
container.addShape('path', {
attrs: {
path,
fill: '#e9f4fe',
},
});
canvas.draw();
}
G2Demo2 = {
// for Observable Cell
const wrapper = html`<div style="text-align: center;"></div>`;
const container = html`<div></div>`
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();
}
G2 = require('https://unpkg.com/@antv/g2');
DataSet = require('@antv/data-set')
data_G2Demo2 = [
{ class: 'Products according to turnover', country: 'Flexible insulation', type: '1', value: 10.8 },
{ class: 'Transgenic crop area', country: 'India', type: '2', value: 89.2 },
{ class: 'Products according to turnover', country: 'United States', type: '1', value: 72.9 },
{ class: 'Products according to turnover', 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 }
];
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.