-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (67 loc) · 3.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EYZZ44XXW8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EYZZ44XXW8');
</script>
<title>D3 Parade</title>
<meta charset="utf-8" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript" src="main_donut_vis.js"></script>
<script type="text/javascript" src="data_utils.js"></script>
<script type="text/javascript" src="cont_annotation.js"></script>
<script type="text/javascript" src="month_annotation.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🎂</text></svg>">
</head>
<body style="text-align: center; background-color: #fbfbfb; margin-top: 50;">
<h1 style="font-family: 'Ubuntu'; padding-top: 30px; padding-bottom:25px; text-align: center; font-size: 40px;">Celebrating 10 Years of D3.js 🎉</h1>
<div style="margin: 0 auto; width: 1000; font-family: 'Cabin'; font-size: 18; text-align: left;">
<p>D3.js version 1.0.0 was released on February 17, 2011, and continued to grow with support from the community.
Now D3.js spans 30 different repositories on Github through an accumulation of 6889 commits from over 170 developers.
</p>
<p>Let's take a look at how D3.js has grown through the decade! </p>
</div>
<svg height="1000" width="1200" class="mainVis"></svg>
<p style="margin: 0 auto; width: 1000; font-family: 'Cabin'; font-size: 15;">
*data collected from <a href="https://observablehq.com/@codingwithfire/d3-git-history-data">observablehq</a></p>
<footer>
<p style="font-family: 'Cabin'; font-size: 15px;">Built by <a href="https://les-huang.netlify.app/">Lesley</a> 📈👩💻📊</p>
</footer>
<script>
let textColor = "#484848";
let blackColor = "#000000";
let greyColor = "#dcdcdc";
let darkGreyColor = "#808080";
let purpleColor = "#dcb69f";
let selectionColor = purpleColor;
let dotColor = "#63acbe";
let whiteColor = "#ffffff";
let highlightColor = "#866888"
let buttonSelection = "month";
let isMike = false;
let padding = 25;
const getDataAndDrawVis = async() => {
let gitData = await d3.csv("git_data_filtered.csv");
gitData = gitData
.filter(d => d["author"] != "dependabot[bot]")
.sort((a,b) => (b["insertions"] + b["deletions"]) - (a["insertions"] + a["deletions"]));
console.log(gitData);
// console.log(getFrequencyByKey(gitData, "year"));
// console.log(getFrequencyByKey(gitData, "month"));
// console.log(getFrequencyByKey(gitData, "author"));
console.log(getFrequencyByKey(gitData, "repo"));
// console.log(calculateAmtOfContributions(gitData, "author"));
// console.log(calculateAmtOfContributions(gitData, "month"));
console.log(calculateAmtOfContributions(gitData, "repo"));
drawDonut(".mainVis", gitData);
}
getDataAndDrawVis();
</script>
</body>
</html>