pinpox/graph.js Secret

## graph.js

const height = 280;
const width = 600;

/*
 * Input file generated with
 * zk graph --format json > data/notes2.json
 */

d3.json("data/notes.json").then( function(json) {

	// Create list of existing paths/IDs
	var validPaths = json.notes.map(n => n.path);

	// Filter broken links and format notes so that d3 can untderstand them
	var links = json.links
		.filter( edge => ( validPaths.includes(edge.targetPath) && (validPaths.includes(edge.sourcePath) )))
		.map(function(e){
			ne = {};
			ne.source = e.sourcePath;
			ne.target = e.targetPath;
			return ne;
		});

	const simulation = d3.forceSimulation(json.notes)
		.force("link", d3.forceLink(links).id(d => d.path))
		.force("charge", d3.forceManyBody())
		.force("x", d3.forceX())
		.force("y", d3.forceY())
	.force("collide", d3.forceCollide().radius(20));

	const svg = d3.select("#graphcontainer").append("svg")
		.attr("viewBox", [-width / 2, -height / 2, width, height]);

	const link = svg.append("g")

		.attr("stroke", "#999")
		.attr("stroke-opacity", 0.6)
		.selectAll("line")
		.data(links)
		.join("line")
		.attr("stroke-width", d => Math.sqrt(d.value));

	// Create container to hold circles and labels together
	var container = svg.append("g")
		.selectAll("g")
		.data(json.notes)
		.enter()
		.append("g");

	container
		.call(drag(simulation));
	// .on("mouseover", fade(.1))
	// .on("mouseout", fade(1));

	var circles = container.append("circle")
		.attr('r', 5)
		.attr("fill", "#1f77b4");

	var texts = container.append("text")
		.attr("x", 7)
		.attr("y", "0.31em")
		.text(d => d.title);

	container.append("title")
		.text(d => d.lead);

	simulation.on("tick", () => {

		container
			.attr("transform", d => "translate(" + d.x + ", " + d.y + ")");

		link
			.attr("x1", d => d.source.x)
			.attr("y1", d => d.source.y)
			.attr("x2", d => d.target.x)
			.attr("y2", d => d.target.y);

	});

	function drag(simulation) {

		function dragstarted(event, d) {
			if (!event.active) simulation.alphaTarget(0.3).restart();
			d.fx = d.x;
			d.fy = d.y;
		}

		function dragged(event, d) {
			d.fx = event.x;
			d.fy = event.y;
		}

		function dragended(event, d) {
			if (!event.active) simulation.alphaTarget(0);
			d.fx = null;
			d.fy = null;
		}

		return d3.drag()
			.on("start", dragstarted)
			.on("drag", dragged)
			.on("end", dragended);
	}

	// let linkedByIndex = {};
	// links.forEach(function(d) {
	//		linkedByIndex[d.source.index + "," + d.target.index] = 1;
	// });

	// function isConnected(a, b) {
	//		return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index] || a.index == b.index;
	// }

	// function fade(opacity) {
	//		return function(d) {
	//				node.style("stroke-opacity", function(o) {
	//						thisOpacity = isConnected(d, o) ? 1 : opacity;
	//						this.setAttribute('fill-opacity', thisOpacity);
	//						return thisOpacity;
	//				});

	//				link.style("stroke-opacity", function(o) {
	//						return o.source === d || o.target === d ? 1 : opacity;
	//				});
	//		};
	// }

}).catch(console.error);


## index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.links line {
	stroke: #999;
	stroke-opacity: 0.6;
}

.nodes circle {
	stroke: #fff;
	stroke-width: 1.5px;
}

text {
	font-family: sans-serif;
	font-size: 6px;
}

#graphcontainer {
	border: 1px solid red;
}

</style>
<body>
	<div id="graphcontainer"> </div>
</body>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="graph.js"></script>

	const height = 280;
	const width = 600;

	/*
	* Input file generated with
	* zk graph --format json > data/notes2.json
	*/

	d3.json("data/notes.json").then( function(json) {

	// Create list of existing paths/IDs
	var validPaths = json.notes.map(n => n.path);

	// Filter broken links and format notes so that d3 can untderstand them
	var links = json.links
	.filter( edge => ( validPaths.includes(edge.targetPath) && (validPaths.includes(edge.sourcePath) )))
	.map(function(e){
	ne = {};
	ne.source = e.sourcePath;
	ne.target = e.targetPath;
	return ne;
	});

	const simulation = d3.forceSimulation(json.notes)
	.force("link", d3.forceLink(links).id(d => d.path))
	.force("charge", d3.forceManyBody())
	.force("x", d3.forceX())
	.force("y", d3.forceY())
	.force("collide", d3.forceCollide().radius(20));

	const svg = d3.select("#graphcontainer").append("svg")
	.attr("viewBox", [-width / 2, -height / 2, width, height]);

	const link = svg.append("g")

	.attr("stroke", "#999")
	.attr("stroke-opacity", 0.6)
	.selectAll("line")
	.data(links)
	.join("line")
	.attr("stroke-width", d => Math.sqrt(d.value));

	// Create container to hold circles and labels together
	var container = svg.append("g")
	.selectAll("g")
	.data(json.notes)
	.enter()
	.append("g");

	container
	.call(drag(simulation));
	// .on("mouseover", fade(.1))
	// .on("mouseout", fade(1));

	var circles = container.append("circle")
	.attr('r', 5)
	.attr("fill", "#1f77b4");

	var texts = container.append("text")
	.attr("x", 7)
	.attr("y", "0.31em")
	.text(d => d.title);

	container.append("title")
	.text(d => d.lead);

	simulation.on("tick", () => {

	container
	.attr("transform", d => "translate(" + d.x + ", " + d.y + ")");

	link
	.attr("x1", d => d.source.x)
	.attr("y1", d => d.source.y)
	.attr("x2", d => d.target.x)
	.attr("y2", d => d.target.y);

	});

	function drag(simulation) {

	function dragstarted(event, d) {
	if (!event.active) simulation.alphaTarget(0.3).restart();
	d.fx = d.x;
	d.fy = d.y;
	}

	function dragged(event, d) {
	d.fx = event.x;
	d.fy = event.y;
	}

	function dragended(event, d) {
	if (!event.active) simulation.alphaTarget(0);
	d.fx = null;
	d.fy = null;
	}

	return d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended);
	}

	// let linkedByIndex = {};
	// links.forEach(function(d) {
	// linkedByIndex[d.source.index + "," + d.target.index] = 1;
	// });

	// function isConnected(a, b) {
	// return linkedByIndex[a.index + "," + b.index] \|\| linkedByIndex[b.index + "," + a.index] \|\| a.index == b.index;
	// }

	// function fade(opacity) {
	// return function(d) {
	// node.style("stroke-opacity", function(o) {
	// thisOpacity = isConnected(d, o) ? 1 : opacity;
	// this.setAttribute('fill-opacity', thisOpacity);
	// return thisOpacity;
	// });

	// link.style("stroke-opacity", function(o) {
	// return o.source === d \|\| o.target === d ? 1 : opacity;
	// });
	// };
	// }

	}).catch(console.error);

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.links line {
	stroke: #999;
	stroke-opacity: 0.6;
	}

	.nodes circle {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	text {
	font-family: sans-serif;
	font-size: 6px;
	}

	#graphcontainer {
	border: 1px solid red;
	}

	</style>
	<body>
	<div id="graphcontainer"> </div>
	</body>
	<script src="https://d3js.org/d3.v7.min.js"></script>
	<script src="graph.js"></script>