Move the content graph layout into theme

This commit is contained in:
Danila Fedorin 2023-01-01 13:21:10 -08:00
parent 7a51132e69
commit 6bf0b37694
3 changed files with 3 additions and 69 deletions

View File

@ -1,22 +1,9 @@
---
title: "Content Graph"
type: "graph"
---
<script src="//unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
<script type="module" src="/graph/graph.js"></script>
<style>
#graph-container {
width: 100%;
height: 50vh;
border-radius: 0.2rem;
border: .075rem solid #bfbfbf
}
</style>
<p>
Here you can see a visualization of the posts on this blog using <a href="https://visjs.org/">Vis.js</a>.
Here you can see a visualization of the posts on this blog using [Vis.js](https://visjs.org/).
In the below graph, each node is an article, and each edge between nodes is a reference from
one article to another. Each article is sized to be roughly proportional to its word count (file size
is used as a quick metric for this purpose). You can hover over a node to see the title of the article
it represents, and double-click to go to that article.
</p>
<div id="graph-container">
</div>

View File

@ -1,53 +0,0 @@
import { nodes, edges } from "./graph.gen.js";
var container = document.getElementById("graph-container");
var options = {
interaction: {
hover: true
},
nodes: {
shape: "dot",
size: 16,
},
physics: {
forceAtlas2Based: {
gravitationalConstant: -10,
centralGravity: 0.005,
springLength: 230,
springConstant: 0.18,
},
maxVelocity: 146,
solver: "forceAtlas2Based",
timestep: 0.35,
stabilization: { iterations: 150 },
},
};
var nodesDs = new vis.DataSet();
nodesDs.add(nodes);
var edgesDs = new vis.DataSet();
edgesDs.add(edges);
var network = new vis.Network(container, { nodes: nodesDs, edges: edgesDs }, options);
network.on("doubleClick", function (params) {
params.event = "[original event]";
if (params.nodes.length !== 1) return;
window.open(nodesDs.get(params.nodes[0]).url, "_blank")
});
network.on("hoverNode", function (params) {
nodesDs.update({ id: params.node, label: nodesDs.get(params.node).name });
});
network.on("blurNode", function (params) {
nodesDs.update({ id: params.node, label: undefined });
});
// network.on("selectNode", function (params) {
// for (const node of params.nodes) {
// nodesDs.update({ id: node, label: nodesDs.get(node).name });
// }
// });
// network.on("deselectNode", function (params) {
// for (const node of params.previousSelection.nodes) {
// if (params.nodes.some(n => n === node)) continue;
// nodesDs.update({ id: node, label: undefined });
// }
// });

@ -1 +1 @@
Subproject commit 32738ce835858065abd19698657c57b8e4746952
Subproject commit 84274f5c08a17d74752dafd04c376f757d2af97e