G2 = require("@antv/g2@4.0.2");
G2Plot = require("@antv/g2plot")
bar_width=600
bar_height=480
national=FileAttachment("national.csv").csv({typed:true})
urban=FileAttachment("urban.csv").csv({typed:true})
rural=FileAttachment("rural.csv").csv({typed:true})
line={
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 line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Percentage of Population Practicing Open Defecation',
},
data: national,
seriesField: 'Country',
padding: 'auto',
margin:"10px",
xField: 'Year',
yField: 'od',
yAxis:{
title: {
text: 'Percentage',
style: {
fontSize: 16,
},
}
},
smooth: true,
renderer:'svg'
});
line.render();
}
line2={
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 line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Percentage of Population Practicing Open Defecation',
},
data: rural,
seriesField: 'Country',
padding: 'auto',
margin:"10px",
xField: 'Year',
yField: 'od',
yAxis:{
title: {
text: 'Percentage',
style: {
fontSize: 16,
},
}
},
smooth: true,
renderer:'svg'
});
line.render();
}
line3={
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 line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Percentage of Population Practicing Open Defecation',
},
data: urban,
seriesField: 'Country',
padding: 'auto',
margin:"10px",
xField: 'Year',
yField: 'od',
yAxis:{
title: {
text: 'Percentage',
style: {
fontSize: 16,
},
}
},
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();
}
rural_f=rural.filter(d=>(d.Year==2000|d.Year==2010|d.Year==2020)&(d.Country!="Angola"))
urban_f=urban.filter(d=>(d.Year==2000|d.Year==2010|d.Year==2020)&(d.Country!="Angola"))
national_f=national.filter(d=>(d.Year==2000|d.Year==2010|d.Year==2020)&(d.Country!="Angola"))
data_use3= rural_f.concat(urban_f, national_f);
data_use3.filter(d=>d.Country=="Namibia")
line_char2={
const wrapper = html`<div style="text-align: center; width:${bar_width}px"></div>`;
const container = html`<div style="height: 420px;width:630px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const dualAxes = new G2Plot.DualAxes(container, {
data: [data_use3.filter(d=>d.Country=="Namibia"), data_use3.filter(d=>d.Country=="Botswana")],
renderer:'svg',
appendPadding:10,
limitInPlot:true,
xField: 'Year',
// meta: {
// Date_order:{
// type:"time",
// max: "2023-03-01",
// // mask:"YY/MM",
// // ticks:["2022-03-01","2022-04-01","2022-05-01","2022-06-01","2022-07-01","2022-08-01","2022-09-01","2022-10-01","2022-11-01","2022-12-01","2023-01-01","2023-02-01"]
// }
// },
// xAxis:{
// type: 'time',
// // min:"2022-02-01",
// // max:"2023-02-01",
// title:{
// text:"Date",
// position:"bottom-right"
// }
// // tickMethod:"time-pretty"
// },
yField: ['od', 'od'],
yAxis: {
'od': {
max:100,
min:0
},
'od': {
max:100,
min:0
}
},
geometryOptions: [
{
geometry: 'line',
smooth: false,
seriesField: 'Category',
lineStyle: {
lineWidth: 3,
lineDash: [5, 5],
},
label: {
formatter: (datum) => {
return `${datum.od.toFixed(1)}%`;
},
},
// smooth: true,
interactions: [{ type: 'element-highlight-by-color' }, { type: 'legend-highlight' }],
},
{
geometry: 'line',
// smooth: false,
seriesField: 'Category',
lineStyle: {
lineWidth: 4,
opacity: 0.5,
},
label: {
formatter: (datum) => {
return `${datum.od.toFixed(1)}%`;
},
},
interactions: [{ type: 'element-highlight-by-color' }, { type: 'legend-highlight' }],
},
],
});
dualAxes.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.
