The avatar for @radames
Radamés Ajna
Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Published unlisted
Edited
Feb 3, 2021
Insert cell
Insert cell
svg_with_style = html`<svg viewBox="0 0 10 10">
${style}
<circle class="circle-style" cx="5" cy="5" r="4" />
</svg>`
Insert cell
svg_no_style_1 = html`<svg viewBox="0 0 10 10">
<circle class="circle-style" cx="5" cy="5" r="4" />
</svg>`
Insert cell
svg_no_style_2 = html`<svg viewBox="0 0 10 10">
<circle class="circle-style" cx="5" cy="5" r="4" />
</svg>`
Insert cell
svg_no_style_3 = html`<svg viewBox="0 0 10 10">
<circle class="circle-style" cx="5" cy="5" r="4" />
</svg>`
Insert cell
style = html`
<style>
.circle-style {
fill: orange;
stroke: purple;
stroke-width: 1px;
}
</style>
`
Insert cell
Insert cell
data_zip = {
const cells = [
{ name: "file1.svg", ref: svg_no_style_1 },
{ name: "file2.svg", ref: svg_no_style_2 },
{ name: "file3.svg", ref: svg_no_style_3 }
];
const z = zip();

for (const cell of cells) {
const clone = cell.ref.cloneNode(true);
clone.appendChild(style);
z.file(cell.name, serialize(clone));
}
return z.generateAsync({ type: "blob" });
}
Insert cell
DOM.download(
new Blob([data_zip], { type: "application/zip" }),
"files.zip",
"Download ZIP"
)
Insert cell
import { zip } from "@fil/jszip"
Insert cell
import { serialize } from "@mbostock/saving-svg"
Insert cell

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.
Learn more