Public
Edited
Apr 24, 2023
small_multiple = {
const columns = 3,
x_step = 300,
x_padding = 110,
y_step = 160,
y_padding = 80;
const confirmVL = vl
.markArea({ opacity: 0.4, color: "#013", interpolate: 'step' })
.encode(
vl
.x()
.fieldT('date')
.title('时间（月）')
.axis({
labelExpr: '(month(datum.value)+1)',
grid: false,
tickSize: -5,
labelPadding: 10,
title:'时间（月）',
titleFont:'STSong',
tickCount: { interval: "month", step: 1 }
}),
vl
.y({ scale: { domainMin: 0 } })
.fieldQ('new_confirm')
.axis({labelExpr:'replace(format(datum.value,","),","," ")',titlePadding: 10,title:'新增确诊（例）', titleFont:'STSong',
titleFontSize:14,
tickSize:-5,
labelPadding:10,})
);
// const deathVL = vl
// .markLine( { color: '#E00C0C'})
// .encode(
// vl
// .x()
// .fieldT('date')
// .title('时间（月）')
// .axis({
// labelExpr: '(month(datum.value)+1)',
// grid: false,
// tickSize: -5,
// labelPadding: 10,
// title:'时间（月）',
// titleFont:'STSong',
// tickCount: { interval: "month", step: 1 }
// }),
// vl
// .y({ scale: { domainMin: 0 } })
// .fieldQ('new_death')
// .axis({labelExpr:'replace(format(datum.value,","),","," ")',titlePadding: 10,title:'新增死亡（例）', titleFont:'STSong',
// titleFontSize:14,
// tickSize:-5,
// labelPadding:10,
// lineStyle: {color: '#E00C0C' , width :0.01 }})
// );
// const oxfordVL = vl
// .markPoint({
// filled: true,
// size: 16,
// opacity: 1
// // stroke: "#FFF",
// // strokeWidth: 1
// })
// .encode(
// vl
// .x()
// .fieldT('date')
// .title('时间（月）'),
// vl
// .y()
// .fieldQ('index')
// .scale({ domain: [0, 100] })
// .axis({
// values: [0, 20, 40, 60, 80, 100],
// titleAngle: -90,
// titlePadding: 15,
// title:'牛津政策指数',
// titleFont:'STSong',
// titleFontSize:14,
// tickSize:-5,
// labelPadding:10,
// }),
// vl
// .color()
// .value('red')
// .if('datum.index>80', vl.color().value("#F53D3D"))
// .if('datum.index>60', vl.color().value("#FDB545"))
// .if('datum.index<=60', vl.color().value("#9EE8A0"))
// );
const my_chart = data =>
vl
.layer(
confirmVL,
// deathVL,
vl
.markRule({ color: 'red' })
.encode(vl.x().fieldT('日期'))
.data(new_variant.objects().filter(d => d.国家 == data[0].国家))
)
.title({
//标题设置
text: data[0].国家,
fontSize: 16,
font: 'StSong',
subtitle: `累计确诊 ${d3
.format(',')(data.slice(-1)[0].confirm)
.replaceAll(',', ' ')} 例`,
subtitleColor: '#555'
})
.resolve({ scale: { y: 'independent' } })
.width(x_step - x_padding)
.height(y_step - y_padding)
.data(data);
return html`<svg width=${x_step * columns} height=${Math.ceil(
countries.objects().length / columns
) * y_step} style="background:#FFF">
${await Promise.all(
countries.objects().map((c, i) => {
const pos = {
x: (i % columns) * x_step,
y: Math.floor(i / columns) * y_step
};
const data = hopkins
.objects()
.filter(d => d.country == c.country && d.row <= 189 && d.row>= 9);//
return my_chart(data)
.toView()
.toSVG()
.then(svg => `<g transform='translate(${pos.x},${pos.y})'>${svg}</g>`);
})
)}
</svg>`;
}
FileAttachment("周边十四国(1)-1 (1).csv").csv()
d = hopkins
.filter(d => d.country == d.country && d.row == 189).view()
// d.view()
hopkins
.filter(d => d.country == d.country && d.row == 9).view()
FileAttachment("周边十四国.csv").csv()
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.
