The avatar for @selenecodes
Selene Blok
⚡ Data scientist, I enjoy telling stories with data. I'm currently learning D3.js and working on hobby projects, Mapbox visualizations, and fiddling with Juniper network data.
Published
Edited
Nov 20, 2021
Fork of Process analysis using PM4PY and G6
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Add labels to the network dynamically based on the selection in the performance
network = {
if (jsonNetwork.edges.length) {
jsonNetwork.edges.forEach(edge => {
let linewidth;
let label;

const primarySelectedMetric =
edge.metrics[perf_mapping[primaryEdgeInfoSelect]];
const primaryEdgeInfo = getSelectedMetric(
primarySelectedMetric,
primaryEdgeInfoSelect
);

const secondarySelectedMetric =
edge.metrics[perf_mapping[secondaryEdgeInfoSelect]];
const secondaryEdgeInfo = getSelectedMetric(
secondarySelectedMetric,
secondaryEdgeInfoSelect
);

edge.primaryLabel = primaryEdgeInfo.label;
edge.secondaryLabel = secondaryEdgeInfo.label;
edge.lineWidth = primaryEdgeInfo.lineWidth;
});

return jsonNetwork;
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
jsonNetwork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pallete = ({
colorMap: d3.interpolateRgb("white", "#ff0f48"),
boxStroke: '#C2C8D5',
boxFill: '#C6E5FF',
textFill: '#000'
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function formWithSubmit(form) {
const container = html`<div>${form}`;
form.addEventListener("submit", event => {
event.preventDefault();
container.value = formValue(form);
container.dispatchEvent(new CustomEvent("input"));
});
form.addEventListener("input", event => {
event.preventDefault();
// Need this, because otherwise the viewof Generator catches bubbling input events
event.stopPropagation();
});
return container;
}
Insert cell
checkbox = ({ label = '', value = false } = {}) => {
let wrapper = html`<label></label>`;
let check = html`<input type=checkbox>`;
wrapper.append(check);
wrapper.append(label || '');

check.checked = value;

check.addEventListener('change', e => {
wrapper.value = check.checked;
wrapper.dispatchEvent(new CustomEvent('input'));
});

// we need to have a starting value
wrapper.value = check.checked;

return wrapper;
}
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