Move the content graph layout into theme
This commit is contained in:
parent
7a51132e69
commit
6bf0b37694
|
@ -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>
|
|
@ -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