⚡ 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
2 forks
G6.registerNode(
'sql',
{
drawShape(cfg, group) {
const rect = group.addShape('rect', {
attrs: {
x: -75,
y: -25,
width: 150,
height: 50,
radius: 10,
stroke: '#5B8FF9',
fill: '#C6E5FF',
lineWidth: 3
},
name: 'rect-shape'
});
if (cfg.name) {
group.addShape('text', {
attrs: {
text: cfg.name,
x: 0,
y: 0,
fill: '#00287E',
fontSize: 14,
textAlign: 'center',
textBaseline: 'middle',
fontWeight: 'bold'
},
name: 'text-shape'
});
}
return rect;
}
},
'single-node'
)
G6.registerEdge(
'circle-running',
{
afterDraw(cfg, group) {
// get the first shape in the group, it is the edge's path here=
const shape = group.get('children')[0];
// the start position of the edge's path
const startPoint = shape.getPoint(0);
// add red circle shape
const circle = group.addShape('circle', {
attrs: {
x: startPoint.x,
y: startPoint.y,
fill: '#5B8FF9',
r: 3
},
name: 'circle-shape'
});
// animation for the red circle
circle.animate(
ratio => {
// the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
// get the position on the edge according to the ratio
const tmpPoint = shape.getPoint(ratio);
// returns the modified configurations here, x and y here
return {
x: tmpPoint.x,
y: tmpPoint.y
};
},
{
repeat: true, // Execute the animation repeatedly
duration: 1000 // the duration for executing once
}
);
}
},
'line' // Edge type
)
data = ({
nodes: [
{
id: '1',
name: 'alps_file1'
},
{
id: '2',
name: 'alps_file2'
},
{
id: '3',
name: 'alps_file3'
}
],
edges: [
{
source: '1',
target: '2',
type: 'circle-running',
metrics: {
performance: {
label: 30
}
}
},
{
source: '2',
target: '3',
type: 'circle-running',
metrics: {
performance: {
label: 15
}
}
}
]
})
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.
