Public
Edited
Apr 28, 2023
1 fork
G2 = require("@antv/g2@4.0.2");
G2Plot = require("@antv/g2plot")
bar_width=width
bar_height=550
beach=FileAttachment("beach_simple.csv").csv({typed:true})
beach_filter=beach.filter(d=>((d["Sampling point_proper_case"]=="Beachwood")|(d["Sampling point_proper_case"]=="Laguna")))
river=FileAttachment("Papwa Sewgolum.csv").csv({typed:true})
river
line={
const wrapper = html`<div style="text-align: center; width:${bar_width}px;"></div>`;
const container = html`<div style="height: 350px;width:600px;text-align: center"></div>`
wrapper.appendChild(container);
yield wrapper;
const line = new G2Plot.Line(container, {
title: {
visible: true,
text: 'Palmiet River Water Sampling Results',
},
data: river,
padding: 'auto',
margin:"10px",
xField: 'Date',
yField: 'reading',
yAxis:{
title: {
text: 'E.coli Count/100ml',
style: {
fontSize: 16,
},
}
},
xAxis: {
type: 'time',
// tickCount: 8,
},
smooth: true,
renderer:'svg'
});
line.render();
}
const line = new Line('container', {
data,
padding: 'auto',
xField: 'Date',
yField: 'scales',
xAxis: {
// type: 'timeCat',
tickCount: 5,
},
smooth: true,
});
line.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: [river, beach_filter],
renderer:'svg',
appendPadding:10,
limitInPlot:false,
xField: 'Date',
// 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-03-01",
title:{
text:"Date",
position:"bottom-right"
}
},
yField: ['reading', 'Result_estimate'],
geometryOptions: [
{
geometry: 'line',
smooth: false,
seriesField: 'location',
lineStyle: {
lineWidth: 3,
lineDash: [5, 5],
},
smooth: true,
interactions: [{ type: 'element-highlight-by-color' }, { type: 'legend-highlight' }],
},
{
geometry: 'line',
smooth: false,
seriesField: 'Sampling point_proper_case',
lineStyle: {
lineWidth: 4,
opacity: 0.5,
},
interactions: [{ type: 'element-highlight-by-color' }, { type: 'legend-highlight' }],
// point: {
// shape: 'circle',
// size: 4,
// style: {
// opacity: 0.5,
// stroke: '#5AD8A6',
// fill: '#fff',
// },
// },
},
],
});
dualAxes.render();
}
beach2=FileAttachment("beach_month@1.csv").csv({typed:true})
river2.map(d=>d["value"]=+d["reading"])
beach2.map(d=>d["value"]=+d["Result_estimate"])
river2=FileAttachment("river_month@4.csv").csv({typed:true})
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: [river2, beach2],
renderer:'svg',
appendPadding:10,
limitInPlot:false,
xField: 'Month',
// 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: ['reading', 'Result_estimate'],
yAxis: {
// Cases: {
// max:18000,
// min:8000
// },
// ' sewage spills': {
// max:120,
// min:90
// }
},
geometryOptions: [
{
geometry: 'line',
smooth: false,
seriesField: 'location',
lineStyle: {
lineWidth: 3,
lineDash: [5, 5],
},
smooth: true,
interactions: [{ type: 'element-highlight-by-color' }, { type: 'legend-highlight' }],
},
{
geometry: 'line',
smooth: false,
seriesField: 'Sampling point_proper_case',
lineStyle: {
lineWidth: 4,
opacity: 0.5,
},
interactions: [{ type: 'element-highlight-by-color' }, { type: 'legend-highlight' }],
// point: {
// shape: 'circle',
// size: 4,
// style: {
// opacity: 0.5,
// stroke: '#5AD8A6',
// fill: '#fff',
// },
// },
},
],
});
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.
