D3.jsを用いたブラウザでの図表の描画

前提

D3.jsを使ってみたくて触っています。
『ばぶでもわかるおぶざばぶる』のソースコードをVSCodeで書いてファイルをGoogle Chromeで開いたのですが、本の通りの図が描写されません。

実現したいこと

『ばぶでもわかるおぶざばぶる』にあるようなD3.jsを用いた図表の描画

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<html> <head> <title>D3 DEMO</title> <script src="https://unpkg.com/d3/dist/d3.min.js"></script> </head> <body> <div id="chart"></div> </body> <script> const dataset = [5,4,3,2,1,]; const width = 400,height = 100; const x = d3.scaleLinear() .domain([0,dataset.lengh - 1]) .range([50,350]); const size = d3.scaleSqrt() .domain([0,s3.max(dataset)]) .range([0,height / 2]); const svg = d3.select("#chart").append("svg") .attr("width",widht) .attr("height",height); svg.selectAll("circle") .data(dataset) .join("circle") .attr("cx", (d,i) => x(i)) .attr("cy".height / 2) .attr("r",size) .attr("fill","red") .attr("oppacity",0.5); </script> </html>

試したこと

・ダウンロードしたD3.jsのファイルをHTMLファイルと同じフォルダに入れる
・スクリプト内にファイルを読み込ませる記述を追加する

補足情報(FW/ツールのバージョンなど)

HTMLの勉強を昨日始めたばかりで、知らないことだらけですがご存知の方がいらっしゃいましたらご教示いただけますと幸いです。

コメントを投稿

0 コメント