Cape Town Water
G2 = require("@antv/g2@4.0.2");
G2Plot = require("@antv/g2plot")
bar_width=width
bar_height=550
bar_char={
const wrapper = html`<div style="text-align: center; width:${bar_width}px"></div>`;
const container = html`<div style="height: 450px;width:${bar_width}px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const stackedColumnPlot = new G2Plot.Column(container, {
data:data_filter,
isStack: true,
renderer:'svg',
xField: 'Year',
yField: 'Number',
seriesField: 'Month',
label: {
// 可手动配置 label 数据标签位置
position: 'middle', // 'top', 'bottom', 'middle'
// 可配置附加的布局方法
layout: [
// 柱形图数据标签位置自动调整
{ type: 'interval-adjust-position' },
// 数据标签防遮挡
{ type: 'interval-hide-overlap' },
// 数据标签文颜色自动调整
{ type: 'adjust-color' },
],
},
maxColumnWidth: 50,
});
stackedColumnPlot.render();
}
line_char={
const wrapper = html`<div style="text-align: center; width:${bar_width}px"></div>`;
const container = html`<div style="height: 500px;width:${bar_width}px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const dualAxes = new G2Plot.DualAxes(container, {
data: [sewage, sewage],
renderer:'svg',
appendPadding:10,
limitInPlot:false,
xField: 'Year',
yField: ['Cases', ' sewage spills'],
yAxis: {
Cases: {
max:18000,
min:8000
},
' sewage spills': {
max:120,
min:90
}
},
// meta: {
// date:{
// type:"time",
// max:"2022-03-01",
// mask:"YY/MM",
// ticks:["2017-11-01","2018-01-01","2018-03-01","2018-05-01","2018-12-01"]
// }},
// xAxis:{
// type: 'time',
// min:"2017-11-01",
// max:"2022-03-01",
// title:{
// text:"Date of order",
// position:"bottom-right"
// }
// tickMethod:"time-pretty"
// },
geometryOptions: [
{
geometry: 'line',
smooth: false,
color: '#5B8FF9',
point: {
shape: 'circle',
size: 4,
style: {
opacity: 0.5,
stroke: '#5B8FF9',
fill: '#fff',
},
},
// label: {
// formatter: (datum) => {
// return `${datum.Number}个`;
// },
// },
// lineStyle: {
// lineWidth: 3,
// lineDash: [5, 5],
// },
},
{
geometry: 'line',
smooth: false,
color: '#5AD8A6',
lineStyle: {
lineWidth: 4,
opacity: 0.5,
},
// label: {
// formatter: (datum) => {
// return `${datum.count}个`;
// },
// },
point: {
shape: 'circle',
size: 4,
style: {
opacity: 0.5,
stroke: '#5AD8A6',
fill: '#fff',
},
},
},
],
});
dualAxes.render();
}
line_char2={
const wrapper = html`<div style="text-align: center; width:${bar_width}px"></div>`;
const container = html`<div style="height: 500px;width:${bar_width}px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const dualAxes = new G2Plot.DualAxes(container, {
data: [data_sew, data_sew],
renderer:'svg',
appendPadding:10,
limitInPlot:false,
connectNulls:false,
xField: 'date',
yField: ['Number', 'sewage_spills'],
yAxis: {
'Number': {
max:5000,
min:0
},
'sewage_spills': {
max:120,
min:90
}
},
// meta: {
// date:{
// type:"time",
// max:"2022-03-01",
// mask:"YY/MM",
// ticks:["2017-11-01","2018-01-01","2018-03-01","2018-05-01","2018-12-01"]
// }},
// xAxis:{
// type: 'time',
// min:"2017-11-01",
// max:"2022-03-01",
// title:{
// text:"date",
// position:"bottom-right"
// }
// },
geometryOptions: [
{
geometry: 'line',
smooth: false,
color: '#5B8FF9',
point: {
shape: 'circle',
size: 4,
style: {
opacity: 0.5,
stroke: '#5B8FF9',
fill: '#fff',
},
},
// label: {
// formatter: (datum) => {
// return `${datum.Number}个`;
// },
// },
// lineStyle: {
// lineWidth: 4,
// opacity: 0.5,
// },
},
{
geometry: 'line',
smooth: false,
color: '#5AD8A6',
lineStyle: {
lineWidth: 4,
opacity: 0.5,
}
},
],
});
dualAxes.render();
}
sewage=FileAttachment("sewage.csv").csv({typed:true})
data=FileAttachment("cases@3.csv").csv({typed:true})
data_filter={
const temp=data.filter(d=>(d.Month!="April")&(d.Month!="May"))
let data_use = tidy(temp, arrange([
T.fixedOrder('Year',["2017/18","2018/19","2019/20","2020/21","2021/22"]),
T.fixedOrder('Month',["March","Feb","Jan ","Dec","Nov"])
]))
return data_use
}
data2=FileAttachment("cases@3.csv").csv()
data_sew={
const filter= data2
filter.map(d=>{
d.Number=Number(d.Number)
d.sewage_spills=Number(d.sewage_spills)
d.death=+d.death
if(d.sewage_spills==""){d.sewage_spills=null}
})
return filter}
date_array=Array.from(new Set(data.map(d=>d.date)))
T = require('@tidyjs/tidy@2.4.2/dist/umd/tidy.min.js')
import {
tidy,
startsWith,
groupBy,
summarize,
sum,
mutate,
select,
n,
mean,
everything,
arrange,
desc,
filter,
rate,
TMath,
pivotWider,
pivotLonger,
leftJoin,
count,
map,
complete,
fill
} from '@pbeshai/tidyjs' // observable import
school=FileAttachment("count@1.csv").csv({typed:true})
priority.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bar_char2={
const wrapper = html`<div style="text-align: center; width:${bar_width}px"></div>`;
const container = html`<div style="height: 450px;width:${bar_width}px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const stackedColumnPlot= new G2Plot.Bar(container, {
data:school,
xField: 'type',
yField: 'education_district',
seriesField: 'project_status',
isPercent: true,
isStack: true,
/** 自定义颜色 */
// color: ['#2582a1', '#f88c24', '#c52125', '#87f4d0'],
label: {
position: 'middle',
content: (item) => {
return item.value.toFixed(2);
},
style: {
fill: '#fff',
},
},
});
stackedColumnPlot.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.
