G2 = require("@antv/g2@4.0.2");
G2Plot = require("@antv/g2plot")
bar_width=600
bar_height=480
Angola=FileAttachment("Angola.csv").csv({typed:true})
Namibia=FileAttachment("Namibia.csv").csv({typed:true})
Botswana=FileAttachment("Botswana.csv").csv({typed:true})
line={
const wrapper = html`<div style="text-align: center; width:${bar_width}px;height:370px"></div>`;
const container = html`<div style="height:350px;width:180px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Percentage of Population Practicing Open Defecation',
},
data: Angola.filter(d=>(d.Year==2000)|(d.Year==2020)),
seriesField: 'Category',
padding: 'auto',
// margin:"10px",
xField: 'Year',
yField: 'od',
yAxis:{
// title: {
// text: 'Percentage',
// style: {
// fontSize: 16,
// },
// },
min:0,
max:80
},
legend:false,
smooth: true,
renderer:'svg'
});
line.render();
}
line2={
const wrapper = html`<div style="text-align: center; width:${bar_width}px;height:370px"></div>`;
const container = html`<div style="height: 350px;width:180px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Percentage of Population Practicing Open Defecation',
},
data: Namibia.filter(d=>(d.Year==2000)|(d.Year==2020)),
seriesField: 'Category',
padding: 'auto',
margin:"10px",
xField: 'Year',
yField: 'od',
legend:false,
yAxis:{
// title: {
// text: 'Percentage',
// style: {
// fontSize: 16,
// },
// },
min:0,
max:80
},
smooth: true,
renderer:'svg'
});
line.render();
}
line3={
const wrapper = html`<div style="text-align: center; width:${bar_width}px;height:370px"></div>`;
const container = html`<div style="height: 350px;width:180px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Percentage of Population Practicing Open Defecation',
},
data: Botswana.filter(d=>(d.Year==2000)|(d.Year==2020)),
seriesField: 'Category',
padding: 'auto',
legend:false,
margin:"10px",
xField: 'Year',
yField: 'od',
yAxis:{
// title: {
// text: 'Percentage',
// style: {
// fontSize: 16,
// },
// },
min:0,
max:80
},
smooth: true,
renderer:'svg'
});
line.render();
}
data_toilet = [
{
title: '2021/22',
ranges: [13000],
measures: [980],
target: 10000,
},
{
title: '2020/21',
ranges: [13000],
measures: [2860],
target: 2500,
},
{
title: '2019/20',
ranges: [13000],
measures: [4346],
target: 12000,
}, {
title: '2018/19',
ranges: [13000],
measures: [1456],
target: 12500,
},
{
title: '2017/18',
ranges: [13000],
measures: [1691],
target: 3000,
}
];
bullet={
const wrapper = html`<div style="text-align: center; width:${bar_width}px;"></div>`;
const container = html`<div style="height: 350px;width:580px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const bulletPlot = new G2Plot.Bullet(container, {
data:data_toilet,
measureField: 'measures',
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
// color: {
// range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
// measure: '#5B8FF9',
// target: '#39a3f4',
// },
label: {
measure: {
position: 'middle',
style: {
fill: '#fff',
},
},
},
xAxis: {
line: null,
},
yAxis: false,
renderer:"svg",
// 自定义 legend
legend: {
custom: true,
position: 'bottom',
items: [
{
value: 'Actual',
name: 'Actual',
marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
},
{
value: 'Target',
name: 'Target',
marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
},
],
},
});
bulletPlot.render();
}
import { Bullet } from '@antv/g2plot';
const data = [
{
title: '重庆',
ranges: [100],
measures: [65],
target: 80,
},
{
title: '杭州',
ranges: [100],
measures: [50],
target: 100,
},
{
title: '广州',
ranges: [100],
measures: [40],
target: 85,
},
{
title: '深圳',
ranges: [100],
measures: [50],
target: 100,
},
];
const bulletPlot = new Bullet('container', {
data,
measureField: 'measures',
rangeField: 'ranges',
targetField: 'target',
xField: 'title',
// color: {
// range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
// measure: '#5B8FF9',
// target: '#39a3f4',
// },
label: {
measure: {
position: 'middle',
style: {
fill: '#fff',
},
},
},
xAxis: {
line: null,
},
yAxis: false,
// 自定义 legend
legend: {
custom: true,
position: 'bottom',
items: [
{
value: '差',
name: '差',
marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } },
},
{
value: '良',
name: '良',
marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } },
},
{
value: '优',
name: '优',
marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
},
{
value: '实际值',
name: '实际值',
marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
},
{
value: '目标值',
name: '目标值',
marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
},
],
},
});
bulletPlot.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.
