Published
Edited
Sep 10, 2021
Insert cell
Insert cell
Insert cell
//import {cstParseRows} from "@mbostock/comma-separated-tree"

Insert cell
//import {rasterize, serialize} from "@mbostock/saving-svg"

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// DEFINE THE CHART
chart = {
const root = tree(data);

const svg = d3.select(DOM.svg(975, 975))
.style("background", "white")
.style("font", "10px sans-serif");

const g = svg.append("g");

const link = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.enter().append("path")
.attr("d", d => `
M${d.target.y},${d.target.x}
C${d.source.y + root.dy / 2},${d.target.x}
${d.source.y + root.dy / 2},${d.source.x}
${d.source.y},${d.source.x}
`);

const node = g.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants().reverse())
.enter().append("g")
.attr("transform", d => `translate(${d.y},${d.x})`);

node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);

node.append("text")
.attr("dy", "0.31em")
.attr("x", d => d.children ? -6 : 6)
.text(d => d.data.name)
.filter(d => d.children)
.attr("text-anchor", "end")
.clone(true).lower()
.attr("stroke", "white");

document.body.appendChild(svg.node());

const {x, y, width, height} = g.node().getBBox();

svg.remove()
.style("max-width", "100%")
.style("width", "100%")
.style("height", "auto")
.attr("width", width + 10)
.attr("height", height + 10)
.attr("viewBox", `${x - 5} ${y - 5} ${width + 10} ${height + 10}`);

return svg.node();
}


Insert cell
/*
viewof output = html`
${DOM.download(await rasterize(chart), null, "Download as PNG")}
${DOM.download(await serialize(chart), null, "Download as SVG")}
${DOM.download(new Blob([source], {type: "text/csv"}),"new_chart.csv")}
`
*/


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
// THEN GENERATE THE VALUE (input)
//output = Generators.input(ViewOutput);
Insert cell
/*
// DEFINE ALGORITHM ( balise select)
viewof algorithm = html`<select>
<option selected value="cluster">Cluster
<option value="cluster-no-separation">Cluster (no separation)
<option value="tree">Tree
</select>`
*/

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

Insert cell
viewof myname = Inputs.text({label: "Choisissez le nom du fichier", placeholder: "exemple.csv"})
Insert cell
myname
Insert cell
name = {
if(myname == ""){
return "new.csv"}
else{
return myname}
}

Insert cell
// DEFINE OUTPUT VIEW ( button)
ViewSave = html`${DOM.download(new Blob([source], {type: "text/csv"}), name )}`


Insert cell
/*
html`<form method="POST">
<input type="hidden" name="textarea" id="mydata">
<input type="submit">
</form>`;
*/
Insert cell
//document.getElementById("mydata").value= data;
Insert cell
Insert cell
//import {inspect} from "@observablehq/inspector"

Insert cell
//Inspector = (await require("@observablehq/inspector@3.2.2/dist/inspector.js")).Inspector
Insert cell
//object
//md`${inspect({hello: ["world"]})}`

Insert cell
//inspect({hello: ["world"]})
Insert cell
//inspect({hello: data})
Insert cell
//inspect_helloData = inspect({hello: data})
Insert cell
//html`<div id="my_inspect_helloData" value="${inspect_helloData}">${inspect_helloData}</div>`
Insert cell
//inspect_data = inspect(data)
Insert cell
//html`<div id="my_inspect_data" value="${inspect_data}">${inspect_data}</div>`

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