Data scientist and front-end developer at Jetpack.ai
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.areaY(aapl, {
x: "Date",
y: "Close",
fill: "tomato",
render: canvasRender
}),
Plot.lineY(aapl, {
x: "Date",
y: "Close",
render: canvasRender
})
]
})
canvasRender = (i, scales, v, d, c, next) => {
const g = next(i, scales, v, d, c);
const xRange = scales.x.range();
const yRange = scales.y.range();
const width = Math.max(xRange[1], xRange[0]);
const height = Math.max(yRange[1], yRange[0]);
// Create a new SVG element and append the g element to it
const svgElement = document.createElementNS(
"http://www.w3.org/2000/svg",
"svg"
);
svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgElement.setAttribute("width", width);
svgElement.setAttribute("height", height);
svgElement.appendChild(g.cloneNode(true)); // Clone the g element
// Serialize the SVG element
const svgData = new XMLSerializer().serializeToString(svgElement);
const svgBlob = new Blob([svgData], {
type: "image/svg+xml;charset=utf-8"
});
const url = URL.createObjectURL(svgBlob);
// Create an <image> element and set its href to the data URL
const imageElement = document.createElementNS(
"http://www.w3.org/2000/svg",
"image"
);
imageElement.setAttributeNS("http://www.w3.org/1999/xlink", "href", url);
imageElement.setAttribute("width", width);
imageElement.setAttribute("height", height);
// Clear the content of g and append the image element
while (g.firstChild) {
g.removeChild(g.firstChild);
}
g.appendChild(imageElement);
// Add a custom class to the image element
imageElement.classList.add("my-line-y");
return g;
}
aapl = FileAttachment("aapl.csv").csv({typed: true})
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.
