-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
179 lines (169 loc) · 9.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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Charts Component</title>
<meta name="description" content="Make 3D Charts with this component based on A-Frame.">
<link rel="stylesheet" href="examples/lib/highlight/dracula.css">
<script src="examples/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<style>
html {
background: #33425B;
color: #FAFAFA;
font-family: monospace;
font-size: 20px;
padding: 10px 20px;
}
h1 {
font-weight: 300;
}
a {
color: #FAFAFA;
display: block;
padding: 15px 0;
}
ul {
display: flex;
list-style: none;
flex-wrap: wrap;
padding: 5px 0 0;
}
ul li {
margin-right: 30px;
padding: 5px 0 30px;
}
ul a {
background-size: cover;
display: block;
padding: 0;
}
.portrait{
height: 320px;
width: 400px;
}
.landscape{
height: 320px;
width: 700px;
}
li {
width: 48%;
font-size: 15px;
}
.link{
height: auto;
}
.underlineTitle{
text-decoration: underline;
}
pre{
white-space: pre-wrap;
display: inline-block;
}
</style>
</head>
<body>
<h1>A-Frame Charts Component</h1>
<h4><a class="link" href="examples/api/">Check the API</a></h4>
<h3 class="underlineTitle">Current visualizations</h3>
<ul>
<li style="margin-bottom: 100px;">
<a class="portrait" href="examples/bubbleChart/" style="background-image: url(img/bubble.gif)"></a>
<h3>Bubble Chart</h3>
<p>This is the bubble chart example.</p>
<p>We only need this piece of html code in order to run it</p>
<pre><code class="html"><a-entity charts="type: bubble; dataPoints: ../data/dataPositive.json"></a-entity></code></pre>
<a class="link" href="examples/bubbleChart/code.html">Full detailed Code</a>
</li>
<li>
<a class="portrait" href="examples/barChart/" style="background-image: url(img/bar.gif)"></a>
<h3>Bar Chart</h3>
<p>This is the bar chart example.</p>
<p>We only need this piece of html code in order to run it</p>
<pre><code class="html"><a-entity charts="type: bar; dataPoints: ../data/data.json; axis_length: 12"></a-entity></code></pre>
<a class="link" href="examples/barChart/code.html">Full detailed Code</a>
</li>
<li style="margin-bottom: 100px;">
<a class="portrait" href="examples/cylinderChart/" style="background-image: url(img/cylinder.gif)"></a>
<h3>Cylinder Chart</h3>
<p>This is the cylinder chart example.</p>
<p>We only need this piece of html code in order to run it</p>
<pre><code class="html"><a-entity charts="type: bubble; dataPoints: ../data/data.json; axis_negative: false"></a-entity></code></pre>
<a class="link" href="examples/cylinderChart/code.html">Full detailed Code</a>
</li>
<li>
<a class="portrait" href="examples/pieChart/" style="background-image: url(img/pie.gif)"></a>
<h3>Pie Chart</h3>
<p>This is the pie chart example.</p>
<p>We only need this piece of html code in order to run it</p>
<pre><code class="html"><a-entity charts="type: pie; dataPoints: ../data/dataPie.json; pie_radius: 3"></a-entity></code></pre>
<a class="link" href="examples/pieChart/code.html">Full detailed Code</a>
</li>
<li style="margin-bottom: 100px;">
<a class="portrait" href="examples/pieDoughnutChart/" style="background-image: url(img/doughnut.gif)"></a>
<h3>Doughnut Chart</h3>
<p>This is the doughnut chart example.</p>
<p>We only need this piece of html code in order to run it</p>
<pre><code class="html"><a-entity charts="type: pie; dataPoints: ../data/dataPie.json; pie_radius: 3; pie_doughnut: true">
</a-entity></code></pre>
<a class="link" href="examples/pieDoughnutChart/code.html">Full detailed Code</a>
</li>
<li>
<a class="landscape" href="examples/totem/" style="background-image: url(img/totem.gif)"></a>
<h3>Totem</h3>
<p>This is the totem example.</p>
<p>We can use it in order to change data dynamically</p>
<pre><code class="html"><a-entity position="1 15 10" charts='type: totem; entity_id_list: barId;
dataPoints_list: {"dataPositive.json": "../data/dataPositive.json", "data.json": "../data/data.json", "dataSmall.json": "../data/dataSmall.json"}'>
</a-entity></code></pre>
<a class="link" href="examples/totem/code.html">Full detailed Code</a>
</li>
</ul>
<h3 class="underlineTitle">Several Chart options</h3>
<ul>
<li>
<a class="landscape" href="examples/tonsOfData/" style="background-image: url(img/tons_of_data.png)"></a>
<h3>Support Tons of data</h3>
<p>We have optimized our library in order to support tons of Data. Click the image to see the example</p>
</li>
<li style="margin-bottom: 100px;">
<a class="landscape" href="examples/axis/" style="background-image: url(img/axis_options.png)"></a>
<h3>Multiple Axis options</h3>
<p>We have developed several axis options. Click below in the API link in order to see all the options or in the image to see a visual example</p>
<div>
<a class="link" href="examples/api/">API</a>
<br>
<a class="link" href="examples/axis/code.html">Full detailed Code</a>
</div>
</li>
<li>
<a class="landscape" href="examples/museum/" style="background-image: url(img/museum.png)"></a>
<h3>Dynamic Museum</h3>
<p>This is the museum of the library.</p>
<p>We could see all the charts changing data dynamically</p>
<p>Adapted for VR devices such as Oculus, etc</p>
<a class="link" href="examples/museum/code.html">Example Code</a>
</li>
<li>
<a class="portrait" href="examples/popup/" style="background-image: url(img/popUp.gif)"></a>
<h3>Pop up Data</h3>
<p>In this example we are able to see the data with a pop up</p>
<a class="link" href="examples/popup/code.html">Example code</a>
</li>
<li>
<a class="portrait" href="examples/legend/" style="background-image: url(img/legend.gif)"></a>
<h3>Chart with legend</h3>
<p>In this example we are able to see the data with a legend</p>
<a class="link" href="examples/legend/code.html">Example code</a>
</li>
</ul>
<!-- GitHub Corner. -->
<a href="https://github.com/adrixp/aframe-charts-component" class="github-corner">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
</style>
</body>
</html>