-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
60 lines (57 loc) · 3.3 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta property="og:site_name" content="Github"/>
<meta property="og:title" content="Visualizing 500 Days of Summer by @rasagy"/>
<title>Visualizing 500 Days of Summer by @rasagy</title>
<meta property="og:description" content="Visualization of the non-linear narrative of 500 days of summer by Rasagy Sharma using d3.js"/>
<meta name="description" content="Visualization of the non-linear narrative of 500 days of summer by Rasagy Sharma using d3.js" />
<meta property="og:image" content="./data/500-days-of-summer-visualization-by-rasagy.png">
<meta property="og:image" content="./data/500-days-bg.jpg">
<link rel="image_src" href="./data/500-days-of-summer-visualization-by-rasagy.png" />
<link rel="image_src" href="./data/500-days-bg.jpg" />
<meta property="og:url" content="http://bit.ly/500DaysViz">
<script type="text/javascript" src="./js/d3.v3.js"></script>
<link rel='stylesheet' id='main-styles' href='main.css' type='text/css' media='all'/>
</head>
<body>
<div id="main-c">
<div id="info-c">
<div id="day"><span>(Day Number)</span></div>
<div id="place">(Summary of story)</div>
<div id="quote"><pre></pre></div>
</div>
<center id="svg-c"></center>
<div id="heading-c">
<h3>Visualizing 500 Days of Summer</h3>
<h4>Created by <a href="http://twitter.com/rasagy">@rasagy</a> from NID Bangalore<br />More details about the process<a href="http://rasagy.in/blog/2013/09/visualizing-500-days-of-summer/">on my blog!</a></h4>
<h4>Share this on: <a target="_blank" href="https://twitter.com/intent/tweet?text=Visualizing 500 Days of Summer by @rasagy http://bit.ly/500DaysViz #DataViz &url=http://bit.ly/500DaysViz" class="btn-tweet">Twitter</a> <a target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=http://bit.ly/500DaysViz" class="btn-facebook">Facebook</a></h4>
</div>
<div id="info-footer">
<div class="heading">Relationship</div>
<ul>
<li> <span class="legend-icons" style='color:#FE4365'>❤</span><span style='background-color:#FE4365'>Together</span></li>
<li> <span class="legend-icons" style='color:#7E5686'>♡</span><span style='background-color:#7E5686'>Not together</span></li>
<li> <span class="legend-icons" style='color:#A5AAD9'>♡</span><span style='background-color:#A5AAD9'>Acquaintance</span></li>
</ul>
</div>
<div id="splash" title="Image Credit: Annlaurence (DA)">
<h2>Visualizing 500 Days of Summer</h2>
<p>The movie is about the 500 days long relationship of a guy (<em>Tom</em>) & a girl (<em>Summer</em>).</p>
<p>The movie follows a non-linear narrative, thus days don't appear chronologically.</p>
<center><button onclick="generateViz();">Start the visualization!</button></center>
</div>
<div id="screen"> <img src="./data/500-days-of-summer-visualization-by-rasagy.png" width="700px"/></div>
</div>
<script type="text/javascript" src="./js/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-6381820-3', 'rasagy.github.io');
ga('send', 'pageview');
</script>
</body>
</html>