86470


d3.js のトップページから飛べる sample コードが載ってるページがあるんですが  
ここにあるソースコードの動かし方がわかりません

<https://observablehq.com/@d3/stacked-to-grouped-bars>

たくさんあるうちの１つめのブロックをはりつけてみたんですが  
`Uncaught SyntaxError: Unexpected identifier`  
になってしまいます  
動かすために何かが必要なんでしょうか

かいてあるソースの一部でデータらしきものもないのでこれだけで動かないのはわかるんですが  
syntax error がでる理由がわかりません

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2021-04-13T08:19:27.007
75236
2022-02-20T22:56:05.427
2022-02-20T22:56:05.427
21379
question
javascript d3.js
Observableのコードがスタンドアロンで動作しない


Observableのセルのコードを単純にコピーペーストするだけでは、HTMLでは動作しません。  
変換するのは大変なので、Observable上で学習するか、スタンドアローンのサンプルコードを参照することをおすすめします。

[StackOverflow英語版での類似質問](https://stackoverflow.com/questions/53155957/convert-d3-observable-
to-standalone-webpage-like-blocks-org) でも同様の回答です。

> Sadly, it's not that easy any more.


CC BY-SA 4.0
2022-02-20T06:34:10.643
86470
2022-02-20T07:28:58.430
2022-02-20T07:28:58.430
3060
21379
75236
answer