👨💻 Modelling consultant
🧮 numbers 📊 actuarial
📈 viz, interactivity, transparency
diff("rtfm\n\nffdsafdsa\nfda", "rtfpessoa\n\nfdsafsadefd\nff", {outputFormat:'line-by-line'})
diff(
(a, b) => a + b,
(a, b) => a - b
)
diff(
{
min: 0,
max: 10,
toString() {
return `{${this.min},${this.max}}`;
}
},
{
min: 10,
max: 20,
toString() {
return `{${this.min},${this.max}}`;
}
}
)
diff = (left, right, options = {}) => {
const defaults = {
wrapper: html`<div>`,
outputFormat: "side-by-side",
drawFileList: false,
drawFileHeaders: false
};
const { wrapper, drawFileHeaders, ...opts } = { ...defaults, ...options };
const diff = jsdiff.createTwoFilesPatch(
left.name || "left",
right.name || "right",
"" + left,
"" + right,
undefined,
undefined,
{ context: options.context || 2 }
);
const json = diff2html.parse(diff);
wrapper.innerHTML = diff2html.html(json, opts);
if (!drawFileHeaders) {
for (const n of wrapper.querySelectorAll(".d2h-file-header")) n.remove();
}
return wrapper;
}
diff2html = {
const styleUrl =
"https://cdn.jsdelivr.net/npm/diff2html@3.4.13/bundles/css/diff2html.min.css";
const s = document.head.appendChild(html`<style>
@import url(${styleUrl});
/* Fixes overflow bug in html2diff CSS. */
.d2h-diff-table td {
font-size:9px !important;
}
.d2h-code-side-line {
box-sizing: border-box;
}
.d2h-file-side-diff {
overflow-x: auto;
}
`);
invalidation.then(() => s.remove());
return import("https://cdn.skypack.dev/diff2html@3.4.13?min");
}
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.
