d3.js のトップページから飛べる sample コードが載ってるページがあるんですが
ここにあるソースコードの動かし方がわかりません
https://observablehq.com/@d3/stacked-to-grouped-bars
たくさんあるうちの1つめのブロックをはりつけてみたんですが
Uncaught SyntaxError: Unexpected identifier
になってしまいます
動かすために何かが必要なんでしょうか
かいてあるソースの一部でデータらしきものもないのでこれだけで動かないのはわかるんですが
syntax error がでる理由がわかりません
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>d3.js learning</title>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const rect = svg.selectAll("g")
.data(y01z)
.join("g")
.attr("fill", (d, i) => z(i))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", height - margin.bottom)
.attr("width", x.bandwidth())
.attr("height", 0);
svg.append("g")
.call(xAxis);
function transitionGrouped() {
y.domain([0, yMax]);
rect.transition()
.duration(500)
.delay((d, i) => i * 20)
.attr("x", (d, i) => x(i) + x.bandwidth() / n * d[2])
.attr("width", x.bandwidth() / n)
.transition()
.attr("y", d => y(d[1] - d[0]))
.attr("height", d => y(0) - y(d[1] - d[0]));
}
function transitionStacked() {
y.domain([0, y1Max]);
rect.transition()
.duration(500)
.delay((d, i) => i * 20)
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
.transition()
.attr("x", (d, i) => x(i))
.attr("width", x.bandwidth());
}
function update(layout) {
if (layout === "stacked") transitionStacked();
else transitionGrouped();
}
return Object.assign(svg.node(), {update});
}
</script>
</body>
</html>