function makeNode(d) {
// Check whether the node exists in allTableNames or allColumnNames
const isTableName = _.includes(allTableNames, d);
// A function to create nodes in the shape you want for your network
return {
id: d,
x: width / 2,
y: height / 2,
r: isTableName ? 15 : 4,
fill: isTableName ? "#CCC" : "#999"
};
}
function makeLink(src) {
// A function to make a link between two nodes
// Right now it just makes links randomly
// But for real data, you probably want to do some lookups here
// Or you might be lucky and get source/target IDs in your dataset
// if (!src) src = chance.pickone(nodes);
// let target = chance.pickone(nodes);
// if (src.id === target.id) target = chance.pickone(nodes);
const source = src.columnName;
const target = src.tableName;
const sourceNode = _.find(nodes, { id: source });
const targetNode = _.find(nodes, { id: target });
console.log({ source, target }, { sourceNode, targetNode }, nodes);
return {
source: sourceNode,
target: targetNode
};
}
html`<style>
.link {
stroke: #CCC;
stroke-width: 1px;
}
.node {
/* cursor: move; */
// fill: #ccc;
stroke: #000;
stroke-width: 0.5px;
}
.tag-node {
/*opacity: 0.5;*/
}
.node.fixed {
fill: #f00;
}
.label {
fill: black;
font-size: 5px;
font-family: courier;
text-anchor: middle;
}
</style>`
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.
