├── API
    ├── api.py
    ├── data.json
    └── requirements.txt
├── README.md
└── Vealize
    ├── barchart.html
    ├── barchartmain.html
    ├── blob.svg
    ├── code.html
    ├── css
        ├── barchartmain.css
        ├── code.css
        ├── github.css
        ├── maths.css
        ├── own.css
        ├── pendulum.css
        └── styles.css
    ├── github.html
    ├── img
        ├── 20945496.jpg
        ├── 761.jpg
        ├── bg.jpg
        ├── bg.png
        ├── bg2.png
        ├── bg3.jpg
        ├── bg3.png
        ├── bg4.jpg
        ├── bg4.png
        ├── bg5.png
        ├── logo.png
        ├── page1.png
        ├── pagebar.png
        ├── pagecode.png
        ├── pagegit.png
        ├── pagemath.png
        ├── pageown.png
        └── pagepen.png
    ├── index.html
    ├── maths.html
    ├── own.html
    ├── pendulum.html
    └── wave.svg


/API/api.py:
--------------------------------------------------------------------------------
  1 | from flask import Flask
  2 | import requests
  3 | from flask import request, jsonify
  4 | from flask_cors import CORS
  5 | import dateutil.parser
  6 | import wolframalpha
  7 | import urllib.parse
  8 | import json
  9 | # import waitress
 10 | 
 11 | client = wolframalpha.Client('appID')
 12 | 
 13 | app = Flask(__name__)
 14 | CORS(app)
 15 | 
 16 | token = "token"
 17 | 
 18 | headers = {"Accept": "application/vnd.github.v3+json",
 19 |             "Authorization": f"token {token}"}
 20 | BASE_URL = "https://api.github.com"
 21 | 
 22 | iframes = {}
 23 | iframes['python'] = 'http://pythontutor.com/iframe-embed.html#code={}&codeDivHeight=400&codeDivWidth=350&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=3&rawInputLstJSON=%5B%5D&textReferences=false'
 24 | 
 25 | iframes['javascript'] = 'http://pythontutor.com/iframe-embed.html#code={}&codeDivHeight=400&codeDivWidth=350&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=js&rawInputLstJSON=%5B%5D&textReferences=false'
 26 | 
 27 | iframes['c'] = 'http://pythontutor.com/iframe-embed.html#code={}&codeDivHeight=400&codeDivWidth=350&cumulative=false&curInstr=1&heapPrimitives=nevernest&origin=opt-frontend.js&py=c_gcc9.3.0&rawInputLstJSON=%5B%5D&textReferences=false'
 28 | 
 29 | iframes['c++'] = 'http://pythontutor.com/iframe-embed.html#code={}&codeDivHeight=400&codeDivWidth=350&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=cpp_g%2B%2B9.3.0&rawInputLstJSON=%5B%5D&textReferences=false'
 30 | 
 31 | 
 32 | @app.route("/github/<username>/<repo>")
 33 | def github(username, repo):
 34 |     r = requests.get(BASE_URL + f"/repos/{username}/{repo}", headers=headers).json()
 35 |     if r.get('private') or r.get("message") == "Not Found":
 36 |         return jsonify({"success": False, "error": r})
 37 |     data = {}
 38 |     data['archived'] = r['archived']
 39 |     brances_data = requests.get(r['branches_url'].replace("{/branch}", ""), headers=headers).json()
 40 |     data['branchesCount'] = len(brances_data)
 41 |     commits_data = requests.get(r['commits_url'].replace("{/sha}", ""), headers=headers).json()
 42 |     data['commitsCount'] = len(commits_data)
 43 |     contributors_data = requests.get(r['contributors_url'], headers=headers).json()
 44 |     data['contributors'] = {}
 45 |     for i in contributors_data:
 46 |         data['contributors'][i['login']] = i['contributions']
 47 |     data['contributorsCount'] = len(contributors_data)
 48 |     data['createdAt'] = r['created_at'].replace("T", " ")[:-4]
 49 |     data['defaultBranch'] = r['default_branch']
 50 |     data['description'] = r['description'] or "No Description Provided"
 51 |     data['isForked'] = r['fork']
 52 |     data['forksCount'] = r['forks_count']
 53 |     # forks_data = requests.get(r['forks_url'], headers=headers).json()
 54 |     # data['forks'] = {}
 55 |     # for i in forks_data:
 56 |     #   date = i['created_at'][:10]
 57 |     #   if date in data['forks']:
 58 |     #       data['forks'][date] += 1
 59 |     #   else:
 60 |     #       data['forks'][date] = 1
 61 |     issues_data = requests.get(r['issue_events_url'].replace("{/number}", ""), headers=headers).json()
 62 |     data['issuesCount'] = len(issues_data)
 63 |     # data['issues'] = {"closed": 0, "opened": 0}
 64 |     # for i in issues_data:
 65 |     #   if i['issue']['state'] == 'closed':
 66 |     #       data['issues']['closed'] += 1
 67 |     #   else:
 68 |     #       data['issues']['opened'] += 1
 69 |     # for i in issues_data:
 70 |     #   date = i['created_at'][:10]
 71 |     #   if date in data['issues']:
 72 |     #       data['issues'][date] += 1
 73 |     #   else:
 74 |     #       data['issues'][date] = 1
 75 |     # data['languages'] = {}
 76 |     # languages_data = requests.get(r['languages_url'], headers=headers).json()
 77 |     # total = sum(list(languages_data.values()))
 78 |     # for i in languages_data:
 79 |     #   data['languages'][i] = str(round(languages_data[i]*100/total, 2)) + "%"
 80 |     data['name'] = r['name']
 81 |     data['owner'] = {}
 82 |     data['owner']['name'] = r['owner']['login']
 83 |     data['owner']['avatarUrl'] = r['owner']['avatar_url']
 84 |     data['private'] = r['private']
 85 |     data['stargazers'] = r['stargazers_count']
 86 |     data['url'] = r['url']
 87 |     data['success'] = True
 88 |     return jsonify(data)
 89 | 
 90 | @app.route("/githubGraph/<username>/<repo>")
 91 | def github_graph(username, repo):
 92 |     r = requests.get(BASE_URL + f"/repos/{username}/{repo}", headers=headers).json()
 93 |     if r.get('private') or r.get("message") == "Not Found":
 94 |         return jsonify({"success": False, "error": r})
 95 |     data = {}
 96 |     forks_data = requests.get(r['forks_url'], headers=headers).json()
 97 |     data['forks'] = {}
 98 |     for i in forks_data:
 99 |         date = i['created_at'][:10]
100 |         if date in data['forks']:
101 |             data['forks'][date] += 1
102 |         else:
103 |             data['forks'][date] = 1
104 |     data['issues'] = {}
105 |     issues_data = requests.get(r['issue_events_url'].replace("{/number}", ""), headers=headers).json()
106 |     for i in issues_data:
107 |         date = i['created_at'][:10]
108 |         if date in data['issues']:
109 |             data['issues'][date] += 1
110 |         else:
111 |             data['issues'][date] = 1
112 |     data['languages'] = {}
113 |     languages_data = requests.get(r['languages_url'], headers=headers).json()
114 |     total = sum(list(languages_data.values()))
115 |     for i in languages_data:
116 |         data['languages'][i] = str(round(languages_data[i]*100/total, 2))
117 |     return jsonify(data)
118 | 
119 | @app.route("/calc/<eq>")
120 | def math(eq):
121 |     res = client.query(eq.strip(), params=(("format", "image,plaintext"),))
122 |     data = {}
123 |     for p in res.pods:
124 |         for s in p.subpods:
125 |             if s.img.alt.lower() == "root plot":
126 |                 data['rootPlot'] = s.img.src
127 |             elif s.img.alt.lower() == "number line":
128 |                 data['numberLine'] = s.img.src
129 |     data['results'] = [i.texts for i in list(res.results)][0]
130 |     return jsonify(data)
131 | 
132 | @app.route("/code/<lang>", methods=["POST", "GET"])
133 | def viz_code(lang):
134 |     code = request.form['code']
135 |     if lang not in list(iframes.keys()):
136 |         return jsonify({"Error": "Not Supported"})
137 |     # print(code)
138 |     code = code.replace("<br>", "\n")
139 |     code = urllib.parse.quote_plus(code)
140 |     # print(code)
141 |     # print(iframes[lang].format(code))
142 |     # return jsonify({"link": "http://pythontutor.com/iframe-embed.html#code=def%20hi():%20%20%20%20print('hi')hi()&codeDivHeight=400&codeDivWidth=350&cumulative=false&curInstr=0&heapPrimitives=nevernest&origin=opt-frontend.js&py=3&rawInputLstJSON=%255B%255D&textReferences=false"})
143 |     return jsonify({"link": iframes[lang].format(code)})
144 | 
145 | @app.route("/contact", methods=["GET", "POST"])
146 | def contact():
147 |     name, email, msg = request.form.get("name", "No Name Provided")[:50], request.form.get("email", "No Email Provided")[:70], request.form.get("msg", "No Message Provided")[:200]
148 |     with open("data.json") as f:
149 |         data = json.load(f)
150 |     data[email] = {}
151 |     data[email]['name'] = name
152 |     data[email]['msg'] = msg
153 |     with open("data.json", "w") as f:
154 |         json.dump(data, f, indent=4)
155 |     return jsonify({})
156 | 
157 | @app.route("/getData", methods=["POST", "GET"])
158 | def get_data():
159 |     tok = request.form.get("token", None)
160 |     if not tok:
161 |         return jsonify({})
162 |     if tok == 'secret':
163 |         with open("data.json") as f:
164 |             data = json.load(f)
165 |         return jsonify(data)
166 |     else:
167 |         return jsonify({})
168 | app.run(debug=True)
169 | 
170 | # waitress.serve(app, host = "0.0.0.0", port = 1351)
171 | 


--------------------------------------------------------------------------------
/API/data.json:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/API/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask
2 | flask-cors
3 | requests
4 | wolframalpha
5 | python-dateutil
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # [Vealize](https://vealize.my.to/)
 2 | ## Visualize Everything at one place
 3 | Website Link: https://vealize.my.to
 4 | 
 5 | **[Vote for me](https://twtcodejam.net/timathon/vote/578/)** <br />
 6 | Vealize is a website which provides free tools that can help user visualize different and unique things starting from a <b>Double Pendulum</b> to <b>Math Equations</b>.
 7 | 
 8 | This is <b>Just for fun#4278's</b> submission for Timathon 2021 (Mar - Apr)
 9 | 
10 | ## Features
11 | 1. [Double Pendulum ⛓️ Visualizer](#double-pendulum)
12 | 2. [Github Repository Visualizer](#github-repository)
13 | 3. [Own Data Visualizer](#own-data)
14 | 4. [Math Equation Visualizer](#math-equations)
15 | 5. [Code Execution Visualizer](#code-execution)
16 | 6. [GDP Growth Visualizer](#gdp-growth)
17 | 
18 | ## [Double Pendulum](https://vealize.my.to/pendulum.html)
19 | Visualize Double Pendulum in an unique and chaotic way.<br />
20 | With controls like Add New Pendulum, Play Pause this is the perfect combination!<br />
21 | 
22 | ### How to Visualize?
23 | 1. Open `Double Pendulum` by clicking `Take me there`.
24 | 2. On the new page, click `Get Started`.
25 | 3. You will be able to see the visualization of double pendulum with controls written besides it!.
26 | 
27 | 	![Image](https://media.giphy.com/media/1FTQ9omdPCZNh4yiQr/giphy.gif)
28 | 
29 | 
30 | ## [Github Repository](https://vealize.my.to/github.html)
31 | Ever wondered how you can visualize a Github Repository?<br />
32 | Visualize any public Github Repository using our tool and see graphical visualization of Forks, Issues, Languages along with other data!<br />
33 | 
34 | ### How to Visualize?
35 |  1. Open `GitViz` by clicking `Take me there`.
36 | 2. On the new page, click `Get Started`.
37 | 3. Enter details as required and the data will be loaded soon!
38 | 
39 | 	![Image](https://media.giphy.com/media/QqSEae9xm1BnXwZbUx/giphy.gif)
40 | 
41 | ## [Own Data](https://vealize.my.to/own.html)
42 | Stuck on how to visualize your own data? 🤔<br />
43 | Use Vealize's free to use own data visualizer that visualizes your given data in 4 different graphical representations!.<br />
44 | 
45 | ### How to Visualize?
46 |  1. Open `OwnViz` by clicking `Take me there`.
47 | 2. On the new page, click `Get Started`.
48 | 3. Enter details as required and the graphs and charts will be loaded soon!
49 | 
50 | 	![Image](https://media.giphy.com/media/4ln9qonbZsVe1cJ8H8/giphy.gif)
51 | 
52 | ## [Math Equations](https://vealize.my.to/maths.html)
53 | Wonder how you can visualize math equations at a click? <br />
54 | Vealize provides a free-to-use math equation solver and visualizer with features like Root Plot and Number Line!<br />
55 | 
56 | ### How to Visualize?
57 |  1. Open `MathViz` by clicking `Take me there`.
58 | 2. On the new page, click `Get Started`.
59 | 3. Enter the complex equation and click `Submit`
60 | 4. Results with solutions and root plot with number line will be loaded instantly!
61 | 
62 | 	![Image](https://media.giphy.com/media/lZqZpGK8WLeV5dRqgZ/giphy.gif)
63 | 
64 | 
65 | ## [Code Execution](https://vealize.my.to/code.html)
66 | Found an insanly hard to read code and stuck what it does?<br />
67 | Use Vealize's Code Execution Visualizer which will help you visualize your code step-by-step in 4 different languages!<br />
68 | 
69 | ### How to Visualize?
70 |  1. Open `ExecViz` by clicking `Take me there`.
71 | 2. On the new page, click `Get Started`.
72 | 3. Select your language
73 | 4. Type the code and click `Submit`
74 | 5. Results will be loaded below!
75 | 
76 | 	![Image](https://media.giphy.com/media/6BsQigDSvsUP9PwNfK/giphy.gif)
77 | 
78 | ## [GDP Growth](https://vealize.my.to/barchartmain.html)
79 | 
80 | Wanted to know which country took over which in terms of GDP with the help of graphical visualization?<br />
81 | Use Vealize's GDP Growth Bar Chart Race as a helper!<br />
82 | 
83 | ### How to Visualize?
84 |  1. Open `GDP Growth` by clicking `Take me there`.
85 | 2. On the new page, click `Get Started`.
86 | 3. Click the play button to start the bar chart race.
87 | 
88 | 	![Image](https://media.giphy.com/media/bfeQ8VzuN0IwAFI39a/giphy.gif)
89 | 
90 | 
91 | ## End
92 | **[Vote for me](https://twtcodejam.net/timathon/vote/578/)** <br />
93 | That comes to an end to my website and its features.<br />
94 | If you liked my efforts and this website along with its features, kindly vote me! <br />
95 | 
96 | **[Vote for me](https://twtcodejam.net/timathon/vote/578/)** <br />
97 | 


--------------------------------------------------------------------------------
/Vealize/barchart.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/barchartmain.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
  9 | 	<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
 10 | 	<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
 11 | 	<meta property="og:type" content="website">
 12 |     <meta property="og:url" content="https://vealize.my.to/barchartmain.html">
 13 |     <meta property="og:title" content="Vealize | GDP Growth">
 14 |     <meta property="og:description" content="Visualize GDP Growth of several countries.">
 15 |     <meta property="og:image" content="img/pagebar.png">
 16 | 	<meta name="twitter:card" content="summary_large_image">
 17 | </head>
 18 | <body>
 19 | 	<header class="header">
 20 | 		<h1>Vealize</h1>
 21 | 		<ul>
 22 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 23 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 24 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 25 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 26 | 		</ul>
 27 | 	</header>
 28 | 	<div id="content" class="content">
 29 | 		<h1 id="homePageTitle">Vealize</h1>
 30 | 		<p>Visualize GDP Growth of Countries</p>
 31 | 		<p id="stuff">Visualize GDP Growth in a unique Bar Chart Race!</p>
 32 | 		<button onclick="location.href = '#main'">Get Started</button>
 33 | 	</div>
 34 | 	<div id="main" class="main">
 35 | 		<div class="mainTitle">
 36 | 			<h1>GDP Growth</h1>
 37 | 		</div>
 38 | 		<div id="chartdiv"></div>
 39 | 	</div>
 40 | 	<script type="text/javascript">
 41 | 	var cat = $('.header').offset().top;
 42 | 
 43 | 	$(window).scroll(function() {                  
 44 | 	var cs = $(window).scrollTop(); 
 45 | 	if (cs > cat) {           
 46 | 	    $('.header').css({                      
 47 | 	        position: 'fixed',
 48 | 	        top: '0',
 49 | 	        left: '0',
 50 | 	        width: '100%',
 51 | 	        background: 'white'
 52 | 	    });
 53 | 	    $('.header').css("padding-top", "5px");
 54 | 	    $('.header').css("color", "black");
 55 | 	    $('.header').css("border-bottom", "1px solid #696969");
 56 | 	    $('.h').css("color", "black");
 57 | 	    $('.h.active').css("color", "#ff0158");
 58 | 	} else {                                   
 59 | 	    $('.header').css({                     
 60 | 	        position: 'relative',
 61 | 	        width: 'auto'
 62 | 	    });
 63 | 	    $('.header').css('background', '#03030e')
 64 | 	    $('.header').css("padding-top", "30px");
 65 | 	    $('.header').css("color", "white");
 66 | 	    $('.header').css("border-bottom", "none");
 67 | 	    $('.h').css("color", "white");
 68 | 	    $('.h.active').css("color", "#ff0158");
 69 | 	}
 70 | })
 71 | 	</script>
 72 | </body>
 73 | <script type="text/javascript">
 74 | /**
 75 |  * ---------------------------------------
 76 |  * This demo was created using amCharts 4.
 77 |  * 
 78 |  * For more information visit:
 79 |  * https://www.amcharts.com/
 80 |  * 
 81 |  * Documentation is available at:
 82 |  * https://www.amcharts.com/docs/v4/
 83 |  * ---------------------------------------
 84 |  */
 85 | 
 86 | // Themes begin
 87 | am4core.useTheme(am4themes_animated);
 88 | // Themes end
 89 | 
 90 | var chart = am4core.create("chartdiv", am4charts.XYChart);
 91 | chart.padding(40, 40, 40, 40);
 92 | 
 93 | chart.numberFormatter.bigNumberPrefixes = [
 94 |   { "number": 1e+3, "suffix": "K" },
 95 |   { "number": 1e+6, "suffix": "M" },
 96 |   { "number": 1e+9, "suffix": "B" }
 97 | ];
 98 | 
 99 | var label = chart.plotContainer.createChild(am4core.Label);
100 | label.x = am4core.percent(97);
101 | label.y = am4core.percent(95);
102 | label.horizontalCenter = "right";
103 | label.verticalCenter = "middle";
104 | label.dx = -15;
105 | label.fontSize = 50;
106 | 
107 | var playButton = chart.plotContainer.createChild(am4core.PlayButton);
108 | playButton.x = am4core.percent(97);
109 | playButton.y = am4core.percent(95);
110 | playButton.dy = -2;
111 | playButton.verticalCenter = "middle";
112 | playButton.events.on("toggled", function(event) {
113 |   if (event.target.isActive) {
114 |     play();
115 |   }
116 |   else {
117 |     stop();
118 |   }
119 | })
120 | 
121 | var stepDuration = 4000;
122 | 
123 | var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
124 | categoryAxis.renderer.grid.template.location = 0;
125 | categoryAxis.dataFields.category = "network";
126 | categoryAxis.renderer.minGridDistance = 1;
127 | categoryAxis.renderer.inversed = true;
128 | categoryAxis.renderer.grid.template.disabled = true;
129 | 
130 | var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
131 | valueAxis.min = 0;
132 | valueAxis.rangeChangeEasing = am4core.ease.linear;
133 | valueAxis.rangeChangeDuration = stepDuration;
134 | valueAxis.extraMax = 0.1;
135 | 
136 | var series = chart.series.push(new am4charts.ColumnSeries());
137 | series.dataFields.categoryY = "network";
138 | series.dataFields.valueX = "MAU";
139 | series.tooltipText = "{valueX.value}"
140 | series.columns.template.strokeOpacity = 0;
141 | series.columns.template.column.cornerRadiusBottomRight = 5;
142 | series.columns.template.column.cornerRadiusTopRight = 5;
143 | series.interpolationDuration = stepDuration;
144 | series.interpolationEasing = am4core.ease.linear;
145 | 
146 | var labelBullet = series.bullets.push(new am4charts.LabelBullet())
147 | labelBullet.label.horizontalCenter = "right";
148 | labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.0as')}";
149 | labelBullet.label.textAlign = "end";
150 | labelBullet.label.dx = -10;
151 | 
152 | chart.zoomOutButton.disabled = false;
153 | 
154 | // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
155 | series.columns.template.adapter.add("fill", function(fill, target){
156 |   return chart.colors.getIndex(target.dataItem.index);
157 | });
158 | 
159 | var year = 1990;
160 | label.text = year.toString();
161 | 
162 | var interval;
163 | 
164 | function play() {
165 |   interval = setInterval(function(){
166 |     nextYear();
167 |   }, stepDuration)
168 |   nextYear();
169 | }
170 | 
171 | function stop() {
172 |   if (interval) {
173 |     clearInterval(interval);
174 |   }
175 | }
176 | 
177 | function nextYear() {
178 |   year++
179 | 
180 |   if (year > 2017) {
181 |     year = 1990;
182 |   }
183 | 
184 |   var newData = allData[year];
185 |   var itemsWithNonZero = 0;
186 |   for (var i = 0; i < chart.data.length; i++) {
187 |     chart.data[i].MAU = newData[i].MAU;
188 |     if (chart.data[i].MAU > 0) {
189 |       itemsWithNonZero++;
190 |     }
191 |   }
192 | 
193 |   if (year == 2017) {
194 |     series.interpolationDuration = stepDuration / 4;
195 |     valueAxis.rangeChangeDuration = stepDuration / 4;
196 |   }
197 |   else {
198 |     series.interpolationDuration = stepDuration;
199 |     valueAxis.rangeChangeDuration = stepDuration;
200 |   }
201 | 
202 |   chart.invalidateRawData();
203 |   label.text = year.toString();
204 | 
205 |   categoryAxis.zoom({ start: 0, end: itemsWithNonZero / categoryAxis.dataItems.length });
206 | }
207 | 
208 | 
209 | categoryAxis.sortBySeries = series;
210 | 
211 | var allData = {"2002": [{"network": "Australia", "MAU": 36553}, {"network": "Austria", "MAU": 39638}, {"network": "Bahamas", "MAU": 33505}, {"network": "Bahrain", "MAU": 43147}, {"network": "Belgium", "MAU": 37856}, {"network": "Bermuda", "MAU": 53096}, {"network": "Brunei", "MAU": 84125}, {"network": "Canada", "MAU": 38500}, {"network": "Denmark", "MAU": 42595}, {"network": "Euro area", "MAU": 34896}, {"network": "Finland", "MAU": 36218}, {"network": "France", "MAU": 35440}, {"network": "Germany", "MAU": 37262}, {"network": "High income", "MAU": 35675}, {"network": "Hong Kong", "MAU": 34366}, {"network": "Iceland", "MAU": 34794}, {"network": "Ireland", "MAU": 42289}, {"network": "Italy", "MAU": 37199}, {"network": "Japan", "MAU": 33888}, {"network": "Kuwait", "MAU": 69392}, {"network": "Luxembourg", "MAU": 85032}, {"network": "Macao", "MAU": 45126}, {"network": "Netherlands", "MAU": 42062}, {"network": "North America", "MAU": 45594}, {"network": "Norway", "MAU": 59482}, {"network": "OECD members", "MAU": 33339}, {"network": "Oman", "MAU": 44140}, {"network": "Post-demographic dividend", "MAU": 35434}, {"network": "Qatar", "MAU": 110654}, {"network": "San Marino", "MAU": 78148}, {"network": "Saudi Arabia", "MAU": 39194}, {"network": "Singapore", "MAU": 51478}, {"network": "Sweden", "MAU": 37980}, {"network": "Switzerland", "MAU": 50815}, {"network": "United Arab Emirates", "MAU": 95894}, {"network": "United Kingdom", "MAU": 34669}], "2003": [{"network": "Australia", "MAU": 37183}, {"network": "Austria", "MAU": 39816}, {"network": "Bahrain", "MAU": 43187}, {"network": "Belgium", "MAU": 37990}, {"network": "Bermuda", "MAU": 54549}, {"network": "Brunei", "MAU": 84970}, {"network": "Canada", "MAU": 38805}, {"network": "Denmark", "MAU": 42645}, {"network": "Euro area", "MAU": 34982}, {"network": "Finland", "MAU": 36852}, {"network": "France", "MAU": 35479}, {"network": "Germany", "MAU": 36977}, {"network": "High income", "MAU": 36306}, {"network": "Hong Kong", "MAU": 35486}, {"network": "Iceland", "MAU": 35369}, {"network": "Ireland", "MAU": 42903}, {"network": "Italy", "MAU": 37090}, {"network": "Japan", "MAU": 34333}, {"network": "Kuwait", "MAU": 80462}, {"network": "Luxembourg", "MAU": 85374}, {"network": "Macao", "MAU": 49153}, {"network": "Netherlands", "MAU": 41982}, {"network": "North America", "MAU": 46429}, {"network": "Norway", "MAU": 59678}, {"network": "OECD members", "MAU": 33790}, {"network": "Oman", "MAU": 42044}, {"network": "Post-demographic dividend", "MAU": 35983}, {"network": "Qatar", "MAU": 107615}, {"network": "San Marino", "MAU": 80118}, {"network": "Saudi Arabia", "MAU": 42344}, {"network": "Singapore", "MAU": 54560}, {"network": "Sweden", "MAU": 38742}, {"network": "Switzerland", "MAU": 50459}, {"network": "United Arab Emirates", "MAU": 97790}, {"network": "United Kingdom", "MAU": 35656}], "2004": [{"network": "Australia", "MAU": 38225}, {"network": "Austria", "MAU": 40652}, {"network": "Bahrain", "MAU": 43355}, {"network": "Belgium", "MAU": 39201}, {"network": "Bermuda", "MAU": 55452}, {"network": "Brunei", "MAU": 83942}, {"network": "Canada", "MAU": 39604}, {"network": "Denmark", "MAU": 43670}, {"network": "Euro area", "MAU": 35606}, {"network": "Finland", "MAU": 38188}, {"network": "France", "MAU": 36200}, {"network": "Germany", "MAU": 37418}, {"network": "High income", "MAU": 37352}, {"network": "Hong Kong", "MAU": 38274}, {"network": "Iceland", "MAU": 37890}, {"network": "Ireland", "MAU": 44940}, {"network": "Italy", "MAU": 37434}, {"network": "Japan", "MAU": 35078}, {"network": "Kuwait", "MAU": 87555}, {"network": "Luxembourg", "MAU": 87209}, {"network": "Macao", "MAU": 60810}, {"network": "Netherlands", "MAU": 42686}, {"network": "North America", "MAU": 47712}, {"network": "Norway", "MAU": 61675}, {"network": "OECD members", "MAU": 34672}, {"network": "Oman", "MAU": 41551}, {"network": "Post-demographic dividend", "MAU": 36958}, {"network": "Puerto Rico", "MAU": 36040}, {"network": "Qatar", "MAU": 116418}, {"network": "San Marino", "MAU": 82713}, {"network": "Saudi Arabia", "MAU": 44390}, {"network": "Singapore", "MAU": 59027}, {"network": "Sweden", "MAU": 40257}, {"network": "Switzerland", "MAU": 51505}, {"network": "United Arab Emirates", "MAU": 98076}, {"network": "United Kingdom", "MAU": 36292}], "2005": [{"network": "Australia", "MAU": 38928}, {"network": "Austria", "MAU": 41282}, {"network": "Bahrain", "MAU": 43201}, {"network": "Belgium", "MAU": 39802}, {"network": "Bermuda", "MAU": 56017}, {"network": "Brunei", "MAU": 82967}, {"network": "Canada", "MAU": 40471}, {"network": "Cyprus", "MAU": 33662}, {"network": "Denmark", "MAU": 44567}, {"network": "Euro area", "MAU": 36043}, {"network": "Finland", "MAU": 39115}, {"network": "France", "MAU": 36505}, {"network": "Germany", "MAU": 37703}, {"network": "High income", "MAU": 38205}, {"network": "Hong Kong", "MAU": 40922}, {"network": "Iceland", "MAU": 39679}, {"network": "Ireland", "MAU": 46613}, {"network": "Italy", "MAU": 37604}, {"network": "Japan", "MAU": 35658}, {"network": "Kuwait", "MAU": 93469}, {"network": "Luxembourg", "MAU": 88610}, {"network": "Macao", "MAU": 64199}, {"network": "Netherlands", "MAU": 43507}, {"network": "North America", "MAU": 48847}, {"network": "Norway", "MAU": 62864}, {"network": "OECD members", "MAU": 35407}, {"network": "Oman", "MAU": 41458}, {"network": "Post-demographic dividend", "MAU": 37770}, {"network": "Puerto Rico", "MAU": 35375}, {"network": "Qatar", "MAU": 109802}, {"network": "San Marino", "MAU": 83600}, {"network": "Saudi Arabia", "MAU": 45538}, {"network": "Singapore", "MAU": 61973}, {"network": "Sweden", "MAU": 41227}, {"network": "Switzerland", "MAU": 52770}, {"network": "United Arab Emirates", "MAU": 91798}, {"network": "United Kingdom", "MAU": 37159}], "2006": [{"network": "Australia", "MAU": 39445}, {"network": "Austria", "MAU": 42498}, {"network": "Bahrain", "MAU": 42673}, {"network": "Belgium", "MAU": 40532}, {"network": "Bermuda", "MAU": 58784}, {"network": "Brunei", "MAU": 85424}, {"network": "Canada", "MAU": 41203}, {"network": "Cyprus", "MAU": 34599}, {"network": "Denmark", "MAU": 46159}, {"network": "Euro area", "MAU": 37054}, {"network": "European Union", "MAU": 34026}, {"network": "Finland", "MAU": 40546}, {"network": "France", "MAU": 37113}, {"network": "Germany", "MAU": 39143}, {"network": "High income", "MAU": 39161}, {"network": "Hong Kong", "MAU": 43520}, {"network": "Iceland", "MAU": 40703}, {"network": "Ireland", "MAU": 47879}, {"network": "Italy", "MAU": 38243}, {"network": "Japan", "MAU": 36141}, {"network": "Kuwait", "MAU": 96244}, {"network": "Luxembourg", "MAU": 91724}, {"network": "Macao", "MAU": 71160}, {"network": "Netherlands", "MAU": 44965}, {"network": "North America", "MAU": 49676}, {"network": "Norway", "MAU": 63854}, {"network": "OECD members", "MAU": 36248}, {"network": "Oman", "MAU": 42472}, {"network": "Post-demographic dividend", "MAU": 38681}, {"network": "Puerto Rico", "MAU": 35024}, {"network": "Qatar", "MAU": 118585}, {"network": "San Marino", "MAU": 85726}, {"network": "Saudi Arabia", "MAU": 45527}, {"network": "Singapore", "MAU": 65386}, {"network": "Spain", "MAU": 33700}, {"network": "Sweden", "MAU": 42918}, {"network": "Switzerland", "MAU": 54531}, {"network": "United Arab Emirates", "MAU": 88086}, {"network": "United Kingdom", "MAU": 37793}], "2007": [{"network": "Australia", "MAU": 40680}, {"network": "Austria", "MAU": 43939}, {"network": "Bahrain", "MAU": 42755}, {"network": "Belgium", "MAU": 41623}, {"network": "Bermuda", "MAU": 60117}, {"network": "Brunei", "MAU": 84503}, {"network": "Canada", "MAU": 41647}, {"network": "Cyprus", "MAU": 35502}, {"network": "Denmark", "MAU": 46373}, {"network": "Equatorial Guinea", "MAU": 35570}, {"network": "Euro area", "MAU": 38009}, {"network": "Finland", "MAU": 42467}, {"network": "France", "MAU": 37755}, {"network": "Germany", "MAU": 40473}, {"network": "High income", "MAU": 39964}, {"network": "Hong Kong", "MAU": 45937}, {"network": "Iceland", "MAU": 43427}, {"network": "Ireland", "MAU": 48937}, {"network": "Italy", "MAU": 38612}, {"network": "Japan", "MAU": 36697}, {"network": "Kuwait", "MAU": 96870}, {"network": "Luxembourg", "MAU": 97864}, {"network": "Macao", "MAU": 79743}, {"network": "Netherlands", "MAU": 46527}, {"network": "North America", "MAU": 50091}, {"network": "Norway", "MAU": 65083}, {"network": "OECD members", "MAU": 36921}, {"network": "Oman", "MAU": 43034}, {"network": "Post-demographic dividend", "MAU": 39453}, {"network": "Qatar", "MAU": 118831}, {"network": "San Marino", "MAU": 90727}, {"network": "Saudi Arabia", "MAU": 45130}, {"network": "Singapore", "MAU": 68432}, {"network": "Sweden", "MAU": 44051}, {"network": "Switzerland", "MAU": 56269}, {"network": "United Arab Emirates", "MAU": 78830}, {"network": "United Kingdom", "MAU": 38384}], "2008": [{"network": "Australia", "MAU": 41331}, {"network": "Austria", "MAU": 44441}, {"network": "Bahrain", "MAU": 42218}, {"network": "Belgium", "MAU": 41619}, {"network": "Bermuda", "MAU": 60675}, {"network": "Brunei", "MAU": 81905}, {"network": "Canada", "MAU": 41611}, {"network": "Denmark", "MAU": 45865}, {"network": "Equatorial Guinea", "MAU": 40015}, {"network": "Euro area", "MAU": 37994}, {"network": "Finland", "MAU": 42574}, {"network": "France", "MAU": 37618}, {"network": "Germany", "MAU": 40989}, {"network": "High income", "MAU": 39873}, {"network": "Hong Kong", "MAU": 46635}, {"network": "Iceland", "MAU": 43334}, {"network": "Ireland", "MAU": 46062}, {"network": "Italy", "MAU": 37954}, {"network": "Japan", "MAU": 36278}, {"network": "Kuwait", "MAU": 93698}, {"network": "Luxembourg", "MAU": 94900}, {"network": "Macao", "MAU": 80762}, {"network": "Netherlands", "MAU": 47134}, {"network": "North America", "MAU": 49521}, {"network": "Norway", "MAU": 64586}, {"network": "OECD members", "MAU": 36738}, {"network": "Oman", "MAU": 44938}, {"network": "Post-demographic dividend", "MAU": 39307}, {"network": "Qatar", "MAU": 119723}, {"network": "San Marino", "MAU": 91087}, {"network": "Saudi Arabia", "MAU": 46678}, {"network": "Singapore", "MAU": 66046}, {"network": "Sweden", "MAU": 43466}, {"network": "Switzerland", "MAU": 56755}, {"network": "United Arab Emirates", "MAU": 71314}, {"network": "United Kingdom", "MAU": 37903}], "2009": [{"network": "Australia", "MAU": 41266}, {"network": "Austria", "MAU": 42656}, {"network": "Bahrain", "MAU": 40717}, {"network": "Belgium", "MAU": 40355}, {"network": "Bermuda", "MAU": 57151}, {"network": "Brunei", "MAU": 79512}, {"network": "Canada", "MAU": 39924}, {"network": "Denmark", "MAU": 43382}, {"network": "Equatorial Guinea", "MAU": 38738}, {"network": "Euro area", "MAU": 36135}, {"network": "Finland", "MAU": 38867}, {"network": "France", "MAU": 36324}, {"network": "Germany", "MAU": 38784}, {"network": "High income", "MAU": 38278}, {"network": "Hong Kong", "MAU": 45390}, {"network": "Iceland", "MAU": 40377}, {"network": "Ireland", "MAU": 43487}, {"network": "Kuwait", "MAU": 81922}, {"network": "Luxembourg", "MAU": 89098}, {"network": "Macao", "MAU": 80121}, {"network": "Netherlands", "MAU": 45125}, {"network": "North America", "MAU": 47706}, {"network": "Norway", "MAU": 62698}, {"network": "Oman", "MAU": 45635}, {"network": "Post-demographic dividend", "MAU": 37702}, {"network": "Qatar", "MAU": 117064}, {"network": "San Marino", "MAU": 78444}, {"network": "Saudi Arabia", "MAU": 44481}, {"network": "Singapore", "MAU": 63697}, {"network": "Sweden", "MAU": 40862}, {"network": "Switzerland", "MAU": 54805}, {"network": "United Arab Emirates", "MAU": 60769}, {"network": "United Kingdom", "MAU": 36042}], "2010": [{"network": "Australia", "MAU": 41464}, {"network": "Austria", "MAU": 43336}, {"network": "Bahrain", "MAU": 40570}, {"network": "Belgium", "MAU": 41085}, {"network": "Bermuda", "MAU": 56395}, {"network": "Brunei", "MAU": 80552}, {"network": "Canada", "MAU": 40699}, {"network": "Denmark", "MAU": 43998}, {"network": "Euro area", "MAU": 36786}, {"network": "Finland", "MAU": 39848}, {"network": "France", "MAU": 36855}, {"network": "Germany", "MAU": 40428}, {"network": "High income", "MAU": 39243}, {"network": "Hong Kong", "MAU": 48107}, {"network": "Iceland", "MAU": 38978}, {"network": "Ireland", "MAU": 44030}, {"network": "Kuwait", "MAU": 75204}, {"network": "Luxembourg", "MAU": 91743}, {"network": "Macao", "MAU": 98184}, {"network": "Netherlands", "MAU": 45524}, {"network": "North America", "MAU": 48516}, {"network": "Norway", "MAU": 62350}, {"network": "Oman", "MAU": 45335}, {"network": "Post-demographic dividend", "MAU": 38594}, {"network": "Qatar", "MAU": 125140}, {"network": "San Marino", "MAU": 73862}, {"network": "Saudi Arabia", "MAU": 45421}, {"network": "Singapore", "MAU": 72115}, {"network": "Sweden", "MAU": 42942}, {"network": "Switzerland", "MAU": 55866}, {"network": "United Arab Emirates", "MAU": 57232}], "2011": [{"network": "Australia", "MAU": 41894}, {"network": "Austria", "MAU": 44452}, {"network": "Bahrain", "MAU": 40164}, {"network": "Belgium", "MAU": 41248}, {"network": "Bermuda", "MAU": 54984}, {"network": "Brunei", "MAU": 82434}, {"network": "Canada", "MAU": 41565}, {"network": "Cayman Islands", "MAU": 49903}, {"network": "Denmark", "MAU": 44403}, {"network": "Euro area", "MAU": 37434}, {"network": "Finland", "MAU": 40683}, {"network": "France", "MAU": 37440}, {"network": "Germany", "MAU": 42692}, {"network": "High income", "MAU": 39921}, {"network": "Hong Kong", "MAU": 50085}, {"network": "Iceland", "MAU": 39621}, {"network": "Ireland", "MAU": 45147}, {"network": "Kuwait", "MAU": 77459}, {"network": "Luxembourg", "MAU": 92005}, {"network": "Macao", "MAU": 116752}, {"network": "Netherlands", "MAU": 46066}, {"network": "North America", "MAU": 48978}, {"network": "Norway", "MAU": 62145}, {"network": "Oman", "MAU": 42121}, {"network": "Post-demographic dividend", "MAU": 39128}, {"network": "Qatar", "MAU": 129349}, {"network": "San Marino", "MAU": 66053}, {"network": "Saudi Arabia", "MAU": 48524}, {"network": "Singapore", "MAU": 75113}, {"network": "Sweden", "MAU": 43755}, {"network": "Switzerland", "MAU": 56183}, {"network": "United Arab Emirates", "MAU": 58363}], "2012": [{"network": "Australia", "MAU": 42754}, {"network": "Austria", "MAU": 44551}, {"network": "Bahrain", "MAU": 40960}, {"network": "Belgium", "MAU": 41046}, {"network": "Bermuda", "MAU": 52137}, {"network": "Brunei", "MAU": 81993}, {"network": "Canada", "MAU": 41794}, {"network": "Denmark", "MAU": 44336}, {"network": "Finland", "MAU": 39912}, {"network": "Germany", "MAU": 42822}, {"network": "High income", "MAU": 40222}, {"network": "Hong Kong", "MAU": 50378}, {"network": "Iceland", "MAU": 39931}, {"network": "Ireland", "MAU": 44973}, {"network": "Kuwait", "MAU": 77618}, {"network": "Luxembourg", "MAU": 89505}, {"network": "Macao", "MAU": 124568}, {"network": "Netherlands", "MAU": 45411}, {"network": "North America", "MAU": 49651}, {"network": "Norway", "MAU": 63003}, {"network": "Oman", "MAU": 43030}, {"network": "Post-demographic dividend", "MAU": 39386}, {"network": "Qatar", "MAU": 125302}, {"network": "San Marino", "MAU": 60282}, {"network": "Saudi Arabia", "MAU": 49658}, {"network": "Singapore", "MAU": 76285}, {"network": "Sweden", "MAU": 43308}, {"network": "Switzerland", "MAU": 56149}, {"network": "United Arab Emirates", "MAU": 59419}], "2013": [{"network": "Australia", "MAU": 43118}, {"network": "Austria", "MAU": 44301}, {"network": "Bahrain", "MAU": 42680}, {"network": "Belgium", "MAU": 40928}, {"network": "Bermuda", "MAU": 50669}, {"network": "Brunei", "MAU": 79070}, {"network": "Canada", "MAU": 42339}, {"network": "Denmark", "MAU": 44564}, {"network": "Finland", "MAU": 39428}, {"network": "Germany", "MAU": 42914}, {"network": "High income", "MAU": 40567}, {"network": "Hong Kong", "MAU": 51732}, {"network": "Iceland", "MAU": 41259}, {"network": "Ireland", "MAU": 45470}, {"network": "Kuwait", "MAU": 74084}, {"network": "Luxembourg", "MAU": 90656}, {"network": "Macao", "MAU": 135318}, {"network": "Netherlands", "MAU": 45191}, {"network": "North America", "MAU": 50137}, {"network": "Norway", "MAU": 62896}, {"network": "Oman", "MAU": 41924}, {"network": "Post-demographic dividend", "MAU": 39710}, {"network": "Qatar", "MAU": 122636}, {"network": "San Marino", "MAU": 57750}, {"network": "Saudi Arabia", "MAU": 49537}, {"network": "Singapore", "MAU": 78896}, {"network": "Sweden", "MAU": 43475}, {"network": "Switzerland", "MAU": 56535}, {"network": "United Arab Emirates", "MAU": 61688}], "2014": [{"network": "Australia", "MAU": 43547}, {"network": "Austria", "MAU": 44320}, {"network": "Bahrain", "MAU": 43837}, {"network": "Belgium", "MAU": 41360}, {"network": "Brunei", "MAU": 76089}, {"network": "Canada", "MAU": 43079}, {"network": "Denmark", "MAU": 45057}, {"network": "Germany", "MAU": 43560}, {"network": "High income", "MAU": 41163}, {"network": "Hong Kong", "MAU": 52789}, {"network": "Iceland", "MAU": 41701}, {"network": "Ireland", "MAU": 48898}, {"network": "Kuwait", "MAU": 70832}, {"network": "Luxembourg", "MAU": 93655}, {"network": "Macao", "MAU": 130755}, {"network": "Netherlands", "MAU": 45668}, {"network": "North America", "MAU": 51034}, {"network": "Norway", "MAU": 63419}, {"network": "Oman", "MAU": 40365}, {"network": "Post-demographic dividend", "MAU": 40289}, {"network": "Qatar", "MAU": 120860}, {"network": "San Marino", "MAU": 56620}, {"network": "Saudi Arabia", "MAU": 49958}, {"network": "Singapore", "MAU": 80903}, {"network": "Sweden", "MAU": 44167}, {"network": "Switzerland", "MAU": 57218}, {"network": "United Arab Emirates", "MAU": 63943}], "2015": [{"network": "Australia", "MAU": 43923}, {"network": "Austria", "MAU": 44304}, {"network": "Bahrain", "MAU": 43926}, {"network": "Belgium", "MAU": 41708}, {"network": "Brunei", "MAU": 74600}, {"network": "Canada", "MAU": 43149}, {"network": "Denmark", "MAU": 45458}, {"network": "Euro area", "MAU": 37795}, {"network": "European Union", "MAU": 35737}, {"network": "Finland", "MAU": 38941}, {"network": "France", "MAU": 37766}, {"network": "Germany", "MAU": 43937}, {"network": "High income", "MAU": 41900}, {"network": "Hong Kong", "MAU": 53591}, {"network": "Iceland", "MAU": 43048}, {"network": "Ireland", "MAU": 60818}, {"network": "Japan", "MAU": 37882}, {"network": "Kuwait", "MAU": 68476}, {"network": "Luxembourg", "MAU": 94088}, {"network": "Macao", "MAU": 100444}, {"network": "Netherlands", "MAU": 46494}, {"network": "New Zealand", "MAU": 35309}, {"network": "North America", "MAU": 52016}, {"network": "Norway", "MAU": 64008}, {"network": "OECD members", "MAU": 38413}, {"network": "Oman", "MAU": 39873}, {"network": "Post-demographic dividend", "MAU": 40937}, {"network": "Puerto Rico", "MAU": 35291}, {"network": "Qatar", "MAU": 119749}, {"network": "San Marino", "MAU": 56372}, {"network": "Saudi Arabia", "MAU": 50723}, {"network": "Singapore", "MAU": 81741}, {"network": "Sweden", "MAU": 45679}, {"network": "Switzerland", "MAU": 57264}, {"network": "United Arab Emirates", "MAU": 66569}, {"network": "United Kingdom", "MAU": 38839}], "2016": [{"network": "Australia", "MAU": 44493}, {"network": "Austria", "MAU": 44464}, {"network": "Bahrain", "MAU": 43642}, {"network": "Belgium", "MAU": 42083}, {"network": "Brunei", "MAU": 71788}, {"network": "Canada", "MAU": 43238}, {"network": "Denmark", "MAU": 45991}, {"network": "Euro area", "MAU": 38359}, {"network": "European Union", "MAU": 36357}, {"network": "Finland", "MAU": 39659}, {"network": "France", "MAU": 38062}, {"network": "Germany", "MAU": 44431}, {"network": "High income", "MAU": 42350}, {"network": "Hong Kong", "MAU": 54412}, {"network": "Iceland", "MAU": 45630}, {"network": "Ireland", "MAU": 63227}, {"network": "Japan", "MAU": 38282}, {"network": "Kuwait", "MAU": 68861}, {"network": "Luxembourg", "MAU": 94920}, {"network": "Macao", "MAU": 97751}, {"network": "Malta", "MAU": 35058}, {"network": "Netherlands", "MAU": 47269}, {"network": "New Zealand", "MAU": 35776}, {"network": "North America", "MAU": 52375}, {"network": "Norway", "MAU": 64159}, {"network": "OECD members", "MAU": 38858}, {"network": "Oman", "MAU": 39883}, {"network": "Post-demographic dividend", "MAU": 41422}, {"network": "Puerto Rico", "MAU": 35044}, {"network": "Qatar", "MAU": 118207}, {"network": "San Marino", "MAU": 56500}, {"network": "Saudi Arabia", "MAU": 50423}, {"network": "Singapore", "MAU": 82621}, {"network": "South Korea", "MAU": 35020}, {"network": "Sweden", "MAU": 46568}, {"network": "Switzerland", "MAU": 57421}, {"network": "United Arab Emirates", "MAU": 67705}, {"network": "United Kingdom", "MAU": 39309}], "2017": [{"network": "Australia", "MAU": 44648}, {"network": "Austria", "MAU": 45436}, {"network": "Bahrain", "MAU": 43290}, {"network": "Belgium", "MAU": 42658}, {"network": "Brunei", "MAU": 71809}, {"network": "Canada", "MAU": 44017}, {"network": "Denmark", "MAU": 46682}, {"network": "Euro area", "MAU": 39175}, {"network": "European Union", "MAU": 37204}, {"network": "Finland", "MAU": 40585}, {"network": "France", "MAU": 38605}, {"network": "Germany", "MAU": 45229}, {"network": "High income", "MAU": 43053}, {"network": "Hong Kong", "MAU": 56054}, {"network": "Iceland", "MAU": 46482}, {"network": "Ireland", "MAU": 67335}, {"network": "Italy", "MAU": 35220}, {"network": "Japan", "MAU": 39002}, {"network": "Kuwait", "MAU": 65530}, {"network": "Luxembourg", "MAU": 94277}, {"network": "Macao", "MAU": 104861}, {"network": "Malta", "MAU": 36513}, {"network": "Netherlands", "MAU": 48472}, {"network": "New Zealand", "MAU": 36085}, {"network": "North America", "MAU": 53191}, {"network": "Norway", "MAU": 64800}, {"network": "OECD members", "MAU": 39585}, {"network": "Oman", "MAU": 37960}, {"network": "Post-demographic dividend", "MAU": 42189}, {"network": "Qatar", "MAU": 116935}, {"network": "San Marino", "MAU": 56861}, {"network": "Saudi Arabia", "MAU": 49045}, {"network": "Singapore", "MAU": 85535}, {"network": "South Korea", "MAU": 35938}, {"network": "Sweden", "MAU": 46949}, {"network": "Switzerland", "MAU": 57410}, {"network": "United Arab Emirates", "MAU": 67293}, {"network": "United Kingdom", "MAU": 39753}], "1990": [{"network": "Bahrain", "MAU": 35113}, {"network": "Bermuda", "MAU": 40553}, {"network": "Brunei", "MAU": 84672}, {"network": "Denmark", "MAU": 33785}, {"network": "Luxembourg", "MAU": 57618}, {"network": "Macao", "MAU": 40365}, {"network": "North America", "MAU": 36485}, {"network": "Norway", "MAU": 42813}, {"network": "Oman", "MAU": 35042}, {"network": "Saudi Arabia", "MAU": 42457}, {"network": "Singapore", "MAU": 34344}, {"network": "Switzerland", "MAU": 48181}, {"network": "United Arab Emirates", "MAU": 110432}], "1991": [{"network": "Bahrain", "MAU": 37996}, {"network": "Bermuda", "MAU": 39322}, {"network": "Brunei", "MAU": 84879}, {"network": "Denmark", "MAU": 34167}, {"network": "Luxembourg", "MAU": 61765}, {"network": "Macao", "MAU": 40680}, {"network": "North America", "MAU": 35910}, {"network": "Norway", "MAU": 43924}, {"network": "Oman", "MAU": 35568}, {"network": "Saudi Arabia", "MAU": 47262}, {"network": "Singapore", "MAU": 35613}, {"network": "Switzerland", "MAU": 47147}, {"network": "United Arab Emirates", "MAU": 105171}], "1992": [{"network": "Bahrain", "MAU": 39506}, {"network": "Bermuda", "MAU": 39584}, {"network": "Brunei", "MAU": 86423}, {"network": "Denmark", "MAU": 34721}, {"network": "Luxembourg", "MAU": 62059}, {"network": "Macao", "MAU": 44984}, {"network": "North America", "MAU": 36600}, {"network": "Norway", "MAU": 45232}, {"network": "Oman", "MAU": 36821}, {"network": "Saudi Arabia", "MAU": 47702}, {"network": "Singapore", "MAU": 37008}, {"network": "Switzerland", "MAU": 46610}, {"network": "United Arab Emirates", "MAU": 102615}], "1993": [{"network": "Australia", "MAU": 28815}, {"network": "Austria", "MAU": 32314}, {"network": "Bahrain", "MAU": 43499}, {"network": "Belgium", "MAU": 31018}, {"network": "Bermuda", "MAU": 40557}, {"network": "Brunei", "MAU": 84290}, {"network": "Canada", "MAU": 30578}, {"network": "Denmark", "MAU": 34609}, {"network": "Euro area", "MAU": 28720}, {"network": "France", "MAU": 29810}, {"network": "Germany", "MAU": 32492}, {"network": "High income", "MAU": 29433}, {"network": "Hong Kong", "MAU": 31097}, {"network": "Italy", "MAU": 31550}, {"network": "Japan", "MAU": 31476}, {"network": "Luxembourg", "MAU": 63804}, {"network": "Macao", "MAU": 46310}, {"network": "Netherlands", "MAU": 33103}, {"network": "North America", "MAU": 37118}, {"network": "Norway", "MAU": 46243}, {"network": "Oman", "MAU": 37372}, {"network": "Post-demographic dividend", "MAU": 28989}, {"network": "Saudi Arabia", "MAU": 45784}, {"network": "Singapore", "MAU": 40247}, {"network": "Sweden", "MAU": 29058}, {"network": "Switzerland", "MAU": 46129}, {"network": "United Arab Emirates", "MAU": 98224}], "1994": [{"network": "Australia", "MAU": 29646}, {"network": "Austria", "MAU": 32964}, {"network": "Bahrain", "MAU": 42334}, {"network": "Belgium", "MAU": 31920}, {"network": "Bermuda", "MAU": 40518}, {"network": "Brunei", "MAU": 84607}, {"network": "Canada", "MAU": 31646}, {"network": "Denmark", "MAU": 36332}, {"network": "Euro area", "MAU": 29343}, {"network": "France", "MAU": 30396}, {"network": "Germany", "MAU": 33175}, {"network": "High income", "MAU": 30201}, {"network": "Hong Kong", "MAU": 32239}, {"network": "Italy", "MAU": 32222}, {"network": "Japan", "MAU": 31680}, {"network": "Luxembourg", "MAU": 65346}, {"network": "Macao", "MAU": 47307}, {"network": "Netherlands", "MAU": 33879}, {"network": "North America", "MAU": 38170}, {"network": "Norway", "MAU": 48305}, {"network": "Oman", "MAU": 37441}, {"network": "Post-demographic dividend", "MAU": 29640}, {"network": "Saudi Arabia", "MAU": 44905}, {"network": "Singapore", "MAU": 43266}, {"network": "Sweden", "MAU": 30031}, {"network": "Switzerland", "MAU": 46344}, {"network": "United Arab Emirates", "MAU": 99529}], "1995": [{"network": "Australia", "MAU": 30412}, {"network": "Austria", "MAU": 33791}, {"network": "Bahrain", "MAU": 42896}, {"network": "Belgium", "MAU": 32613}, {"network": "Bermuda", "MAU": 41999}, {"network": "Brunei", "MAU": 86116}, {"network": "Canada", "MAU": 32226}, {"network": "Denmark", "MAU": 37237}, {"network": "France", "MAU": 30918}, {"network": "Germany", "MAU": 33653}, {"network": "High income", "MAU": 30802}, {"network": "Hong Kong", "MAU": 32358}, {"network": "Italy", "MAU": 33152}, {"network": "Japan", "MAU": 32425}, {"network": "Kuwait", "MAU": 81017}, {"network": "Luxembourg", "MAU": 65357}, {"network": "Macao", "MAU": 47887}, {"network": "Netherlands", "MAU": 34762}, {"network": "North America", "MAU": 38757}, {"network": "Norway", "MAU": 50051}, {"network": "Oman", "MAU": 38316}, {"network": "Post-demographic dividend", "MAU": 30260}, {"network": "Saudi Arabia", "MAU": 43980}, {"network": "Singapore", "MAU": 44921}, {"network": "Sweden", "MAU": 31076}, {"network": "Switzerland", "MAU": 46256}, {"network": "United Arab Emirates", "MAU": 100976}], "1996": [{"network": "Austria", "MAU": 34539}, {"network": "Bahrain", "MAU": 43504}, {"network": "Belgium", "MAU": 33068}, {"network": "Bermuda", "MAU": 42816}, {"network": "Brunei", "MAU": 86411}, {"network": "Canada", "MAU": 32394}, {"network": "Denmark", "MAU": 38101}, {"network": "Germany", "MAU": 33830}, {"network": "Hong Kong", "MAU": 32271}, {"network": "Italy", "MAU": 33569}, {"network": "Japan", "MAU": 33345}, {"network": "Kuwait", "MAU": 80453}, {"network": "Luxembourg", "MAU": 65369}, {"network": "Macao", "MAU": 46731}, {"network": "Netherlands", "MAU": 35837}, {"network": "North America", "MAU": 39697}, {"network": "Norway", "MAU": 52302}, {"network": "Oman", "MAU": 38911}, {"network": "Saudi Arabia", "MAU": 44207}, {"network": "Singapore", "MAU": 46380}, {"network": "Switzerland", "MAU": 46301}, {"network": "United Arab Emirates", "MAU": 101754}], "1997": [{"network": "Australia", "MAU": 32055}, {"network": "Austria", "MAU": 35222}, {"network": "Bahrain", "MAU": 43624}, {"network": "Belgium", "MAU": 34212}, {"network": "Bermuda", "MAU": 44514}, {"network": "Brunei", "MAU": 83138}, {"network": "Canada", "MAU": 33425}, {"network": "Denmark", "MAU": 39180}, {"network": "France", "MAU": 31853}, {"network": "Germany", "MAU": 34405}, {"network": "High income", "MAU": 32448}, {"network": "Hong Kong", "MAU": 33635}, {"network": "Italy", "MAU": 34167}, {"network": "Japan", "MAU": 33624}, {"network": "Kuwait", "MAU": 78426}, {"network": "Luxembourg", "MAU": 68240}, {"network": "Macao", "MAU": 45673}, {"network": "Netherlands", "MAU": 37186}, {"network": "North America", "MAU": 40981}, {"network": "Norway", "MAU": 54768}, {"network": "Oman", "MAU": 41019}, {"network": "Post-demographic dividend", "MAU": 31825}, {"network": "San Marino", "MAU": 65352}, {"network": "Saudi Arabia", "MAU": 43838}, {"network": "Singapore", "MAU": 48568}, {"network": "Sweden", "MAU": 32393}, {"network": "Switzerland", "MAU": 47271}, {"network": "United Arab Emirates", "MAU": 104829}], "1998": [{"network": "Australia", "MAU": 33174}, {"network": "Austria", "MAU": 36443}, {"network": "Bahamas", "MAU": 30362}, {"network": "Bahrain", "MAU": 44315}, {"network": "Belgium", "MAU": 34813}, {"network": "Bermuda", "MAU": 45911}, {"network": "Brunei", "MAU": 80813}, {"network": "Canada", "MAU": 34424}, {"network": "Denmark", "MAU": 39904}, {"network": "Euro area", "MAU": 32062}, {"network": "Finland", "MAU": 31760}, {"network": "France", "MAU": 32865}, {"network": "Germany", "MAU": 35081}, {"network": "High income", "MAU": 33131}, {"network": "Hong Kong", "MAU": 31394}, {"network": "Iceland", "MAU": 32144}, {"network": "Ireland", "MAU": 32854}, {"network": "Italy", "MAU": 34709}, {"network": "Japan", "MAU": 33154}, {"network": "Kuwait", "MAU": 75940}, {"network": "Luxembourg", "MAU": 71471}, {"network": "Macao", "MAU": 42705}, {"network": "Netherlands", "MAU": 38629}, {"network": "North America", "MAU": 42302}, {"network": "Norway", "MAU": 55872}, {"network": "OECD members", "MAU": 30941}, {"network": "Oman", "MAU": 42063}, {"network": "Post-demographic dividend", "MAU": 32510}, {"network": "San Marino", "MAU": 69499}, {"network": "Saudi Arabia", "MAU": 44251}, {"network": "Singapore", "MAU": 45901}, {"network": "Sweden", "MAU": 33743}, {"network": "Switzerland", "MAU": 48540}, {"network": "United Arab Emirates", "MAU": 100018}, {"network": "United Kingdom", "MAU": 31305}], "1999": [{"network": "Australia", "MAU": 34443}, {"network": "Austria", "MAU": 37666}, {"network": "Bahamas", "MAU": 32142}, {"network": "Bahrain", "MAU": 44562}, {"network": "Belgium", "MAU": 35971}, {"network": "Bermuda", "MAU": 47199}, {"network": "Brunei", "MAU": 81476}, {"network": "Canada", "MAU": 35903}, {"network": "Cyprus", "MAU": 28761}, {"network": "Denmark", "MAU": 40945}, {"network": "Euro area", "MAU": 32923}, {"network": "European Union", "MAU": 29234}, {"network": "Finland", "MAU": 33094}, {"network": "France", "MAU": 33810}, {"network": "Germany", "MAU": 35755}, {"network": "High income", "MAU": 33976}, {"network": "Hong Kong", "MAU": 31875}, {"network": "Iceland", "MAU": 32995}, {"network": "Ireland", "MAU": 35935}, {"network": "Italy", "MAU": 35244}, {"network": "Japan", "MAU": 33010}, {"network": "Kuwait", "MAU": 69981}, {"network": "Luxembourg", "MAU": 76492}, {"network": "Macao", "MAU": 40824}, {"network": "Netherlands", "MAU": 40312}, {"network": "New Zealand", "MAU": 27161}, {"network": "North America", "MAU": 43809}, {"network": "Norway", "MAU": 56608}, {"network": "OECD members", "MAU": 31738}, {"network": "Oman", "MAU": 41954}, {"network": "Post-demographic dividend", "MAU": 33466}, {"network": "Puerto Rico", "MAU": 30105}, {"network": "San Marino", "MAU": 74921}, {"network": "Saudi Arabia", "MAU": 41721}, {"network": "Singapore", "MAU": 48311}, {"network": "Spain", "MAU": 28589}, {"network": "Sweden", "MAU": 35245}, {"network": "Switzerland", "MAU": 49128}, {"network": "United Arab Emirates", "MAU": 97753}, {"network": "United Kingdom", "MAU": 32205}], "2000": [{"network": "Australia", "MAU": 35377}, {"network": "Austria", "MAU": 38844}, {"network": "Bahrain", "MAU": 44942}, {"network": "Belgium", "MAU": 37188}, {"network": "Bermuda", "MAU": 51140}, {"network": "Brunei", "MAU": 82049}, {"network": "Canada", "MAU": 37431}, {"network": "Denmark", "MAU": 42337}, {"network": "Euro area", "MAU": 34082}, {"network": "Finland", "MAU": 34887}, {"network": "France", "MAU": 34880}, {"network": "Germany", "MAU": 36764}, {"network": "High income", "MAU": 35153}, {"network": "Hong Kong", "MAU": 34016}, {"network": "Iceland", "MAU": 34044}, {"network": "Ireland", "MAU": 38849}, {"network": "Italy", "MAU": 36535}, {"network": "Japan", "MAU": 33871}, {"network": "Kuwait", "MAU": 69920}, {"network": "Luxembourg", "MAU": 81689}, {"network": "Macao", "MAU": 42225}, {"network": "Netherlands", "MAU": 41721}, {"network": "North America", "MAU": 45146}, {"network": "Norway", "MAU": 58045}, {"network": "Oman", "MAU": 43965}, {"network": "Post-demographic dividend", "MAU": 34646}, {"network": "Qatar", "MAU": 108323}, {"network": "San Marino", "MAU": 75678}, {"network": "Saudi Arabia", "MAU": 43071}, {"network": "Singapore", "MAU": 51706}, {"network": "Sweden", "MAU": 36854}, {"network": "Switzerland", "MAU": 50775}, {"network": "United Arab Emirates", "MAU": 102634}], "2001": [{"network": "Australia", "MAU": 35578}, {"network": "Austria", "MAU": 39186}, {"network": "Bahrain", "MAU": 43887}, {"network": "Belgium", "MAU": 37361}, {"network": "Bermuda", "MAU": 54245}, {"network": "Brunei", "MAU": 82596}, {"network": "Canada", "MAU": 37712}, {"network": "Denmark", "MAU": 42533}, {"network": "Euro area", "MAU": 34697}, {"network": "Finland", "MAU": 35706}, {"network": "France", "MAU": 35304}, {"network": "Germany", "MAU": 37325}, {"network": "High income", "MAU": 35398}, {"network": "Hong Kong", "MAU": 33956}, {"network": "Iceland", "MAU": 34914}, {"network": "Ireland", "MAU": 40455}, {"network": "Italy", "MAU": 37162}, {"network": "Japan", "MAU": 33927}, {"network": "Kuwait", "MAU": 68472}, {"network": "Luxembourg", "MAU": 82766}, {"network": "Macao", "MAU": 42443}, {"network": "Netherlands", "MAU": 42287}, {"network": "North America", "MAU": 45166}, {"network": "Norway", "MAU": 58956}, {"network": "Oman", "MAU": 45400}, {"network": "Post-demographic dividend", "MAU": 35024}, {"network": "Qatar", "MAU": 108055}, {"network": "San Marino", "MAU": 78890}, {"network": "Saudi Arabia", "MAU": 41472}, {"network": "Singapore", "MAU": 49851}, {"network": "Sweden", "MAU": 37330}, {"network": "Switzerland", "MAU": 51117}, {"network": "United Arab Emirates", "MAU": 98716}, {"network": "United Kingdom", "MAU": 33981}]}
212 | chart.data = JSON.parse(JSON.stringify(allData[year]));
213 | categoryAxis.zoom({ start: 0, end: 1 / chart.data.length });
214 | 
215 | series.events.on("inited", function() {
216 |   setTimeout(function() {
217 |     playButton.isActive = false; // this starts interval
218 |   }, 2000)
219 | })
220 | 
221 | </script>
222 | </html>


--------------------------------------------------------------------------------
/Vealize/barchartmain.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/barchartmain.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
  9 | 	<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
 10 | 	<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
 11 | 	<meta property="og:type" content="website">
 12 |     <meta property="og:url" content="https://vealize.my.to/barchartmain.html">
 13 |     <meta property="og:title" content="Vealize | GDP Growth">
 14 |     <meta property="og:description" content="Visualize GDP Growth of several countries.">
 15 |     <meta property="og:image" content="img/pagebar.png">
 16 | 	<meta name="twitter:card" content="summary_large_image">
 17 | 	<link rel='icon' href='img/logo.png' type="image/png">
 18 | 	
 19 | </head>
 20 | <body>
 21 | 	<header class="header">
 22 | 		<h1>Vealize</h1>
 23 | 		<ul>
 24 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 25 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 26 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 27 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 28 | 		</ul>
 29 | 	</header>
 30 | 	<div id="content" class="content">
 31 | 		<h1 id="homePageTitle">Vealize</h1>
 32 | 		<p>Visualize GDP Growth of Countries</p>
 33 | 		<p id="stuff">Visualize GDP Growth in a unique Bar Chart Race!</p>
 34 | 		<button onclick="location.href = '#main'">Get Started</button>
 35 | 	</div>
 36 | 	<div id="main" class="main">
 37 | 		<div class="mainTitle">
 38 | 			<h1>GDP Growth</h1>
 39 | 		</div>
 40 | 		<div id="chartdiv"></div>
 41 | 	</div>
 42 | 	<script type="text/javascript">
 43 | 	var cat = $('.header').offset().top;
 44 | 
 45 | 	$(window).scroll(function() {                  
 46 | 	var cs = $(window).scrollTop(); 
 47 | 	if (cs > cat) {           
 48 | 	    $('.header').css({                      
 49 | 	        position: 'fixed',
 50 | 	        top: '0',
 51 | 	        left: '0',
 52 | 	        width: '100%',
 53 | 	        background: 'white'
 54 | 	    });
 55 | 	    $('.header').css("padding-top", "5px");
 56 | 	    $('.header').css("color", "black");
 57 | 	    $('.header').css("border-bottom", "1px solid #696969");
 58 | 	    $('.h').css("color", "black");
 59 | 	    $('.h.active').css("color", "#ff0158");
 60 | 	} else {                                   
 61 | 	    $('.header').css({                     
 62 | 	        position: 'relative',
 63 | 	        width: 'auto'
 64 | 	    });
 65 | 	    $('.header').css('background', '#03030e')
 66 | 	    $('.header').css("padding-top", "30px");
 67 | 	    $('.header').css("color", "white");
 68 | 	    $('.header').css("border-bottom", "none");
 69 | 	    $('.h').css("color", "white");
 70 | 	    $('.h.active').css("color", "#ff0158");
 71 | 	}
 72 | })
 73 | 	</script>
 74 | </body>
 75 | <script type="text/javascript">
 76 | /**
 77 |  * ---------------------------------------
 78 |  * This demo was created using amCharts 4.
 79 |  * 
 80 |  * For more information visit:
 81 |  * https://www.amcharts.com/
 82 |  * 
 83 |  * Documentation is available at:
 84 |  * https://www.amcharts.com/docs/v4/
 85 |  * ---------------------------------------
 86 |  */
 87 | 
 88 | // Themes begin
 89 | am4core.useTheme(am4themes_animated);
 90 | // Themes end
 91 | 
 92 | var chart = am4core.create("chartdiv", am4charts.XYChart);
 93 | chart.padding(40, 40, 40, 40);
 94 | 
 95 | chart.numberFormatter.bigNumberPrefixes = [
 96 |   { "number": 1e+3, "suffix": "K" },
 97 |   { "number": 1e+6, "suffix": "M" },
 98 |   { "number": 1e+9, "suffix": "B" }
 99 | ];
100 | 
101 | var label = chart.plotContainer.createChild(am4core.Label);
102 | label.x = am4core.percent(97);
103 | label.y = am4core.percent(95);
104 | label.horizontalCenter = "right";
105 | label.verticalCenter = "middle";
106 | label.dx = -15;
107 | label.fontSize = 50;
108 | 
109 | var playButton = chart.plotContainer.createChild(am4core.PlayButton);
110 | playButton.x = am4core.percent(97);
111 | playButton.y = am4core.percent(95);
112 | playButton.dy = -2;
113 | playButton.verticalCenter = "middle";
114 | playButton.events.on("toggled", function(event) {
115 |   if (event.target.isActive) {
116 |     play();
117 |   }
118 |   else {
119 |     stop();
120 |   }
121 | })
122 | 
123 | var stepDuration = 4000;
124 | 
125 | var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
126 | categoryAxis.renderer.grid.template.location = 0;
127 | categoryAxis.dataFields.category = "network";
128 | categoryAxis.renderer.minGridDistance = 1;
129 | categoryAxis.renderer.inversed = true;
130 | categoryAxis.renderer.grid.template.disabled = true;
131 | 
132 | var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
133 | valueAxis.min = 0;
134 | valueAxis.rangeChangeEasing = am4core.ease.linear;
135 | valueAxis.rangeChangeDuration = stepDuration;
136 | valueAxis.extraMax = 0.1;
137 | 
138 | var series = chart.series.push(new am4charts.ColumnSeries());
139 | series.dataFields.categoryY = "network";
140 | series.dataFields.valueX = "MAU";
141 | series.tooltipText = "{valueX.value}"
142 | series.columns.template.strokeOpacity = 0;
143 | series.columns.template.column.cornerRadiusBottomRight = 5;
144 | series.columns.template.column.cornerRadiusTopRight = 5;
145 | series.interpolationDuration = stepDuration;
146 | series.interpolationEasing = am4core.ease.linear;
147 | 
148 | var labelBullet = series.bullets.push(new am4charts.LabelBullet())
149 | labelBullet.label.horizontalCenter = "right";
150 | labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.0as')}";
151 | labelBullet.label.textAlign = "end";
152 | labelBullet.label.dx = -10;
153 | 
154 | chart.zoomOutButton.disabled = false;
155 | 
156 | // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
157 | series.columns.template.adapter.add("fill", function(fill, target){
158 |   return chart.colors.getIndex(target.dataItem.index);
159 | });
160 | 
161 | var year = 1990;
162 | label.text = year.toString();
163 | 
164 | var interval;
165 | 
166 | function play() {
167 |   interval = setInterval(function(){
168 |     nextYear();
169 |   }, stepDuration)
170 |   nextYear();
171 | }
172 | 
173 | function stop() {
174 |   if (interval) {
175 |     clearInterval(interval);
176 |   }
177 | }
178 | 
179 | function nextYear() {
180 |   year++
181 | 
182 |   if (year > 2017) {
183 |     year = 1990;
184 |   }
185 | 
186 |   var newData = allData[year];
187 |   var itemsWithNonZero = 0;
188 |   for (var i = 0; i < chart.data.length; i++) {
189 |     chart.data[i].MAU = newData[i].MAU;
190 |     if (chart.data[i].MAU > 0) {
191 |       itemsWithNonZero++;
192 |     }
193 |   }
194 | 
195 |   if (year == 2017) {
196 |     series.interpolationDuration = stepDuration / 4;
197 |     valueAxis.rangeChangeDuration = stepDuration / 4;
198 |   }
199 |   else {
200 |     series.interpolationDuration = stepDuration;
201 |     valueAxis.rangeChangeDuration = stepDuration;
202 |   }
203 | 
204 |   chart.invalidateRawData();
205 |   label.text = year.toString();
206 | 
207 |   categoryAxis.zoom({ start: 0, end: itemsWithNonZero / categoryAxis.dataItems.length });
208 | }
209 | 
210 | 
211 | categoryAxis.sortBySeries = series;
212 | 
213 | var allData = {"2002": [{"network": "Australia", "MAU": 36553}, {"network": "Austria", "MAU": 39638}, {"network": "Bahamas", "MAU": 33505}, {"network": "Bahrain", "MAU": 43147}, {"network": "Belgium", "MAU": 37856}, {"network": "Bermuda", "MAU": 53096}, {"network": "Brunei", "MAU": 84125}, {"network": "Canada", "MAU": 38500}, {"network": "Denmark", "MAU": 42595}, {"network": "Euro area", "MAU": 34896}, {"network": "Finland", "MAU": 36218}, {"network": "France", "MAU": 35440}, {"network": "Germany", "MAU": 37262}, {"network": "High income", "MAU": 35675}, {"network": "Hong Kong", "MAU": 34366}, {"network": "Iceland", "MAU": 34794}, {"network": "Ireland", "MAU": 42289}, {"network": "Italy", "MAU": 37199}, {"network": "Japan", "MAU": 33888}, {"network": "Kuwait", "MAU": 69392}, {"network": "Luxembourg", "MAU": 85032}, {"network": "Macao", "MAU": 45126}, {"network": "Netherlands", "MAU": 42062}, {"network": "North America", "MAU": 45594}, {"network": "Norway", "MAU": 59482}, {"network": "OECD members", "MAU": 33339}, {"network": "Oman", "MAU": 44140}, {"network": "Post-demographic dividend", "MAU": 35434}, {"network": "Qatar", "MAU": 110654}, {"network": "San Marino", "MAU": 78148}, {"network": "Saudi Arabia", "MAU": 39194}, {"network": "Singapore", "MAU": 51478}, {"network": "Sweden", "MAU": 37980}, {"network": "Switzerland", "MAU": 50815}, {"network": "United Arab Emirates", "MAU": 95894}, {"network": "United Kingdom", "MAU": 34669}], "2003": [{"network": "Australia", "MAU": 37183}, {"network": "Austria", "MAU": 39816}, {"network": "Bahrain", "MAU": 43187}, {"network": "Belgium", "MAU": 37990}, {"network": "Bermuda", "MAU": 54549}, {"network": "Brunei", "MAU": 84970}, {"network": "Canada", "MAU": 38805}, {"network": "Denmark", "MAU": 42645}, {"network": "Euro area", "MAU": 34982}, {"network": "Finland", "MAU": 36852}, {"network": "France", "MAU": 35479}, {"network": "Germany", "MAU": 36977}, {"network": "High income", "MAU": 36306}, {"network": "Hong Kong", "MAU": 35486}, {"network": "Iceland", "MAU": 35369}, {"network": "Ireland", "MAU": 42903}, {"network": "Italy", "MAU": 37090}, {"network": "Japan", "MAU": 34333}, {"network": "Kuwait", "MAU": 80462}, {"network": "Luxembourg", "MAU": 85374}, {"network": "Macao", "MAU": 49153}, {"network": "Netherlands", "MAU": 41982}, {"network": "North America", "MAU": 46429}, {"network": "Norway", "MAU": 59678}, {"network": "OECD members", "MAU": 33790}, {"network": "Oman", "MAU": 42044}, {"network": "Post-demographic dividend", "MAU": 35983}, {"network": "Qatar", "MAU": 107615}, {"network": "San Marino", "MAU": 80118}, {"network": "Saudi Arabia", "MAU": 42344}, {"network": "Singapore", "MAU": 54560}, {"network": "Sweden", "MAU": 38742}, {"network": "Switzerland", "MAU": 50459}, {"network": "United Arab Emirates", "MAU": 97790}, {"network": "United Kingdom", "MAU": 35656}], "2004": [{"network": "Australia", "MAU": 38225}, {"network": "Austria", "MAU": 40652}, {"network": "Bahrain", "MAU": 43355}, {"network": "Belgium", "MAU": 39201}, {"network": "Bermuda", "MAU": 55452}, {"network": "Brunei", "MAU": 83942}, {"network": "Canada", "MAU": 39604}, {"network": "Denmark", "MAU": 43670}, {"network": "Euro area", "MAU": 35606}, {"network": "Finland", "MAU": 38188}, {"network": "France", "MAU": 36200}, {"network": "Germany", "MAU": 37418}, {"network": "High income", "MAU": 37352}, {"network": "Hong Kong", "MAU": 38274}, {"network": "Iceland", "MAU": 37890}, {"network": "Ireland", "MAU": 44940}, {"network": "Italy", "MAU": 37434}, {"network": "Japan", "MAU": 35078}, {"network": "Kuwait", "MAU": 87555}, {"network": "Luxembourg", "MAU": 87209}, {"network": "Macao", "MAU": 60810}, {"network": "Netherlands", "MAU": 42686}, {"network": "North America", "MAU": 47712}, {"network": "Norway", "MAU": 61675}, {"network": "OECD members", "MAU": 34672}, {"network": "Oman", "MAU": 41551}, {"network": "Post-demographic dividend", "MAU": 36958}, {"network": "Puerto Rico", "MAU": 36040}, {"network": "Qatar", "MAU": 116418}, {"network": "San Marino", "MAU": 82713}, {"network": "Saudi Arabia", "MAU": 44390}, {"network": "Singapore", "MAU": 59027}, {"network": "Sweden", "MAU": 40257}, {"network": "Switzerland", "MAU": 51505}, {"network": "United Arab Emirates", "MAU": 98076}, {"network": "United Kingdom", "MAU": 36292}], "2005": [{"network": "Australia", "MAU": 38928}, {"network": "Austria", "MAU": 41282}, {"network": "Bahrain", "MAU": 43201}, {"network": "Belgium", "MAU": 39802}, {"network": "Bermuda", "MAU": 56017}, {"network": "Brunei", "MAU": 82967}, {"network": "Canada", "MAU": 40471}, {"network": "Cyprus", "MAU": 33662}, {"network": "Denmark", "MAU": 44567}, {"network": "Euro area", "MAU": 36043}, {"network": "Finland", "MAU": 39115}, {"network": "France", "MAU": 36505}, {"network": "Germany", "MAU": 37703}, {"network": "High income", "MAU": 38205}, {"network": "Hong Kong", "MAU": 40922}, {"network": "Iceland", "MAU": 39679}, {"network": "Ireland", "MAU": 46613}, {"network": "Italy", "MAU": 37604}, {"network": "Japan", "MAU": 35658}, {"network": "Kuwait", "MAU": 93469}, {"network": "Luxembourg", "MAU": 88610}, {"network": "Macao", "MAU": 64199}, {"network": "Netherlands", "MAU": 43507}, {"network": "North America", "MAU": 48847}, {"network": "Norway", "MAU": 62864}, {"network": "OECD members", "MAU": 35407}, {"network": "Oman", "MAU": 41458}, {"network": "Post-demographic dividend", "MAU": 37770}, {"network": "Puerto Rico", "MAU": 35375}, {"network": "Qatar", "MAU": 109802}, {"network": "San Marino", "MAU": 83600}, {"network": "Saudi Arabia", "MAU": 45538}, {"network": "Singapore", "MAU": 61973}, {"network": "Sweden", "MAU": 41227}, {"network": "Switzerland", "MAU": 52770}, {"network": "United Arab Emirates", "MAU": 91798}, {"network": "United Kingdom", "MAU": 37159}], "2006": [{"network": "Australia", "MAU": 39445}, {"network": "Austria", "MAU": 42498}, {"network": "Bahrain", "MAU": 42673}, {"network": "Belgium", "MAU": 40532}, {"network": "Bermuda", "MAU": 58784}, {"network": "Brunei", "MAU": 85424}, {"network": "Canada", "MAU": 41203}, {"network": "Cyprus", "MAU": 34599}, {"network": "Denmark", "MAU": 46159}, {"network": "Euro area", "MAU": 37054}, {"network": "European Union", "MAU": 34026}, {"network": "Finland", "MAU": 40546}, {"network": "France", "MAU": 37113}, {"network": "Germany", "MAU": 39143}, {"network": "High income", "MAU": 39161}, {"network": "Hong Kong", "MAU": 43520}, {"network": "Iceland", "MAU": 40703}, {"network": "Ireland", "MAU": 47879}, {"network": "Italy", "MAU": 38243}, {"network": "Japan", "MAU": 36141}, {"network": "Kuwait", "MAU": 96244}, {"network": "Luxembourg", "MAU": 91724}, {"network": "Macao", "MAU": 71160}, {"network": "Netherlands", "MAU": 44965}, {"network": "North America", "MAU": 49676}, {"network": "Norway", "MAU": 63854}, {"network": "OECD members", "MAU": 36248}, {"network": "Oman", "MAU": 42472}, {"network": "Post-demographic dividend", "MAU": 38681}, {"network": "Puerto Rico", "MAU": 35024}, {"network": "Qatar", "MAU": 118585}, {"network": "San Marino", "MAU": 85726}, {"network": "Saudi Arabia", "MAU": 45527}, {"network": "Singapore", "MAU": 65386}, {"network": "Spain", "MAU": 33700}, {"network": "Sweden", "MAU": 42918}, {"network": "Switzerland", "MAU": 54531}, {"network": "United Arab Emirates", "MAU": 88086}, {"network": "United Kingdom", "MAU": 37793}], "2007": [{"network": "Australia", "MAU": 40680}, {"network": "Austria", "MAU": 43939}, {"network": "Bahrain", "MAU": 42755}, {"network": "Belgium", "MAU": 41623}, {"network": "Bermuda", "MAU": 60117}, {"network": "Brunei", "MAU": 84503}, {"network": "Canada", "MAU": 41647}, {"network": "Cyprus", "MAU": 35502}, {"network": "Denmark", "MAU": 46373}, {"network": "Equatorial Guinea", "MAU": 35570}, {"network": "Euro area", "MAU": 38009}, {"network": "Finland", "MAU": 42467}, {"network": "France", "MAU": 37755}, {"network": "Germany", "MAU": 40473}, {"network": "High income", "MAU": 39964}, {"network": "Hong Kong", "MAU": 45937}, {"network": "Iceland", "MAU": 43427}, {"network": "Ireland", "MAU": 48937}, {"network": "Italy", "MAU": 38612}, {"network": "Japan", "MAU": 36697}, {"network": "Kuwait", "MAU": 96870}, {"network": "Luxembourg", "MAU": 97864}, {"network": "Macao", "MAU": 79743}, {"network": "Netherlands", "MAU": 46527}, {"network": "North America", "MAU": 50091}, {"network": "Norway", "MAU": 65083}, {"network": "OECD members", "MAU": 36921}, {"network": "Oman", "MAU": 43034}, {"network": "Post-demographic dividend", "MAU": 39453}, {"network": "Qatar", "MAU": 118831}, {"network": "San Marino", "MAU": 90727}, {"network": "Saudi Arabia", "MAU": 45130}, {"network": "Singapore", "MAU": 68432}, {"network": "Sweden", "MAU": 44051}, {"network": "Switzerland", "MAU": 56269}, {"network": "United Arab Emirates", "MAU": 78830}, {"network": "United Kingdom", "MAU": 38384}], "2008": [{"network": "Australia", "MAU": 41331}, {"network": "Austria", "MAU": 44441}, {"network": "Bahrain", "MAU": 42218}, {"network": "Belgium", "MAU": 41619}, {"network": "Bermuda", "MAU": 60675}, {"network": "Brunei", "MAU": 81905}, {"network": "Canada", "MAU": 41611}, {"network": "Denmark", "MAU": 45865}, {"network": "Equatorial Guinea", "MAU": 40015}, {"network": "Euro area", "MAU": 37994}, {"network": "Finland", "MAU": 42574}, {"network": "France", "MAU": 37618}, {"network": "Germany", "MAU": 40989}, {"network": "High income", "MAU": 39873}, {"network": "Hong Kong", "MAU": 46635}, {"network": "Iceland", "MAU": 43334}, {"network": "Ireland", "MAU": 46062}, {"network": "Italy", "MAU": 37954}, {"network": "Japan", "MAU": 36278}, {"network": "Kuwait", "MAU": 93698}, {"network": "Luxembourg", "MAU": 94900}, {"network": "Macao", "MAU": 80762}, {"network": "Netherlands", "MAU": 47134}, {"network": "North America", "MAU": 49521}, {"network": "Norway", "MAU": 64586}, {"network": "OECD members", "MAU": 36738}, {"network": "Oman", "MAU": 44938}, {"network": "Post-demographic dividend", "MAU": 39307}, {"network": "Qatar", "MAU": 119723}, {"network": "San Marino", "MAU": 91087}, {"network": "Saudi Arabia", "MAU": 46678}, {"network": "Singapore", "MAU": 66046}, {"network": "Sweden", "MAU": 43466}, {"network": "Switzerland", "MAU": 56755}, {"network": "United Arab Emirates", "MAU": 71314}, {"network": "United Kingdom", "MAU": 37903}], "2009": [{"network": "Australia", "MAU": 41266}, {"network": "Austria", "MAU": 42656}, {"network": "Bahrain", "MAU": 40717}, {"network": "Belgium", "MAU": 40355}, {"network": "Bermuda", "MAU": 57151}, {"network": "Brunei", "MAU": 79512}, {"network": "Canada", "MAU": 39924}, {"network": "Denmark", "MAU": 43382}, {"network": "Equatorial Guinea", "MAU": 38738}, {"network": "Euro area", "MAU": 36135}, {"network": "Finland", "MAU": 38867}, {"network": "France", "MAU": 36324}, {"network": "Germany", "MAU": 38784}, {"network": "High income", "MAU": 38278}, {"network": "Hong Kong", "MAU": 45390}, {"network": "Iceland", "MAU": 40377}, {"network": "Ireland", "MAU": 43487}, {"network": "Kuwait", "MAU": 81922}, {"network": "Luxembourg", "MAU": 89098}, {"network": "Macao", "MAU": 80121}, {"network": "Netherlands", "MAU": 45125}, {"network": "North America", "MAU": 47706}, {"network": "Norway", "MAU": 62698}, {"network": "Oman", "MAU": 45635}, {"network": "Post-demographic dividend", "MAU": 37702}, {"network": "Qatar", "MAU": 117064}, {"network": "San Marino", "MAU": 78444}, {"network": "Saudi Arabia", "MAU": 44481}, {"network": "Singapore", "MAU": 63697}, {"network": "Sweden", "MAU": 40862}, {"network": "Switzerland", "MAU": 54805}, {"network": "United Arab Emirates", "MAU": 60769}, {"network": "United Kingdom", "MAU": 36042}], "2010": [{"network": "Australia", "MAU": 41464}, {"network": "Austria", "MAU": 43336}, {"network": "Bahrain", "MAU": 40570}, {"network": "Belgium", "MAU": 41085}, {"network": "Bermuda", "MAU": 56395}, {"network": "Brunei", "MAU": 80552}, {"network": "Canada", "MAU": 40699}, {"network": "Denmark", "MAU": 43998}, {"network": "Euro area", "MAU": 36786}, {"network": "Finland", "MAU": 39848}, {"network": "France", "MAU": 36855}, {"network": "Germany", "MAU": 40428}, {"network": "High income", "MAU": 39243}, {"network": "Hong Kong", "MAU": 48107}, {"network": "Iceland", "MAU": 38978}, {"network": "Ireland", "MAU": 44030}, {"network": "Kuwait", "MAU": 75204}, {"network": "Luxembourg", "MAU": 91743}, {"network": "Macao", "MAU": 98184}, {"network": "Netherlands", "MAU": 45524}, {"network": "North America", "MAU": 48516}, {"network": "Norway", "MAU": 62350}, {"network": "Oman", "MAU": 45335}, {"network": "Post-demographic dividend", "MAU": 38594}, {"network": "Qatar", "MAU": 125140}, {"network": "San Marino", "MAU": 73862}, {"network": "Saudi Arabia", "MAU": 45421}, {"network": "Singapore", "MAU": 72115}, {"network": "Sweden", "MAU": 42942}, {"network": "Switzerland", "MAU": 55866}, {"network": "United Arab Emirates", "MAU": 57232}], "2011": [{"network": "Australia", "MAU": 41894}, {"network": "Austria", "MAU": 44452}, {"network": "Bahrain", "MAU": 40164}, {"network": "Belgium", "MAU": 41248}, {"network": "Bermuda", "MAU": 54984}, {"network": "Brunei", "MAU": 82434}, {"network": "Canada", "MAU": 41565}, {"network": "Cayman Islands", "MAU": 49903}, {"network": "Denmark", "MAU": 44403}, {"network": "Euro area", "MAU": 37434}, {"network": "Finland", "MAU": 40683}, {"network": "France", "MAU": 37440}, {"network": "Germany", "MAU": 42692}, {"network": "High income", "MAU": 39921}, {"network": "Hong Kong", "MAU": 50085}, {"network": "Iceland", "MAU": 39621}, {"network": "Ireland", "MAU": 45147}, {"network": "Kuwait", "MAU": 77459}, {"network": "Luxembourg", "MAU": 92005}, {"network": "Macao", "MAU": 116752}, {"network": "Netherlands", "MAU": 46066}, {"network": "North America", "MAU": 48978}, {"network": "Norway", "MAU": 62145}, {"network": "Oman", "MAU": 42121}, {"network": "Post-demographic dividend", "MAU": 39128}, {"network": "Qatar", "MAU": 129349}, {"network": "San Marino", "MAU": 66053}, {"network": "Saudi Arabia", "MAU": 48524}, {"network": "Singapore", "MAU": 75113}, {"network": "Sweden", "MAU": 43755}, {"network": "Switzerland", "MAU": 56183}, {"network": "United Arab Emirates", "MAU": 58363}], "2012": [{"network": "Australia", "MAU": 42754}, {"network": "Austria", "MAU": 44551}, {"network": "Bahrain", "MAU": 40960}, {"network": "Belgium", "MAU": 41046}, {"network": "Bermuda", "MAU": 52137}, {"network": "Brunei", "MAU": 81993}, {"network": "Canada", "MAU": 41794}, {"network": "Denmark", "MAU": 44336}, {"network": "Finland", "MAU": 39912}, {"network": "Germany", "MAU": 42822}, {"network": "High income", "MAU": 40222}, {"network": "Hong Kong", "MAU": 50378}, {"network": "Iceland", "MAU": 39931}, {"network": "Ireland", "MAU": 44973}, {"network": "Kuwait", "MAU": 77618}, {"network": "Luxembourg", "MAU": 89505}, {"network": "Macao", "MAU": 124568}, {"network": "Netherlands", "MAU": 45411}, {"network": "North America", "MAU": 49651}, {"network": "Norway", "MAU": 63003}, {"network": "Oman", "MAU": 43030}, {"network": "Post-demographic dividend", "MAU": 39386}, {"network": "Qatar", "MAU": 125302}, {"network": "San Marino", "MAU": 60282}, {"network": "Saudi Arabia", "MAU": 49658}, {"network": "Singapore", "MAU": 76285}, {"network": "Sweden", "MAU": 43308}, {"network": "Switzerland", "MAU": 56149}, {"network": "United Arab Emirates", "MAU": 59419}], "2013": [{"network": "Australia", "MAU": 43118}, {"network": "Austria", "MAU": 44301}, {"network": "Bahrain", "MAU": 42680}, {"network": "Belgium", "MAU": 40928}, {"network": "Bermuda", "MAU": 50669}, {"network": "Brunei", "MAU": 79070}, {"network": "Canada", "MAU": 42339}, {"network": "Denmark", "MAU": 44564}, {"network": "Finland", "MAU": 39428}, {"network": "Germany", "MAU": 42914}, {"network": "High income", "MAU": 40567}, {"network": "Hong Kong", "MAU": 51732}, {"network": "Iceland", "MAU": 41259}, {"network": "Ireland", "MAU": 45470}, {"network": "Kuwait", "MAU": 74084}, {"network": "Luxembourg", "MAU": 90656}, {"network": "Macao", "MAU": 135318}, {"network": "Netherlands", "MAU": 45191}, {"network": "North America", "MAU": 50137}, {"network": "Norway", "MAU": 62896}, {"network": "Oman", "MAU": 41924}, {"network": "Post-demographic dividend", "MAU": 39710}, {"network": "Qatar", "MAU": 122636}, {"network": "San Marino", "MAU": 57750}, {"network": "Saudi Arabia", "MAU": 49537}, {"network": "Singapore", "MAU": 78896}, {"network": "Sweden", "MAU": 43475}, {"network": "Switzerland", "MAU": 56535}, {"network": "United Arab Emirates", "MAU": 61688}], "2014": [{"network": "Australia", "MAU": 43547}, {"network": "Austria", "MAU": 44320}, {"network": "Bahrain", "MAU": 43837}, {"network": "Belgium", "MAU": 41360}, {"network": "Brunei", "MAU": 76089}, {"network": "Canada", "MAU": 43079}, {"network": "Denmark", "MAU": 45057}, {"network": "Germany", "MAU": 43560}, {"network": "High income", "MAU": 41163}, {"network": "Hong Kong", "MAU": 52789}, {"network": "Iceland", "MAU": 41701}, {"network": "Ireland", "MAU": 48898}, {"network": "Kuwait", "MAU": 70832}, {"network": "Luxembourg", "MAU": 93655}, {"network": "Macao", "MAU": 130755}, {"network": "Netherlands", "MAU": 45668}, {"network": "North America", "MAU": 51034}, {"network": "Norway", "MAU": 63419}, {"network": "Oman", "MAU": 40365}, {"network": "Post-demographic dividend", "MAU": 40289}, {"network": "Qatar", "MAU": 120860}, {"network": "San Marino", "MAU": 56620}, {"network": "Saudi Arabia", "MAU": 49958}, {"network": "Singapore", "MAU": 80903}, {"network": "Sweden", "MAU": 44167}, {"network": "Switzerland", "MAU": 57218}, {"network": "United Arab Emirates", "MAU": 63943}], "2015": [{"network": "Australia", "MAU": 43923}, {"network": "Austria", "MAU": 44304}, {"network": "Bahrain", "MAU": 43926}, {"network": "Belgium", "MAU": 41708}, {"network": "Brunei", "MAU": 74600}, {"network": "Canada", "MAU": 43149}, {"network": "Denmark", "MAU": 45458}, {"network": "Euro area", "MAU": 37795}, {"network": "European Union", "MAU": 35737}, {"network": "Finland", "MAU": 38941}, {"network": "France", "MAU": 37766}, {"network": "Germany", "MAU": 43937}, {"network": "High income", "MAU": 41900}, {"network": "Hong Kong", "MAU": 53591}, {"network": "Iceland", "MAU": 43048}, {"network": "Ireland", "MAU": 60818}, {"network": "Japan", "MAU": 37882}, {"network": "Kuwait", "MAU": 68476}, {"network": "Luxembourg", "MAU": 94088}, {"network": "Macao", "MAU": 100444}, {"network": "Netherlands", "MAU": 46494}, {"network": "New Zealand", "MAU": 35309}, {"network": "North America", "MAU": 52016}, {"network": "Norway", "MAU": 64008}, {"network": "OECD members", "MAU": 38413}, {"network": "Oman", "MAU": 39873}, {"network": "Post-demographic dividend", "MAU": 40937}, {"network": "Puerto Rico", "MAU": 35291}, {"network": "Qatar", "MAU": 119749}, {"network": "San Marino", "MAU": 56372}, {"network": "Saudi Arabia", "MAU": 50723}, {"network": "Singapore", "MAU": 81741}, {"network": "Sweden", "MAU": 45679}, {"network": "Switzerland", "MAU": 57264}, {"network": "United Arab Emirates", "MAU": 66569}, {"network": "United Kingdom", "MAU": 38839}], "2016": [{"network": "Australia", "MAU": 44493}, {"network": "Austria", "MAU": 44464}, {"network": "Bahrain", "MAU": 43642}, {"network": "Belgium", "MAU": 42083}, {"network": "Brunei", "MAU": 71788}, {"network": "Canada", "MAU": 43238}, {"network": "Denmark", "MAU": 45991}, {"network": "Euro area", "MAU": 38359}, {"network": "European Union", "MAU": 36357}, {"network": "Finland", "MAU": 39659}, {"network": "France", "MAU": 38062}, {"network": "Germany", "MAU": 44431}, {"network": "High income", "MAU": 42350}, {"network": "Hong Kong", "MAU": 54412}, {"network": "Iceland", "MAU": 45630}, {"network": "Ireland", "MAU": 63227}, {"network": "Japan", "MAU": 38282}, {"network": "Kuwait", "MAU": 68861}, {"network": "Luxembourg", "MAU": 94920}, {"network": "Macao", "MAU": 97751}, {"network": "Malta", "MAU": 35058}, {"network": "Netherlands", "MAU": 47269}, {"network": "New Zealand", "MAU": 35776}, {"network": "North America", "MAU": 52375}, {"network": "Norway", "MAU": 64159}, {"network": "OECD members", "MAU": 38858}, {"network": "Oman", "MAU": 39883}, {"network": "Post-demographic dividend", "MAU": 41422}, {"network": "Puerto Rico", "MAU": 35044}, {"network": "Qatar", "MAU": 118207}, {"network": "San Marino", "MAU": 56500}, {"network": "Saudi Arabia", "MAU": 50423}, {"network": "Singapore", "MAU": 82621}, {"network": "South Korea", "MAU": 35020}, {"network": "Sweden", "MAU": 46568}, {"network": "Switzerland", "MAU": 57421}, {"network": "United Arab Emirates", "MAU": 67705}, {"network": "United Kingdom", "MAU": 39309}], "2017": [{"network": "Australia", "MAU": 44648}, {"network": "Austria", "MAU": 45436}, {"network": "Bahrain", "MAU": 43290}, {"network": "Belgium", "MAU": 42658}, {"network": "Brunei", "MAU": 71809}, {"network": "Canada", "MAU": 44017}, {"network": "Denmark", "MAU": 46682}, {"network": "Euro area", "MAU": 39175}, {"network": "European Union", "MAU": 37204}, {"network": "Finland", "MAU": 40585}, {"network": "France", "MAU": 38605}, {"network": "Germany", "MAU": 45229}, {"network": "High income", "MAU": 43053}, {"network": "Hong Kong", "MAU": 56054}, {"network": "Iceland", "MAU": 46482}, {"network": "Ireland", "MAU": 67335}, {"network": "Italy", "MAU": 35220}, {"network": "Japan", "MAU": 39002}, {"network": "Kuwait", "MAU": 65530}, {"network": "Luxembourg", "MAU": 94277}, {"network": "Macao", "MAU": 104861}, {"network": "Malta", "MAU": 36513}, {"network": "Netherlands", "MAU": 48472}, {"network": "New Zealand", "MAU": 36085}, {"network": "North America", "MAU": 53191}, {"network": "Norway", "MAU": 64800}, {"network": "OECD members", "MAU": 39585}, {"network": "Oman", "MAU": 37960}, {"network": "Post-demographic dividend", "MAU": 42189}, {"network": "Qatar", "MAU": 116935}, {"network": "San Marino", "MAU": 56861}, {"network": "Saudi Arabia", "MAU": 49045}, {"network": "Singapore", "MAU": 85535}, {"network": "South Korea", "MAU": 35938}, {"network": "Sweden", "MAU": 46949}, {"network": "Switzerland", "MAU": 57410}, {"network": "United Arab Emirates", "MAU": 67293}, {"network": "United Kingdom", "MAU": 39753}], "1990": [{"network": "Bahrain", "MAU": 35113}, {"network": "Bermuda", "MAU": 40553}, {"network": "Brunei", "MAU": 84672}, {"network": "Denmark", "MAU": 33785}, {"network": "Luxembourg", "MAU": 57618}, {"network": "Macao", "MAU": 40365}, {"network": "North America", "MAU": 36485}, {"network": "Norway", "MAU": 42813}, {"network": "Oman", "MAU": 35042}, {"network": "Saudi Arabia", "MAU": 42457}, {"network": "Singapore", "MAU": 34344}, {"network": "Switzerland", "MAU": 48181}, {"network": "United Arab Emirates", "MAU": 110432}], "1991": [{"network": "Bahrain", "MAU": 37996}, {"network": "Bermuda", "MAU": 39322}, {"network": "Brunei", "MAU": 84879}, {"network": "Denmark", "MAU": 34167}, {"network": "Luxembourg", "MAU": 61765}, {"network": "Macao", "MAU": 40680}, {"network": "North America", "MAU": 35910}, {"network": "Norway", "MAU": 43924}, {"network": "Oman", "MAU": 35568}, {"network": "Saudi Arabia", "MAU": 47262}, {"network": "Singapore", "MAU": 35613}, {"network": "Switzerland", "MAU": 47147}, {"network": "United Arab Emirates", "MAU": 105171}], "1992": [{"network": "Bahrain", "MAU": 39506}, {"network": "Bermuda", "MAU": 39584}, {"network": "Brunei", "MAU": 86423}, {"network": "Denmark", "MAU": 34721}, {"network": "Luxembourg", "MAU": 62059}, {"network": "Macao", "MAU": 44984}, {"network": "North America", "MAU": 36600}, {"network": "Norway", "MAU": 45232}, {"network": "Oman", "MAU": 36821}, {"network": "Saudi Arabia", "MAU": 47702}, {"network": "Singapore", "MAU": 37008}, {"network": "Switzerland", "MAU": 46610}, {"network": "United Arab Emirates", "MAU": 102615}], "1993": [{"network": "Australia", "MAU": 28815}, {"network": "Austria", "MAU": 32314}, {"network": "Bahrain", "MAU": 43499}, {"network": "Belgium", "MAU": 31018}, {"network": "Bermuda", "MAU": 40557}, {"network": "Brunei", "MAU": 84290}, {"network": "Canada", "MAU": 30578}, {"network": "Denmark", "MAU": 34609}, {"network": "Euro area", "MAU": 28720}, {"network": "France", "MAU": 29810}, {"network": "Germany", "MAU": 32492}, {"network": "High income", "MAU": 29433}, {"network": "Hong Kong", "MAU": 31097}, {"network": "Italy", "MAU": 31550}, {"network": "Japan", "MAU": 31476}, {"network": "Luxembourg", "MAU": 63804}, {"network": "Macao", "MAU": 46310}, {"network": "Netherlands", "MAU": 33103}, {"network": "North America", "MAU": 37118}, {"network": "Norway", "MAU": 46243}, {"network": "Oman", "MAU": 37372}, {"network": "Post-demographic dividend", "MAU": 28989}, {"network": "Saudi Arabia", "MAU": 45784}, {"network": "Singapore", "MAU": 40247}, {"network": "Sweden", "MAU": 29058}, {"network": "Switzerland", "MAU": 46129}, {"network": "United Arab Emirates", "MAU": 98224}], "1994": [{"network": "Australia", "MAU": 29646}, {"network": "Austria", "MAU": 32964}, {"network": "Bahrain", "MAU": 42334}, {"network": "Belgium", "MAU": 31920}, {"network": "Bermuda", "MAU": 40518}, {"network": "Brunei", "MAU": 84607}, {"network": "Canada", "MAU": 31646}, {"network": "Denmark", "MAU": 36332}, {"network": "Euro area", "MAU": 29343}, {"network": "France", "MAU": 30396}, {"network": "Germany", "MAU": 33175}, {"network": "High income", "MAU": 30201}, {"network": "Hong Kong", "MAU": 32239}, {"network": "Italy", "MAU": 32222}, {"network": "Japan", "MAU": 31680}, {"network": "Luxembourg", "MAU": 65346}, {"network": "Macao", "MAU": 47307}, {"network": "Netherlands", "MAU": 33879}, {"network": "North America", "MAU": 38170}, {"network": "Norway", "MAU": 48305}, {"network": "Oman", "MAU": 37441}, {"network": "Post-demographic dividend", "MAU": 29640}, {"network": "Saudi Arabia", "MAU": 44905}, {"network": "Singapore", "MAU": 43266}, {"network": "Sweden", "MAU": 30031}, {"network": "Switzerland", "MAU": 46344}, {"network": "United Arab Emirates", "MAU": 99529}], "1995": [{"network": "Australia", "MAU": 30412}, {"network": "Austria", "MAU": 33791}, {"network": "Bahrain", "MAU": 42896}, {"network": "Belgium", "MAU": 32613}, {"network": "Bermuda", "MAU": 41999}, {"network": "Brunei", "MAU": 86116}, {"network": "Canada", "MAU": 32226}, {"network": "Denmark", "MAU": 37237}, {"network": "France", "MAU": 30918}, {"network": "Germany", "MAU": 33653}, {"network": "High income", "MAU": 30802}, {"network": "Hong Kong", "MAU": 32358}, {"network": "Italy", "MAU": 33152}, {"network": "Japan", "MAU": 32425}, {"network": "Kuwait", "MAU": 81017}, {"network": "Luxembourg", "MAU": 65357}, {"network": "Macao", "MAU": 47887}, {"network": "Netherlands", "MAU": 34762}, {"network": "North America", "MAU": 38757}, {"network": "Norway", "MAU": 50051}, {"network": "Oman", "MAU": 38316}, {"network": "Post-demographic dividend", "MAU": 30260}, {"network": "Saudi Arabia", "MAU": 43980}, {"network": "Singapore", "MAU": 44921}, {"network": "Sweden", "MAU": 31076}, {"network": "Switzerland", "MAU": 46256}, {"network": "United Arab Emirates", "MAU": 100976}], "1996": [{"network": "Austria", "MAU": 34539}, {"network": "Bahrain", "MAU": 43504}, {"network": "Belgium", "MAU": 33068}, {"network": "Bermuda", "MAU": 42816}, {"network": "Brunei", "MAU": 86411}, {"network": "Canada", "MAU": 32394}, {"network": "Denmark", "MAU": 38101}, {"network": "Germany", "MAU": 33830}, {"network": "Hong Kong", "MAU": 32271}, {"network": "Italy", "MAU": 33569}, {"network": "Japan", "MAU": 33345}, {"network": "Kuwait", "MAU": 80453}, {"network": "Luxembourg", "MAU": 65369}, {"network": "Macao", "MAU": 46731}, {"network": "Netherlands", "MAU": 35837}, {"network": "North America", "MAU": 39697}, {"network": "Norway", "MAU": 52302}, {"network": "Oman", "MAU": 38911}, {"network": "Saudi Arabia", "MAU": 44207}, {"network": "Singapore", "MAU": 46380}, {"network": "Switzerland", "MAU": 46301}, {"network": "United Arab Emirates", "MAU": 101754}], "1997": [{"network": "Australia", "MAU": 32055}, {"network": "Austria", "MAU": 35222}, {"network": "Bahrain", "MAU": 43624}, {"network": "Belgium", "MAU": 34212}, {"network": "Bermuda", "MAU": 44514}, {"network": "Brunei", "MAU": 83138}, {"network": "Canada", "MAU": 33425}, {"network": "Denmark", "MAU": 39180}, {"network": "France", "MAU": 31853}, {"network": "Germany", "MAU": 34405}, {"network": "High income", "MAU": 32448}, {"network": "Hong Kong", "MAU": 33635}, {"network": "Italy", "MAU": 34167}, {"network": "Japan", "MAU": 33624}, {"network": "Kuwait", "MAU": 78426}, {"network": "Luxembourg", "MAU": 68240}, {"network": "Macao", "MAU": 45673}, {"network": "Netherlands", "MAU": 37186}, {"network": "North America", "MAU": 40981}, {"network": "Norway", "MAU": 54768}, {"network": "Oman", "MAU": 41019}, {"network": "Post-demographic dividend", "MAU": 31825}, {"network": "San Marino", "MAU": 65352}, {"network": "Saudi Arabia", "MAU": 43838}, {"network": "Singapore", "MAU": 48568}, {"network": "Sweden", "MAU": 32393}, {"network": "Switzerland", "MAU": 47271}, {"network": "United Arab Emirates", "MAU": 104829}], "1998": [{"network": "Australia", "MAU": 33174}, {"network": "Austria", "MAU": 36443}, {"network": "Bahamas", "MAU": 30362}, {"network": "Bahrain", "MAU": 44315}, {"network": "Belgium", "MAU": 34813}, {"network": "Bermuda", "MAU": 45911}, {"network": "Brunei", "MAU": 80813}, {"network": "Canada", "MAU": 34424}, {"network": "Denmark", "MAU": 39904}, {"network": "Euro area", "MAU": 32062}, {"network": "Finland", "MAU": 31760}, {"network": "France", "MAU": 32865}, {"network": "Germany", "MAU": 35081}, {"network": "High income", "MAU": 33131}, {"network": "Hong Kong", "MAU": 31394}, {"network": "Iceland", "MAU": 32144}, {"network": "Ireland", "MAU": 32854}, {"network": "Italy", "MAU": 34709}, {"network": "Japan", "MAU": 33154}, {"network": "Kuwait", "MAU": 75940}, {"network": "Luxembourg", "MAU": 71471}, {"network": "Macao", "MAU": 42705}, {"network": "Netherlands", "MAU": 38629}, {"network": "North America", "MAU": 42302}, {"network": "Norway", "MAU": 55872}, {"network": "OECD members", "MAU": 30941}, {"network": "Oman", "MAU": 42063}, {"network": "Post-demographic dividend", "MAU": 32510}, {"network": "San Marino", "MAU": 69499}, {"network": "Saudi Arabia", "MAU": 44251}, {"network": "Singapore", "MAU": 45901}, {"network": "Sweden", "MAU": 33743}, {"network": "Switzerland", "MAU": 48540}, {"network": "United Arab Emirates", "MAU": 100018}, {"network": "United Kingdom", "MAU": 31305}], "1999": [{"network": "Australia", "MAU": 34443}, {"network": "Austria", "MAU": 37666}, {"network": "Bahamas", "MAU": 32142}, {"network": "Bahrain", "MAU": 44562}, {"network": "Belgium", "MAU": 35971}, {"network": "Bermuda", "MAU": 47199}, {"network": "Brunei", "MAU": 81476}, {"network": "Canada", "MAU": 35903}, {"network": "Cyprus", "MAU": 28761}, {"network": "Denmark", "MAU": 40945}, {"network": "Euro area", "MAU": 32923}, {"network": "European Union", "MAU": 29234}, {"network": "Finland", "MAU": 33094}, {"network": "France", "MAU": 33810}, {"network": "Germany", "MAU": 35755}, {"network": "High income", "MAU": 33976}, {"network": "Hong Kong", "MAU": 31875}, {"network": "Iceland", "MAU": 32995}, {"network": "Ireland", "MAU": 35935}, {"network": "Italy", "MAU": 35244}, {"network": "Japan", "MAU": 33010}, {"network": "Kuwait", "MAU": 69981}, {"network": "Luxembourg", "MAU": 76492}, {"network": "Macao", "MAU": 40824}, {"network": "Netherlands", "MAU": 40312}, {"network": "New Zealand", "MAU": 27161}, {"network": "North America", "MAU": 43809}, {"network": "Norway", "MAU": 56608}, {"network": "OECD members", "MAU": 31738}, {"network": "Oman", "MAU": 41954}, {"network": "Post-demographic dividend", "MAU": 33466}, {"network": "Puerto Rico", "MAU": 30105}, {"network": "San Marino", "MAU": 74921}, {"network": "Saudi Arabia", "MAU": 41721}, {"network": "Singapore", "MAU": 48311}, {"network": "Spain", "MAU": 28589}, {"network": "Sweden", "MAU": 35245}, {"network": "Switzerland", "MAU": 49128}, {"network": "United Arab Emirates", "MAU": 97753}, {"network": "United Kingdom", "MAU": 32205}], "2000": [{"network": "Australia", "MAU": 35377}, {"network": "Austria", "MAU": 38844}, {"network": "Bahrain", "MAU": 44942}, {"network": "Belgium", "MAU": 37188}, {"network": "Bermuda", "MAU": 51140}, {"network": "Brunei", "MAU": 82049}, {"network": "Canada", "MAU": 37431}, {"network": "Denmark", "MAU": 42337}, {"network": "Euro area", "MAU": 34082}, {"network": "Finland", "MAU": 34887}, {"network": "France", "MAU": 34880}, {"network": "Germany", "MAU": 36764}, {"network": "High income", "MAU": 35153}, {"network": "Hong Kong", "MAU": 34016}, {"network": "Iceland", "MAU": 34044}, {"network": "Ireland", "MAU": 38849}, {"network": "Italy", "MAU": 36535}, {"network": "Japan", "MAU": 33871}, {"network": "Kuwait", "MAU": 69920}, {"network": "Luxembourg", "MAU": 81689}, {"network": "Macao", "MAU": 42225}, {"network": "Netherlands", "MAU": 41721}, {"network": "North America", "MAU": 45146}, {"network": "Norway", "MAU": 58045}, {"network": "Oman", "MAU": 43965}, {"network": "Post-demographic dividend", "MAU": 34646}, {"network": "Qatar", "MAU": 108323}, {"network": "San Marino", "MAU": 75678}, {"network": "Saudi Arabia", "MAU": 43071}, {"network": "Singapore", "MAU": 51706}, {"network": "Sweden", "MAU": 36854}, {"network": "Switzerland", "MAU": 50775}, {"network": "United Arab Emirates", "MAU": 102634}], "2001": [{"network": "Australia", "MAU": 35578}, {"network": "Austria", "MAU": 39186}, {"network": "Bahrain", "MAU": 43887}, {"network": "Belgium", "MAU": 37361}, {"network": "Bermuda", "MAU": 54245}, {"network": "Brunei", "MAU": 82596}, {"network": "Canada", "MAU": 37712}, {"network": "Denmark", "MAU": 42533}, {"network": "Euro area", "MAU": 34697}, {"network": "Finland", "MAU": 35706}, {"network": "France", "MAU": 35304}, {"network": "Germany", "MAU": 37325}, {"network": "High income", "MAU": 35398}, {"network": "Hong Kong", "MAU": 33956}, {"network": "Iceland", "MAU": 34914}, {"network": "Ireland", "MAU": 40455}, {"network": "Italy", "MAU": 37162}, {"network": "Japan", "MAU": 33927}, {"network": "Kuwait", "MAU": 68472}, {"network": "Luxembourg", "MAU": 82766}, {"network": "Macao", "MAU": 42443}, {"network": "Netherlands", "MAU": 42287}, {"network": "North America", "MAU": 45166}, {"network": "Norway", "MAU": 58956}, {"network": "Oman", "MAU": 45400}, {"network": "Post-demographic dividend", "MAU": 35024}, {"network": "Qatar", "MAU": 108055}, {"network": "San Marino", "MAU": 78890}, {"network": "Saudi Arabia", "MAU": 41472}, {"network": "Singapore", "MAU": 49851}, {"network": "Sweden", "MAU": 37330}, {"network": "Switzerland", "MAU": 51117}, {"network": "United Arab Emirates", "MAU": 98716}, {"network": "United Kingdom", "MAU": 33981}]}
214 | chart.data = JSON.parse(JSON.stringify(allData[year]));
215 | categoryAxis.zoom({ start: 0, end: 1 / chart.data.length });
216 | 
217 | series.events.on("inited", function() {
218 |   setTimeout(function() {
219 |     playButton.isActive = false; // this starts interval
220 |   }, 2000)
221 | })
222 | 
223 | </script>
224 | </html>


--------------------------------------------------------------------------------
/Vealize/blob.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?>
2 | <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
3 |   <path fill="#FF0066" d="M51.7,-60.6C66.7,-49.1,78.4,-32.5,80.6,-14.9C82.8,2.6,75.6,21,66.3,39.3C57,57.5,45.5,75.5,29.5,81.4C13.5,87.4,-6.9,81.3,-24.1,72.4C-41.4,63.5,-55.3,51.8,-65.7,36.6C-76.1,21.4,-82.8,2.8,-80.6,-15C-78.4,-32.8,-67.2,-49.7,-52.2,-61.3C-37.3,-72.8,-18.7,-78.9,-0.1,-78.7C18.4,-78.5,36.7,-72.1,51.7,-60.6Z" transform="translate(100 100)" />
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/Vealize/code.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/code.css">
  6 |     <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  7 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  8 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  9 | 	<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" type="text/javascript" charset="utf-8"></script>
 10 | 	<meta property="og:type" content="website">
 11 |     <meta property="og:url" content="https://vealize.my.to/code.html">
 12 |     <meta property="og:title" content="Vealize | Code Execution Visualizer">
 13 |     <meta property="og:description" content="Visualize line-to-line code execution.">
 14 |     <meta property="og:image" content="img/pagecode.png">
 15 | 	<meta name="twitter:card" content="summary_large_image">
 16 | 	<link rel='icon' href='img/logo.png' type="image/png">
 17 | 	
 18 | </head>
 19 | <body>
 20 | 	<header class="header">
 21 | 		<h1>Vealize</h1>
 22 | 		<ul>
 23 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 24 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 25 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 26 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 27 | 		</ul>
 28 | 	</header>
 29 | 	<div id="content" class="content">
 30 | 		<h1 id="homePageTitle">Vealize</h1>
 31 | 		<p>Visualize Code Execution</p>
 32 | 		<p id="stuff">Visualize line-to-line code execution for several languages</p>
 33 | 		<button onclick="location.href = '#main'">Get Started</button>
 34 | 	</div>
 35 | 	<div id="main" class="main">
 36 | 		<div class="mainTitle">
 37 | 			<h1>Code Execution Visualizer</h1>
 38 | 		</div>
 39 | 		<div class="mainCode" id="mainCode">
 40 | 			<label for="langs" id="langLabel">Choose a Language: </label>
 41 | 			<select name="langs" id="langs" class="langs">
 42 | 				<option value="python">Python</option>
 43 | 				<option value="javascript">Javascript</option>
 44 | 				<option value="c">C</option>
 45 | 				<option value="c++">C++</option>
 46 | 			</select>
 47 | 			<textarea wrap="off" id="editor" placeholder="Default: Hello World"></textarea>
 48 | 			<button onclick="code();">Submit</button>
 49 | 			<iframe id="codeEx" class="codeEx" width="900" height="300" style="margin-top: 100px" frameborder="0"></iframe>
 50 | 		</div>
 51 | 	</div>
 52 | 	<script type="text/javascript">
 53 | 	var cat = $('.header').offset().top;
 54 | 
 55 | 	$(window).scroll(function() {                  
 56 | 	var cs = $(window).scrollTop(); 
 57 | 	if (cs > cat) {           
 58 | 	    $('.header').css({                      
 59 | 	        position: 'fixed',
 60 | 	        top: '0',
 61 | 	        left: '0',
 62 | 	        width: '100%',
 63 | 	        background: 'white'
 64 | 	    });
 65 | 	    $('.header').css("padding-top", "5px");
 66 | 	    $('.header').css("color", "black");
 67 | 	    $('.header').css("border-bottom", "1px solid #696969");
 68 | 	    $('.h').css("color", "black");
 69 | 	    $('.h.active').css("color", "#ff0158");
 70 | 	} else {                                   
 71 | 	    $('.header').css({                     
 72 | 	        position: 'relative',
 73 | 	        width: 'auto'
 74 | 	    });
 75 | 	    $('.header').css('background', '#03030e')
 76 | 	    $('.header').css("padding-top", "30px");
 77 | 	    $('.header').css("color", "white");
 78 | 	    $('.header').css("border-bottom", "none");
 79 | 	    $('.h').css("color", "white");
 80 | 	    $('.h.active').css("color", "#ff0158");
 81 | 	}
 82 | })
 83 | 	$("#editor").on('keyup', function (e) {
 84 | 		if (e.key === "Tab" || e.keyCode === 9)
 85 | 		{
 86 | 			e.preventDefault();
 87 |         	e.stopPropagation()
 88 | 			var a = document.getElementById("editor")
 89 | 			a.innerText = a.innerText + "    "
 90 | 		}
 91 | 	});
 92 | 	</script>
 93 | </body>
 94 | <script type="text/javascript">
 95 | 	function code(){
 96 | 		var lang = document.getElementById("langs").value.trim()
 97 | 		var value = document.getElementById("editor").value
 98 | 		if (value == ""){
 99 | 			if (lang == "python"){
100 | 				value = "print('Hello World')"
101 | 			}else if (lang == "javascript")
102 | 			{
103 | 				value = "console.log('Hello World')"
104 | 			}else if (lang == "c")
105 | 			{
106 | 				value = `#include <stdio.h>
107 | int main() {
108 |    printf("Hello, World!");
109 |    return 0;
110 | }`
111 | 			}else if (lang == "c++")
112 | 			{
113 | 				value = `#include <iostream>
114 | int main() {
115 |     std::cout << "Hello World!";
116 |     return 0;
117 | }`
118 | 			}
119 | 		}
120 | 		value = value.split("\n")
121 | 		value = value.join("<br>")
122 | 		var dataForm = new FormData();
123 | 		dataForm.append("code", value)
124 | 		fetch(`https://vealizeapi.root.sx/code/${lang}`, {method: "post", body: dataForm})
125 | 			.then(e => e.json())
126 | 			.then(data => editFrame(data))
127 | 	}
128 | 
129 | 
130 | 	function editFrame(data){
131 | 		var link = data.link
132 | 		document.getElementById("codeEx").remove()
133 | 		var main = document.getElementById("mainCode")
134 | 		main.innerHTML += `<iframe id="codeEx" class="codeEx" width="900" height="300" style="margin-top: 100px" frameborder="0" src=${link}></iframe>`
135 | 		console.log(link)
136 | 		var c = document.getElementById('codeEx')
137 | 		if (c.className.includes("active")){
138 | 			return
139 | 		}else{
140 | 			c.className = c.className + " active"
141 | 		}
142 | 	}
143 | </script>
144 | </html>


--------------------------------------------------------------------------------
/Vealize/css/barchartmain.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *
  4 | {
  5 | 	margin: 0;
  6 | 	padding: 0;
  7 | 	box-sizing: border-box;
  8 | 	font-family: 'Poppins', sans-serif;
  9 | 	scroll-behavior: smooth;
 10 | }
 11 | 
 12 | header
 13 | {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	flex-wrap: wrap;
 17 | 	flex-direction: row;
 18 | 	text-align: center;
 19 | 	padding-top: 30px;
 20 | 	padding-left: 40px;
 21 | 	background: rgb(3, 3, 14);
 22 | 	z-index: 10000;
 23 | 	color: #fff;
 24 | 	user-select: none;
 25 | 	transition: .4s ease-in-out;
 26 | }
 27 | 
 28 | header h1
 29 | {
 30 | 	margin-right: 60px;
 31 | 	cursor: pointer;
 32 | }
 33 | 
 34 | header ul
 35 | {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | 	flex-direction: row;
 39 | 	flex-wrap: wrap;
 40 | 	text-align: center;
 41 | }
 42 | 
 43 | header ul li
 44 | {
 45 | 	list-style: none;
 46 | 	margin-right: 30px;
 47 | 	cursor: pointer;
 48 | }
 49 | 
 50 | header ul li a
 51 | {
 52 | 	text-decoration: none;
 53 | 	font-size: 18px;
 54 | 	color: #fff;
 55 | }
 56 | 
 57 | header ul li a:after {
 58 |     transition: all ease-in-out .2s;
 59 |     background: none repeat scroll 0 0 #ffffff;
 60 |     content: "";
 61 |     display: block;
 62 |     height: 2px;
 63 |     width: 0;
 64 |     background: #ff0158;
 65 | }
 66 | 
 67 | header ul li a:hover:after {
 68 |     width: 100%;
 69 | }
 70 | 
 71 | header ul li .h.active
 72 | {
 73 | 	color: #ff0158;
 74 | }
 75 | 
 76 | header ul li .h.active:after
 77 | {
 78 | 	height: 0px;
 79 | }
 80 | 
 81 | .content
 82 | {
 83 | 	height: 90vh;
 84 | 	background: url(../img/bg.png);
 85 | 	background-repeat: no-repeat;
 86 | 	background-size: cover;
 87 | 	display: flex;
 88 | 	justify-content: center;
 89 | 	align-items: center;
 90 | 	color: #fff;
 91 | 	flex-direction: column;
 92 | }
 93 | 
 94 | .content h1
 95 | {
 96 | 	font-size: 4em;
 97 | 	position: relative;
 98 | 	bottom: 40px;
 99 | 	font-weight: 200;
100 | }
101 | 
102 | .content p
103 | {
104 | 	bottom: 40px;
105 | 	position: relative;
106 | 	font-size: 56px;
107 | 	font-weight: 700;
108 | }
109 | 
110 | .content #stuff
111 | {
112 | 	font-size: 18px;
113 | 	font-weight: 600;
114 | 	color: #696969;
115 | 	margin-top: 5px;
116 | 
117 | }
118 | 
119 | .content button
120 | {
121 | 	background: #ff0158;
122 | 	color: #fff;
123 | 	outline: none;
124 | 	border: none;
125 | 	border-radius: 40px;
126 | 	width: 180px;
127 | 	height: 50px;
128 | 	font-size: 18px;
129 | 	font-weight: 600;
130 | 	text-align: center;
131 | 	cursor: pointer;
132 | }
133 | 
134 | .content button:hover
135 | {
136 | 	background: #c71653;
137 | 	transition: .5s;
138 | 	color: #f2f2f2;
139 | }
140 | 
141 | #chartdiv
142 | {
143 |   width: 100%;
144 |   height: 550px;
145 |   margin-right: 30px;
146 | }
147 | 
148 | .main
149 | {
150 | 	margin-top: 60px;
151 | }
152 | 
153 | .mainTitle
154 | {
155 | 	display: flex;
156 | 	justify-content: center;
157 | }
158 | 
159 | .mainTitle h1
160 | {
161 | 	font-size: 3.5em;
162 | 	margin-bottom: 20px;
163 | }
164 | 
165 | .gBtns
166 | {
167 | 	display: flex;
168 | 	justify-content: center;
169 | 	flex-direction: row;
170 | 	flex-wrap: wrap;
171 | 	margin-bottom: 60px;
172 | }
173 | 
174 | .gBtns .gBtn
175 | {
176 | 	background: #ebebeb;
177 | 	color: #000;
178 | 	outline: none;
179 | 	border: none;
180 | 	border-radius: 40px;
181 | 	width: 180px;
182 | 	height: 50px;
183 | 	font-size: 18px;
184 | 	font-weight: 600;
185 | 	text-align: center;
186 | 	cursor: pointer;
187 | 	margin-right: 30px;
188 | }
189 | 
190 | .gBtns .gBtn:hover
191 | {
192 | 	background: #ebebeb;
193 | 	transition: .5s;
194 | 	color: #000;
195 | }
196 | 
197 | .gBtns .gBtn.active
198 | {
199 | 	background: #ff0158;
200 | 	color: #fff;
201 | }
202 | 
203 | .gBtns .gBtn.active:hover
204 | {
205 | 	background: #c71653;
206 | 	transition: .5s;
207 | 	color: #f2f2f2;
208 | }
209 | 
210 | ::-webkit-scrollbar {
211 |   width: 10px;
212 | }
213 | 
214 | /* Track */
215 | ::-webkit-scrollbar-track {
216 |   box-shadow: inset 0 0 5px grey; 
217 | }
218 |  
219 | /* Handle */
220 | ::-webkit-scrollbar-thumb {
221 |   background: #ff0158; 
222 |   border-radius: 8px;
223 | }
224 | 
225 | /* Handle on hover */
226 | ::-webkit-scrollbar-thumb:hover {
227 |   background: #ff0158; 
228 | }
229 | 


--------------------------------------------------------------------------------
/Vealize/css/code.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,500;1,600;1,700;1,800&display=swap');
  3 | 
  4 | *
  5 | {
  6 | 	margin: 0;
  7 | 	padding: 0;
  8 | 	box-sizing: border-box;
  9 | 	font-family: 'Poppins', sans-serif;
 10 | 	scroll-behavior: smooth;
 11 | }
 12 | 
 13 | header
 14 | {
 15 | 	display: flex;
 16 | 	align-items: center;
 17 | 	flex-wrap: wrap;
 18 | 	flex-direction: row;
 19 | 	text-align: center;
 20 | 	padding-top: 30px;
 21 | 	padding-left: 40px;
 22 | 	background: rgb(3, 3, 14);
 23 | 	z-index: 10000;
 24 | 	color: #fff;
 25 | 	user-select: none;
 26 | 	transition: .4s ease-in-out;
 27 | }
 28 | 
 29 | header h1
 30 | {
 31 | 	margin-right: 60px;
 32 | 	cursor: pointer;
 33 | }
 34 | 
 35 | header ul
 36 | {
 37 | 	display: flex;
 38 | 	align-items: center;
 39 | 	flex-direction: row;
 40 | 	flex-wrap: wrap;
 41 | 	text-align: center;
 42 | }
 43 | 
 44 | header ul li
 45 | {
 46 | 	list-style: none;
 47 | 	margin-right: 30px;
 48 | 	cursor: pointer;
 49 | }
 50 | 
 51 | header ul li a
 52 | {
 53 | 	text-decoration: none;
 54 | 	font-size: 18px;
 55 | 	color: #fff;
 56 | }
 57 | 
 58 | header ul li a:after {
 59 |     transition: all ease-in-out .2s;
 60 |     background: none repeat scroll 0 0 #ffffff;
 61 |     content: "";
 62 |     display: block;
 63 |     height: 2px;
 64 |     width: 0;
 65 |     background: #ff0158;
 66 | }
 67 | 
 68 | header ul li a:hover:after {
 69 |     width: 100%;
 70 | }
 71 | 
 72 | header ul li .h.active
 73 | {
 74 | 	color: #ff0158;
 75 | }
 76 | 
 77 | header ul li .h.active:after
 78 | {
 79 | 	height: 0px;
 80 | }
 81 | 
 82 | .content
 83 | {
 84 | 	height: 90vh;
 85 | 	background: url(../img/bg.png);
 86 | 	background-repeat: no-repeat;
 87 | 	background-size: cover;
 88 | 	display: flex;
 89 | 	justify-content: center;
 90 | 	align-items: center;
 91 | 	color: #fff;
 92 | 	flex-direction: column;
 93 | }
 94 | 
 95 | .content h1
 96 | {
 97 | 	font-size: 4em;
 98 | 	position: relative;
 99 | 	bottom: 40px;
100 | 	font-weight: 200;
101 | }
102 | 
103 | .content p
104 | {
105 | 	bottom: 40px;
106 | 	position: relative;
107 | 	font-size: 56px;
108 | 	font-weight: 700;
109 | }
110 | 
111 | .content #stuff
112 | {
113 | 	font-size: 18px;
114 | 	font-weight: 600;
115 | 	color: #696969;
116 | 	margin-top: 5px;
117 | 
118 | }
119 | 
120 | .content button
121 | {
122 | 	background: #ff0158;
123 | 	color: #fff;
124 | 	outline: none;
125 | 	border: none;
126 | 	border-radius: 40px;
127 | 	width: 180px;
128 | 	height: 50px;
129 | 	font-size: 18px;
130 | 	font-weight: 600;
131 | 	text-align: center;
132 | 	cursor: pointer;
133 | }
134 | 
135 | .content button:hover
136 | {
137 | 	background: #c71653;
138 | 	transition: .5s;
139 | 	color: #f2f2f2;
140 | }
141 | 
142 | .main
143 | {
144 | 	margin-top: 80px;
145 | 	height: 80vh;
146 | 	background: url(../img/bg5.png);
147 | 	background-repeat: no-repeat;
148 | 	background-position: right;
149 | 	background-size: 600px 500px;
150 | }
151 | 
152 | .mainTitle
153 | {
154 | 	text-align: center;
155 | }
156 | 
157 | .mainTitle h1
158 | {
159 | 	font-size: 3em;
160 | 	margin-bottom: 60px;
161 | }
162 | 
163 | .codeEx
164 | {
165 | 	display: none;
166 | }
167 | 
168 | .codeEx.active
169 | {
170 | 	display: block;
171 | 	margin-top: 100px;
172 | }
173 | 
174 | .mainCode
175 | {
176 | 	margin-left: 100px;
177 | 	display: flex;
178 | 	flex-direction: column;
179 | 	flex-wrap: wrap;
180 | }
181 | 
182 | .mainCode #editor
183 | {
184 | 	width: 500px;
185 | 	height: 300px;
186 | 	font-family: monospace;
187 | 	font-size: 18px;
188 | 	margin-top: 5px;
189 | 	border-radius: 5px;
190 | 	padding: 10px;
191 | }
192 | 
193 | .mainCode select
194 | {
195 | 	max-width: 150px;
196 | 	outline: none;
197 | 	border: none;
198 | 	background: rgb(245, 245, 245);
199 | 	padding: 10px;
200 | 	height: 40px;
201 | 	border-radius: 5px;
202 | 	font-size: 16px;
203 | }
204 | 
205 | .mainCode label
206 | {
207 | 	font-size: 20px;
208 | }
209 | 
210 | .mainCode button
211 | {
212 | 	background: #ff0158;
213 | 	color: #fff;
214 | 	outline: none;
215 | 	border: none;
216 | 	border-radius: 10px;
217 | 	width: 180px;
218 | 	height: 50px;
219 | 	font-size: 18px;
220 | 	font-weight: 600;
221 | 	text-align: center;
222 | 	cursor: pointer;
223 | 	margin-top: 10px;
224 | }
225 | 
226 | .mainCode button:hover
227 | {
228 | 	background: #c71653;
229 | 	transition: .5s;
230 | 	color: #f2f2f2;
231 | }
232 | 
233 | ::-webkit-scrollbar {
234 |   width: 10px;
235 | }
236 | 
237 | /* Track */
238 | ::-webkit-scrollbar-track {
239 |   box-shadow: inset 0 0 5px grey; 
240 | }
241 |  
242 | /* Handle */
243 | ::-webkit-scrollbar-thumb {
244 |   background: #ff0158; 
245 |   border-radius: 8px;
246 | }
247 | 
248 | /* Handle on hover */
249 | ::-webkit-scrollbar-thumb:hover {
250 |   background: #ff0158; 
251 | }
252 | 


--------------------------------------------------------------------------------
/Vealize/css/github.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *
  4 | {
  5 | 	margin: 0;
  6 | 	padding: 0;
  7 | 	box-sizing: border-box;
  8 | 	font-family: 'Poppins', sans-serif;
  9 | 	scroll-behavior: smooth;
 10 | }
 11 | 
 12 | header
 13 | {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	flex-wrap: wrap;
 17 | 	flex-direction: row;
 18 | 	text-align: center;
 19 | 	padding-top: 30px;
 20 | 	padding-left: 40px;
 21 | 	background: rgb(3, 3, 14);
 22 | 	z-index: 10000;
 23 | 	color: #fff;
 24 | 	user-select: none;
 25 | 	transition: .4s ease-in-out;
 26 | }
 27 | 
 28 | header h1
 29 | {
 30 | 	margin-right: 60px;
 31 | 	cursor: pointer;
 32 | }
 33 | 
 34 | header ul
 35 | {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | 	flex-direction: row;
 39 | 	flex-wrap: wrap;
 40 | 	text-align: center;
 41 | }
 42 | 
 43 | header ul li
 44 | {
 45 | 	list-style: none;
 46 | 	margin-right: 30px;
 47 | 	cursor: pointer;
 48 | }
 49 | 
 50 | header ul li a
 51 | {
 52 | 	text-decoration: none;
 53 | 	font-size: 18px;
 54 | 	color: #fff;
 55 | }
 56 | 
 57 | header ul li a:after {
 58 |     transition: all ease-in-out .2s;
 59 |     background: none repeat scroll 0 0 #ffffff;
 60 |     content: "";
 61 |     display: block;
 62 |     height: 2px;
 63 |     width: 0;
 64 |     background: #ff0158;
 65 | }
 66 | 
 67 | header ul li a:hover:after {
 68 |     width: 100%;
 69 | }
 70 | 
 71 | header ul li .h.active
 72 | {
 73 | 	color: #ff0158;
 74 | }
 75 | 
 76 | header ul li .h.active:after
 77 | {
 78 | 	height: 0px;
 79 | }
 80 | 
 81 | .content
 82 | {
 83 | 	height: 90vh;
 84 | 	background: url(../img/bg.png);
 85 | 	background-repeat: no-repeat;
 86 | 	background-size: cover;
 87 | 	display: flex;
 88 | 	justify-content: center;
 89 | 	align-items: center;
 90 | 	color: #fff;
 91 | 	flex-direction: column;
 92 | }
 93 | 
 94 | .content h1
 95 | {
 96 | 	font-size: 4em;
 97 | 	position: relative;
 98 | 	bottom: 40px;
 99 | 	font-weight: 200;
100 | }
101 | 
102 | .content p
103 | {
104 | 	bottom: 40px;
105 | 	position: relative;
106 | 	font-size: 56px;
107 | 	font-weight: 700;
108 | }
109 | 
110 | .content #stuff
111 | {
112 | 	font-size: 18px;
113 | 	font-weight: 600;
114 | 	color: #696969;
115 | 	margin-top: 5px;
116 | 
117 | }
118 | 
119 | .content button
120 | {
121 | 	background: #ff0158;
122 | 	color: #fff;
123 | 	outline: none;
124 | 	border: none;
125 | 	border-radius: 40px;
126 | 	width: 180px;
127 | 	height: 50px;
128 | 	font-size: 18px;
129 | 	font-weight: 600;
130 | 	text-align: center;
131 | 	cursor: pointer;
132 | }
133 | 
134 | .content button:hover
135 | {
136 | 	background: #c71653;
137 | 	transition: .5s;
138 | 	color: #f2f2f2;
139 | }
140 | 
141 | .inputData
142 | {
143 | 	margin-bottom: 30px;
144 | }
145 | 
146 | .inputData input
147 | {
148 | 	margin-bottom: 5px;
149 | 	outline: none;
150 | 	border: none;
151 | 	background: rgb(245, 245, 245);
152 | 	padding: 20px;
153 | 	width: 300px;
154 | 	height: 30px;
155 | 	border-radius: 5px;
156 | 	margin-right: 20px;
157 | }
158 | 
159 | .inputData button
160 | {
161 | 	margin-top: 20px;
162 | 	width: 130px;
163 | 	height: 40px;
164 | 	background: #ff0158;
165 | 	outline: none;
166 | 	border: none;
167 | 	border-radius: 40px;
168 | 	color: #fff;
169 | 	font-weight: 600;
170 | 	text-align: center;
171 | 	cursor: pointer;
172 | 	font-size: 17px;
173 | }
174 | 
175 | 
176 | .inputData button:hover
177 | {
178 | 	background: #c71653;
179 | 	transition: .5s;
180 | 	color: #f2f2f2;
181 | }
182 | 
183 | .main
184 | {
185 | 	margin-top: 60px;
186 | 	height: 100vh;
187 | }
188 | 
189 | .mainTitle
190 | {
191 | 	text-align: center;
192 | }
193 | 
194 | .mainTitle h1
195 | {
196 | 	font-size: 3em;
197 | }
198 | 
199 | .inputData
200 | {
201 | 	margin-top: 30px;
202 | 	margin-left: 30px;
203 | }
204 | 
205 | 
206 | .meta
207 | {
208 | 	width: 300px;
209 | 	height: 380px;
210 | 	border-radius: 5px;
211 | 	border: 2px solid #ff0158;
212 | 	margin-top: 30px;
213 | 	margin-left: 30px;
214 | 	padding: 20px;
215 | 	display: flex;
216 | 	flex-direction: column;
217 | }
218 | 
219 | .meta h1
220 | {
221 | 	font-size: 1.5em;
222 | }
223 | 
224 | .metaBlock
225 | {
226 | 	margin-top: 5px;
227 | }
228 | 
229 | .metaBlock span
230 | {
231 | 	margin-left: 5px;
232 | }
233 | 
234 | .graphBtns
235 | {
236 | 	display: flex;
237 | 	flex-wrap: wrap;
238 | 	margin-left: 355px;
239 | }
240 | 
241 | .graphBtns .graphBtn
242 | {
243 | 	width: 130px;
244 | 	height: 40px;
245 | 	background: #edeeef;
246 | 	outline: none;
247 | 	border: none;
248 | 	border-radius: 20px;
249 | 	color: #000;
250 | 	font-weight: 600;
251 | 	text-align: center;
252 | 	cursor: pointer;
253 | 	font-size: 15px;
254 | 	margin-right: 30px;
255 | }
256 | 
257 | 
258 | .graphBtns .graphBtn:hover
259 | {
260 | 	background: #e3e3e3;
261 | 	transition: .5s;
262 | 	color: #000;
263 | }
264 | 
265 | .graphBtns .graphBtn.active
266 | {
267 | 	background: #ff0158;
268 | 	color: #fff;
269 | }
270 | 
271 | .graphBtns .graphBtn.active:hover
272 | {
273 | 	background: #c71653;
274 | 	transition: .5s;
275 | 	color: #f2f2f2;
276 | }
277 | 
278 | .graphs
279 | {
280 | 	display: none;
281 | }
282 | 
283 | .graphs.active
284 | {
285 | 	display: block;
286 | }
287 | 
288 | .mainContent
289 | {
290 | 	display: flex;
291 | 	flex-wrap: wrap;
292 | }
293 | 
294 | .mainContent .graphs
295 | {
296 | 	display: flex;
297 | 	flex-wrap: wrap;
298 | }
299 | 
300 | .mainContent .chartjs
301 | {
302 | 	max-width: 550px;
303 | 	max-height: 300px;
304 | 	position: relative;
305 | 	margin-top: 60px;
306 | 	margin-left: 20px;
307 | }
308 | 
309 | ::-webkit-scrollbar {
310 |   width: 10px;
311 | }
312 | 
313 | /* Track */
314 | ::-webkit-scrollbar-track {
315 |   box-shadow: inset 0 0 5px grey; 
316 | }
317 |  
318 | /* Handle */
319 | ::-webkit-scrollbar-thumb {
320 |   background: #ff0158; 
321 |   border-radius: 8px;
322 | }
323 | 
324 | /* Handle on hover */
325 | ::-webkit-scrollbar-thumb:hover {
326 |   background: #ff0158; 
327 | }
328 | 


--------------------------------------------------------------------------------
/Vealize/css/maths.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *
  4 | {
  5 | 	margin: 0;
  6 | 	padding: 0;
  7 | 	box-sizing: border-box;
  8 | 	font-family: 'Poppins', sans-serif;
  9 | 	scroll-behavior: smooth;
 10 | }
 11 | 
 12 | header
 13 | {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	flex-wrap: wrap;
 17 | 	flex-direction: row;
 18 | 	text-align: center;
 19 | 	padding-top: 30px;
 20 | 	padding-left: 40px;
 21 | 	background: rgb(3, 3, 14);
 22 | 	z-index: 10000;
 23 | 	color: #fff;
 24 | 	user-select: none;
 25 | 	transition: .4s ease-in-out;
 26 | }
 27 | 
 28 | header h1
 29 | {
 30 | 	margin-right: 60px;
 31 | 	cursor: pointer;
 32 | }
 33 | 
 34 | header ul
 35 | {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | 	flex-direction: row;
 39 | 	flex-wrap: wrap;
 40 | 	text-align: center;
 41 | }
 42 | 
 43 | header ul li
 44 | {
 45 | 	list-style: none;
 46 | 	margin-right: 30px;
 47 | 	cursor: pointer;
 48 | }
 49 | 
 50 | header ul li a
 51 | {
 52 | 	text-decoration: none;
 53 | 	font-size: 18px;
 54 | 	color: #fff;
 55 | }
 56 | 
 57 | header ul li a:after {
 58 |     transition: all ease-in-out .2s;
 59 |     background: none repeat scroll 0 0 #ffffff;
 60 |     content: "";
 61 |     display: block;
 62 |     height: 2px;
 63 |     width: 0;
 64 |     background: #ff0158;
 65 | }
 66 | 
 67 | header ul li a:hover:after {
 68 |     width: 100%;
 69 | }
 70 | 
 71 | header ul li .h.active
 72 | {
 73 | 	color: #ff0158;
 74 | }
 75 | 
 76 | header ul li .h.active:after
 77 | {
 78 | 	height: 0px;
 79 | }
 80 | 
 81 | .content
 82 | {
 83 | 	height: 90vh;
 84 | 	background: url(../img/bg.png);
 85 | 	background-repeat: no-repeat;
 86 | 	background-size: cover;
 87 | 	display: flex;
 88 | 	justify-content: center;
 89 | 	align-items: center;
 90 | 	color: #fff;
 91 | 	flex-direction: column;
 92 | }
 93 | 
 94 | .content h1
 95 | {
 96 | 	font-size: 4em;
 97 | 	position: relative;
 98 | 	bottom: 40px;
 99 | 	font-weight: 200;
100 | }
101 | 
102 | .content p
103 | {
104 | 	bottom: 40px;
105 | 	position: relative;
106 | 	font-size: 56px;
107 | 	font-weight: 700;
108 | }
109 | 
110 | .content #stuff
111 | {
112 | 	font-size: 18px;
113 | 	font-weight: 600;
114 | 	color: #696969;
115 | 	margin-top: 5px;
116 | 
117 | }
118 | 
119 | .content button
120 | {
121 | 	background: #ff0158;
122 | 	color: #fff;
123 | 	outline: none;
124 | 	border: none;
125 | 	border-radius: 40px;
126 | 	width: 180px;
127 | 	height: 50px;
128 | 	font-size: 18px;
129 | 	font-weight: 600;
130 | 	text-align: center;
131 | 	cursor: pointer;
132 | }
133 | 
134 | .content button:hover
135 | {
136 | 	background: #c71653;
137 | 	transition: .5s;
138 | 	color: #f2f2f2;
139 | }
140 | 
141 | .main
142 | {
143 | 	display: flex;
144 | 	margin-left: 60px;
145 | 	flex-direction: column;
146 | 	margin-top: 60px;
147 | }
148 | 
149 | .mainTitle
150 | {
151 | 	text-align: center;
152 | 	margin-bottom: 40px;
153 | }
154 | 
155 | .mainTitle h1
156 | {
157 | 	letter-spacing: 1px;
158 | }
159 | 
160 | .mainInput input
161 | {
162 | 	margin-bottom: 5px;
163 | 	outline: none;
164 | 	border: none;
165 | 	background: rgb(245, 245, 245);
166 | 	padding: 20px;
167 | 	width: 1250px;
168 | 	height: 60px;
169 | 	border-radius: 5px;
170 | 	font-size: 16px;
171 | }
172 | 
173 | .main button
174 | {
175 | 	margin-top: 20px;
176 | 	width: 170px;
177 | 	height: 55px;
178 | 	background: #ff0158;
179 | 	outline: none;
180 | 	border: none;
181 | 	border-radius: 10px;
182 | 	color: #fff;
183 | 	font-weight: 600;
184 | 	text-align: center;
185 | 	cursor: pointer;
186 | 	font-size: 17px;
187 | }
188 | 
189 | 
190 | .main button:hover
191 | {
192 | 	background: #c71653;
193 | 	transition: .5s;
194 | 	color: #f2f2f2;
195 | }
196 | 
197 | .main textarea
198 | {
199 | 	resize: none;
200 | 	width: 1420px;
201 | 	height: 200px;
202 | 	border-radius: 5px;
203 | 	outline: none;
204 | 	border: none;
205 | 	background: rgb(245, 245, 245);
206 | 	padding: 20px;
207 | 	font-size: 16px;
208 | }
209 | 
210 | .main label
211 | {
212 | 	margin-top: 20px;
213 | }
214 | 
215 | .main label p
216 | {
217 | 	font-weight: 700;
218 | 	margin-bottom: 10px;
219 | 	font-size: 20px;
220 | }
221 | 
222 | .main label #rootPlotImg
223 | {
224 | 	width: 500px;
225 | 	height: 300px;
226 | }
227 | 
228 | .main label img
229 | {
230 | 	display: none;
231 | }
232 | 
233 | .main label .active
234 | {
235 | 	display: block;
236 | }
237 | 
238 | .main label #numberLineImg
239 | {
240 | 	width: 500px;
241 | }
242 | 
243 | ::-webkit-scrollbar {
244 |   width: 10px;
245 | }
246 | 
247 | /* Track */
248 | ::-webkit-scrollbar-track {
249 |   box-shadow: inset 0 0 5px grey; 
250 | }
251 |  
252 | /* Handle */
253 | ::-webkit-scrollbar-thumb {
254 |   background: #ff0158; 
255 |   border-radius: 8px;
256 | }
257 | 
258 | /* Handle on hover */
259 | ::-webkit-scrollbar-thumb:hover {
260 |   background: #ff0158; 
261 | }
262 | 


--------------------------------------------------------------------------------
/Vealize/css/own.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *
  4 | {
  5 | 	margin: 0;
  6 | 	padding: 0;
  7 | 	box-sizing: border-box;
  8 | 	font-family: 'Poppins', sans-serif;
  9 | 	scroll-behavior: smooth;
 10 | }
 11 | 
 12 | header
 13 | {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	flex-wrap: wrap;
 17 | 	flex-direction: row;
 18 | 	text-align: center;
 19 | 	padding-top: 30px;
 20 | 	padding-left: 40px;
 21 | 	background: rgb(3, 3, 14);
 22 | 	z-index: 10000;
 23 | 	color: #fff;
 24 | 	user-select: none;
 25 | 	transition: .4s ease-in-out;
 26 | }
 27 | 
 28 | header h1
 29 | {
 30 | 	margin-right: 60px;
 31 | 	cursor: pointer;
 32 | }
 33 | 
 34 | header ul
 35 | {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | 	flex-direction: row;
 39 | 	flex-wrap: wrap;
 40 | 	text-align: center;
 41 | }
 42 | 
 43 | header ul li
 44 | {
 45 | 	list-style: none;
 46 | 	margin-right: 30px;
 47 | 	cursor: pointer;
 48 | }
 49 | 
 50 | header ul li a
 51 | {
 52 | 	text-decoration: none;
 53 | 	font-size: 18px;
 54 | 	color: #fff;
 55 | }
 56 | 
 57 | header ul li a:after {
 58 |     transition: all ease-in-out .2s;
 59 |     background: none repeat scroll 0 0 #ffffff;
 60 |     content: "";
 61 |     display: block;
 62 |     height: 2px;
 63 |     width: 0;
 64 |     background: #ff0158;
 65 | }
 66 | 
 67 | header ul li a:hover:after {
 68 |     width: 100%;
 69 | }
 70 | 
 71 | header ul li .h.active
 72 | {
 73 | 	color: #ff0158;
 74 | }
 75 | 
 76 | header ul li .h.active:after
 77 | {
 78 | 	height: 0px;
 79 | }
 80 | 
 81 | .content
 82 | {
 83 | 	height: 90vh;
 84 | 	background: url(../img/bg.png);
 85 | 	background-repeat: no-repeat;
 86 | 	background-size: cover;
 87 | 	display: flex;
 88 | 	justify-content: center;
 89 | 	align-items: center;
 90 | 	color: #fff;
 91 | 	flex-direction: column;
 92 | }
 93 | 
 94 | .content h1
 95 | {
 96 | 	font-size: 4em;
 97 | 	position: relative;
 98 | 	bottom: 40px;
 99 | 	font-weight: 200;
100 | }
101 | 
102 | .content p
103 | {
104 | 	bottom: 40px;
105 | 	position: relative;
106 | 	font-size: 56px;
107 | 	font-weight: 700;
108 | }
109 | 
110 | .content #stuff
111 | {
112 | 	font-size: 18px;
113 | 	font-weight: 600;
114 | 	color: #696969;
115 | 	margin-top: 5px;
116 | 
117 | }
118 | 
119 | .content button
120 | {
121 | 	background: #ff0158;
122 | 	color: #fff;
123 | 	outline: none;
124 | 	border: none;
125 | 	border-radius: 40px;
126 | 	width: 180px;
127 | 	height: 50px;
128 | 	font-size: 18px;
129 | 	font-weight: 600;
130 | 	text-align: center;
131 | 	cursor: pointer;
132 | }
133 | 
134 | .content button:hover
135 | {
136 | 	background: #c71653;
137 | 	transition: .5s;
138 | 	color: #f2f2f2;
139 | }
140 | 
141 | .mainWrapper
142 | {
143 | 	display: flex;
144 | 	margin-left: 100px;
145 | 	flex-direction: column;
146 | 	flex-wrap: wrap;
147 | 	margin-top: 50px;
148 | }
149 | 
150 | .mainWrapper input
151 | {
152 | 	outline: none;
153 | 	border: none;
154 | 	margin-bottom: 5px;
155 | 	background: rgb(245, 245, 245);
156 | 	padding: 20px;
157 | 	width: 90%;
158 | 	height: 60px;
159 | 	border-radius: 5px;
160 | 	font-size: 16px;
161 | }
162 | 
163 | .main
164 | {
165 | 	display: flex;
166 | 	margin-top: 50px;
167 | 	align-items: center;
168 | 	flex-wrap: wrap;
169 | }
170 | 
171 | .main canvas
172 | {
173 | 	max-width: 600px;
174 | 	max-height: 300px;
175 | 	position: relative;
176 | 	margin-top: 60px;
177 | 	display: none;
178 | }
179 | 
180 | .main #chartjs-0
181 | {
182 | 	margin-right: 80px;
183 | }
184 | 
185 | .mainWrapper button
186 | {
187 | 	margin-top: 20px;
188 | 	width: 150px;
189 | 	height: 50px;
190 | 	background: #ff0158;
191 | 	outline: none;
192 | 	border: none;
193 | 	border-radius: 40px;
194 | 	color: #fff;
195 | 	font-weight: 600;
196 | 	text-align: center;
197 | 	cursor: pointer;
198 | 	font-size: 17px;
199 | }
200 | 
201 | 
202 | .mainWrapper button:hover
203 | {
204 | 	background: #c71653;
205 | 	transition: .5s;
206 | 	color: #f2f2f2;
207 | }
208 | 
209 | .mainWrapper h1
210 | {
211 | 	font-size: 2em;
212 | 	margin-bottom: 20px;
213 | }
214 | 
215 | ::-webkit-scrollbar {
216 |   width: 10px;
217 | }
218 | 
219 | /* Track */
220 | ::-webkit-scrollbar-track {
221 |   box-shadow: inset 0 0 5px grey; 
222 | }
223 |  
224 | /* Handle */
225 | ::-webkit-scrollbar-thumb {
226 |   background: #ff0158; 
227 |   border-radius: 8px;
228 | }
229 | 
230 | /* Handle on hover */
231 | ::-webkit-scrollbar-thumb:hover {
232 |   background: #ff0158; 
233 | }
234 | 


--------------------------------------------------------------------------------
/Vealize/css/pendulum.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *
  4 | {
  5 | 	margin: 0;
  6 | 	padding: 0;
  7 | 	box-sizing: border-box;
  8 | 	font-family: 'Poppins', sans-serif;
  9 | 	scroll-behavior: smooth;
 10 | }
 11 | 
 12 | header
 13 | {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	flex-wrap: wrap;
 17 | 	flex-direction: row;
 18 | 	text-align: center;
 19 | 	padding-top: 30px;
 20 | 	padding-left: 40px;
 21 | 	background: rgb(3, 3, 14);
 22 | 	z-index: 10000;
 23 | 	color: #fff;
 24 | 	user-select: none;
 25 | 	transition: .4s ease-in-out;
 26 | }
 27 | 
 28 | header h1
 29 | {
 30 | 	margin-right: 60px;
 31 | 	cursor: pointer;
 32 | }
 33 | 
 34 | header ul
 35 | {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | 	flex-direction: row;
 39 | 	flex-wrap: wrap;
 40 | 	text-align: center;
 41 | }
 42 | 
 43 | header ul li
 44 | {
 45 | 	list-style: none;
 46 | 	margin-right: 30px;
 47 | 	cursor: pointer;
 48 | }
 49 | 
 50 | header ul li a
 51 | {
 52 | 	text-decoration: none;
 53 | 	font-size: 18px;
 54 | 	color: #fff;
 55 | }
 56 | 
 57 | header ul li a:after {
 58 |     transition: all ease-in-out .2s;
 59 |     background: none repeat scroll 0 0 #ffffff;
 60 |     content: "";
 61 |     display: block;
 62 |     height: 2px;
 63 |     width: 0;
 64 |     background: #ff0158;
 65 | }
 66 | 
 67 | header ul li a:hover:after {
 68 |     width: 100%;
 69 | }
 70 | 
 71 | header ul li .h.active
 72 | {
 73 | 	color: #ff0158;
 74 | }
 75 | 
 76 | header ul li .h.active:after
 77 | {
 78 | 	height: 0px;
 79 | }
 80 | 
 81 | .content
 82 | {
 83 | 	height: 90vh;
 84 | 	background: url(../img/bg.png);
 85 | 	background-repeat: no-repeat;
 86 | 	background-size: cover;
 87 | 	display: flex;
 88 | 	justify-content: center;
 89 | 	align-items: center;
 90 | 	color: #fff;
 91 | 	flex-direction: column;
 92 | }
 93 | 
 94 | .content h1
 95 | {
 96 | 	font-size: 4em;
 97 | 	position: relative;
 98 | 	bottom: 40px;
 99 | 	font-weight: 200;
100 | }
101 | 
102 | .content p
103 | {
104 | 	bottom: 40px;
105 | 	position: relative;
106 | 	font-size: 56px;
107 | 	font-weight: 700;
108 | }
109 | 
110 | .content #stuff
111 | {
112 | 	font-size: 18px;
113 | 	font-weight: 600;
114 | 	color: #696969;
115 | 	margin-top: 5px;
116 | 
117 | }
118 | 
119 | .content button
120 | {
121 | 	background: #ff0158;
122 | 	color: #fff;
123 | 	outline: none;
124 | 	border: none;
125 | 	border-radius: 40px;
126 | 	width: 180px;
127 | 	height: 50px;
128 | 	font-size: 18px;
129 | 	font-weight: 600;
130 | 	text-align: center;
131 | 	cursor: pointer;
132 | }
133 | 
134 | .content button:hover
135 | {
136 | 	background: #c71653;
137 | 	transition: .5s;
138 | 	color: #f2f2f2;
139 | }
140 | 
141 | canvas
142 | {
143 | 	max-width: 100%;
144 | 	margin-top: 20px;
145 | 	max-height: 800px;
146 | }
147 | 
148 | .mainTitle
149 | {
150 | 	margin-top: 40px;
151 | 	display: flex;
152 | 	justify-content: center;
153 | 	align-items: center;
154 | }
155 | 
156 | .mainTitle h1
157 | {
158 | 	font-size: 3em;
159 | }
160 | 
161 | .rowWrap
162 | {
163 | 	display: flex;
164 | }
165 | 
166 | .controls
167 | {
168 | 	display: flex;
169 | 	flex-direction: column;
170 | 	flex-wrap: wrap;
171 | 	align-items: center;
172 | 	border: 2px solid black;
173 | 	border-radius: 10px;
174 | 	max-height: 400px;
175 | 	margin-top: 80px;
176 | 	padding: 30px;
177 | 	margin-right: 100px;
178 | }
179 | 
180 | .controls .controlKey
181 | {
182 | 	font-weight: 900;
183 | 	color: #ff0158;
184 | }
185 | 
186 | .controls .first
187 | {
188 | 	margin-top: 40px;
189 | }
190 | 
191 | .controls h2
192 | {
193 | 	text-transform: uppercase;
194 | 	font-size: 2em;
195 | }
196 | 
197 | .titleP
198 | {
199 | 	color: #ff0158;
200 | }
201 | 
202 | ::-webkit-scrollbar {
203 |   width: 10px;
204 | }
205 | 
206 | /* Track */
207 | ::-webkit-scrollbar-track {
208 |   box-shadow: inset 0 0 5px grey; 
209 | }
210 |  
211 | /* Handle */
212 | ::-webkit-scrollbar-thumb {
213 |   background: #ff0158; 
214 |   border-radius: 8px;
215 | }
216 | 
217 | /* Handle on hover */
218 | ::-webkit-scrollbar-thumb:hover {
219 |   background: #ff0158; 
220 | }
221 | 


--------------------------------------------------------------------------------
/Vealize/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | *
  4 | {
  5 | 	margin: 0;
  6 | 	padding: 0;
  7 | 	box-sizing: border-box;
  8 | 	font-family: 'Poppins', sans-serif;
  9 | 	scroll-behavior: smooth;
 10 | }
 11 | 
 12 | header
 13 | {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	flex-wrap: wrap;
 17 | 	flex-direction: row;
 18 | 	text-align: center;
 19 | 	padding-top: 30px;
 20 | 	padding-left: 40px;
 21 | 	background: rgb(3, 3, 14);
 22 | 	z-index: 10000;
 23 | 	color: #fff;
 24 | 	user-select: none;
 25 | 	transition: .4s ease-in-out;
 26 | }
 27 | 
 28 | header h1
 29 | {
 30 | 	margin-right: 60px;
 31 | 	cursor: pointer;
 32 | }
 33 | 
 34 | header ul
 35 | {
 36 | 	display: flex;
 37 | 	align-items: center;
 38 | 	flex-direction: row;
 39 | 	flex-wrap: wrap;
 40 | 	text-align: center;
 41 | }
 42 | 
 43 | header ul li
 44 | {
 45 | 	list-style: none;
 46 | 	margin-right: 30px;
 47 | 	cursor: pointer;
 48 | }
 49 | 
 50 | header ul li a
 51 | {
 52 | 	text-decoration: none;
 53 | 	font-size: 18px;
 54 | 	color: #fff;
 55 | }
 56 | 
 57 | header ul li a:after {
 58 |     transition: all ease-in-out .2s;
 59 |     background: none repeat scroll 0 0 #ffffff;
 60 |     content: "";
 61 |     display: block;
 62 |     height: 2px;
 63 |     width: 0;
 64 |     background: #ff0158;
 65 | }
 66 | 
 67 | header ul li a:hover:after {
 68 |     width: 100%;
 69 | }
 70 | 
 71 | header ul li .h.active
 72 | {
 73 | 	color: #ff0158;
 74 | }
 75 | 
 76 | header ul li .h.active:after
 77 | {
 78 | 	height: 0px;
 79 | }
 80 | 
 81 | .content
 82 | {
 83 | 	height: 90vh;
 84 | 	background: url(../img/bg.png);
 85 | 	background-repeat: no-repeat;
 86 | 	background-size: cover;
 87 | 	display: flex;
 88 | 	justify-content: center;
 89 | 	align-items: center;
 90 | 	color: #fff;
 91 | 	flex-direction: column;
 92 | }
 93 | 
 94 | .content h1
 95 | {
 96 | 	font-size: 4em;
 97 | 	position: relative;
 98 | 	bottom: 40px;
 99 | 	font-weight: 200;
100 | }
101 | 
102 | .content p
103 | {
104 | 	bottom: 40px;
105 | 	position: relative;
106 | 	font-size: 56px;
107 | 	font-weight: 700;
108 | }
109 | 
110 | .content #stuff
111 | {
112 | 	font-size: 18px;
113 | 	font-weight: 600;
114 | 	color: #696969;
115 | 	margin-top: 5px;
116 | 
117 | }
118 | 
119 | .content button
120 | {
121 | 	background: #ff0158;
122 | 	color: #fff;
123 | 	outline: none;
124 | 	border: none;
125 | 	border-radius: 40px;
126 | 	width: 180px;
127 | 	height: 50px;
128 | 	font-size: 18px;
129 | 	font-weight: 600;
130 | 	text-align: center;
131 | 	cursor: pointer;
132 | }
133 | 
134 | .content button:hover
135 | {
136 | 	background: #c71653;
137 | 	transition: .5s;
138 | 	color: #f2f2f2;
139 | }
140 | 
141 | .choose
142 | {
143 | 	height: 80vh;
144 | 	display: flex;
145 | 	justify-content: center;
146 | 	flex-direction: column;
147 | 	flex-wrap: wrap;
148 | 	text-align: left;
149 | 	margin-left: 100px;
150 | 	margin-top: 30px;
151 | 	background: url(../img/bg2.png);
152 | 	background-repeat: no-repeat;
153 | 	background-position: right;
154 | }
155 | 
156 | .choose h1
157 | {
158 | 	font-size: 3em;
159 | 	font-weight: 200;
160 | }
161 | 
162 | .choose .chooseTitle
163 | {
164 | 	font-weight: 700;
165 | 	border-bottom: 5px solid #ff0158;
166 | 	font-size: 4em;
167 | 	max-width: 4.7em;
168 | }
169 | 
170 | .choose p
171 | {
172 | 	font-size: 18px;
173 | 	margin-top: 20px;
174 | }
175 | 
176 | .choose h2
177 | {
178 | 	font-weight: 400;
179 | 	margin-top: 20px;
180 | }
181 | 
182 | .features
183 | {
184 | 	margin-top: 100px;
185 | 	background: url(../img/bg3.png);
186 | 	background-repeat: no-repeat;
187 | 	background-attachment: fixed;
188 | 	background-size: cover;
189 | 	color: #fff;
190 | 	padding-top: 50px;
191 | 	height: 90vh;
192 | }
193 | 
194 | .featuresTitle
195 | {
196 | 	text-align: center;
197 | }
198 | 
199 | .featuresTitle h1
200 | {
201 | 	font-size: 3em;
202 | }
203 | 
204 | .featuresTitle h1 span
205 | {
206 | 	color: #ff0158;
207 | 	margin-left: 10px;
208 | }
209 | 
210 | .featureCardWrapper
211 | {
212 | 	margin-left: 100px;
213 | 	display: flex;
214 | 	justify-content: center;
215 | 	flex-wrap: wrap;
216 | 	flex-direction: row;
217 | }
218 | 
219 | .featureCard
220 | {
221 | 	max-width: 400px;
222 | 	margin-top: 50px;
223 | 	margin-right: 10px;
224 | 	padding: 20px;
225 | 	border-bottom: 2px solid white;
226 | }
227 | 
228 | .featureCard p
229 | {
230 | 	font-weight: 300;
231 | 
232 | }
233 | 
234 | .featureCard button
235 | {
236 | 	outline: none;
237 | 	border: none;
238 | 	height: 40px;
239 | 	border-radius: 20px;
240 | 	margin-top: 20px;
241 | 	background: #ff0158;
242 | 	width: 150px;
243 | 	color: #fff;
244 | 	font-weight: 600;
245 | 	cursor: pointer;
246 | }
247 | 
248 | .featureCard button:hover
249 | {
250 | 	background: #c71653;
251 | 	transition: .5s;
252 | 	color: #f2f2f2;
253 | }
254 | 
255 | .contact
256 | {
257 | 	margin-top: 100px;
258 | 	height: 80vh;
259 | }
260 | 
261 | .contactTitle
262 | {
263 | 	display: flex;
264 | 	flex-wrap: wrap;
265 | 	flex-direction: column;
266 | 	align-items: center;
267 | }
268 | 
269 | .contactTitle h1
270 | {
271 | 	font-size: 3.5em;
272 | }
273 | 
274 | .contactTitle p
275 | {
276 | 	font-weight: 300;
277 | 	font-size: 18px;
278 | }
279 | 
280 | .contactTitle p span
281 | {
282 | 	color: #ff0158;
283 | }
284 | 
285 | .contactBlock
286 | {
287 | 	display: flex;
288 | 	flex-direction: column;
289 | 	flex-wrap: wrap;
290 | 	align-items: center;
291 | 	margin-top: 40px;
292 | }
293 | 
294 | .contactBlock input
295 | {
296 | 	margin-bottom: 5px;
297 | 	outline: none;
298 | 	border: none;
299 | 	background: rgb(245, 245, 245);
300 | 	padding: 20px;
301 | 	width: 800px;
302 | 	height: 60px;
303 | 	border-radius: 5px;
304 | }
305 | 
306 | .contactBlock textarea
307 | {
308 | 	resize: none;
309 | 	width: 800px;
310 | 	height: 200px;
311 | 	border-radius: 5px;
312 | 	outline: none;
313 | 	border: none;
314 | 	background: rgb(245, 245, 245);
315 | 	padding: 20px;
316 | }
317 | 
318 | .contactBlock button
319 | {
320 | 	margin-top: 20px;
321 | 	width: 200px;
322 | 	height: 55px;
323 | 	background: #ff0158;
324 | 	outline: none;
325 | 	border: none;
326 | 	border-radius: 40px;
327 | 	color: #fff;
328 | 	font-weight: 600;
329 | 	text-align: center;
330 | 	cursor: pointer;
331 | 	font-size: 17px;
332 | }
333 | 
334 | 
335 | .contactBlock button:hover
336 | {
337 | 	background: #c71653;
338 | 	transition: .5s;
339 | 	color: #f2f2f2;
340 | }
341 | 
342 | .follow
343 | {
344 | 	margin-top: 50px;
345 | 	background: url(../img/bg4.png);
346 | 	background-repeat: no-repeat;
347 | 	background-attachment: fixed;
348 | 	background-size: cover;
349 | 	height: 80vh;
350 | 	color: #fff;
351 | }
352 | 
353 | .followTitle
354 | {
355 | 	display: flex;
356 | 	align-items: center;
357 | 	flex-direction: column;
358 | 	flex-wrap: wrap;
359 | 	padding-top: 60px;
360 | }
361 | 
362 | .followTitle h1
363 | {
364 | 	font-size: 4em;
365 | }
366 | 
367 | .followTitle p
368 | {
369 | 	font-weight: 400;
370 | 	color: #f5f5f5;
371 | }
372 | 
373 | .followBlock
374 | {
375 | 	margin-top: 100px;
376 | 	display: flex;
377 | 	justify-content: center;
378 | 	align-items: center;
379 | 	flex-wrap: wrap;
380 | 	text-align: center;
381 | }
382 | 
383 | .followBlock .sm
384 | {
385 | 	margin-right: 100px;
386 | 	cursor: pointer;
387 | }
388 | 
389 | .followBlock .sm i
390 | {
391 | 	font-size: 4em;
392 | }
393 | 
394 | .followBlock .sm p
395 | {
396 | 	margin-top: 30px;
397 | }
398 | 
399 | .followBlock .fa-facebook-f:hover
400 | {
401 | 	color: rgb(21, 163, 250);
402 | }
403 | 
404 | .followBlock .fa-instagram:hover
405 | {
406 | 	color: rgb(238, 91, 0);
407 | }
408 | 
409 | .followBlock .fa-twitter:hover
410 | {
411 | 	color: rgb(29, 161, 242);
412 | }
413 | 
414 | .followBlock .fa-youtube:hover
415 | {
416 | 	color: rgb(255, 0, 0);
417 | }
418 | 
419 | .followBlock .fa-envelope:hover
420 | {
421 | 	color: rgb(52, 168, 83);
422 | }
423 | 
424 | ::-webkit-scrollbar {
425 |   width: 10px;
426 | }
427 | 
428 | /* Track */
429 | ::-webkit-scrollbar-track {
430 |   box-shadow: inset 0 0 5px grey; 
431 | }
432 |  
433 | /* Handle */
434 | ::-webkit-scrollbar-thumb {
435 |   background: #ff0158; 
436 |   border-radius: 8px;
437 | }
438 | 
439 | /* Handle on hover */
440 | ::-webkit-scrollbar-thumb:hover {
441 |   background: #ff0158; 
442 | }
443 | 


--------------------------------------------------------------------------------
/Vealize/github.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/github.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  9 | 	<meta property="og:type" content="website">
 10 |     <meta property="og:url" content="https://vealize.my.to/github.html">
 11 |     <meta property="og:title" content="Vealize | Github Repository Visualizer">
 12 |     <meta property="og:description" content="Visualize github repositories in a unique way.">
 13 |     <meta property="og:image" content="img/pagegit.png">
 14 | 	<meta name="twitter:card" content="summary_large_image">
 15 | 	<link rel='icon' href='img/logo.png' type="image/png">
 16 | 	
 17 | 
 18 | </head>
 19 | <body>
 20 | 	<header class="header">
 21 | 		<h1>Vealize</h1>
 22 | 		<ul>
 23 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 24 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 25 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 26 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 27 | 		</ul>
 28 | 	</header>
 29 | 	<div id="content" class="content">
 30 | 		<h1 id="homePageTitle">Vealize</h1>
 31 | 		<p>Visualize Github Repos</p>
 32 | 		<p id="stuff">Visualize Github Repositories in a unique way!</p>
 33 | 		<button onclick="location.href = '#main'">Get Started</button>
 34 | 	</div>
 35 | 	<div id="main" class="main">
 36 | 		<div class="mainTitle">
 37 | 			<h1>Github Repo Visualizer</h1>
 38 | 		</div>
 39 | 		<div class="inputData">
 40 | 			<input type="text" id="username" placeholder="Username">
 41 | 			<input type="text" id="repo" placeholder="Repository">
 42 | 			<button onclick="githubViz()">Submit</button>
 43 | 		</div>
 44 | 		<div class="graphBtns">
 45 | 			<button class="graphBtn active" id="forkGraphBtn">Forks</button>
 46 | 			<button class="graphBtn" id="issuesGraphBtn">Issues</button>
 47 | 			<button class="graphBtn" id="languageGraphBtn">Languages</button>
 48 | 		</div>
 49 | 		<div class="mainContent">
 50 | 			<div class="meta">
 51 | 				<h1>Meta Data</h1>
 52 | 				<div class="metaBlock">
 53 | 					<svg class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path></svg>
 54 | 					<span id="urlSpan">URL: </span>
 55 | 				</div>
 56 | 				<div class="metaBlock">
 57 | 					<svg class="octicon octicon-repo color-text-secondary mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
 58 | 					<span id="ownerSpan">Owner: </span>
 59 | 				</div>
 60 | 				<div class="metaBlock">
 61 | 					<svg class="octicon octicon-repo color-text-secondary mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
 62 | 					<span id="nameSpan">Name: </span>
 63 | 				</div>
 64 | 				<div class="metaBlock">
 65 | 					<i class="far fa-clock"></i>
 66 | 					<span id="createdSpan">Created At: </span>
 67 | 				</div>
 68 | 				<div class="metaBlock">
 69 | 					<svg class="octicon octicon-git-branch text-gray" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
 70 | 					<span id="branchSpan">Default Branch: </span>
 71 | 				</div>
 72 | 				<div class="metaBlock">
 73 | 					<i class="fas fa-donate"></i>
 74 | 					<span id="contSpan">Contributors: </span>
 75 | 				</div>
 76 | 				<div class="metaBlock">
 77 | 					<svg class="octicon octicon-repo-forked" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
 78 | 					<span id="forkCountSpan">Forks: </span>
 79 | 				</div>
 80 | 				<div class="metaBlock">
 81 | 					<svg class="octicon octicon-repo-forked" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
 82 | 					<span id="forkSpan">Forked: </span>
 83 | 				</div>
 84 | 				<div class="metaBlock">
 85 | 					<svg class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
 86 | 					<span id="issueSpan">Issues: </span>
 87 | 				</div>
 88 | 				<div class="metaBlock">
 89 | 					<svg class="octicon octicon-star-fill mr-1" height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path></svg>
 90 | 					<span id="starSpan">Stars: </span>
 91 | 				</div>
 92 | 				
 93 | 			</div>
 94 | 			<div class="graphs">
 95 | 				<canvas id="chartjs-0" class="chartjs" width="200" height="100"></canvas>
 96 | 				<canvas id="chartjs-1" class="chartjs" width="662" height="331"></canvas>
 97 | 			</div>
 98 | 		</div>
 99 | 	</div>
100 | 	<script type="text/javascript">
101 | 	var cat = $('.header').offset().top;
102 | 
103 | 	$(window).scroll(function() {                  
104 | 	var cs = $(window).scrollTop(); 
105 | 	if (cs > cat) {           
106 | 	    $('.header').css({                      
107 | 	        position: 'fixed',
108 | 	        top: '0',
109 | 	        left: '0',
110 | 	        width: '100%',
111 | 	        background: 'white'
112 | 	    });
113 | 	    $('.header').css("padding-top", "5px");
114 | 	    $('.header').css("color", "black");
115 | 	    $('.header').css("border-bottom", "1px solid #696969");
116 | 	    $('.h').css("color", "black");
117 | 	    $('.h.active').css("color", "#ff0158");
118 | 	} else {                                   
119 | 	    $('.header').css({                     
120 | 	        position: 'relative',
121 | 	        width: 'auto'
122 | 	    });
123 | 	    $('.header').css('background', '#03030e')
124 | 	    $('.header').css("padding-top", "30px");
125 | 	    $('.header').css("color", "white");
126 | 	    $('.header').css("border-bottom", "none");
127 | 	    $('.h').css("color", "white");
128 | 	    $('.h.active').css("color", "#ff0158");
129 | 	}
130 | })
131 | 	var graphBtns = $('.graphBtn')
132 | 	for (var i = 0; i<graphBtns.length; i++){
133 | 		graphBtns[i].addEventListener("click", function(){
134 | 			if (this.id == "forkGraphBtn"){
135 | 				document.getElementById("issuesGraphBtn").className = document.getElementById("issuesGraphBtn").className.replace(" active", "")
136 | 				document.getElementById("languageGraphBtn").className = document.getElementById("languageGraphBtn").className.replace(" active", "")
137 | 				if (this.className.includes("active")){
138 | 					return
139 | 				}else{
140 | 					this.classList.toggle("active")
141 | 					
142 | 				}
143 | 				getGraph(this.id)
144 | 
145 | 			} else if (this.id == "issuesGraphBtn"){
146 | 				document.getElementById("forkGraphBtn").className = document.getElementById("forkGraphBtn").className.replace(" active", "")
147 | 				document.getElementById("languageGraphBtn").className = document.getElementById("languageGraphBtn").className.replace(" active", "")
148 | 				if (this.className.includes("active")){
149 | 					return
150 | 				}else{
151 | 					this.classList.toggle("active")
152 | 				}
153 | 				getGraph(this.id)
154 | 
155 | 			} else{
156 | 				document.getElementById("forkGraphBtn").className = document.getElementById("forkGraphBtn").className.replace(" active", "")
157 | 				document.getElementById("issuesGraphBtn").className = document.getElementById("issuesGraphBtn").className.replace(" active", "")
158 | 				if (this.className.includes("active")){
159 | 					return
160 | 				}else{
161 | 					this.classList.toggle("active")
162 | 				}
163 | 				getGraph(this.id)
164 | 
165 | 
166 | 			}
167 | 		})
168 | 	}
169 | </script>
170 | </body>
171 | <script type="text/javascript">
172 | 	function githubViz(){
173 | 		var owner = document.getElementById("username").value.trim()
174 | 		var repo = document.getElementById("repo").value.trim()
175 | 		fetch(`https://vealizeapi.root.sx/github/${owner}/${repo}`)
176 | 			.then(e => e.json())
177 | 			.then(data => edit(data))
178 | 	}
179 | 
180 | 	function edit(data){
181 | 		var urlSpan = document.getElementById("urlSpan")
182 | 		var ownerSpan = document.getElementById("ownerSpan")
183 | 		var nameSpan = document.getElementById("nameSpan")
184 | 		var createdSpan = document.getElementById("createdSpan")
185 | 		var branchSpan = document.getElementById("branchSpan")
186 | 		var contSpan = document.getElementById("contSpan")
187 | 		var forkCountSpan = document.getElementById("forkCountSpan")
188 | 		var forkSpan = document.getElementById("forkSpan")
189 | 		var issueSpan = document.getElementById("issueSpan")
190 | 		var starSpan = document.getElementById("starSpan")
191 | 
192 | 		urlSpan.innerHTML = "URL: " + `<a href=${data.url}>Link</a>`
193 | 		ownerSpan.innerHTML = "Owner: " + data.owner.name
194 | 		nameSpan.innerHTML = "Name: " + data.name
195 | 		createdSpan.innerHTML = "Created At: " + data.createdAt
196 | 		branchSpan.innerHTML = "Default Branch: " + data.defaultBranch
197 | 		contSpan.innerHTML = "Contributors: " + data.contributorsCount
198 | 		forkCountSpan.innerHTML = "Forks: " + data.forksCount
199 | 		forkSpan.innerHTML = "Forked: " + data.isForked
200 | 		issueSpan.innerHTML = "Issues: " + data.issuesCount
201 | 		starSpan.innerHTML = "Stars: " + data.stargazers
202 | 
203 | 		getGraph($('.graphBtn.active')[0].id)
204 | 	}
205 | 
206 | 	// function getGraphs(){
207 | 	// 	var active = $('.graphBtn.active')
208 | 	// 	active = active[0]
209 | 	// 	if (active.innerText == "Forks"){
210 | 	// 		$('#issuesGraphBtn').removeClass("active")
211 | 	// 		$('#languageGraphBtn').removeClass("active")
212 | 	// 		$('#forkGraphBtn').addClass("active")
213 | 
214 | 	// 	}else if (active.innerText == "Issues"){
215 | 	// 		$('#forkGraphBtn').removeClass("active")
216 | 	// 		$('#languageGraphBtn').removeClass("active")
217 | 	// 		$('#issuesGraphBtn').addClass("active")
218 | 
219 | 	// 	}else
220 | 	// 	{
221 | 	// 		$('#forkGraphBtn').removeClass("active")
222 | 	// 		$('#issuesGraphBtn').removeClass("active")
223 | 	// 		$('#languageGraphBtn').addClass("active")
224 | 
225 | 	// 	}
226 | 	// }
227 | 
228 | 	function getGraph(active){
229 | 		var owner = document.getElementById("username").value.trim()
230 | 		var repo = document.getElementById("repo").value.trim()
231 | 		if (owner == "" || repo == ""){
232 | 			return
233 | 		}
234 | 		fetch(`https://vealizeapi.root.sx/githubGraph/${owner}/${repo}`)
235 | 			.then(e => e.json())
236 | 			.then(data => setGraph(data, active))
237 | 
238 | 	}
239 | 	function removeData(chart) {
240 | 		try{
241 | 		    chart.data.labels.pop();
242 | 		    chart.data.datasets.forEach((dataset) => {
243 | 		        dataset.data.pop();
244 | 		    });
245 | 		    chart.update();}
246 | 		catch(err){console.log(err)}
247 | 	}
248 | 	function setGraph(data, active){
249 | 		if (active == "forkGraphBtn"){
250 | 			var d = Object.keys(data.forks)
251 | 			var values = d.map(key => parseInt(data.forks[key]))
252 | 			var label = "Forks"
253 | 		}else if(active == "issuesGraphBtn"){
254 | 			var d = Object.keys(data.issues)
255 | 			var values = d.map(key => parseInt(data.issues[key]))
256 | 			var label = "Issues"
257 | 		}else {
258 | 			var d = Object.keys(data.languages)
259 | 			var values = d.map(key => parseInt(data.languages[key]))
260 | 			var label = "Languages"
261 | 		}
262 | 		var datasets = [{"label": label, "data": values, "fill": false,"borderColor": "rgb(75, 192, 192)","lineTension": 0.1}]
263 | 		var lineData = {"type":"line","data":{"labels":d,"datasets": datasets, "options": {}}}
264 | 		var line = document.getElementById("chartjs-0")
265 | 		var bar = document.getElementById("chartjs-1")
266 | 		line.remove()
267 | 		bar.remove()
268 | 		$('.graphs').prepend('<canvas id="chartjs-0" class="chartjs" width="200" height="100"></canvas>')
269 | 		$('.graphs').prepend('<canvas id="chartjs-1" class="chartjs" width="662" height="331"></canvas>')
270 | 		var line = document.getElementById("chartjs-0")
271 | 		var bar = document.getElementById("chartjs-1")
272 | 		function random_rgba() {
273 |     		var o = Math.round, r = Math.random, s = 255;
274 |     		return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + "1" + ')';
275 | 		}
276 | 		var bgs = []
277 | 		for (var i = 0; i < d.length; i++){
278 | 			bgs.push(random_rgba())
279 | 		}
280 | 
281 | 		datasets = [{"label": label, "data": values, "fill": false,"lineTension": 0.1, "backgroundColor":bgs}]
282 | 		var barData = {"type": "bar","data":{"labels":d,"datasets": datasets, "options": {}}}
283 | 		var pieData = {"type": "doughnut","data":{"labels":d,"datasets": datasets, "options": {}}}
284 | 
285 | 		// line.style.display = "block"
286 | 		bar.style.display = "block"
287 | 
288 | 
289 | 		// new Chart(line, lineData)
290 | 		if (label != "Languages"){
291 | 			line.style.display = "block"
292 | 			new Chart(line, lineData)
293 | 		}else{
294 | 			new Chart(line, pieData)
295 | 			line.style.display = "block"
296 | 
297 | 		}
298 | 		new Chart(bar, barData)
299 | 
300 | 		var graphs = $(".graphs")[0]
301 | 		if (graphs.className.includes("active")){
302 | 			return
303 | 		}else{
304 | 			graphs.className = graphs.className + " active"
305 | 		}
306 | 
307 | 	}
308 | </script>
309 | </html>


--------------------------------------------------------------------------------
/Vealize/img/20945496.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/20945496.jpg


--------------------------------------------------------------------------------
/Vealize/img/761.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/761.jpg


--------------------------------------------------------------------------------
/Vealize/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg.jpg


--------------------------------------------------------------------------------
/Vealize/img/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg.png


--------------------------------------------------------------------------------
/Vealize/img/bg2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg2.png


--------------------------------------------------------------------------------
/Vealize/img/bg3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg3.jpg


--------------------------------------------------------------------------------
/Vealize/img/bg3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg3.png


--------------------------------------------------------------------------------
/Vealize/img/bg4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg4.jpg


--------------------------------------------------------------------------------
/Vealize/img/bg4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg4.png


--------------------------------------------------------------------------------
/Vealize/img/bg5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/bg5.png


--------------------------------------------------------------------------------
/Vealize/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/logo.png


--------------------------------------------------------------------------------
/Vealize/img/page1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/page1.png


--------------------------------------------------------------------------------
/Vealize/img/pagebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/pagebar.png


--------------------------------------------------------------------------------
/Vealize/img/pagecode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/pagecode.png


--------------------------------------------------------------------------------
/Vealize/img/pagegit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/pagegit.png


--------------------------------------------------------------------------------
/Vealize/img/pagemath.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/pagemath.png


--------------------------------------------------------------------------------
/Vealize/img/pageown.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/pageown.png


--------------------------------------------------------------------------------
/Vealize/img/pagepen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techguy940/Vealize/29ca8db1f57ebdbf40e6e39f12c01774b2dd52e4/Vealize/img/pagepen.png


--------------------------------------------------------------------------------
/Vealize/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualize Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/styles.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<link rel='icon' href='img/logo.png' type="image/png">
  9 | 	<meta property="og:type" content="website">
 10 |     <meta property="og:url" content="https://vealize.my.to/">
 11 |     <meta property="og:title" content="Vealize | Visualize Everything at one place">
 12 |     <meta property="og:description" content="Vealize is a website which provides free tools that can help user visualize different and unique things.">
 13 |     <meta property="og:image" content="img/page1.png">
 14 | 	<meta name="twitter:card" content="summary_large_image">
 15 | </head>
 16 | <body>
 17 | 	<header class="header">
 18 | 		<h1>Vealize</h1>
 19 | 		<ul>
 20 | 			<li><a class="h active" id="homeNav" href="#">Home</a></li>
 21 | 			<li><a class="h" id="aboutNav" href="#choose">About</a></li>
 22 | 			<li><a class="h" id="featuresNav"href="#features">Features</a></li>
 23 | 			<li><a class="h" id="contactNav" href="#contact">Contact</a></li>
 24 | 		</ul>
 25 | 	</header>
 26 | 	<div id="content" class="content">
 27 | 		<h1 id="homePageTitle">Vealize</h1>
 28 | 		<p>Visualize Everything At One Place</p>
 29 | 		<p id="stuff">Visualize unique things starting from a double pendulum to math problems!</p>
 30 | 		<button onclick="location.href = '#choose'">Get Started</button>
 31 | 	</div>
 32 | 	<div id="choose" class="choose">
 33 | 		<h1>Vealize</h1>
 34 | 		<h1 id="chooseTitle" class="chooseTitle">About Us</h1>
 35 | 		<div class="chooseDesc">
 36 | 			<p><strong>Vealize</strong> is a free-to-use platform for everyone.<br>At <strong>Vealize</strong>, we offer visualisation of things like never before.<br>Visualize unique things starting from Github repositories,<br>to things like Song Visualisation.<br><strong>Vealize</strong> has a very friendly user experience with great UI and responsiveness.<br>We are helping turn the world into a better place by providing interesting<br>things open to the whole world!.</p>
 37 | 			<h2>Like Vealize? Make sure to leave a 5 star rating :)</h2>
 38 | 		</div>
 39 | 	</div>
 40 | 	<div id="features" class="features">
 41 | 		<div class="featuresTitle">
 42 | 			<h1>What we provide<span>?</span></h1>
 43 | 		</div>
 44 | 		<div class="featureCardWrapper">
 45 | 			<div class="featureCard">
 46 | 				<h2>Double Pendulum</h2>
 47 | 				<p>Visualize Double Pendulum in a new and unique way!</p>
 48 | 				<button onclick="location.href = 'pendulum.html'">Take me there</button>
 49 | 			</div>
 50 | 			<div class="featureCard">
 51 | 				<h2>GitViz</h2>
 52 | 				<p>Visualize any github repositories with each and every detail with graphs and more!</p>
 53 | 				<button onclick="location.href = 'github.html'">Take me there</button>
 54 | 			</div>
 55 | 			<div class="featureCard">
 56 | 				<h2>OwnViz</h2>
 57 | 				<p>Visualize your own data (X and Y labels) with 4 types of graphs!</p>
 58 | 				<button onclick="location.href = 'own.html'">Take me there</button>
 59 | 			</div>
 60 | 		</div>
 61 | 		<div class="featureCardWrapper">
 62 | 			<div class="featureCard">
 63 | 				<h2>MathViz</h2>
 64 | 				<p>Visualize any equation's root plot with solutions and number line!</p>
 65 | 				<button onclick="location.href = 'maths.html'">Take me there</button>
 66 | 			</div>
 67 | 			<div class="featureCard">
 68 | 				<h2>CodeViz</h2>
 69 | 				<p>Visualize your code with line-to-line execution and much more!</p>
 70 | 				<button onclick="location.href = 'code.html'">Take me there</button>
 71 | 			</div>
 72 | 			<div class="featureCard">
 73 | 				<h2>GDP Growth</h2>
 74 | 				<p>Visualize the GDP Growth of world's several countries in the form of a barchart race!</p>
 75 | 				<button onclick="location.href = 'barchart.html'">Take me there</button>
 76 | 			</div>
 77 | 		</div>
 78 | 	</div>
 79 | 	<div id="contact" class="contact">
 80 | 		<div class="contactTitle">
 81 | 			<h1>Message Us</h1>
 82 | 			<p>Got some suggestion/ issues? We would like to <span>hear from you</span></p>
 83 | 		</div>
 84 | 		<div class="contactBlock">
 85 | 			<input id="nameInput" class="nameInput" placeholder="Your Name *">
 86 | 			<input id="emailInput" class="emailInput" placeholder="Your Email *">
 87 | 			<textarea id="msgInput" class="msgInput" placeholder="Your Message *"></textarea>
 88 | 			<button onclick="sendMsg();">Send Message</button>
 89 | 		</div>
 90 | 	</div>
 91 | 	<div id="follow" class="follow">
 92 | 		<div class="followTitle">
 93 | 			<h1>Follow Us</h1>
 94 | 			<p>Stay updated about the latest updates of Vealize</p>
 95 | 		</div>
 96 | 		<div class="followBlock">
 97 | 			<div class="sm">
 98 | 				<i class="fab fa-facebook-f"></i>
 99 | 				<p>Facebook</p>
100 | 			</div>
101 | 			<div class="sm">
102 | 				<i class="fab fa-instagram"></i>
103 | 				<p>Instagram</p>
104 | 			</div>
105 | 			<div class="sm">
106 | 				<i class="fab fa-twitter"></i>
107 | 				<p>Twitter</p>
108 | 			</div>
109 | 			<div class="sm">
110 | 				<i class="fab fa-youtube"></i>
111 | 				<p>Youtube</p>
112 | 			</div>
113 | 			<div class="sm">
114 | 				<i class="far fa-envelope"></i>
115 | 				<p>Email</p>
116 | 			</div>
117 | 		</div>
118 | 	</div>
119 | 	<script type="text/javascript">
120 | 	var cat = $('.header').offset().top;
121 | 
122 | 	$(window).scroll(function() {                  
123 | 	var cs = $(window).scrollTop(); 
124 | 	if (cs > cat) {           
125 | 	    $('.header').css({                      
126 | 	        position: 'fixed',
127 | 	        top: '0',
128 | 	        left: '0',
129 | 	        width: '100%',
130 | 	        background: 'white'
131 | 	    });
132 | 	    $('.header').css("padding-top", "5px");
133 | 	    $('.header').css("color", "black");
134 | 	    $('.header').css("border-bottom", "1px solid #696969");
135 | 	    $('.h').css("color", "black");
136 | 	    $('.h.active').css("color", "#ff0158");
137 | 	} else {                                   
138 | 	    $('.header').css({                     
139 | 	        position: 'relative',
140 | 	        width: 'auto'
141 | 	    });
142 | 	    $('.header').css('background', '#03030e')
143 | 	    $('.header').css("padding-top", "30px");
144 | 	    $('.header').css("color", "white");
145 | 	    $('.header').css("border-bottom", "none");
146 | 	    $('.h').css("color", "white");
147 | 	    $('.h.active').css("color", "#ff0158");
148 | 	}
149 | 	var ch = $('.choose').offset().top;
150 | 	var hm = $('.content').offset().top;
151 | 	var fe = $('.features').offset().top;
152 | 	var co = $('.contact').offset().top;
153 | 
154 | 	if (cs >= (co - 150))
155 | 	{
156 | 		$('.active').removeClass('active')
157 | 		$('#contactNav').addClass('active')
158 | 	} else if (cs >= (fe - 100))
159 | 	{
160 | 		$('.active').removeClass('active')
161 | 		$('#featuresNav').addClass('active')
162 | 	} else if (cs >= (ch - 150))
163 | 	{
164 | 		$('.active').removeClass('active')
165 | 		$('#aboutNav').addClass('active')
166 | 	} else if (cs >= hm)
167 | 	{
168 | 		$('.active').removeClass('active')
169 | 		$('#homeNav').addClass('active')
170 | 	}
171 | 	});
172 | 	$('.fa-facebook-f').on('click', function(){location.href = 'https://www.facebook.com/watch/?ref=search&v=1871380356472917'})
173 | 	$('.fa-instagram').on('click', function(){location.href = 'https://www.instagram.com/p/ByxLEsQnrzY/'})
174 | 	$('.fa-twitter').on('click', function(){location.href = 'https://twitter.com/TechWithTimm'})
175 | 	$('.fa-youtube').on('click', function(){location.href = 'https://www.youtube.com/watch?v=eGE-tFalwpA'})
176 | 	$('.fa-envelope').on('click', function(){location.href = 'mailto:randomemail@fineloans.org'})
177 | 	</script>
178 | </body>
179 | <script type="text/javascript">
180 | 	function sendMsg(){
181 | 		var name = document.getElementById("nameInput").value.trim()
182 | 		var email = document.getElementById("emailInput").value.trim()
183 | 		var msg = document.getElementById("msgInput").value.trim()
184 | 		var form = new FormData();
185 | 		form.append("name", name)
186 | 		form.append("email", email)
187 | 		form.append("msg", msg)
188 | 		fetch("https://vealizeapi.root.sx/contact", {method: "post", body: form})
189 | 			.then(e => window.alert("Message sent successfully!"))
190 | 	}
191 | </script>
192 | </html>


--------------------------------------------------------------------------------
/Vealize/maths.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/maths.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<meta property="og:type" content="website">
  9 |     <meta property="og:url" content="https://vealize.my.to/maths.html">
 10 |     <meta property="og:title" content="Vealize | Math Equation Visualizer">
 11 |     <meta property="og:description" content="Visualize math equations with their roots.">
 12 |     <meta property="og:image" content="img/pagemath.png">
 13 | 	<meta name="twitter:card" content="summary_large_image">
 14 | 	<link rel='icon' href='img/logo.png' type="image/png">
 15 | 	
 16 | </head>
 17 | <body>
 18 | 	<header class="header">
 19 | 		<h1>Vealize</h1>
 20 | 		<ul>
 21 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 22 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 23 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 24 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 25 | 		</ul>
 26 | 	</header>
 27 | 	<div id="content" class="content">
 28 | 		<h1 id="homePageTitle">Vealize</h1>
 29 | 		<p>Math Equation Visualizer</p>
 30 | 		<p id="stuff">Visualize math equations roots, zeroes at one place</p>
 31 | 		<button onclick="location.href = '#main'">Get Started</button>
 32 | 	</div>
 33 | 	<div id="main" class="main">
 34 | 		<div class="mainTitle">
 35 | 			<h1>Math Equation Visualizer</h1>
 36 | 		</div>
 37 | 		<div class="mainInput">
 38 | 			<input type="text" id="eqInput" placeholder="Default: x^2 + 5x + 6 = 0">
 39 | 			<button onclick="solve()">Submit</button>
 40 | 		</div>
 41 | 		<textarea id="resultsArea" readonly>Solution(s):</textarea>
 42 | 		<label id="rootLabel">
 43 | 			<p>Root Plot</p>
 44 | 			<img src="" id="rootPlotImg">
 45 | 		</label>
 46 | 		<label id="lineLabel">
 47 | 			<p>Number Line</p>
 48 | 			<img src="" id="numberLineImg">
 49 | 		</label>
 50 | 	</div>
 51 | 	<script type="text/javascript">
 52 | 
 53 | 	var cat = $('.header').offset().top;
 54 | 
 55 | 	$(window).scroll(function() {                  
 56 | 	var cs = $(window).scrollTop(); 
 57 | 	if (cs > cat) {           
 58 | 	    $('.header').css({                      
 59 | 	        position: 'fixed',
 60 | 	        top: '0',
 61 | 	        left: '0',
 62 | 	        width: '100%',
 63 | 	        background: 'white'
 64 | 	    });
 65 | 	    $('.header').css("padding-top", "5px");
 66 | 	    $('.header').css("color", "black");
 67 | 	    $('.header').css("border-bottom", "1px solid #696969");
 68 | 	    $('.h').css("color", "black");
 69 | 	    $('.h.active').css("color", "#ff0158");
 70 | 	} else {                                   
 71 | 	    $('.header').css({                     
 72 | 	        position: 'relative',
 73 | 	        width: 'auto'
 74 | 	    });
 75 | 	    $('.header').css('background', '#03030e')
 76 | 	    $('.header').css("padding-top", "30px");
 77 | 	    $('.header').css("color", "white");
 78 | 	    $('.header').css("border-bottom", "none");
 79 | 	    $('.h').css("color", "white");
 80 | 	    $('.h.active').css("color", "#ff0158");
 81 | 	}
 82 | })
 83 | 	</script>
 84 | </body>
 85 | <script type="text/javascript">
 86 | 	function solve(){
 87 | 		var eq = document.getElementById("eqInput").value;
 88 | 		if (eq == "")
 89 | 		{
 90 | 			eq = "x^2 + 5x + 6 = 0"
 91 | 		}
 92 | 		fetch(`https://vealizeapi.root.sx/calc/${eq}`)
 93 | 			.then(e => e.json())
 94 | 			.then(data => editStuff(data))
 95 | 	}
 96 | 
 97 | 	function editStuff(data){
 98 | 		var text = document.getElementById("resultsArea")
 99 | 		text.value = "Solution(s):"
100 | 		for (var i = 0; i < data.results.length; i++)
101 | 		{
102 | 			text.value += "\r\n" + data.results[i]
103 | 		}
104 | 		var rootPlotImg = document.getElementById("rootPlotImg")
105 | 		var numberLineImg = document.getElementById("numberLineImg")
106 | 		rootPlotImg.src = data.rootPlot
107 | 		numberLineImg.src = data.numberLine
108 | 
109 | 		$('#rootPlotImg').addClass("active")
110 | 		$('#numberLineImg').addClass("active")
111 | 	}
112 | </script>
113 | </html>


--------------------------------------------------------------------------------
/Vealize/own.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/own.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
  9 | 	<meta property="og:type" content="website">
 10 |     <meta property="og:url" content="https://vealize.my.to/own.html">
 11 |     <meta property="og:title" content="Vealize | Own Data Visualizer">
 12 |     <meta property="og:description" content="Visualize your own data with 4 types of graphs.">
 13 |     <meta property="og:image" content="img/pageown.png">
 14 | 	<link rel='icon' href='img/logo.png' type="image/png">
 15 |     
 16 | 	<meta name="twitter:card" content="summary_large_image">
 17 | </head>
 18 | <body>
 19 | 	<header class="header">
 20 | 		<h1>Vealize</h1>
 21 | 		<ul>
 22 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 23 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 24 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 25 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 26 | 		</ul>
 27 | 	</header>
 28 | 	<div id="content" class="content">
 29 | 		<h1 id="homePageTitle">Vealize</h1>
 30 | 		<p>Visualize Your Own Data</p>
 31 | 		<p id="stuff">Visualize your own data with the help of different graphs</p>
 32 | 		<button onclick="location.href = '#mainWrapper'">Get Started</button>
 33 | 	</div>
 34 | 	<div id="mainWrapper" class="mainWrapper">
 35 | 		<h1>Input Data:</h1>
 36 | 		<input type="text" placeholder="Dataset (Y) - 10 20 30" id="datasetInput">
 37 | 		<input type="text" placeholder="Labels (X) - January February March" id="labelsInput">
 38 | 		<input type="text" placeholder="Label" id="labelInput">
 39 | 		<button onclick="renderGraphs();">Submit</button>
 40 | 		<div id="main" class="main">
 41 | 			<canvas id="chartjs-0" class="chartjs" width="200" height="100"></canvas>
 42 | 			<canvas id="chartjs-1" class="chartjs" width="662" height="331"></canvas>
 43 | 			<canvas id="chartjs-4" class="chartjs" width="662" height="331"></canvas>
 44 | 			<canvas id="chartjs-5" class="chartjs" width="662" height="331"></canvas>
 45 | 		</div>
 46 | 	</div>
 47 | 	<script type="text/javascript">
 48 | 	// new Chart(document.getElementById("chartjs-0"),{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},"options":{}})
 49 | 	// new Chart(document.getElementById("chartjs-1"),{"type":"bar","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],"borderColor":["rgb(255, 99, 132)","rgb(255, 159, 64)","rgb(255, 205, 86)","rgb(75, 192, 192)","rgb(54, 162, 235)","rgb(153, 102, 255)","rgb(201, 203, 207)"],"borderWidth":1}]},"options":{"scales":{"yAxes":[{"ticks":{"beginAtZero":true}}]}}});
 50 | 	// new Chart(document.getElementById("chartjs-4"),{"type":"doughnut","data":{"labels":["Red","Blue","Yellow"],"datasets":[{"label":"My First Dataset","data":[300,50,100],"backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]}]}});
 51 | 	// new Chart(document.getElementById("chartjs-5"),{"type":"polarArea","data":{"labels":["Red","Green","Yellow","Grey","Blue"],"datasets":[{"label":"My First Dataset","data":[11,16,7,3,14],"backgroundColor":["rgb(255, 99, 132)","rgb(75, 192, 192)","rgb(255, 205, 86)","rgb(201, 203, 207)","rgb(54, 162, 235)"]}]}});
 52 | 	function random_rgba() {
 53 |     	var o = Math.round, r = Math.random, s = 255;
 54 |     	return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + "1" + ')';
 55 | 	}
 56 | 	function renderGraphs(){
 57 | 		document.getElementById("main").innerHTML = '<canvas id="chartjs-0" class="chartjs" width="200" height="100"></canvas><canvas id="chartjs-1" class="chartjs" width="662" height="331"></canvas><canvas id="chartjs-4" class="chartjs" width="662" height="331"></canvas><canvas id="chartjs-5" class="chartjs" width="662" height="331"></canvas>'
 58 | 		var line = document.getElementById("chartjs-0")
 59 | 		var bar = document.getElementById("chartjs-1")
 60 | 		var pie = document.getElementById("chartjs-4")
 61 | 		var polar = document.getElementById("chartjs-5")
 62 | 		var data = document.getElementById("datasetInput").value.split(" ")
 63 | 		var labels = document.getElementById("labelsInput").value.split(" ")
 64 | 		if (data[0] == "" && labels[0] == ""){
 65 | 			data = [100, 60, 40, 50, 10]
 66 | 			labels = ["January", "February", "March", "April", "May"]
 67 | 		}
 68 | 		var data = data.map(function(x){return parseInt(x, 10)})
 69 | 		var label = document.getElementById("labelInput").value.trim()
 70 | 		var datasets = [{"label": label, "data": data, "fill": false,"borderColor": "rgb(75, 192, 192)","lineTension": 0.1}]
 71 | 		var lineData = {"type":"line","data":{"labels":labels,"datasets": datasets, "options": {}}}
 72 | 		var bgs = []
 73 | 		for (var i = 0; i < labels.length; i++){
 74 | 			bgs.push(random_rgba())
 75 | 		}
 76 | 		datasets = [{"label": label, "data": data, "fill": false,"lineTension": 0.1, "backgroundColor":bgs}]
 77 | 		var barData = {"type": "bar","data":{"labels":labels,"datasets": datasets, "options": {}}}
 78 | 		var pieData = {"type": "doughnut","data":{"labels":labels,"datasets": datasets, "options": {}}}
 79 | 		var polarData = {"type": "polarArea","data":{"labels":labels,"datasets": datasets, "options": {}}}
 80 | 
 81 | 		line.style.display = "block"
 82 | 		bar.style.display = "block"
 83 | 		pie.style.display = "block"
 84 | 		polar.style.display = "block"
 85 | 
 86 | 		new Chart(line, lineData)
 87 | 		new Chart(bar, barData)
 88 | 		new Chart(pie, pieData)
 89 | 		new Chart(polar, polarData)
 90 | 
 91 | 	}
 92 | 	var cat = $('.header').offset().top;
 93 | 
 94 | 	$(window).scroll(function() {                  
 95 | 	var cs = $(window).scrollTop(); 
 96 | 	if (cs > cat) {           
 97 | 	    $('.header').css({                      
 98 | 	        position: 'fixed',
 99 | 	        top: '0',
100 | 	        left: '0',
101 | 	        width: '100%',
102 | 	        background: 'white'
103 | 	    });
104 | 	    $('.header').css("padding-top", "5px");
105 | 	    $('.header').css("color", "black");
106 | 	    $('.header').css("border-bottom", "1px solid #696969");
107 | 	    $('.h').css("color", "black");
108 | 	    $('.h.active').css("color", "#ff0158");
109 | 	} else {                                   
110 | 	    $('.header').css({                     
111 | 	        position: 'relative',
112 | 	        width: 'auto'
113 | 	    });
114 | 	    $('.header').css('background', '#03030e')
115 | 	    $('.header').css("padding-top", "30px");
116 | 	    $('.header').css("color", "white");
117 | 	    $('.header').css("border-bottom", "none");
118 | 	    $('.h').css("color", "white");
119 | 	    $('.h.active').css("color", "#ff0158");
120 | 	}
121 | })
122 | 	// APP NAME: NallaApp
123 | 
124 | 	// APPID: 6Y8Q6E-V7QURREJKL
125 | 
126 | 	// USAGE TYPE: Personal/Non-commercial Only
127 | 	</script>
128 | </body>
129 | </html>


--------------------------------------------------------------------------------
/Vealize/pendulum.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<title>Vealize | Visualise Everything at one place</title>
  5 | 	<link rel="stylesheet" type="text/css" href="css/pendulum.css">
  6 | 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7 | 	<script src="https://kit.fontawesome.com/0b1453f29b.js" crossorigin="anonymous"></script>
  8 | 	<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
  9 | 	<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
 10 | 	<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
 11 |     <meta property="og:type" content="website">
 12 |     <meta property="og:url" content="https://vealize.my.to/pendulum.html">
 13 |     <meta property="og:title" content="Vealize | Double Pendulum Visualizer">
 14 |     <meta property="og:description" content="Visualize double pendulum in an unique way.">
 15 |     <meta property="og:image" content="img/pagepen.png">
 16 |     <meta name="twitter:card" content="summary_large_image">
 17 |     <link rel='icon' href='img/logo.png' type="image/png">
 18 |     
 19 | </head>
 20 | <body>
 21 | 	<header class="header">
 22 | 		<h1>Vealize</h1>
 23 | 		<ul>
 24 | 			<li><a class="h active" id="homeNav" href="index.html#">Home</a></li>
 25 | 			<li><a class="h" id="aboutNav" href="index.html#choose">About</a></li>
 26 | 			<li><a class="h" id="featuresNav"href="index.html#features">Features</a></li>
 27 | 			<li><a class="h" id="contactNav" href="index.html#contact">Contact</a></li>
 28 | 		</ul>
 29 | 	</header>
 30 | 	<div id="content" class="content">
 31 | 		<h1 id="homePageTitle">Vealize</h1>
 32 | 		<p>Visualize Double Pendulum</p>
 33 | 		<p id="stuff">Visualize Double Pendulum in a unique and colourful way!</p>
 34 | 		<button onclick="location.href = '#main'">Get Started</button>
 35 | 	</div>
 36 | 	<div id="main" class="main">
 37 | 		<div class="mainTitle">
 38 | 			<h1><span class="titleP">Double Pendulum</span> Visualization</h1>
 39 | 		</div>
 40 | 		<div class="rowWrap">
 41 | 			<div class="pend">
 42 | 				<canvas id="c2d"></canvas>
 43 | 				<canvas id="c3d"></canvas>
 44 | 			</div>
 45 | 			<div class="controls">
 46 | 				<h2>Controls</h2>
 47 | 				<span class="first">Press <span class="controlKey">N</span> to add new pendulum</span><br>
 48 | 				<span>Press <span class="controlKey">R</span> to delete recent pendulum</span><br>
 49 | 				<span>Press <span class="controlKey">SPACE</span> to start/ stop pendulum</span>
 50 | 			</div>
 51 | 		</div>
 52 | 	</div>
 53 | 	
 54 | 
 55 | 	<script type="text/javascript">
 56 | 	var cat = $('.header').offset().top;
 57 | 
 58 | 	$(window).scroll(function() {                  
 59 | 	var cs = $(window).scrollTop(); 
 60 | 	if (cs > cat) {           
 61 | 	    $('.header').css({                      
 62 | 	        position: 'fixed',
 63 | 	        top: '0',
 64 | 	        left: '0',
 65 | 	        width: '100%',
 66 | 	        background: 'white'
 67 | 	    });
 68 | 	    $('.header').css("padding-top", "5px");
 69 | 	    $('.header').css("color", "black");
 70 | 	    $('.header').css("border-bottom", "1px solid #696969");
 71 | 	    $('.h').css("color", "black");
 72 | 	    $('.h.active').css("color", "#ff0158");
 73 | 	} else {                                   
 74 | 	    $('.header').css({                     
 75 | 	        position: 'relative',
 76 | 	        width: 'auto'
 77 | 	    });
 78 | 	    $('.header').css('background', '#03030e')
 79 | 	    $('.header').css("padding-top", "30px");
 80 | 	    $('.header').css("color", "white");
 81 | 	    $('.header').css("border-bottom", "none");
 82 | 	    $('.h').css("color", "white");
 83 | 	    $('.h.active').css("color", "#ff0158");
 84 | 	}
 85 | })
 86 | 	</script>
 87 | 
 88 | </body>
 89 | <script type="text/javascript">
 90 | 	"use strict";
 91 |     const G = 1.2;
 92 |     const M = 1.0;
 93 |     const L = 1.0;
 94 |     const dtMax = 30.0;
 95 |     const tailMax = 400;
 96 | 
 97 |     const barWidth = 0.04;
 98 |     const barLength = 0.23;
 99 |     const massRadius = 0.035;
100 |     const tailThickness = 0.012;
101 | 
102 |     const quad = new Float32Array([-1, -1, +1, -1, -1, +1, +1, +1]);
103 | 
104 |     const massShader = {
105 |         vert: `
106 |     attribute vec2 a_point;
107 |     uniform   vec2 u_center;
108 |     uniform   vec2 u_aspect;
109 |     varying   vec2 v_point;
110 |     void main() {
111 |         v_point = a_point;
112 |         gl_Position = vec4(a_point * ${massRadius} / u_aspect + u_center, 0, 1);
113 |     }`,
114 |         frag: `
115 |     uniform vec2 u_aspect;
116 |     uniform vec3 u_color;
117 |     varying vec2 v_point;
118 |     void main() {
119 |         float dist = distance(vec2(0, 0), v_point);
120 |         float v = smoothstep(1.0, 0.9, dist);
121 |         gl_FragColor = vec4(u_color, v);
122 |     }`,
123 |     };
124 | 
125 |     const barShader = {
126 |         vert: `
127 |     attribute vec2  a_point;
128 |     uniform   float u_angle;
129 |     uniform   vec2  u_attach;
130 |     uniform   vec2  u_aspect;
131 |     void main() {
132 |         mat2 rotate = mat2(+cos(u_angle), +sin(u_angle),
133 |                            -sin(u_angle), +cos(u_angle));
134 |         vec2 pos = rotate * (a_point * vec2(1, ${barWidth}) + vec2(1, 0));
135 |         gl_Position = vec4((pos * ${barLength} / u_aspect + u_attach), 0, 1);
136 |     }`,
137 |         frag: `
138 |     uniform vec3 u_color;
139 |     void main() {
140 |         gl_FragColor = vec4(u_color, 1);
141 |     }`,
142 |     };
143 | 
144 |     const tailShader = {
145 |         vert: `
146 |     attribute vec2  a_point;
147 |     attribute float a_alpha;
148 |     uniform   vec2  u_aspect;
149 |     varying   float v_alpha;
150 |     void main() {
151 |         v_alpha = a_alpha;
152 |         gl_Position = vec4(a_point * vec2(1, -1) / u_aspect, 0, 1);
153 |     }`,
154 |         frag: `
155 |     uniform vec3  u_color;
156 |     uniform float u_cutoff;
157 |     varying float v_alpha;
158 |     void main() {
159 |         float icutoff = 1.0 - u_cutoff;
160 |         gl_FragColor = vec4(u_color, max(0.0, v_alpha - u_cutoff) / icutoff);
161 |     }`,
162 |     };
163 | 
164 |     function deriviative(a1, a2, p1, p2) {
165 |         let ml2 = M * L * L;
166 |         let cos12 = Math.cos(a1 - a2);
167 |         let sin12 = Math.sin(a1 - a2);
168 |         let da1 = 6 / ml2 * (2 * p1 - 3 * cos12 * p2) / (16 - 9 * cos12 * cos12);
169 |         let da2 = 6 / ml2 * (8 * p2 - 3 * cos12 * p1) / (16 - 9 * cos12 * cos12);
170 |         let dp1 = ml2 / -2 * (+da1 * da2 * sin12 + 3 * G / L * Math.sin(a1));
171 |         let dp2 = ml2 / -2 * (-da1 * da2 * sin12 + 3 * G / L * Math.sin(a2));
172 |         return [da1, da2, dp1, dp2];
173 |     }
174 | 
175 |     function rk4(k1a1, k1a2, k1p1, k1p2, dt) {
176 |         let [k1da1, k1da2, k1dp1, k1dp2] = deriviative(k1a1, k1a2, k1p1, k1p2);
177 | 
178 |         let k2a1 = k1a1 + k1da1 * dt / 2;
179 |         let k2a2 = k1a2 + k1da2 * dt / 2;
180 |         let k2p1 = k1p1 + k1dp1 * dt / 2;
181 |         let k2p2 = k1p2 + k1dp2 * dt / 2;
182 | 
183 |         let [k2da1, k2da2, k2dp1, k2dp2] = deriviative(k2a1, k2a2, k2p1, k2p2);
184 | 
185 |         let k3a1 = k1a1 + k2da1 * dt / 2;
186 |         let k3a2 = k1a2 + k2da2 * dt / 2;
187 |         let k3p1 = k1p1 + k2dp1 * dt / 2;
188 |         let k3p2 = k1p2 + k2dp2 * dt / 2;
189 | 
190 |         let [k3da1, k3da2, k3dp1, k3dp2] = deriviative(k3a1, k3a2, k3p1, k3p2);
191 | 
192 |         let k4a1 = k1a1 + k3da1 * dt;
193 |         let k4a2 = k1a2 + k3da2 * dt;
194 |         let k4p1 = k1p1 + k3dp1 * dt;
195 |         let k4p2 = k1p2 + k3dp2 * dt;
196 | 
197 |         let [k4da1, k4da2, k4dp1, k4dp2] = deriviative(k4a1, k4a2, k4p1, k4p2);
198 | 
199 |         return [
200 |             k1a1 + (k1da1 + 2*k2da1 + 2*k3da1 + k4da1) * dt / 6,
201 |             k1a2 + (k1da2 + 2*k2da2 + 2*k3da2 + k4da2) * dt / 6,
202 |             k1p1 + (k1dp1 + 2*k2dp1 + 2*k3dp1 + k4dp1) * dt / 6,
203 |             k1p2 + (k1dp2 + 2*k2dp2 + 2*k3dp2 + k4dp2) * dt / 6
204 |         ];
205 |     }
206 | 
207 |     function history(n) {
208 |         let h = {
209 |             i: 0,
210 |             length: 0,
211 |             v: new Float32Array(n * 2),
212 |             push: function(a1, a2) {
213 |                 h.v[h.i * 2 + 0] = Math.sin(a1) + Math.sin(a2);
214 |                 h.v[h.i * 2 + 1] = Math.cos(a1) + Math.cos(a2);
215 |                 h.i = (h.i + 1) % n;
216 |                 if (h.length < n)
217 |                     h.length++;
218 |             },
219 |             visit: function(f) {
220 |                 for (let j = h.i + n - 2; j > h.i + n - h.length - 1; j--) {
221 |                     let a = (j + 1) % n;
222 |                     let b = (j + 0) % n;
223 |                     f(h.v[a * 2], h.v[a * 2 + 1], h.v[b * 2], h.v[b * 2 + 1]);
224 |                 }
225 |             }
226 |         };
227 |         return h;
228 |     }
229 | 
230 |     function normalize(v0, v1) {
231 |         let d = Math.sqrt(v0 * v0 + v1 * v1);
232 |         return [v0 / d, v1 / d];
233 |     }
234 | 
235 |     function sub(a0, a1, b0, b1) {
236 |         return [a0 - b0, a1 - b1];
237 |     }
238 | 
239 |     function add(a0, a1, b0, b1) {
240 |         return [a0 + b0, a1 + b1];
241 |     }
242 | 
243 |     function dot(ax, ay, bx, by) {
244 |         return ax * bx + ay * by;
245 |     }
246 | 
247 |     function polyline(hist, poly) {
248 |         const w = tailThickness;
249 |         let i = -1;
250 |         let x0, y0;
251 |         let xf, yf;
252 |         hist.visit(function(x1, y1, x2, y2) {
253 |             if (++i === 0) {
254 |                 let [lx, ly] = sub(x2, y2, x1, y1);
255 |                 let [nx, ny] = normalize(-ly, lx);
256 |                 poly[0] = x1 + w * nx;
257 |                 poly[1] = y1 + w * ny;
258 |                 poly[2] = x1 - w * nx;
259 |                 poly[3] = y1 - w * ny;
260 |             } else {
261 |                 let [ax, ay] = sub(x1, y1, x0, y0);
262 |                 [ax, ay] = normalize(ax, ay);
263 |                 let [bx, by] = sub(x2, y2, x1, y1);
264 |                 [bx, by] = normalize(bx, by);
265 |                 let [tx, ty] = add(ax, ay, bx, by);
266 |                 [tx, ty] = normalize(tx, ty);
267 |                 let [mx, my] = [-ty, tx];
268 |                 let [lx, ly] = sub(x1, y1, x0, y0);
269 |                 let [nx, ny] = normalize(-ly, lx);
270 |                 let len = Math.min(w, w / dot(mx, my, nx, ny));
271 |                 poly[i * 4 + 0] = x1 + mx * len;
272 |                 poly[i * 4 + 1] = y1 + my * len;
273 |                 poly[i * 4 + 2] = x1 - mx * len;
274 |                 poly[i * 4 + 3] = y1 - my * len;
275 |             }
276 |             x0 = x1;
277 |             y0 = y1;
278 |             xf = x2;
279 |             yf = y2;
280 |         });
281 |         let [lx, ly] = sub(xf, yf, x0, y0);
282 |         let [nx, ny] = normalize(-ly, lx);
283 |         i++;
284 |         poly[i * 4 + 0] = xf + w * nx;
285 |         poly[i * 4 + 1] = yf + w * ny;
286 |         poly[i * 4 + 2] = xf - w * nx;
287 |         poly[i * 4 + 3] = yf - w * ny;
288 |     }
289 | 
290 |     function compile(gl, vert, frag) {
291 |         let v = gl.createShader(gl.VERTEX_SHADER);
292 |         gl.shaderSource(v, 'precision mediump float;' + vert);
293 |         let f = gl.createShader(gl.FRAGMENT_SHADER);
294 |         gl.shaderSource(f, 'precision mediump float;' + frag);
295 |         gl.compileShader(v);
296 |         if (!gl.getShaderParameter(v, gl.COMPILE_STATUS))
297 |             throw new Error(gl.getShaderInfoLog(v));
298 |         gl.compileShader(f);
299 |         if (!gl.getShaderParameter(f, gl.COMPILE_STATUS))
300 |             throw new Error(gl.getShaderInfoLog(f));
301 |         let p = gl.createProgram();
302 |         gl.attachShader(p, v);
303 |         gl.attachShader(p, f);
304 |         gl.linkProgram(p);
305 |         if (!gl.getProgramParameter(p, gl.LINK_STATUS))
306 |             throw new Error(gl.getProgramInfoLog(p));
307 |         gl.deleteShader(v);
308 |         gl.deleteShader(f);
309 |         let result = {
310 |             program: p
311 |         };
312 |         let nattrib = gl.getProgramParameter(p, gl.ACTIVE_ATTRIBUTES);
313 |         for (let a = 0; a < nattrib; a++) {
314 |             let name = gl.getActiveAttrib(p, a).name;
315 |             result[name] = gl.getAttribLocation(p, name);
316 |         }
317 |         let nuniform = gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS);
318 |         for (let u = 0; u < nuniform; u++) {
319 |             let name = gl.getActiveUniform(p, u).name;
320 |             result[name] = gl.getUniformLocation(p, name);
321 |         }
322 |         return result;
323 |     };
324 | 
325 |     function pendulum({
326 |         tailColor = [0, 0, 1],
327 |         massColor = [0, 0, 0],
328 |         init = null
329 |     } = {}) {
330 |         let tail = new history(tailMax);
331 |         let a1, a2, p1, p2;
332 |         if (init) {
333 |             [a1, a2, p1, p2] = init;
334 |         } else {
335 |             a1 = Math.random() * Math.PI / 2 + Math.PI * 3 / 4;
336 |             a2 = Math.random() * Math.PI / 2 + Math.PI * 3 / 4;
337 |             p1 = 0.0;
338 |             p2 = 0.0;
339 |         }
340 | 
341 |         return {
342 |             tailColor: tailColor,
343 |             massColor: massColor,
344 |             tail: tail,
345 |             state: function() {
346 |                 return [a1, a2, p1, p2];
347 |             },
348 |             positions: function() {
349 |                 let x1 = +Math.sin(a1);
350 |                 let y1 = -Math.cos(a1);
351 |                 let x2 = +Math.sin(a2) + x1;
352 |                 let y2 = -Math.cos(a2) + y1;
353 |                 return [x1, y1, x2, y2];
354 |             },
355 |             step: function(dt) {
356 |                 [a1, a2, p1, p2] = rk4(a1, a2, p1, p2, dt);
357 |                 tail.push(a1, a2);
358 |             },
359 |             draw2d: function(ctx) {
360 |                 draw2d(ctx, tail, a1, a2, massColor, tailColor);
361 |             },
362 |             clone: function(conf) {
363 |                 if (!conf)
364 |                     conf = {};
365 |                 let cp2;
366 |                 if (p2 === 0.0)
367 |                     cp2 = Math.random() * 1e-12;
368 |                 else
369 |                     cp2 = p2 * (1 - Math.random() * 1e-10);
370 |                 conf.init = [a1, a2, p1, cp2];
371 |                 return new pendulum(conf);
372 |             },
373 |         };
374 |     }
375 | 
376 |     function clear3d(gl) {
377 |         gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
378 |         gl.clear(gl.COLOR_BUFFER_BIT);
379 |     }
380 | 
381 |     function draw3d(gl, webgl, pendulums) {
382 |         let w = gl.canvas.width;
383 |         let h = gl.canvas.height;
384 |         let z = Math.min(w, h);
385 |         let ax = w / z;
386 |         let ay = h / z;
387 |         let d = barLength * 2;
388 | 
389 |         let tail = webgl.tail;
390 |         gl.useProgram(tail.program);
391 |         gl.uniform2f(tail.u_aspect, ax / d, ay / d);
392 |         gl.bindBuffer(gl.ARRAY_BUFFER, webgl.alpha);
393 |         gl.enableVertexAttribArray(tail.a_alpha);
394 |         gl.vertexAttribPointer(tail.a_alpha, 1, gl.FLOAT, false, 0, 0);
395 |         gl.bindBuffer(gl.ARRAY_BUFFER, webgl.tailb);
396 |         gl.enableVertexAttribArray(tail.a_point);
397 |         gl.vertexAttribPointer(tail.a_point, 2, gl.FLOAT, false, 0, 0);
398 |         for (let i = 0; i < pendulums.length; i++) {
399 |             let p = pendulums[i];
400 |             if (p.tail.length) {
401 |                 polyline(p.tail, webgl.tailpoly);
402 |                 gl.bufferSubData(gl.ARRAY_BUFFER, 0, webgl.tailpoly);
403 |                 gl.uniform3fv(tail.u_color, p.tailColor);
404 |                 let cutoff = 1 - p.tail.length * 2 / p.tail.v.length;
405 |                 gl.uniform1f(tail.u_cutoff, cutoff);
406 |                 gl.drawArrays(gl.TRIANGLE_STRIP, 0, p.tail.length * 2);
407 |             }
408 |         }
409 | 
410 |         let mass = webgl.mass;
411 |         gl.useProgram(mass.program);
412 |         gl.uniform2f(mass.u_aspect, ax, ay);
413 |         gl.bindBuffer(gl.ARRAY_BUFFER, webgl.quad);
414 |         gl.enableVertexAttribArray(mass.a_point);
415 |         gl.vertexAttribPointer(mass.a_point, 2, gl.FLOAT, false, 0, 0);
416 |         for (let i = 0; i < pendulums.length; i++) {
417 |             let p = pendulums[i];
418 |             let [x1, y1, x2, y2] = p.positions();
419 |             x1 *= d / ax;
420 |             y1 *= d / ay;
421 |             x2 *= d / ax;
422 |             y2 *= d / ay;
423 |             gl.uniform3fv(mass.u_color, p.massColor);
424 |             gl.uniform2f(mass.u_center, x1, y1);
425 |             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
426 |             gl.uniform2f(mass.u_center, x2, y2);
427 |             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
428 |         }
429 | 
430 |         let bar = webgl.bar;
431 |         gl.useProgram(bar.program);
432 |         gl.uniform2f(bar.u_aspect, ax, ay);
433 |         gl.enableVertexAttribArray(bar.a_point);
434 |         gl.vertexAttribPointer(bar.a_point, 2, gl.FLOAT, false, 0, 0);
435 |         for (let i = 0; i < pendulums.length; i++) {
436 |             let p = pendulums[i];
437 |             let [x1, y1, x2, y2] = p.positions();
438 |             let [a1, a2, p1, p2] = p.state();
439 |             x1 *= d / ax;
440 |             y1 *= d / ay;
441 |             gl.uniform3fv(bar.u_color, p.massColor);
442 |             gl.uniform2f(bar.u_attach, 0, 0);
443 |             gl.uniform1f(bar.u_angle, a1 - Math.PI / 2);
444 |             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
445 |             gl.uniform2f(bar.u_attach, x1, y1);
446 |             gl.uniform1f(bar.u_angle, a2 - Math.PI / 2);
447 |             gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
448 |         }
449 |     };
450 | 
451 |     function glRenderer(gl, tailLen) {
452 |         let webgl = {};
453 |         gl.clearColor(1, 1, 1, 1);
454 |         gl.enable(gl.BLEND);
455 |         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
456 | 
457 |         webgl.quad = gl.createBuffer();
458 |         gl.bindBuffer(gl.ARRAY_BUFFER, webgl.quad);
459 |         gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
460 | 
461 |         webgl.tailb = gl.createBuffer();
462 |         webgl.tailpoly = new Float32Array(tailLen * 4);
463 |         gl.bindBuffer(gl.ARRAY_BUFFER, webgl.tailb);
464 |         gl.bufferData(gl.ARRAY_BUFFER, webgl.tailpoly.byteLength, gl.STREAM_DRAW);
465 | 
466 |         webgl.alpha = gl.createBuffer();
467 |         let alpha = new Float32Array(tailLen * 2);
468 |         for (let i = 0; i < alpha.length; i++) {
469 |             let v = (i + 1) / alpha.length;
470 |             alpha[i] = 1 - v;
471 |         }
472 |         gl.bindBuffer(gl.ARRAY_BUFFER, webgl.alpha);
473 |         gl.bufferData(gl.ARRAY_BUFFER, alpha, gl.STATIC_DRAW);
474 | 
475 |         webgl.mass = compile(gl, massShader.vert, massShader.frag);
476 |         webgl.bar  = compile(gl, barShader.vert, barShader.frag);
477 |         webgl.tail = compile(gl, tailShader.vert, tailShader.frag);
478 | 
479 |         webgl.renderAll = function(pendulums) {
480 |             clear3d(gl);
481 |             draw3d(gl, webgl, pendulums);
482 |         };
483 |         return webgl;
484 |     }
485 | 
486 |     function color2style(color) {
487 |         let r = Math.round(255 * color[0]);
488 |         let g = Math.round(255 * color[1]);
489 |         let b = Math.round(255 * color[2]);
490 |         return 'rgb(' + r + ',' + g + ',' + b + ')';
491 |     }
492 | 
493 |     function clear2d(ctx) {
494 |         ctx.fillStyle = 'white';
495 |         ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
496 |     }
497 | 
498 |     function draw2d(ctx, tail, a1, a2, massColor, tailColor) {
499 |         let w = ctx.canvas.width;
500 |         let h = ctx.canvas.height;
501 |         let cx = w / 2;
502 |         let cy = h / 2;
503 |         let z = Math.min(w, h);
504 |         let d = z * barLength;
505 |         let x0 = Math.sin(a1) * d + cx;
506 |         let y0 = Math.cos(a1) * d + cy;
507 |         let x1 = Math.sin(a2) * d + x0;
508 |         let y1 = Math.cos(a2) * d + y0;
509 |         let massStyle = color2style(massColor);
510 | 
511 |         ctx.lineCap = 'butt';
512 |         ctx.lineWidth = z * tailThickness / 2;
513 |         ctx.strokeStyle = color2style(tailColor);
514 |         let n = tail.length;
515 |         tail.visit(function(x0, y0, x1, y1) {
516 |             ctx.globalAlpha = n-- / tail.length;
517 |             ctx.beginPath();
518 |             ctx.moveTo(x0 * d + cx, y0 * d + cy);
519 |             ctx.lineTo(x1 * d + cx, y1 * d + cy);
520 |             ctx.stroke();
521 |         });
522 | 
523 |         ctx.lineWidth = z * barWidth / 4;
524 |         ctx.lineCap = 'round';
525 |         ctx.lineJoin = 'bevel';
526 |         ctx.strokeStyle = massStyle;
527 |         ctx.fillStyle = massStyle;
528 |         ctx.globalAlpha = 1.0;
529 |         ctx.beginPath();
530 |         ctx.moveTo(cx, cy);
531 |         ctx.lineTo(x0, y0);
532 |         ctx.lineTo(x1, y1);
533 |         ctx.stroke();
534 |         ctx.beginPath();
535 |         ctx.arc(x0, y0, z * massRadius / 2, 0, 2 * Math.PI);
536 |         ctx.arc(x1, y1, z * massRadius / 2, 0, 2 * Math.PI);
537 |         ctx.fill();
538 |     }
539 | 
540 |     (function() {
541 |         let state = [new pendulum()];
542 |         let params = new URL(document.location);
543 |         let useWebGL = params.searchParams.get("webgl") !== '0';
544 |         let c2d = document.getElementById('c2d');
545 |         let c3d = document.getElementById('c3d');
546 |         let canvas;
547 |         let mode;
548 |         let running = true;
549 |         let gl = useWebGL ? c3d.getContext('webgl') : null;
550 |         let ctx = c2d.getContext('2d');
551 |         let renderer = null;
552 | 
553 |         if (!gl) {
554 |             mode = '2d-only';
555 |             canvas = c2d;
556 |             c3d.style.display = 'none';
557 |         } else {
558 |             renderer = new glRenderer(gl, tailMax);
559 |             mode = '3d';
560 |             canvas = c3d;
561 |             c2d.style.display = 'none';
562 |         }
563 | 
564 |         function toggleMode() {
565 |             switch (mode) {
566 |                 case '2d':
567 |                     mode = '3d';
568 |                     canvas = c3d;
569 |                     c3d.style.display = 'block';
570 |                     c2d.style.display = 'none';
571 |                     break;
572 |                 case '3d':
573 |                     mode = '2d';
574 |                     canvas = c2d;
575 |                     c2d.style.display = 'block';
576 |                     c3d.style.display = 'none';
577 |                     break;
578 |             }
579 |         }
580 | 
581 |         window.addEventListener('keypress', function(e) {
582 |             switch (e.charCode) {
583 |                 case 32:
584 |                     running = !running;
585 |                     break;
586 |                 case 110:
587 |                     let color = [Math.random(), Math.random(), Math.random()];
588 |                     state.push(new pendulum({tailColor: color}));
589 |                     break;
590 |                     break;
591 |                 case 114:
592 |                     if (state.length)
593 |                         state.pop();
594 |                     break;
595 |             }
596 |         });
597 | 
598 |         let last = 0.0;
599 |         function cb(t) {
600 |             let dt = Math.min(t - last, dtMax);
601 |             let ww = window.innerWidth;
602 |             let wh = window.innerHeight;
603 |             if (canvas.width != ww || canvas.height != wh) {
604 |                 canvas.width = ww;
605 |                 canvas.height = wh;
606 |             }
607 |             if (running)
608 |                 for (let i = 0; i < state.length; i++)
609 |                     state[i].step(dt / 1000.0);
610 |             if (mode === '3d') {
611 |                 clear3d(gl);
612 |                 renderer.renderAll(state);
613 |             } else {
614 |                 clear2d(ctx);
615 |                 for (let i = 0; i < state.length; i++)
616 |                     state[i].draw2d(ctx);
617 |             }
618 |             last = t;
619 |             window.requestAnimationFrame(cb);
620 |         }
621 | 
622 |         window.requestAnimationFrame(cb);
623 |     }());
624 | 
625 | </script>
626 | </html>


--------------------------------------------------------------------------------
/Vealize/wave.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#0099ff" fill-opacity="1" d="M0,96L48,80C96,64,192,32,288,21.3C384,11,480,21,576,53.3C672,85,768,139,864,138.7C960,139,1056,85,1152,74.7C1248,64,1344,96,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>


--------------------------------------------------------------------------------