index.html
<!DOCTYPE html>
<html xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Wikipedia Exploration Map</title>
<link rel="stylesheet" href="styles.css">
<script src="https://unpkg.com/d3@6.2.0/dist/d3.min.js"></script>
<!-- <script src="index.js"></script> -->
<h2 style="padding-left: 40px;"><span style="color: #008080;">I read a lot of Wikipedia</span></h2>
Alt + Click on a hex color
Open a color picker to modify the color
<p style="padding-left: 40px;">I'll read a page and click on any link I'm curious about. Before I know it, I'm far from where I started. I wanted to visualize the wacky paths I had taken. So I made this. I've read nearly all the pages in their entirety. Check out the <a href="https://github.com/Christian-D2/wiki-branches" target="_blank"> Github Repo!</a>
</p>
<h4 style="padding-left: 40px;">Here are the rough steps:</h4>
<ol>
<li style="list-style-type: none;">
<ol>
<li>Locate Browser History file</li>
<li>Use <strong>Excel VBA</strong> to delete all non-Wikipedia URLs</li>
<li>Use <strong>Python</strong> to scrape all links on each visited Wikipedia page</li>
<li>Use <strong>Python</strong> to compare the on-page links to the list of visited pages</li>
<li>Inputting my known starting page, my Python script iterates through each path and generates a <strong>JSON</strong> tree</li>
<li>Use a <strong>Javascript</strong> library D3js, to visualize JSON tree</li>
<li>Add a few features like summaries and links to pages on the tree</li>
</ol>
</li>
</ol>
<h4 style="padding-left: 40px;"><span style="color: #008080;">Explore just below. Click and Drag, Mouse wheel Zoom in-out, Click to learn more!</span></h4>
Alt + Click on a hex color
Open a color picker to modify the color
<body>
<svg>
</svg>
<script src="bundle.js">
</script>
</script>
</body>
</html>
