html`
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
<figure>
<figcaption>Chart A</figcaption>
${Plot.plot({
color: { legend: true,
domain: ["China", "Germany", "India", "USA", "Japan"],
range: [
"#ff7f0e",
"#1f77b4",
"#2ca02c",
"#d62728 ",
"#9467bd"
]},
x: {
label: "Healthcare Access (%)",
domain: [50, 98],
grid: true
},
y: {
label: "Mean Prevalence Rate (%)",
domain: [5,15],
grid: true
},
marks: [
Plot.linearRegressionY(GHS_Healthcare, {x: "Healthcare", y: "PrevalenceRate", stroke: "Country"})
]
})}
</figure>
<figure>
<figcaption>Chart B</figcaption>
${Plot.plot({
color: { legend: true,
domain: ["China", "Germany", "India", "USA", "Japan"],
range: [
"#ff7f0e",
"#1f77b4",
"#2ca02c",
"#d62728 ",
"#9467bd"
]},
x: {
label: "Doctors per 1000",
domain: [0, 5],
grid: true
},
y: {
label: "Mean Mortality Rate (%)",
domain: [3,7],
grid: true
},
marks: [
Plot.linearRegressionY(GHS_Doctors, {x: "Doctors", y: "MortalityRate", stroke: "Country"})
]
})}
</figure>
</div>
`