Data Scientist at Warwick Investment Group. Passionate about science, predictive modeling, and data visualizations.
Published
Edited
Sep 16, 2021
1 fork
chart = {
const container = html`<canvas id="myChart" width="400" height="200"></canvas>`;
let delayed;
const myColors = [
{ overallCount: "rgba(214, 219, 223,0.45)" },
{ selectedCount: "rgba(44, 62, 80,0.60)" },
{ meanOverallPPSF: "rgba(72, 201, 176,0.99)" },
{ meanSelectedPPSF: "rgba(155, 89, 182,0.99)" }
];
const labels = z.getCol("Date", ChartData);
var myChart = new Chart(container, {
type: "line",
data: {
labels: labels,
datasets: [
{
label: "Selected Area Mean",
data: z.getCol("SelectedMean", ChartData),
borderColor: myColors[3].meanSelectedPPSF,
radius: 0,
yAxisID: "y"
},
{
label: "Overall Mean",
data: z.getCol("OverallMean", ChartData),
borderColor: myColors[2].meanOverallPPSF,
borderWidth: 3,
radius: 0,
yAxisID: "y"
},
{
label: "Selected Count",
data: z.getCol("SelectedCount", ChartData),
borderColor: myColors[1].selectedCount,
backgroundColor: myColors[0].overallCount,
fill: true,
display: true,
borderWidth: 2,
radius: 0,
yAxisID: "y1"
},
{
label: "Overall Count",
data: z.getCol("OverallCount", ChartData),
borderWidth: 2,
borderColor: myColors[0].overallCount,
backgroundColor: myColors[0].overallCount,
fill: true,
radius: 0,
yAxisID: "y1"
}
]
},
options: {
responsive: true,
interaction: {
mode: "index",
intersect: false
},
stacked: false,
plugins: {
title: {
display: true,
text: "Features By Bedroom Type:"
}
},
animation: {
onComplete: () => {
delayed = true;
},
delay: (context) => {
let delay = 0;
if (
context.type === "data" &&
context.mode === "default" &&
!delayed
) {
delay = context.dataIndex * 300 + context.datasetIndex * 100;
}
return delay;
}
},
scales: {
x: {
display: true
},
y: {
type: "linear",
display: true,
position: "left"
},
y1: {
type: "linear",
display: true,
position: "right",
// grid line settings
grid: {
drawOnChartArea: false // only want the grid lines for one axis to show up
}
}
}
}
});
yield container;
}
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.
