-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
58 lines (53 loc) · 3.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Tree</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/svg.css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37639745-1']);
_gaq.push(['_setDomainName', 'prcweb.co.uk']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="chart">
<svg>
</svg>
</div>
<button class="regenerate">Regenerate</button>
<p>A tree implemented using D3. Structually this is a binary tree and each branch is generated algorithmically. Some randomness is incorporated making it look more like a real tree.</p>
<p>This piece blurs the distinction between generative art and data visualisation. Arguably this isn't a data visualisation because no external data is used. However, the code does generate data for each branch (start point, angle, length and parent) and binds this data to SVG line elements using D3.</p>
<p>Be sure to click <a href="#" class="regenerate">regenerate</a> to see how well the awesome D3 handles the transition!</p>
<p>Another nice feature is that when hovering over a branch the route back to the root is highlighted.</p>
<footer>
<p>Built by <a href="https://peterrcook.com">Peter Cook</a> using <a href="http://d3js.org">D3</a>.</p>
<div id="social">
<a href="https://twitter.com/peter_r_cook" class="twitter-follow-button" data-show-count="false">Follow @prcweb</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-url="https://app.peterrcook.com/d3-tree" data-text="Tree built with D3js ">Tweet</a>
<div class="fb-like" data-href="https://app.peterrcook/d3-tree" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
</footer>
<script src="js/d3.v3.min.js"></script>
<script src="js/main.js"></script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=220656758000337";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>