25:["$","title",null,{"children":"D3を学ぶ: シェイプ/図形 | Takuo Suzuki | Observable"}] 4b:[{"id":"68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","href":"https://static.observableusercontent.com/files/68598443a16fce00a89f983b40c3b4c89b15827ac91726b864da942e4fad1b5cc19abaa1d3efd9855a7a2fadb3ef16f7c4365666eb572026a986b69d768bbc34","name":"aapl-bollinger.csv","type":"text/csv","lastModified":1620227127937.781,"size":48822}] 47:{"id":"c61a5bf540bfad84","slug":"learn-d3-shapes-ja","title":"D3を学ぶ: シェイプ/図形","thumbnail":"125f5fb17ffc2e3a819dce8a9318eeaa1dcede7a6923c8a33a6b784c57aee7eb","access_level":"public","create_time":"$D2021-05-05T15:05:27.937Z","update_time":"$D2021-08-21T16:57:38.318Z","view_time":null,"first_public_time":"$D2021-07-28T17:03:20.146Z","has_unpublished_edits":null,"fork":{"id":"91bc0a496747a34d","slug":"learn-d3-shapes","title":"Learn D3: Shapes","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":"starter_2024","bio":"Technologist passionate about Data Visualization & Creative Coding. DevRel @ Google Japan. all opinions are mine.","followed_by_you":false,"follows_you":false},"version":1045,"publish_version":1045,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"bio":"Technologist passionate about Data Visualization & Creative Coding. DevRel @ Google Japan. all opinions are mine.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fd40c5324bdaf630","login":"taquo","name":"Takuo Suzuki","avatar_url":"https://avatars-next.observableusercontent.com/616879e43d36f2890b75c58f84f9c68be4a1f539569c138e443a1262eee1c44f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5baa9b3ce38aa33a","slug":"d3","title":"D3 を学ぶ","owner":{"id":"b47f823fee6d87fe","login":"taquo","name":"Takuo Suzuki"}},"type":"notebook","body":{"titling":"auto","title":"D3を学ぶ: シェイプ/図形","cells":[{"id":0,"value":"md`# D3を学ぶ: シェイプ/図形\n\nSVGやCanvasは意図的に汎用性を持たせており、どんな種類のグラフィックにも対応できるようになっています。一方、D3はビジュアライゼーションを目的としているため、パスデータを生成する関数であるシェイプに特化した機能を提供しています`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`パスは、円、四角、線、波線、虎[🐅]、等どんな形でも描画できます。パスのシェイプは、[SVG path data language](https://www.w3.org/TR/SVG/paths.html#TheDProperty)で定義されています。([Canvas path methods](https://html.spec.whatwg.org/multipage/canvas.html#canvaspath)にに非常に近いです)。古くから活用されている[pen plotter](https://en.wikipedia.org/wiki/Plotter)のようなコマンドで記述できます。例えば、\n\n* Mx,y - [*x*, *y*]のポイントを移動\n* Lx,y - [*x*, *y*]へ線を引く\n* hx - *x*の長さの水平線を引く\n* vy - *y*の長さの垂直線を引く\n* z - パスを閉じる`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"md`それでは、Apple 社の株価の遷移をラインチャートで可視化するとしましょう。まず、データセットには、*date* と *close* のカラムがあり(closeは市場が閉まった際の株価の値です）目盛りを持ったスケールが用意されています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"data = d3.csvParse(await FileAttachment(\"aapl-bollinger.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.upper)])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`線を引く場合、パスデータは、Mxとyを使った起点と連続するLxとyを使って線を引きます。これは、ループ処理で記述することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":554,"value":"{\n let path = `M${x(data[0].date)},${y(data[0].close)}`;\n for (let i = 1; i < data.length; ++i) {\n path += `L${x(data[i].date)},${y(data[i].close)}`;\n }\n return path;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`D3 には、[d3.line](/@d3/d3-line)という便利な機能があります。d3.lineを呼ぶと、デフォルトのラインジェネレーターが返ってきます。そして、*line*.xと*line*.yを呼ぶことで、データポイント *d* における、*x*と*y*の座標が返ってきます。これらの関数は、目的の抽象的な値（日付やカウント）を取得し、それを（スケールを適用して）視覚的な位置に変換します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"line = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"md`ラインジェネレータにデータを渡すと、対応した SVG のパスデータが　 String で返ってくるので、それをパス要素の *d* 属性の設定に使用できます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"line(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`(繰り返し記述する事を避けるために、ノートブックのappendixに再利用可能な軸を定義しました。各軸は、G要素の選択を取る関数です)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"md`上のパスは、塗り潰し無しの青色の線で表現されています。線分間の[マイター結合](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit)による誤解を避けるために、マイターリミットをストローク幅の 100% (1×) に設定しました。丸い線のつなぎ目やキャップを使用することもできます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`エリアチャートの場合、d3.area が利用できます。エリアのシェイプは2本の線が同じ*x*の値を利用して描画されます。まず、*area*.y0がベースラインになり、*area*.y1がトップラインになります。ベースラインがチャートの下に固定される場合は、*area*.y0を*y*(0)と設定します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"area = d3.area()\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`もし、[stacked area chart](/@d3/stacked-area-chart)、 [streamgraph](/@d3/streamgraph)や下の[ボリンジャーバンド](/@d3/bollinger-bands)のチャートのように、ベースラインを変化させた図が必要な場合は、*area*.y0に関数を渡します。そうすることで*area*.xや*area*.y1と同様に、この関数は各データポイントごとに呼び出され、対応する*y*の値を計算します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"areaBand = d3.area()\n .x(d => x(d.date))\n .y0(d => y(d.lower))\n .y1(d => y(d.upper))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md`ボリンジャーバンドに、平均値と株価の最終的な日次の金額をオーバーレイで表示します。各パス要素は1つのスタイルしか持てないので、複数の色に複数のパスを使用しています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"lineMiddle = d3.line()\n .x(d => x(d.date))\n .y(d => y(d.middle))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`ラインとエリアは一緒に使えるように設計されています。エリアの上端と下端のラインを*area*.lineY0 や *area*.lineY1という形で\n呼び出し、ラインの色などを調整することが可能です。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"md`ラインとエリアは、この章ではカバーしきれないほどの機能があります。一つ紹介すると、[radial lines and areas](/@d3/d3-lineradial)は季節の温度([seasonal temperatures](/@d3/radial-area-chart); )を表示するような円形のデータを表示するのに適しています。[曲線](https://github.com/d3/d3-shape/blob/master/README.md#curves)は、単調性保持スプラインなどの設定可能な補間方法を提供しており、[欠落データのギャップ](/@d3/area-with-missing-data)を表示することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`もちろん、ビジュアライゼーションは、棒、ライン、エリアだけではありません。\n\nもう一つ一般的な形として、D3には、*arc* つまり円弧があります。数学的な言い方だと、*annulus sector* と呼ばれています。これは、パイチャート、ドーナッツチャート、[sunbursts](/@d3/sunburst) (but not, confusingly, [arc diagrams](/@d3/arc-diagram))に使われています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"arc = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .startAngle(([startAngle, endAngle]) => startAngle)\n .endAngle(([startAngle, endAngle]) => endAngle)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`ラインとエリアが、*x*と*y*によって定義されていたのと同じように、円弧は、*innerRadius*、*outerRadius*、*startAngle*そして、*endAngle*によって定義されます。上記の円弧は、[*startAngle*, *endAngle*]の配列によって描かれています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"arc([Math.PI / 2, Math.PI]) // from 90° to 180°","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"viewof n = {\n const form = html``;\n form.oninput = () => form.output.value = form.value = form.input.valueAsNumber;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`円グラフやドーナツグラフの場合、上記のように円弧角を計算するのは面倒なので、D3では[d3.pie](https://github.com/d3/d3-shape/blob/master/README.md#pies)を用意しています。おいしい果物のデータセットを思い出してください。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"fruits = [\n {name: \"🍊\", count: 21},\n {name: \"🍇\", count: 13},\n {name: \"🍏\", count: 8},\n {name: \"🍌\", count: 5},\n {name: \"🍐\", count: 3},\n {name: \"🍋\", count: 2},\n {name: \"🍎\", count: 1},\n {name: \"🍉\", count: 1}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"md`円グラフにcountプロパティの値を設定することで、各円弧の角度スパンがその値に比例し、円弧が0から2πまで連続して広がるように円弧の角度を計算することができます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"pieArcData = d3.pie()\n .value(d => d.count)\n (fruits)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`これらのオブジェクトは、データムごとに1つずつ、固定半径を持つアークジェネレータに渡すことで、ドーナツチャートを作成することができます。(そして、ちょっと自慢したくなるので、パディングとコーナー半径を適用してみましょう)。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"arcPie = d3.arc()\n .innerRadius(210)\n .outerRadius(310)\n .padRadius(300)\n .padAngle(2 / 300)\n .cornerRadius(8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`さて、ここまでは一般的なデータをグラフィックで表現する方法を紹介してきましたが、次はそれらをより魅力的に表現する方法を見ていきましょう。\n\nNext`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(height / 40))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"height = 240","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null