-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (103 loc) · 4.43 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Dynamic Programming Visualization</title>
<!-- google analytics -->
<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-67473353-1', 'auto');
ga('send', 'pageview');
</script>
<!-- react -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bootstraap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="./deps/octicons/octicons.css" />
<!-- ace -->
<script src="./deps/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<!-- d3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<!-- custom data -->
<script src="./data.js" type="text/javascript" charset="utf-8"></script>
<!-- analyzer -->
<script src="./analyzer.js" type="text/javascript" charset="utf-8"></script>
<!-- animator -->
<script src="./animator.js" type="text/javascript" charset="utf-8"></script>
<!-- interpreter -->
<script src="./deps/interpreter/interpreter.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#editor-wrap {
}
#editor {
height: 300px;
width: 100%;
font-size: 14px;
}
rect {
stroke: #fff;
stroke-width: 1px;
}
.rect-boundry {
stroke: rgb(210, 210, 210);
}
.rect-boundry-example {
stroke-width: 3px;
}
.rect-selected {
opacity: 0.3;
stroke-width: 1px;
}
.rect-first {
fill: rgb(255, 255, 160);
}
.rect-last {
fill: rgb(95, 255, 0);
}
body {
font-size: 16px;
}
#container
{
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container" class="container">
<div>
<a href="https://github.com/easyhard/dpv/tree/gh-pages"><h2>DP Visualizer</h2> </a>
<div style="padding-left: 4px;">
<div id="content"></div>
<div id="editor-wrap"> </div>
<div id="presenter"></div>
<div id="test"> </div>
</div>
<div>
</div>
<script type="text/jsx" src="components.jsx"> </script>
<script type="text/jsx" src="presenter.jsx"> </script>
<script type="text/jsx" src="editor.jsx"> </script>
<div>
<h2>What's it?</h2>
<p>This is a visualizer designed for showing dynamic programming solution.</p>
<p>To visualize your solution, you need to implment it in JavaScript, and declare the memoizating function by `memofunction`, rather than `function`, as in the examples. Note that the memoization of `memofunction` is done automatically. After that, you can animate your solution with our animators! If you feel your DP solution is wonderful in animation and want to share, please create an issue or PR in <a href="https://github.com/easyhard/dpv/tree/gh-pages">its repo</a>. Thanks a lot!</p>
<p>Animator will be automatically updated after you modify your code. So feel free to modify the examples and see what happen! Have fun.</p>
<p>For underlying details, a more detailed introduction, source code, or feedbacks, please refer to <b><a href="https://github.com/easyhard/dpv/tree/gh-pages">its github repo</a></b></p>
<p>This is an ongoing projects. So there are bugs and limitations. Feel free to complain(>_<) or check them out on the ReadMe in Github. Have Fun! </p>
</div>
<div style="text-align:center; padding-top: 30px;font-size: 16px;">
<a href="https://github.com/easyhard/dpv/tree/gh-pages">Check the code out in Github <span class="mega-octicon octicon-mark-github"></span></a>
<p>
Powered by React.js, d3.js and JS-Interpreter by Nail Fraser.
</p>
</div>
</body>
</html>