Published
Edited
Dec 29, 2020
Fork of Flow-o-Matic
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
csv = `Facturé,Frais,3000
Facturé,Réserve,3000
Facturé,Dédié Salaire,66000
Dédié Salaire,Super Brut,57000
Dédié Salaire,Abondement,9000
Abondement,CSG/CRDS,1000
Abondement,Épargne,8000
Super Brut,Cotisations Patronales,15000
Super Brut,Salaire Brut,42000
Salaire Brut,Cotisations Salariale,9000
Cotisations Salariale,Retraite,5000
Cotisations Salariale,CSG/CRDS,4000
Cotisations Patronales,Retraite,7000
Cotisations Patronales,Accident du travail,1000
Cotisations Patronales,Assurance santé,3000
Cotisations Patronales,Famille,1500
Cotisations Patronales,Assurance chomage,1500
Salaire Brut,Net avant impôts,33000
Net avant impôts,État,3000
Net avant impôts,Sur le compte en banque,30000
Sur le compte en banque,Loyer,12000
Sur le compte en banque,Épargne,3000
Sur le compte en banque,Dons et cotisations,1000
Sur le compte en banque,Dépenses courantes,9000
Sur le compte en banque,Vacances,2000
Sur le compte en banque,Équipements,1000
Sur le compte en banque,Factures,2000`
Insert cell
Insert cell
data = {
const links = d3.csvParseRows(source, ([source, target, value, linkColor = color]) => (source && target ? {source, target, value: !value || isNaN(value = +value) ? 1 : value, color: linkColor} : null));
const nodeByName = new Map;
for (const link of links) {
if (!nodeByName.has(link.source)) nodeByName.set(link.source, {name: link.source});
if (!nodeByName.has(link.target)) nodeByName.set(link.target, {name: link.target});
}
return {nodes: Array.from(nodeByName.values()), links};
}
Insert cell
sankey = d3.sankey()
.nodeId(d => d.name)
.nodeAlign(d3[`sankey${align[0].toUpperCase()}${align.slice(1)}`])
.nodeSort(inputOrder ? null : undefined)
.nodeWidth(15)
.nodePadding(padding)
.extent([[0, 5], [width, height - 5]])
Insert cell
width = 954
Insert cell
viewof height = {
const form = html`<form class="observablehq--inspect">height = <input name=i type=number min=0 value=720 step=1 style="padding:2px;margin:-2px 0;width:120px;"></form>`;
(form.oninput = () => form.value = form.i.valueAsNumber)();
return form;
}
Insert cell
viewof padding = {
const form = html`<form class="observablehq--inspect">padding = <input name=i type=number min=0 value=10 step=1 style="padding:2px;margin:-2px 0;width:120px;"></form>`;
(form.oninput = () => form.value = form.i.valueAsNumber)();
return form;
}
Insert cell
viewof color = {
const form = html`<form class="observablehq--inspect">color = <input name=i type=color value="#dddddd" style="padding:2px;margin:-2px 0;"></form>`;
(form.oninput = () => form.value = form.i.value)();
return form;
}
Insert cell
import {rasterize, serialize} from "@mbostock/saving-svg"
Insert cell
d3 = require("d3@5", "d3-sankey@0.12")
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