-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
63 lines (63 loc) · 3.32 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
61
62
63
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Small genealogical tree of the Skywalker family</title>
<meta name="author" content="Lucas Cimon [ chezsoi.org/lucas ]"/>
<link rel="stylesheet" href="bundle-skywalker.css">
</head>
<body ng-app="BirthdayCalendar">
<script type="text/javascript" src="bundle-skywalker.js"></script>
<h3 style="text-align:center">Skywalker family</h3>
<a href="https://github.com/Lucas-C/genealogic-d3">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<div>
packing_generation_factor: <input id="packing_generation_factor" type="number" step="any" min="3.1" value="5" style="width:3em">
<br>
use_fixed_miniature: <input id="use_fixed_miniature" type="checkbox">
miniature_photo_size: <input id="miniature_photo_size" type="number" value="300" disabled="disabled" style="width:4em">
<br>
d3_color_scale: <select id="d3_color_scale">
<option value="category10">category10</option>
<option value="category20" selected="selected">category20</option>
<option value="category20b">category20b</option>
<option value="category20c">category20c</option>
</select>
<br>
<input type="submit" value="Generate" onclick="redisplay();">
</div>
<svg width="800" height="800" id="genealogic-tree"/>
<svg id="genealogic-miniature"/>
<div ng-if="options && events" class="calendarContainer">
<flex-calendar options="options" events="events"></flex-calendar>
</div>
<script type="text/javascript">
birthday_calendar('skywalker_genealogy.json');
document.getElementById('use_fixed_miniature').onchange = function () {
document.getElementById('miniature_photo_size').disabled = (this.checked ? '' : 'disabled');
}
var cycle_remover = function (key, value) { if (key === 'parent') return '<[parent]>'; return value; };
var redisplay = function () {
genealogic_d3.remove();
genealogic_d3.generate({
json_genealogy: 'skywalker_genealogy.json',
path_to_miniature_imgs: 'miniatures_skywalker/',
packing_generation_factor: +document.getElementById('packing_generation_factor').value,
use_fixed_miniature: document.getElementById('use_fixed_miniature').checked,
miniature_photo_size: +document.getElementById('miniature_photo_size').value,
d3_color_scale: document.getElementById('d3_color_scale').value,
post_rendering_callback: function () {
d3.selectAll('svg#genealogic-tree circle').on('click', function () {
console.log(this);
var pretty_node_json = JSON.stringify(this.__data__, cycle_remover, '\t');
document.getElementById('node-json').innerHTML = pretty_node_json;
});
}
});
}
redisplay();
</script>
<pre role="log" id="node-json" style="position: fixed; top: 60%; width: 25%; right: 10%;"></pre>
</body>
</html>