Move the content graph layout into theme
This commit is contained in:
parent
7a51132e69
commit
6bf0b37694
|
@ -1,22 +1,9 @@
|
||||||
---
|
---
|
||||||
title: "Content Graph"
|
title: "Content Graph"
|
||||||
|
type: "graph"
|
||||||
---
|
---
|
||||||
<script src="//unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
|
Here you can see a visualization of the posts on this blog using [Vis.js](https://visjs.org/).
|
||||||
<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>.
|
|
||||||
In the below graph, each node is an article, and each edge between nodes is a reference from
|
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
|
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
|
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.
|
it represents, and double-click to go to that article.
|
||||||
</p>
|
|
||||||
<div id="graph-container">
|
|
||||||
</div>
|
|
|
@ -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
|
Loading…
Reference in New Issue
Block a user