Visualize Wikipedia Articles that you've visited in an interactive graph
// ==UserScript==
// @name Wikipedia History and History Visualizer
// @namespace https://en.wikipedia.org/wiki/*
// @description Visualize Wikipedia Articles that you've visited in an interactive graph
// @author Sidem
// @version 0.1
// @match https://en.wikipedia.org/wiki/*
// @grant none
// @license GPL-3.0-only
// ==/UserScript==
const dbName = "WikipediaHistoryDB";
const objectStoreName = "wikipediaHistory";
function openDatabase() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = (event) => {
const db = event.target.result;
db.createObjectStore(objectStoreName, { keyPath: "id", autoIncrement: true });
};
request.onsuccess = (event) => resolve(event.target.result);
request.onerror = (event) => reject(event.target.error);
});
}
async function getWikipediaHistoryData() {
const db = await openDatabase();
const transaction = db.transaction(objectStoreName, "readonly");
const objectStore = transaction.objectStore(objectStoreName);
const request = objectStore.getAll();
return new Promise((resolve, reject) => {
request.onsuccess = (event) => resolve(event.target.result);
request.onerror = (event) => reject(event.target.error);
});
}
async function setWikipediaHistoryData(data) {
const db = await openDatabase();
const transaction = db.transaction(objectStoreName, "readwrite");
const objectStore = transaction.objectStore(objectStoreName);
const request = objectStore.clear();
request.onsuccess = () => {
if (data && data.length) { // Add this condition
for (const item of data) {
objectStore.add(item);
}
}
};
return new Promise((resolve, reject) => {
transaction.oncomplete = () => resolve();
transaction.onerror = (event) => reject(event.target.error);
});
}
const linkToTitle = (link) => { return link.split('#')[0].split('/wiki/')[1] };
const createHistoryButton = () => {
const button = document.createElement('button');
button.innerText = 'View History Graph';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = 1000;
button.onclick = () => {
window.location = '/wiki/History_visualization_script';
};
document.body.appendChild(button);
};
let tooltipTimer;
const addStyles = () => {
const style = document.createElement("style");
style.innerHTML = `
svg {
font-family: sans-serif;
overflow: visible;
}
circle {
stroke: #fff;
stroke-width: 1.5px;
}
line {
stroke: #999;
stroke-opacity: 0.6;
stroke-width: 2;
}
text {
/*make unselectable*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
}
body {
overflow-y: hidden !important;
overflow-x: hidden !important;
}
`;
document.head.appendChild(style);
};
const forceCluster = () => {
const strength = 0.3;
const clusters = new Map();
let nodes;
function force(alpha) {
for (const node of nodes) {
const cluster = clusters.get(node.clusterId);
if (!cluster) continue;
let { x: cx, y: cy } = cluster;
node.vx -= (node.x - cx) * strength * alpha;
node.vy -= (node.y - cy) * strength * alpha;
}
}
force.initialize = (_) => (nodes = _);
force.clusters = (_) => {
clusters.clear();
for (const node of _) {
clusters.set(node.clusterId, node);
}
return force;
};
return force;
};
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);
}
const clearGraph = () => {
d3.select("#graphContainer").remove();
};
let isMouseOverNode = false;
const createGraph = (wikipediaHistoryData) => {
const deleteEntry = (id) => {
const updatedHistoryData = wikipediaHistoryData.filter((_, index) => index !== id);
localStorage.setItem('wikipediaHistory', JSON.stringify(updatedHistoryData));
clearGraph();
createGraph(updatedHistoryData);
};
const links = wikipediaHistoryData.flatMap((entry, index) =>
entry.links.map((link) => {
const targetIndex = wikipediaHistoryData.findIndex((e) => e.link === link.link);
return targetIndex !== -1 ? { source: index, target: targetIndex } : null;
})
).filter((link) => link !== null);
const nodes = wikipediaHistoryData.map((entry, index) => {
const connectedNodes = links.filter(link => link.source === index || link.target === index);
const clusterId = connectedNodes.length > 0 ? index : null;
return { id: index, label: entry.title, clusterId };
});
const svg = d3.select("#graph");
const width = +svg.attr("width");
const height = +svg.attr("height");
const g = svg.append("g").attr("id", "graphContainer");
svg.append("defs")
.append("marker")
.attr("id", "arrowhead")
.attr("viewBox", "-0 -5 10 10")
.attr("refX", 13)
.attr("refY", 0)
.attr("orient", "auto")
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("xoverflow", "visible")
.append("svg:path")
.attr("d", "M 0,-5 L 10 ,0 L 0,5")
.attr("fill", "#999")
.style("stroke", "none");
const simulation = d3
.forceSimulation(nodes)
.force("link", d3.forceLink(links).id((d) => d.id).distance(50))
.force("charge", d3.forceManyBody().strength(-200))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collide", d3.forceCollide(60))
.force("cluster", forceCluster().clusters(nodes)); // Add cluster force
const link = g
.selectAll("line")
.data(links)
.join("line")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 2)
.attr("marker-end", (d) => {
const sourceLinks = wikipediaHistoryData[d.source.index].links;
const targetLinks = wikipediaHistoryData[d.target.index].links;
const sourceToTarget = sourceLinks.some((link) => link.link === wikipediaHistoryData[d.target.index].link);
const targetToSource = targetLinks.some((link) => link.link === wikipediaHistoryData[d.source.index].link);
return sourceToTarget && !targetToSource ? "url(#arrowhead)" : "";
});
const node = g
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 5)
.attr("fill", "#69b3a2");
node.on("dblclick", (event, d) => {
window.open(`https://en.wikipedia.org/wiki/${wikipediaHistoryData[d.id].link}`, "_blank");
});
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0)
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("padding", "10px")
.style("position", "absolute")
.style("pointer-events", "auto");
node.on("mouseover", (event, d) => {
isMouseOverNode = true;
tooltip.transition()
.duration(200)
.style("opacity", 1);
tooltip.html(`Title: ${wikipediaHistoryData[d.id].title}<br/>URL: https://en.wikipedia.org/wiki/${wikipediaHistoryData[d.id].link}<br/>Dates Accessed: ${wikipediaHistoryData[d.id].dates_accessed.join(', ')}<br/><button id="deleteButton">Delete</button>`)
.style("left", `${event.pageX + 10}px`)
.style("top", `${event.pageY + 10}px`);
tooltip.select("#deleteButton").on("click", () => deleteEntry(d.id));
})
// ...
.on("mousemove", (event) => {
tooltip.style("left", `${event.pageX + 10}px`).style("top", `${event.pageY + 10}px`);
});
tooltip.on("mouseover", () => {
clearTimeout(tooltipTimer);
if (isMouseOverNode) {
tooltip.style("opacity", 1);
// move tooltip back to mouse position
tooltip.style("left", `${d3.event.pageX + 10}px`).style("top", `${d3.event.pageY + 10}px`);
}
})
.on("mouseout", () => {
clearTimeout(tooltipTimer);
tooltipTimer = setTimeout(() => {
tooltip.transition()
.duration(200)
.style("opacity", 0);
//also move invisible tooltip out of screen so it doesn't block mouse events
tooltip.style("left", "-1000px").style("top", "-1000px");
}, 150);
});
node.on("mouseout", () => {
isMouseOverNode = false;
clearTimeout(tooltipTimer);
tooltipTimer = setTimeout(() => {
tooltip.transition()
.duration(200)
.style("opacity", 0);
//also move invisible tooltip out of screen so it doesn't block mouse events
tooltip.style("left", "-1000px").style("top", "-1000px");
}, 150);
});
const label = g
.selectAll("text")
.data(nodes)
.join("text")
.text((d) => d.label)
.attr("font-size", "10px")
.attr("dx", 8)
.attr("dy", "0.35em");
const zoomBehavior = d3.zoom()
.scaleExtent([0.1, 5])
.on('zoom', (event) => {
g.attr('transform', event.transform);
});
svg.call(zoomBehavior);
simulation.on("tick", () => {
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);
});
};
window.addEventListener('load', () => {
let links = document.querySelector('#bodyContent').querySelectorAll('a[href*="/wiki/"]');
let title = document.querySelector('#firstHeading').innerText;
let link = linkToTitle(window.location.pathname);
let linkEntries = [];
for (let i = 0; i < links.length; i++) {
if (links[i].href.includes('/wiki/')) {
let linkEntry = {
title: links[i].title,
link: linkToTitle(links[i].href)
};
linkEntries.push(linkEntry);
}
}
let entry = {
title: title,
link: link,
links: linkEntries
};
let date = new Date();
let dateString = `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
let database;
getWikipediaHistoryData().then(data => {
database = data;
if (database) {
let entryIndex = -1;
for (let i = 0; i < database.length; i++) {
if (database[i].title === entry.title) {
entryIndex = i;
break;
}
}
if (entryIndex < 0) {
entry.dates_accessed = [dateString];
database.push(entry);
} else {
let lastDate = database[entryIndex].dates_accessed[database[entryIndex].dates_accessed.length - 1];
if (lastDate.split(' ')[0] !== dateString.split(' ')[0]) {
database[entryIndex].dates_accessed.push(dateString);
}
database[entryIndex].links = entry.links;
}
} else {
entry.dates_accessed = [dateString];
database = [entry];
}
if (link === 'History_visualization_script') {
addStyles();
const bodyContent = document.querySelector('#bodyContent');
bodyContent.innerHTML = '';
document.body.innerHTML = '';
document.body.appendChild(bodyContent);
let script = document.createElement('script');
script.src = 'https://d3js.org/d3.v7.min.js';
document.querySelector('#bodyContent').appendChild(script);
let script2 = document.createElement('script');
script2.src = 'https://unpkg.com/d3-force-cluster@latest';
document.querySelector('#bodyContent').appendChild(script2);
script.onload = () => {
let svgElement = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svgElement.setAttribute('width', window.innerWidth);
svgElement.setAttribute('height', window.innerHeight);
svgElement.setAttribute('id', 'graph');
document.querySelector('#bodyContent').appendChild(svgElement);
getWikipediaHistoryData().then(wikipediaHistoryData => {
createGraph(wikipediaHistoryData);
});
}
} else {
setWikipediaHistoryData(database);
createHistoryButton();
}
});
}, false);