x/shortcuts
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

first commit

Browse source
This commit is contained in:
Anton Nesterov 2024-09-24 16:03:58 +02:00
commit b937e3e1b5
No known key found for this signature in database
GPG key ID: 59121E8AE2851FB5
1 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
plots.ts Normal file
View file

@ -0,0 +1,70 @@
import * as Plot from "npm:@observablehq/plot";
import { DOMParser, SVGElement } from "npm:linkedom";
const defaultPlotSettings = {
grid: true,
margin: 50,
style: {
backgroundColor: "#fff"
}
}
/**
* Configure default plot settings
* @param options
*/
export function configurePlots(options: any) {
Object.assign(defaultPlotSettings, options)
}
/**
* Draw side-by-side plots
* Example:
* ```ts
* const plt = sideBySidePlot({
* x: ['enginesize', 'horsepower', 'citympg', 'highwaympg'],
* y: ['price'],
* marks: [
* (x, y) => Plot.dot(data, {x, y, fill: "species"}),
* (x, y) => Plot.linearRegressionY(data, {x, y, stroke: "red"}),
* ],
* cols: 2
* })
* @param x List of x-axis targets
* @param y List of y-axis targets
* @param marks List of plot callbacks
* @param cols Number of columns
*/
export function sideBySidePlot(opts: {
x: string[],
y: string[],
marks: any[]
cols: number,
options,
}) {
const document = new DOMParser().parseFromString(`<!DOCTYPE html><html></html>`, "text/html");
const imgTags: string[] = []
for (const xTarget of opts.x) {
for (const yTarget of opts.y) {
const plt = Plot.plot({
...(opts.options ?? defaultPlotSettings),
marks: opts.marks.map(fn => fn(xTarget, yTarget)),
document
})
plt.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
const svgUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(plt)))}`
imgTags.push(`<img src='${svgUrl}'>`)
}
}
const output = `
<section style="display:grid;grid-template-columns: repeat(${opts.cols ?? 2}, 1fr);">
${imgTags.join('')}
</section>
`
return {
[Symbol.for("Jupyter.display")]: () => ({
"text/html": output
})
}
}