Unified naming patterns

basic-example/basic-example.js

@@ -40,10 +40,9 @@ fetch(url)
             .padAngle(2 / 300)
             .cornerRadius(8);
 
-        const js = d3.select("#js");
-        js.select(".loading").remove();
+        const canvas = d3.select("#canvas");
 
-        const svg = js
+        const svg = canvas
             .append("svg")
             .attr("viewBox", "-320 -320 640 640")
             .attr("width", 400)

basic-example/basic-example.py

@@ -40,11 +40,10 @@ arc = (
     .cornerRadius(8)
 )
 
-py = d3.select("#py")
-py.select(".loading").remove()
+canvas = d3.select("#canvas")
 
 svg = (
-    py.append("svg")
+    canvas.append("svg")
     .attr("viewBox", "-320 -320 640 640")
     .attr("width", 400)
     .attr("height", 400)

basic-example/javascript.html

@@ -13,9 +13,7 @@
     <div>
       <h1>Duolingo XP nach Sprache</h1>
       <h2>JavaScript</h2>
-      <div id="js" style="width: 400px; height: 400px; margin: auto">
-        <div class="loading"></div>
-      </div>
+      <div id="canvas" style="width: 400px; height: 400px; margin: auto"></div>
     </div>
 
     <script type="importmap">

basic-example/pyscript.html

@@ -16,9 +16,7 @@
     <div>
       <h1>Duolingo XP nach Sprache</h1>
       <h2>PyScript</h2>
-      <div id="py" style="width: 400px; height: 400px; margin: auto">
-        <div class="loading"></div>
-      </div>
+      <div id="canvas" style="width: 400px; height: 400px; margin: auto"></div>
     </div>
 
     <script type="importmap">