2b:null 2c:["$","title",null,{"children":"ハンズオン2: ハローD3.js! | Sorami Hisamoto | Observable"}] 31:T715,path = { const height = 500; const margin = 80; // データの各要素をアクセスするためのヘルパー const xAccessor = (d) => d.year; const yAccessor = (d) => d.population; // X軸のスケール // 軸を表示するために、rangeは[0, width]ではなく、margin分を動かしている const xScale = d3 .scaleLinear() .domain(d3.extent(japanPopulation, xAccessor)) .range([margin, width]); // Y軸のスケール // rangeは、[0, height]ではなく、逆向きの[height, 0]である点に注意: 原点が左上（左下ではなく）のため // 軸を表示するために、rangeは[height, 0]ではなく、margin分を動かしている const yScale = d3 .scaleLinear() .domain(d3.extent(japanPopulation, yAccessor)) .range([height - margin, 0]); // データからSVGパスの文字列を生成する関数 const lineGenerator = d3 .line() .x((d) => xScale(xAccessor(d))) .y((d) => yScale(yAccessor(d))); // 描画するためのSVG要素をまず作成 const svg = d3.create("svg").attr("width", width).attr("height", height); // SVG要素に、path（線）を描画 const line = svg .append("path") .attr("d", lineGenerator(japanPopulation)) .attr("fill", "none") .attr("stroke", "cornflowerblue") .attr("stroke-width", "3"); // グラフのX軸を作成、描画 const xAxisGenerator = d3.axisBottom().scale(xScale); const xAxis = svg .append("g") .call(xAxisGenerator) .style("transform", `translateY(${height - margin}px)`); // グラフのY軸を作成、描画 const yAxisGenerator = d3.axisLeft().scale(yScale); const yAxis = svg .append("g") .call(yAxisGenerator) .style("transform", `translateX(${margin}px)`); return svg.node(); }32:[{"id":"946e95884fd5ef5724b564cd145598761deb3d791c75695dc3ff764db3468a29256c086e7086a377b269ab2394421f25b4b4d4fa5d1acf2ded2e32faee845357","href":"https://static.observableusercontent.com/files/946e95884fd5ef5724b564cd145598761deb3d791c75695dc3ff764db3468a29256c086e7086a377b269ab2394421f25b4b4d4fa5d1acf2ded2e32faee845357","name":"c01.csv","type":"text/csv","lastModified":1663003121008.578,"size":60222}] 2f:{"id":"91d68b23c56e4b11","slug":"mierune-handson-2022-2-d3js","title":"ハンズオン2: ハローD3.js!","thumbnail":"642b1f701a72f54cb36f55b37e3b7f2d47419eade959621311c01114b95540fd","access_level":"public","create_time":"$D2022-09-11T08:40:52.556Z","update_time":"$D2022-09-13T07:46:23.111Z","view_time":null,"first_public_time":"$D2022-09-12T18:07:44.895Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36aa7bddb76092a5","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":"starter_2024"},"version":391,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f8326fd2096702fa","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":null}],"members":[{"type":"individual","id":"f8326fd2096702fa","login":"sorami","name":"Sorami Hisamoto","avatar_url":"https://avatars-next.observableusercontent.com/7071ad5bf4e4e48d3db41f7aa1807baea2d84fcbe31b947b68c7dbe09da8d4ca","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"ffcffd466fc30af7","slug":"mierune","title":"MIERUNE社内ハンズオン2022","owner":{"id":"36aa7bddb76092a5","login":"sorami","name":"Sorami Hisamoto"}},"type":"notebook","body":{"title":"ハンズオン2: ハローD3.js!","cells":[{"id":0,"value":"# ハンズオン2: ハローD3.js!\n\n[D3.js - Data-Driven Documents](https://d3js.org/)\n\n![https://github.com/d3/d3-logo](https://raw.githubusercontent.com/d3/d3-logo/master/d3.png)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":8,"value":"## 「D3.js」（ディースリー）ってなに？\n\n- = \"Data-Driven Documents\"（データドリブンなドキュメント）\n- データをもとに、ドキュメントを操る（HTML,SVG,CSSを扱う）ためのJavaScriptライブラリ\n- プロプラエタリなフレームワークではなく、Webスタンダードを強調する\n- データ可視化の文脈で使われることが多いが、それに限らない\n\n## 様々な「D3.js」\n\n- 「D3」という大きなライブラリがあるわけではない\n- 様々なモジュールが集まったものが「D3」と呼ばれる\n - [Turf.js](https://turfjs.org/)にも似たイメージ\n- GitHub: [D3](https://github.com/d3)\n - d3-shape, d3-scale, d3-geo, d3-force, d3-hierarchy, ...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"## 百聞は一見にしかず\n\n**💪 下のページから、様々な実例を眺めてみよう**\n\n→　[D3 Gallery / D3 / Observable](https://observablehq.com/@d3/gallery)（これを執筆している時点で168のノートブック）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":21,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":167,"value":"⚠️ ここからは、「プログラミング（JavaScript）」の基本的な知識に加え、**「SVG」（Scalable Vector Graphics）の概要**を知らないと、よく分からないであろう点が出てきます。SVGがよく分からない人も、なんとなく読み流しつつ、ノートブックをガチャガチャいじって遊んでみてください。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":25,"value":"## D3.jsで円を描いてみよう\n\n[Random Dots / Sorami Hisamoto / Observable](https://observablehq.com/@sorami/random-dots)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":99,"value":"「スケール」の関数を定義します。\n\nこれは、 **「domain」（データの取りうる値の範囲）** と **「range」（描く場所の大きさ）** を結びつけるためのものです。\n\n例えば、 **「0~40℃」の気温データ** があったとします。そして、それを縦軸（Y軸）にとってグラフを描きたいとして、 **グラフの高さが800px** だとします。\n\nすると、\n\n- 0℃　→ y=0px\n- ...\n- 10℃ → px=50px\n- ...\n- 40℃ → px=800px\n\nというように、対応付けて描きたくなりますが、その範囲を対応付けるのが「スケール」の関数です。\n\n```js\nd3.scaleLinear().domain([0, 40.0]).range([0, 800])\n```\n\n以下の例では、3つのスケールを定義しています:\n- x軸のスケール: `xScale` [0, 1.0]の範囲から、描画領域の「幅」と対応づけ\n- y軸のスケール: `yScale` [0, 1.0]の範囲から、描画領域の「高さ」と対応づけ\n- 円の半径のスケール: `rScale` [0, 1.0]の範囲から、[10, 40]（適当に選んだ半径の範囲）と対応づけ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":146,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"xScale = d3.scaleLinear().domain([0, 1.0]).range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"yScale = d3.scaleLinear().domain([0, 1.0]).range([0, height])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"rScale = d3.scaleLinear().domain([0, 1.0]).range([10, 40])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"円の数 `nCircles` を、[ハンズオン1](https://observablehq.com/@sorami/mierune-handson-2022-1-observable) で紹介した「Observable Inputs」を使って指定します。これにより、ページ上にスライダーが出現し、これを動かすことで数を変えることができます。\n\n**💪 スライダーを動かして、図がどう変わるか見てみよう**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":88,"value":"viewof nCircles = Inputs.range([10, 1000], {\n value: 100,\n step: 10,\n label: \"円の数\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"そして描画ですが、以下の例ではSVG（Scalable Vector Graphics）要素を作っています。SVGは、主要ブラウザでネイティブサポートされており、Webでデータ可視化などを行う際に頻繁に使われます。\n\n[Scalable Vector Graphics - Wikipedia](https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":106,"value":"{\n // まず、入れ物として、SVG要素を作成: `d3.create(\"svg\")`\n // そして、属性を指定: attr(\"アトリビュート名\", 値)\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n for (let i = 0; i < nCircles; i++) {\n // ここでは、ランダムなデータを作成しています\n // `Math.random()` は、「0以上、1未満」の値を返します\n const x = Math.random();\n const y = Math.random();\n const r = Math.random();\n\n // それぞれのランダムなx, y, rの値を、\n // 前述したスケールの関数で「SVG上での位置」と「円の半径」に変換し、\n // それをSVG要素に追加しています\n svg\n .append(\"circle\")\n .attr(\"cx\", xScale(x))\n .attr(\"cy\", yScale(y))\n .attr(\"r\", rScale(r))\n .attr(\"fill\", getRandomColor())\n .attr(\"stroke\", \"hsl(216deg 100% 13%)\")\n .attr(\"stroke-width\", 2);\n }\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"function getRandomColor() {\n // ランダムな色を生成する関数\n // HEX値 #00000 ~ #FFFFFF の何か一つを返す\n\n let color = \"#\";\n for (let i = 0; i < 6; i++) {\n color += Math.floor(Math.random() * 16).toString(16);\n }\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"**💪 「円の半径」の下限と上限も、Observable Inputsでユーザーがスライダーがから指定できるようにしてみよう（`rScale`にある`range`の値）**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":160,"value":"## D3.jsでグラフを描いてみよう","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":183,"value":"### データ\n\n[国勢調査時系列データ CSV形式による主要時系列データ | ファイル | 統計データを探す | 政府統計の総合窓口](https://www.e-stat.go.jp/stat-search/files?page=1&layout=datalist&toukei=00200521&tstat=000001011777&cycle=0&tclass1=000001094741)\n\n男女別人口－全国，都道府県（大正９年～平成27年）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":181,"value":"population = FileAttachment(\"c01.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"Inputs.table(population)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"japanPopulation = population\n .filter((d) => {\n return d[\"都道府県コード\"] === 0;\n })\n .map((d) => {\n return {\n year: d[\"西暦（年）\"],\n population: d[\"人口（総数）\"]\n };\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"Inputs.table(japanPopulation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"### 線グラフ: 日本の人口\n\n- X軸: 年 `year`\n- Y軸: 人口 `population`\n\nデータの範囲と、描画領域のサイズを紐づけるスケール関数 `xScale`, `yScale` を用意します。\n\nそれらを使って `d3.line()` で、「SVGパスの文字列」を生成します。それを描画します。\n\nまた、 `d3.axisLeft()` と `d3.axisBottom()` で、グラフのX,Y軸を描画します。\n\nこのように、「データ」から「基本的なSVGの部品」を作って、それらを組み合わせて描画します。例えば棒グラフであれば、「四角形」（SVGのrect）を並べていきます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":162,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"上記のように、D3は、かなり低レベルから実装をしていくことが多いです。\n\nそのため、他のライブラリと比べ圧倒的なカスタマイズ性があり、凝ったものや前例のない表現が可能になる、という利点があります。\n\nそもそも、他の多くのライブラリが、D3.jsを使ってその上に作られていたりします。\n\nそのため、「一般的なグラフ」などを描くだけであれば、[Obsevable Plot](https://observablehq.com/@observablehq/plot)（これはD3.jsに依存しています）など、より高レイヤーな選択肢を検討する方が良いケースも多いでしょう。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":52,"value":"## ここで話さなかったこと\n\n時間の都合上、D3.jsにおいて重要なトピックである「アニメーション」「Joins」「インタラクション」については言及しませんでした。これらは、（データの変化とともに）動的な表現をしたいときに重要なトピックです。\n\n- [Learn D3: Animation / D3 / Observable](https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3)\n- [Learn D3: Joins / D3 / Observable](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3)\n- [Learn D3: Interaction / D3 / Observable](https://observablehq.com/@d3/learn-d3-interaction?collection=@d3/learn-d3)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"

\n \n

https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3#cell-528

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":32,"value":"## もっと学びたいアナタに...\n\n- オススメのコース: [Fullstack D3 and Data Visualization](https://www.newline.co/fullstack-d3) by Amelia Wattenberger ([@Wattenberger](https://twitter.com/wattenberger))\n- 日本語書籍: [データビジュアリスト宣言：Observable/D3.jsではじめるデータ記事発信：すぎもと組](https://techbookfest.org/product/4641141578268672?productVariantID=5767041485111296)（2021）\n- 日本語チュートリアル: [D3 を学ぶ / Takuo Suzuki / Observable](https://observablehq.com/collection/@taquo/d3)（[本家チュートリアル](https://observablehq.com/collection/@d3/learn-d3)の日本語版）\n\n...コースや書籍などもあるが、それに加えて良いのは、Observableをうろついて、クールなもの、美しいものを沢山見て、自分でも中身を覗いたり動かしてみること！","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"