Public
Edited
Mar 21, 2024
1 fork
1 star
configURL = "https://docs.google.com/spreadsheets/d/1rfTrNxyC16pS2Lv5RRa0RmFDm2_4UWzbhKXivb5CpkI/edit#gid=0"
configSheet = "graph_list"
width = 1050
height = 800
preview = htl.html`<div style="
${permalinkGraph ? "" : "display:grid;"}
grid-template-columns: 1fr 1fr 1fr;
column-gap: 20px;
row-gap: 50px;
padding-top: 50px;
padding-bottom: 50px;
">${promises}</div>`
charts = {
redraw;
const list = permalinkGraph
? graph_list.filter(f => f.id === permalinkGraph)
: graph_list.slice(firstChart,lastChart)
return list.reduce((acc, d,i) => (Object.assign(acc, {[d3.format("03d")(i) + " " + d.id]: makeChart(d)})),{})
}
promises = Promise.all(Object.values(charts))
makeChart = async (graphConfig) => {
if (!graphConfig.dataset.includes(" from ")) return d3.create("svg");
const [sheet, url] = graphConfig.dataset.split(" from ");
const raw = await read(url, sheet);
const [x, y] = raw.columns;
const data = raw.map((m) => ({ [x]: d3.utcParse("%Y")(m[x]), [y]: +m[y] }));
return chart({
data,
x,
y,
width, height,
numberFormat: (d) => d3.format("d")(d) + (graphConfig.format === "percent" ? "%" : ""),
...graphConfig
});
}
graph_list = read(configURL, configSheet)
svgBundle = {
const z = zip();
let i = 0;
for (let key in charts) {
z.file(`${key}.svg`, serialize(promises[i]));
i++
}
return z.generateAsync({ type: "blob" });
}
customFont
import {rasterizeWhite} from "@cittadhammo/save-high-resolution-png-with-imported-image"
pngBundle = {
const z = zip();
let i = 0;
for (let key in charts) {
z.file(`${key}.png`, rasterizeWhite(promises[i]));
i++
}
return z.generateAsync({ type: "blob" });
}
import {getParamValue} from "@bherbertlc/pass-values-as-url-parameters"
permalinkGraph = getParamValue("graph")
time = {
while (true) {
yield Promises.tick(1000, d3.utcFormat("%Y-%m-%d at %H%M%S")(Date.now()));
}
}
pptxgen = (await import("https://cdn.skypack.dev/pptxgenjs")).default
createPptx = {
const pres = new pptxgen() ;
for (let p of promises)
{
const slide = pres.addSlide();
const r = serialize(p);
slide.addImage({
w: "90%",
h: "90%",
x: "5%",
y: "5%",
data: "data:image/svg+xml;base64,"+ await blobUtil.blobToBase64String(r)
})
}
return pres.write();
}
blobUtil = require('blob-util@2.0.2/dist/blob-util.js')
button = (data, filename = 'data') => {
if (!data) throw new Error('Array of data required as first argument');
const size = (data.size / 1024).toFixed(0);
const button = DOM.download(
data,
filename,
`Download ${filename} (~${size} KB)`
);
return button;
}
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.
