Skip to content

Commit

Permalink
feat: add basic graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@polarhive
polarhive committed Apr 9, 2024
1 parent 0af56cf commit 7042b3c
Show file tree
Hide file tree
Showing 2 changed files with 284 additions and 0 deletions.
140 changes: 140 additions & 0 deletions site/static/scripts/graph/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag Graph</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>

<body>
<div id="chart"></div>
<script>
d3.json("index.json").then(function (data) {
const width = 300;
const height = 300;
const color = d3.scaleOrdinal(d3.schemeCategory10);
const links = [];
const nodesMap = {};

// Iterate through each post to create links
Object.keys(data).forEach(key => {
const post = data[key];
const tags = post.Tags;
if (tags) {
tags.forEach(tag => {
if (!nodesMap[tag]) {
nodesMap[tag] = { id: tag, group: 1 };
}
tags.forEach(otherTag => {
if (tag !== otherTag) {
const linkId = `${tag}-${otherTag}`;
if (!links.some(d => d.id === linkId)) {
links.push({ source: tag, target: otherTag, id: linkId, value: 1 });
} else {
const existingLink = links.find(d => d.id === linkId);
existingLink.value++;
}
}
});
});
}
});

// Convert nodes object to array
const nodes = Object.values(nodesMap);

const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).id(d => d.id))
.force("charge", d3.forceManyBody())
.force("center", d3.forceCenter(width / 2, height / 2))
.on("tick", ticked);

const svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");

const link = svg.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 1)
.selectAll("line")
.data(links)
.enter().append("line")
.attr("stroke-width", d => Math.sqrt(d.value));

const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 0.5)
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 4)
.attr("fill", d => color(d.group))
.on("click", nodeClicked);

// Add labels to nodes
const label = svg.append("g")
.selectAll("text")
.data(nodes)
.enter().append("text")
.text(d => d.id)
.style("font-size", "12px")
.attr("dx", 12)
.attr("dy", ".35em")
.attr("fill", "black");

node.append("title")
.text(d => d.id);

node.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));

function ticked() {
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);

node
.attr("cx", d => d.x)
.attr("cy", d => d.y);

label
.attr("x", d => d.x)
.attr("y", d => d.y);
}

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

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

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

function nodeClicked(event, d) {
// Add your click event handler here
console.log("Node clicked:", d.id);
}

invalidation.then(() => simulation.stop());
});
</script>
</body>

</html>
144 changes: 144 additions & 0 deletions site/static/scripts/graph/index.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
{
"building_anna.md": {
"CompleteURL": "posts/building_anna.html",
"FilenameWithoutExtension": "building_anna",
"Frontmatter": {
"Title": "Building anna",
"Date": "2024-04-04",
"Draft": false,
"JSFiles": null,
"Type": "post",
"Description": "This page contains a post about anna, a static site generator written in Go. This team project was built as part of AIEP 2024",
"PreviewImage": "",
"Tags": [
"acm",
"hsp",
"go",
"tech",
"talk",
"aiep"
],
"Authors": [
"Adhesh",
"Aditya",
"Nathan",
"Anirudh"
]
},
"Tags": [
"acm",
"hsp",
"go",
"tech",
"talk",
"aiep"
]
},
"docs.md": {
"CompleteURL": "docs.html",
"FilenameWithoutExtension": "docs",
"Frontmatter": {
"Title": "Anna Documentation",
"Date": "",
"Draft": false,
"JSFiles": null,
"Type": "",
"Description": "",
"PreviewImage": "",
"Tags": null,
"Authors": null
},
"Tags": null
},
"index.md": {
"CompleteURL": "index.html",
"FilenameWithoutExtension": "index",
"Frontmatter": {
"Title": "Home",
"Date": "2024-02-24",
"Draft": false,
"JSFiles": null,
"Type": "",
"Description": "homepage for our ssg",
"PreviewImage": "/static/plane.jpg",
"Tags": null,
"Authors": null
},
"Tags": null
},
"week-1.md": {
"CompleteURL": "posts/week-1.html",
"FilenameWithoutExtension": "week-1",
"Frontmatter": {
"Title": "Week-1 Progress",
"Date": "2024-03-18",
"Draft": false,
"JSFiles": null,
"Type": "post",
"Description": "",
"PreviewImage": "",
"Tags": [
"progress"
],
"Authors": [
"Adhesh",
"Aditya",
"Anirudh",
"Nathan"
]
},
"Tags": [
"progress"
]
},
"week-2.md": {
"CompleteURL": "posts/week-2.html",
"FilenameWithoutExtension": "week-2",
"Frontmatter": {
"Title": "Week-2 Progress",
"Date": "2024-03-25",
"Draft": false,
"JSFiles": null,
"Type": "post",
"Description": "",
"PreviewImage": "",
"Tags": [
"progress"
],
"Authors": [
"Adhesh",
"Aditya",
"Anirudh",
"Nathan"
]
},
"Tags": [
"progress"
]
},
"week-3.md": {
"CompleteURL": "posts/week-3.html",
"FilenameWithoutExtension": "week-3",
"Frontmatter": {
"Title": "Week-3 Progress",
"Date": "2024-04-01",
"Draft": false,
"JSFiles": null,
"Type": "post",
"Description": "",
"PreviewImage": "",
"Tags": [
"progress"
],
"Authors": [
"Adhesh",
"Aditya",
"Anirudh",
"Nathan"
]
},
"Tags": [
"progress"
]
}
}

0 comments on commit 7042b3c

Please sign in to comment.