Published
Edited
Sep 27, 2021
Fork of Tree-o-Matic
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//import {rasterize, serialize} from "@mbostock/saving-svg"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//html`Veuillez sélectionner un arbre à transformer (optionnel)`
Insert cell
//text = await inputCSV.text()
Insert cell
text = await FileAttachment("treeomatic_15_9_2021_bis@1.csv").text()
Insert cell
Insert cell
Insert cell
Insert cell
// DEFINE OUTPUT VIEW (button)
ViewOutput = html`
${DOM.download(await rasterize(chart), null, "Download as PNG")}
${DOM.download(await serialize(chart), null, "Download as SVG")}
`
Insert cell
// Create textarea
function editor(value) {
const textarea = document.createElement("textarea");
textarea.value = value;
textarea.style.display = "block";
textarea.style.boxSizing = "border-box";
textarea.style.width = "calc(100% + 28px)";
textarea.style.font = "var(--monospace-font, var(--mono_fonts))";
textarea.style.minHeight = "60px";
textarea.style.border = "none";
textarea.style.padding = "4px 10px";
textarea.style.margin = "0 -14px";
textarea.style.background = "rgb(247,247,249)";
textarea.style.tabSize = 2;
textarea.style.resize = "none";
textarea.onkeypress = event => {
if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return;
let i = textarea.selectionStart;
let j = textarea.selectionEnd;
let v = textarea.value;
if (i === j) {
let k = 0;
while (i > 0 && v[--i - 1] !== "\n");
while (i < j && v[i] === " ") ++i, ++k;
textarea.value = v.substring(0, j) + "\n" + new Array(k + 1).join(" ") + v.substring(j);
textarea.selectionStart = textarea.selectionEnd = j + k + 1;
textarea.dispatchEvent(new CustomEvent("input"));
event.preventDefault();
}
};
textarea.oninput = () => textarea.style.height = `${textarea.value.match(/^/gm).length * 21 + 8}px`;
textarea.oninput();
return textarea;
}

Insert cell
Insert cell
// DEFINE SOURCE TEXTAREA
viewof source = editor(text)

Insert cell
// cstParseRows(source)
data = cstParseRows(source, ([name]) => ({name}))

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// DEFINE OUTPUT VIEW ( button)
//ViewSaveJson = html`${DOM.download(serializeForJson(data), null, "Download JSON")}`

Insert cell
Insert cell
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