-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
40 lines (40 loc) · 3.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="index.js" defer></script>
</head>
<body>
<div id="heading">
<div id="heading-center">
<h1>Visualizing Literary Influence<br>in the Paris Review Interviews</h1>
<p>Start with a writer you're interested in. See a graph of their connections to other writers. The <span style="color: #377eb8">blue links</span> point to their influences—people they've mentioned in their <a href="http://www.theparisreview.org/interviews"><em>Paris Review</em> interview</a>. The <span style="color: #e41a1c">red links</span> point to their influencees—people who have talked about them. <span style="color: #beaed4">Lavender</span> means both writers influenced each other.</p>
<p>Writers in <span style="color: #1b9e77">green</span> have written fiction, those in <span style="color: #d95f02">orange</span> are poets, and those in <span style="color: #7570b3">purple</span> have worked in some other form (from nonfiction to theater to criticism). Some people fall into multiple categories, but they're grouped under <span style="color: #1b9e77">fiction</span> or <span style="color: #d95f02">poetry</span>, and you can learn about their other genres when you click on them.</p>
<p> Click on the names of any the writers in the graph to highlight them and see some context about their relationships with your main writer in the sidebar. (If you don't think the "influence" is legit, there's a button in the sidebar to remove the link!) Then, if you want to learn more about the influences of that writer, just click on their name again (or click the "focus on" link in the sidebar) and all their influence links will be added to the graph. You can always click back to previous focuses of attention too, to recolor their links, or just keep venturing outward.
</p>
<p>Explore! Maybe find someone new to read. And if an excerpt in the sidebar looks interesting, please do click through to the full interview: they're wonderful.</p>
</div>
</div>
<div id="main">
<div id="viz">
Loading writers (may take a while) …
</div>
<div id="sidebar">
<img id="focus-image">
<a id="focus" class="paris-link" target="_blank"></a>
<p id="focus-extra"></p>
<p id="influence-sentence"></p>
<img id="other-image">
<a id="other-writer" class="paris-link" target="_blank"></a>
<p id="other-extra"></p>
<p id="focus-other" class="hyper"></p>
<div id="examples"></div>
<p id="remove-link" class="hyper"></p>
</div>
</div>
<p><a href="https://web.stanford.edu/class/cs448b/cgi-bin/wiki-fa16/index.php?title=FP-AlecGlassford">This project</a> was made for Stanford's <a href="https://web.stanford.edu/class/cs448b/cgi-bin/wiki-fa16/index.php?title=Main_Page">CS 448B: Data Visualization</a> course. <a href="https://github.com/alecglassford/paris">See the source on GitHub</a>.
</p>
</body>
</html>