Social development practitioner. Trying to understand our world.
viewof source = {
const textarea = html`<textarea>
project
number
title
subproject => subproject
number
keyword
date / date range
administrative area
vdc/ward etc.
scope => scope
activities => activities
component => component
subproject
name
number
keyword
date / date range
scope => scope
activities => activities
component
subject title
date / date range
scope => scope
activities => activities
scope
activities
location
admin (ref .NUTS)
district
municipality
ward
person
name
last
first
sex
null
not disclosed
female
male
age
numeric
cluster
marital status
single
married
widowed
separated
divorced
patriarchal lineage
father's name
grandfather's name
language
[options list]
ethnicity
[options list]
religion
[options list]
education
cluster
disability
[options list]
contribute_to_household_subsistence
yes/no => livelihood
contribute_to_household_income
yes/no => livelihood
traditional lands => traditional lands [yes/no => create / link]
household => household [yes/no => create / link]
livelihood => livelihood [yes/no => create / link]
vocational skills
[options list]
location => location
monitoring
person / household => person / household //household = NEW
gender [should be mapped against person / household]
patriarcal lineage => patriarcal lineage
location => location
action
`;
textarea.style.display = "block";
textarea.style.boxSizing = "border-box";
textarea.style.width = "calc(100% + 28px)";
textarea.style.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.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 = "initial";
textarea.style.height = `${textarea.scrollHeight}px`;
};
yield textarea;
textarea.oninput();
}
download_data = DOM.download(
new Blob([JSON.stringify(data)], {type: "application/json"}),
"laxmis_concept_model.json", // optional file name
"Download JSON" // optional button label
)
function transformJSON(node) {
if (!node.children || node.children.length === 0) {
return node.name;
}
const result = {};
for (const child of node.children) {
const [key, value] = child.name.split(' => ').map(s => s.trim());
if (value) {
result[key] = result[key] || {};
result[key] = { ...result[key], [value]: transformJSON(child) };
} else {
result[key] = transformJSON(child);
}
}
return result;
}
transformedJSON = transformJSON(data)
download_transformed_data = DOM.download(
new Blob([JSON.stringify(data)], {type: "application/json"}),
"laxmis_concept_model.json", // optional file name
"Download Transformed Data" // optional button label
)
tree = data => {
const root = d3.hierarchy(data);
root.dx = 10;
root.dy = width / (root.height + 1);
let layout;
switch (algorithm) {
case "cluster": layout = d3.cluster(); break;
case "cluster-no-separation": layout = d3.cluster().separation(() => 1); break;
case "tree": layout = d3.tree(); break;
}
return layout.nodeSize([root.dx, root.dy])(root);
}
width = 954
import {rasterize, serialize} from "@mbostock/saving-svg"
import {cstParseRows} from "@mbostock/comma-separated-tree"
d3 = require("d3@5")
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.
