⚡ 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.
function drawCases(cfg, group, repeat) {
// get the first shape in the group, it is the edge's path here
const shape = group.get('children')[0];
const metrics = cfg.metrics;
const performance = metrics.performance;
// the start position of the edge's path
const startPoint = shape.getPoint(0);
for (const [key, value] of Object.entries(performance)) {
if (key == 'label') {
continue;
}
// Add circle shape
const circle = group.addShape('circle', {
attrs: {
// text: key,
x: startPoint.x,
y: startPoint.y,
fill: '#5B8FF9',
// width: 10,
// height: 10
r: 3
},
name: 'marker-shape'
});
const duration = Math.log10(value);
// animation for the circle
circle.animate(ratio => shape.getPoint(ratio), {
callback: () => {
if (!repeat) {
// Remove circles at the end of the animation
group.removeChild(circle);
}
},
repeat: repeat, // Execute the animation repeatedly
duration: duration * 2 * SECOND // the duration for executing once
});
}
}
G6.registerEdge(
'circle-running',
{
afterDraw(cfg, group) {
drawCases(cfg, group, repeat);
}
},
'polyline' // Edge type
)
SECOND = 1000
data = {
repeat;
return {
nodes: [
{
id: '1',
name: 'Node 1'
},
{
id: '2',
name: 'Node 2'
},
{
id: '3',
name: 'Node 3'
}
],
edges: [
{
source: '1',
target: '2',
type: 'circle-running',
attrs: {
fill: 'red'
},
metrics: {
performance: {
min: 0,
max: 60000,
median: 30000,
label: 10 // Mean
}
}
},
{
source: '2',
target: '3',
type: 'circle-running',
metrics: {
performance: {
min: 0,
max: 60000,
median: 30000,
label: 60000 // Mean
}
}
},
{
source: '3',
target: '3',
type: 'circle-running-loop',
metrics: {
performance: {
min: 0,
max: 60000,
median: 30000,
label: 60000 // Mean
}
}
}
]
};
}
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;
}
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.
