A high-level stats video framework built on top of D3.js.
Install with NPM:
npm install @sctools/staticalOr use a CDN such as unpkg:
<script src="https://unpkg.com/@sctools/statical/statical.js"></script>Or download it straight from the source.
Then use it in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div id="count">0</div>
<div id="chart"></div>
</body>
<script src="./statical.js"></script>
<script>
// this can come from an external script, such as "./data.js"
const data = {
dates: [
"2022-01-01",
"2023-01-01",
"2024-01-01",
"2025-01-01",
"2026-01-01",
"2027-01-01",
"2028-01-01",
],
count: [1, 5, 10, 15, 20, 25, 30],
};
var dates = data.dates.map((date) => new Date(date));
var DPMS = (5 * 1000) / dates.length;
var charts = {
chart: {
style: {
width: 920,
height: 105,
marginLeft: 25,
marginTop: 10,
marginBottom: 25,
marginRight: 25,
},
lines: {
color: "black",
},
},
};
var valueTypes = {
count: (val) => val.toLocaleString(),
};
function update() {
animateValue("count", data.count[pastIndex], data.count[index]);
}
function animateCharts() {
updateChart("chart", parseInt(getText("count")));
}
</script>
</html>Because we thought that making high-quality stats videos with D3.js was too complicated, involving a lot of code that you have to copy and paste a bunch of times. With Statical, we put the best practices used by many creators such as JipStats, GNZGUY and MinMax in a simple and easy-to-use package, whilst still giving you the option to make the video your own.