-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·156 lines (153 loc) · 12.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
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Function visualizer</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js" defer></script>
</head>
<body>
<div class="grid grid-gap">
<div class="width-xs-12 width-lg-6 full-height border bg-highlight">
<div class="padding-2">
<h2>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
Function visualizer
</h2>
<form class="margin-bottom-3">
<p>
<label for="f" class="ff-serif"><var>f:</var></label>
<input class="code" id="f" type="text" value="(x^n)a + (xb) + (c)" placeholder="" readonly="true" style="border:none;background-color:transparent;">
</p>
<p>
<label for="n" class="ff-serif"><var>n:</var></label>
<input id="n" class="code" type="number" value="2" min="1">
</p>
<p>
<label for="a" class="ff-serif"><var>a:</var></label>
<input id="a" class="code" type="number" value="1">
</p>
<p>
<label for="b" class="ff-serif"><var>b:</var></label>
<input id="b" class="code" type="number" value="0">
</p>
<p>
<label for="c" class="ff-serif"><var>c:</var></label>
<input id="c" class="code" type="number" value="0">
</p>
<button type="button" id="update"><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="arcs"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg> Update</button>
<button type="button" id="reset" class="button-default"><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg> Reset</button>
</form>
<h3>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8l-6-6z"/><path d="M14 3v5h5M16 13H8M16 17H8M10 9H8"/></svg>
Composition
</h3>
<aside class="">
<table>
<tbody>
<thead>
<th>Monomial</th>
<th>Effect</th>
<th>Output</th>
</thead>
<tr>
<td><code>(x^n)a</code></td>
<td><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M20.2 7.8l-7.7 7.7-4-4-5.7 5.7"/><path d="M15 7h6v6"/></svg> Shape</td>
<td>Linear | Parabolic | S</td>
</tr>
<tr>
<td><code>(xb)</code></td>
<td><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M16 3h5v5M4 20L20.2 3.8M21 16v5h-5M15 15l5.1 5.1M4 4l5 5"/></svg> Slope</td>
<td>Left | Right | None</td>
</tr>
<tr>
<td><code>(c)</code></td>
<td><svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M9 10l6-6 6 6"/><path d="M4 20h7a4 4 0 0 0 4-4V5"/></svg> Elevation</td>
<td>Up | Down | None</td>
</tr>
</tbody>
</table>
</aside>
</div><!-- /.section -->
</div><!-- /grid-item -->
<div class="width-xs-12 width-lg-6 full-height">
<div class="padding-2">
<h2>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="arcs"><path d="M3 3v18h18"/><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/></svg>
Output
</h2>
<svg id="chart" class="border" width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<g id="grid">
<!-- x -->
<line x1="0" y1="1" x2="10" y2="1" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="2" x2="10" y2="2" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="3" x2="10" y2="3" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="4" x2="10" y2="4" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="5" x2="10" y2="5" stroke-width="0.04" stroke="gray"/>
<line x1="0" y1="6" x2="10" y2="6" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="7" x2="10" y2="7" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="8" x2="10" y2="8" stroke-width="0.02" stroke="gray"/>
<line x1="0" y1="9" x2="10" y2="9" stroke-width="0.02" stroke="gray"/>
<!-- y -->
<line x1="1" y1="0" x2="1" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="2" y1="0" x2="2" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="3" y1="0" x2="3" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="4" y1="0" x2="4" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="5" y1="0" x2="5" y2="10" stroke-width="0.04" stroke="gray"/>
<line x1="6" y1="0" x2="6" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="7" y1="0" x2="7" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="8" y1="0" x2="8" y2="10" stroke-width="0.02" stroke="gray"/>
<line x1="9" y1="0" x2="9" y2="10" stroke-width="0.02" stroke="gray"/>
</g>
<g id="labels" transform="translate(0 0)">
<!-- x -->
<text x="1" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-4</text>
<text x="2" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-3</text>
<text x="3" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-2</text>
<text x="4" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-1</text>
<text x="5" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">0</text>
<text x="6" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">1</text>
<text x="7" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">2</text>
<text x="8" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">3</text>
<text x="9" y="5.25" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">4</text>
<!-- y -->
<text x="4.75" y="1" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">4</text>
<text x="4.75" y="2" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">3</text>
<text x="4.75" y="3" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">2</text>
<text x="4.75" y="4" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">1</text>
<text x="4.75" y="5" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">0</text>
<text x="4.75" y="6" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-1</text>
<text x="4.75" y="7" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-2</text>
<text x="4.75" y="8" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-3</text>
<text x="4.75" y="9" fill="black" font-size="0.3" font-family="Menlo,Monaco,monospace" text-anchor="middle" dominant-baseline="middle">-4</text>
</g>
<polyline id="line" points="0,10 1,9 2,8 3,7 4,6 5,5 6,4 7,3 8,2 9,1 10,0" fill="none" stroke="black" stroke-width="0.02" stroke-dasharray="0.1,0.1"/>
<g id="dots">
<circle data-x="-5" data-y="" fill="var(--color-primary, dodgerblue)" cx="0" cy="0" r="0.1"/>
<circle data-x="-4.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="0.5" cy="0" r="0.1"/>
<circle data-x="-4" data-y="" fill="var(--color-primary, dodgerblue)" cx="1" cy="0" r="0.1"/>
<circle data-x="-3.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="1.5" cy="0" r="0.1"/>
<circle data-x="-3" data-y="" fill="var(--color-primary, dodgerblue)" cx="2" cy="0" r="0.1"/>
<circle data-x="-2.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="2.5" cy="0" r="0.1"/>
<circle data-x="-2" data-y="" fill="var(--color-primary, dodgerblue)" cx="3" cy="0" r="0.1"/>
<circle data-x="-1.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="3.5" cy="0" r="0.1"/>
<circle data-x="-1" data-y="" fill="var(--color-primary, dodgerblue)" cx="4" cy="0" r="0.1"/>
<circle data-x="-0.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="4.5" cy="0" r="0.1"/>
<circle data-x="0" data-y="" fill="var(--color-primary, dodgerblue)" cx="5" cy="0" r="0.1"/>
<circle data-x="0.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="5.5" cy="0" r="0.1"/>
<circle data-x="1" data-y="" fill="var(--color-primary, dodgerblue)" cx="6" cy="0" r="0.1"/>
<circle data-x="1.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="6.5" cy="0" r="0.1"/>
<circle data-x="2" data-y="" fill="var(--color-primary, dodgerblue)" cx="7" cy="0" r="0.1"/>
<circle data-x="2.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="7.5" cy="0" r="0.1"/>
<circle data-x="3" data-y="" fill="var(--color-primary, dodgerblue)" cx="8" cy="0" r="0.1"/>
<circle data-x="3.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="8.5" cy="0" r="0.1"/>
<circle data-x="4" data-y="" fill="var(--color-primary, dodgerblue)" cx="9" cy="0" r="0.1"/>
<circle data-x="4.5" data-y="" fill="var(--color-primary, dodgerblue)" cx="9.5" cy="0" r="0.1"/>
<circle data-x="5" data-y="" fill="var(--color-primary, dodgerblue)" cx="10" cy="0" r="0.1"/>
</g>
</svg>
</div><!-- /.section -->
</div><!-- /grid-item -->
</div><!-- /.grid -->
</body>
</html>