Added basic example

2022-07-29 23:35:02 +02:00
parent e98266f036
commit 8f26634f9c
5 changed files with 449 additions and 0 deletions
--- a/basic-example/javascript.html
+++ b/basic-example/javascript.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="../assets/favicon.png" />
+
+    <script src="../assets/d3.v7.min.js" charset="utf-8"></script>
+    <style>
+      * {
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+          Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+          sans-serif;
+      }
+    </style>
+
+    <title>D3 mit JavaScript</title>
+  </head>
+  <body>
+    <div>
+      <div style="text-align: center">JavaScript</div>
+      <div id="js" style="width: 400px; height: 400px; margin: auto">
+        <div class="loading"></div>
+      </div>
+    </div>
+
+    <script>
+      url = 'https://duolingo.checksch.de/duo_user_info.json';
+
+      fetch(url)
+        .then((res) => res.json())
+        .then((out) => {
+          const langInfo = out.lang_data;
+
+          langInfoPrepped = [];
+          Object.entries(langInfo).forEach((el) => {
+            item = {};
+            item['name'] = el[1].learningLanguage;
+            item['count'] = el[1].xp;
+
+            // Filter irrelevant items
+            if (item['count'] > 500) {
+              langInfoPrepped.push(item);
+            }
+          });
+          console.log(langInfoPrepped);
+
+          const fn = (d) => d.count;
+          const data = d3.pie().value(fn)(langInfoPrepped);
+
+          const arc = d3
+            .arc()
+            .innerRadius(210)
+            .outerRadius(310)
+            .padRadius(300)
+            .padAngle(2 / 300)
+            .cornerRadius(8);
+
+          const js = d3.select('#js');
+          js.select('.loading').remove();
+
+          const svg = js
+            .append('svg')
+            .attr('viewBox', '-320 -320 640 640')
+            .attr('width', '400')
+            .attr('height', '400');
+
+          for (const d of data) {
+            svg.append('path').style('fill', 'rebeccapurple').attr('d', arc(d));
+
+            const text = svg
+              .append('text')
+              .style('fill', 'white')
+              .attr('transform', `translate(${arc.centroid(d).join(',')})`)
+              .attr('text-anchor', 'middle');
+
+            text
+              .append('tspan')
+              .style('font-size', '24')
+              .attr('x', '0')
+              .text(d.data.name);
+
+            text
+              .append('tspan')
+              .style('font-size', '18')
+              .attr('x', '0')
+              .attr('dy', '1.3em')
+              .text(d.value);
+          }
+        })
+        .catch((err) => console.log(err));
+    </script>
+  </body>
+</html>