marvinscham/pa-pyscript
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved JS to external file

Browse Source
This commit is contained in:
Marvin Scham
2022-08-23 01:42:37 +02:00
parent 72bc968020
commit 7c4a623d86
2 changed files with 65 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
basic-example/basic-example.js Normal file
View File

@@ -0,0 +1,64 @@
import * as d3 from "https://cdn.skypack.dev/d3@7";
const url = "https://duolingo.checksch.de/duo_user_info.json";
fetch(url)
.then((res) => res.json())
.then((out) => {
const langInfo = out.lang_data;
let langInfoPrepped = [];
Object.entries(langInfo).forEach((el) => {
let item = {};
item["name"] = el[1].learningLanguage;
item["count"] = el[1].xp;
// Filter irrelevant items
if (item["count"] > 500) {
langInfoPrepped.push(item);
}
});
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));

67
basic-example/javascript.html
View File

@@ -34,71 +34,6 @@
} }
</script> </script>
<script type="module"> <script type="module" src="basic-example.js"></script>
import * as d3 from "https://cdn.skypack.dev/d3@7";
const url = "https://duolingo.checksch.de/duo_user_info.json";
fetch(url)
.then((res) => res.json())
.then((out) => {
const langInfo = out.lang_data;
let langInfoPrepped = [];
Object.entries(langInfo).forEach((el) => {
let item = {};
item["name"] = el[1].learningLanguage;
item["count"] = el[1].xp;
// Filter irrelevant items
if (item["count"] > 500) {
langInfoPrepped.push(item);
}
});
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> </body>
</html> </html>