37 lines
927 B
HTML
37 lines
927 B
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
<body>
|
||
|
|
<div id="container"></div>
|
||
|
|
<script src="js/d3.v7.js"></script>
|
||
|
|
<script type="module">
|
||
|
|
// create the <svg> element
|
||
|
|
const width = 800;
|
||
|
|
const height = 800;
|
||
|
|
const svg = d3.create("svg").attr("width", width).attr("height", height);
|
||
|
|
|
||
|
|
const years = 80;
|
||
|
|
const age = 37;
|
||
|
|
const freePerWeek = 8 * 5 + 32;
|
||
|
|
const weeksInYear = 52;
|
||
|
|
const freeUsed = age * freePerWeek * weeksInYear;
|
||
|
|
const freeLeft = (years - age) * freePerWeek * weeksInYear;
|
||
|
|
|
||
|
|
svg
|
||
|
|
.append("path")
|
||
|
|
.attr("transform", "translate(400,400)")
|
||
|
|
.attr(
|
||
|
|
"d",
|
||
|
|
d3.arc()({
|
||
|
|
innerRadius: 100,
|
||
|
|
outerRadius: 200,
|
||
|
|
startAngle: -Math.PI / 2,
|
||
|
|
endAngle: Math.PI / 2,
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
|
||
|
|
// Append the SVG element.
|
||
|
|
container.append(svg.node());
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|