2f:T85a,{ const width = 800; const height = 300; const margin = { top: 30, right: 30, bottom: 30, left: 120 }; const xScale = d3 .scaleUtc() .domain([0, 24 * 60 * 60 * 1000]) // 24 hours .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dataOfDates.keys()]) .range([margin.top, height - margin.bottom]); const dow = (d) => "日月火水木金土".at(new Date(d).getDay()); const xAxis = d3 .axisBottom() .scale(xScale) .ticks(5) .tickFormat(d3.utcFormat("%H:%M")) // 目盛りのフォーマット（書式）を指定 .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(7) .tickFormat((d) => d3.utcFormat(`%m月%d日`)(d) + ` (${dow(d)})`) // 目盛りのフォーマット（書式）を指定 .tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.1); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // 日付グループ const dayG = svg .append("g") .selectAll("g") .data(dataOfDates) .join("g") .attr("class", "day") .attr( "transform", (d) => `translate(0, ${yScale(d[0]) + yScale.bandwidth() / 2})` ); // 垂直軸の原点を移動しておく // ドット dayG .selectAll("circle") .data((d) => d[1]) // データの値（配列）をバインドする .join("circle") .attr("cx", (d) => xScale(d.msec)) .attr("r", 10) .attr("fill", "steelblue") .attr("opacity", 0.25); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); svg.selectAll("g.xAxis, g.yAxis").selectAll("text").attr("font-size", 16); return svg.node(); }30:Tb0e,{ const width = 800; const height = 300; const margin = { top: 30, right: 30, bottom: 30, left: 120 }; const xScale = d3 .scaleLinear() .domain([0, 4]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dataOfDatesTimes.keys()]) .range([margin.top, height - margin.bottom]); const dow = (d) => "日月火水木金土".at(new Date(d).getDay()); const xAxis = d3 .axisBottom() .scale(xScale) .ticks(4) .tickFormat((d) => [0, 6, 12, 18, 24][d]) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(7) .tickFormat((d) => d3.utcFormat(`%m月%d日`)(d) + ` (${dow(d)})`) .tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.1); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); const dayG = svg .selectAll("g.day") .data(dataOfDatesTimes) .join("g") .attr("class", "day") .attr("transform", (d) => `translate(0, ${yScale(d[0])})`); const timeG = dayG .selectAll("g.time") .data((d) => d[1]) .join("g") .attr("class", "time") .attr("transform", (d) => `translate(${xScale(d[0])}, 0)`); // circle の cx を求めるスケール関数 const circleX = d3 .scaleBand() // .domain([]) // domainは後で決める .range([10, xScale(1) - xScale(0) - 10]); // xScale(1) - xScale(0)は各時間帯の幅 timeG .append("rect") .attr("x", 5) .attr("y", 5) .attr("width", xScale(1) - xScale(0) - 10) .attr("height", yScale.bandwidth() - 10) .attr("rx", 10) .attr("fill", "#fff") .attr("fill-opacity", 0.5) .attr("stroke", "steelblue") .attr("stroke-width", 1); timeG .selectAll("circle") .data((d) => d[1]) .join("circle") .attr("cx", (d, i, nodes) => { // circleノードの数(nodes.length)がわかるので、circleXのdomainをここで指定する // d3.range(5)　は、 [0, 1, 2, 3, 4] になる circleX.domain(d3.range(nodes.length)); return circleX(i) + circleX.bandwidth() / 2; }) .attr("cy", yScale.bandwidth() / 2) .attr("r", 10) .attr("fill", "steelblue") .attr("opacity", 0.5); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); svg.selectAll("g.xAxis, g.yAxis").selectAll("text").attr("font-size", 16); return svg.node(); }31:T957,{ const width = 800; const height = 300; const margin = { top: 30, right: 30, bottom: 30, left: 120 }; const xScale = d3 .scaleLinear() .domain([0, 4]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dataOfDatesTimes.keys()]) .range([margin.top, height - margin.bottom]); const drinks = d3.group(dataOfPerson, (d) => d.drink); const color = d3 .scaleOrdinal() .domain([...drinks.keys()]) .range(d3.schemeCategory10); const dow = (d) => "日月火水木金土".at(new Date(d).getDay()); const xAxis = d3 .axisBottom() .scale(xScale) .ticks(4) .tickFormat((d) => [0, 6, 12, 18, 24][d]) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(7) .tickFormat((d) => d3.timeFormat(`%m月%d日`)(d) + ` (${dow(d)})`) .tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.1); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); const dayG = svg .selectAll("g.day") .data(dataOfDatesTimes) .join("g") .attr("class", "day") .attr("transform", (d) => `translate(0, ${yScale(d[0])})`); const timeG = dayG .selectAll("g.time") .data((d) => d[1]) .join("g") .attr("class", "time") .attr("transform", (d) => `translate(${xScale(d[0])}, 0)`); const circleX = d3.scaleBand().range([10, xScale(1) - xScale(0) - 10]); timeG .selectAll("circle") .data((d) => d[1]) .join("circle") .attr("cx", (d, i, nodes) => { circleX.domain(d3.range(nodes.length)); return circleX(i) + circleX.bandwidth() / 2; }) .attr("cy", yScale.bandwidth() / 2) .attr("r", 10) .attr("fill", (d) => color(d.drink)) .attr("opacity", 0.5); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); svg.selectAll("g.xAxis, g.yAxis").selectAll("text").attr("font-size", 16); return svg.node(); }32:T5b3,{ const width = 600; const height = 600; const margin = { top: 80, right: 80, bottom: 80, left: 80 }; const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width); // スケール関数 const angle = d3 .scaleUtc() .domain(d3.extent(dataOfPerson, (d) => d.date)) .range([-90, 270]); svg .append("g") .append("circle") .attr("r", (width - margin.left - margin.right) / 2) .attr("stroke", "#000") .attr("fill", "none"); svg .append("g") .selectAll("line") .data(dataOfPerson) .join("line") .attr("transform", (d) => `rotate(${angle(d.date)})`) .attr("x2", (width - margin.left - margin.right) / 2) .attr("stroke", "steelblue") .attr("stroke-width", 4) .attr("opacity", 0.25); svg .append("g") .selectAll("line") .data(angle.ticks(d3.utcHour.every(12))) .join("line") .attr("transform", (d) => `rotate(${angle(d)})`) .attr("x1", (width - margin.left - margin.right) / 2) .attr("x2", (width - margin.left - margin.right) / 2 + 10) .attr("stroke", "#000"); svg .append("g") .selectAll("text") .data(angle.ticks(d3.utcHour.every(12))) .join("text") .attr("transform", (d) => `rotate(${angle(d)})`) .attr("x", (width - margin.left - margin.right) / 2 + 10) .attr("dy", `0.3em`) .text((d) => d3.utcFormat("%m/%d %H時")(d)); return svg.node(); }33:T990,{ const width = 800; const height = 300; const margin = { top: 30, right: 30, bottom: 30, left: 120 }; const xScale = d3 .scaleLinear() .domain([0, 4]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dataOfDatesTimes.keys()]) .range([margin.top, height - margin.bottom]); const drinks = d3.group(dataOfPerson, (d) => d.drink); const color = d3 .scaleOrdinal() .domain([...drinks.keys()]) .range(d3.schemeCategory10); const dow = (d) => "日月火水木金土".at(new Date(d).getDay()); const xAxis = d3 .axisBottom() .scale(xScale) .ticks(4) .tickFormat((d) => [0, 6, 12, 18, 24][d]) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(7) .tickFormat((d) => d3.timeFormat(`%m月%d日`)(d) + ` (${dow(d)})`) .tickSize(-(width - margin.left - margin.right)); const svg = d3.create("svg").attr("width", width).attr("height", height); svg .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.1); svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); const dayG = svg .selectAll("g.day") .data(dataOfDatesTimes) .join("g") .attr("class", "day") .attr("transform", (d) => `translate(0, ${yScale(d[0])})`); const timeG = dayG .selectAll("g.time") .data((d) => d[1]) .join("g") .attr("class", "time") .attr("transform", (d) => `translate(${xScale(d[0])}, 0)`); const circleX = d3.scaleBand().range([10, xScale(1) - xScale(0) - 10]); timeG .selectAll("path") .data((d) => d[1]) .join("path") .attr("transform", (d, i, nodes) => { circleX.domain(d3.range(nodes.length)); return `translate(${circleX(i) + circleX.bandwidth() / 2}, ${ yScale.bandwidth() / 2 }) scale(0.2) translate(-50, -50)`; }) .attr("fill", (d) => color(d.drink)) .attr("opacity", 0.5) .attr("d", heartD); svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); svg.selectAll("g.xAxis, g.yAxis").selectAll("text").attr("font-size", 16); return svg.node(); }34:T808,{ // サイズと余白 const width = 400; const height = 400; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; // スケール関数（x, y, 円の半径） const xScale = d3 .scaleLinear() .domain([0, d3.max(scatterData, (d) => d.x)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(scatterData, (d) => d.y)]) .nice() .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(scatterData, (d) => d.z)]) .nice() .range([0, 20]); // 軸関数 tickSizeで目盛りの線を反対方向に伸ばしている const xAxis = d3 .axisBottom() .scale(xScale) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .tickSize(-(width - margin.left - margin.right)); // SVGの生成 const svg = d3.create("svg").attr("width", width).attr("height", height); // 背景 svg .append("g") .append("rect") .attr("width", width) .attr("height", height) .attr("opacity", 0.1); // X,Y軸の生成 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // 円の生成 svg .selectAll("circle") .data(scatterData) .join("circle") .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", 0) .attr("fill", "red") .attr("opacity", 0.5) .transition() .duration(3000) .delay((d, i) => i * 100) .attr("r", (d) => rScale(d.z)); // 軸の線を白色に svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); return svg.node(); }35:T9e2,scaleLinearDiagram = (scale) => { const width = 570; const height = 160; const margin = { top: 50, right: 20, bottom: 50, left: 10 }; const svg = d3.create("svg").attr("width", width).attr("height", height); const domainScale = d3 .scaleLinear() .domain(scale.domain()) .range([margin.left, width - margin.right]); const rangeScale = d3 .scaleLinear() .domain(scale.range()) .range([margin.left, width - margin.right]); const domainToRange = d3 .scaleLinear() .domain(domainScale.domain()) .range(rangeScale.domain()); const domainTicks = [ domainScale.domain()[0], d3.median(domainScale.domain()), domainScale.domain()[1] ]; const rangeTicks = [ rangeScale.domain()[0], d3.median(rangeScale.domain()), rangeScale.domain()[1] ]; const domainAxis = d3.axisTop().scale(domainScale).tickValues(domainTicks); const rangeAxis = d3.axisBottom().scale(rangeScale).tickValues(rangeTicks); const defs = svg.append("defs"); defs .append("style") .text("#scope line { marker-end: url(#aend); stroke: black; }"); defs .append("marker") .attr("id", "aend") .attr("markerWidth", 10) .attr("markerHeight", 10) .attr("refX", 9) .attr("refY", 3) .attr("orient", "auto") .attr("markerUnits", "strokeWidth") .append("path") .attr("d", "M0,0 L0,6 L9,3 z"); svg .append("g") .attr("id", "scope") .selectAll("line") .data(domainTicks) .join("line") .attr("stroke", "gray") .attr("stroke-dasharray", "2,2") .attr("x1", domainScale) .attr("y1", margin.top) .attr("x2", (d) => rangeScale(domainToRange(d))) .attr("y2", height - margin.bottom); svg .append("g") .classed("axis", true) .attr("transform", `translate(0, ${margin.top})`) .call(domainAxis); svg .append("g") .classed("axis", true) .attr("transform", `translate(0, ${height - margin.bottom})`) .call(rangeAxis); svg .selectAll("g.axis") .selectAll("text") .attr("fill", (d, i) => ["steelblue", "orange", "maroon"][i]) .attr("font-size", 16); svg .append("g") .selectAll("text") .data(["domain", "range"]) .join("text") .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("x", (d, i) => i === 0 ? domainScale(domainTicks[1]) : rangeScale(rangeTicks[1]) ) .attr("y", (d, i) => i === 0 ? margin.top - 25 : height - margin.bottom + 35 ) .text((d) => d); return svg.node(); }36:[] 2d:{"title":"tsuchiya_D3.js Introdunction Part 4 / D3.js 入門その4","cells":[{"id":0,"value":"# tsuchiya_D3.js Introdunction Part 4 / D3.js 入門その4","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"banner(\"D3.js 入門\", {\n subtitle: \"その4\",\n backgroundColor: \"hsl(220, 40%, 50%)\",\n textColor: \"white\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1048,"value":"### 時系列データを表示する\n\n日常記録のスプレッドシートの「ALL」シートをTSVで公開しました。\nURLは以下の通りです。\n\n取り扱いやすいようにヘッダを英語にしました。\nまた、person 列を追加しています。\n全体公開されているため、公開してもかまわない値に変更してもかまいません。\n\n```\nuri = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRczux7f1S_U3uSVpNg3cKq5P6uXzflHYE64c74yQ0K-ZET1E8zPF-yiXSNgd-4jU2tu_m0gfc8RmI7/pub?gid=2108724779&single=true&output=tsv\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1381,"value":"uri = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRczux7f1S_U3uSVpNg3cKq5P6uXzflHYE64c74yQ0K-ZET1E8zPF-yiXSNgd-4jU2tu_m0gfc8RmI7/pub?gid=2108724779&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1371,"value":"### TSVを読み込む\n\n`d3.tsv()`メソッドでTSVデータを読み込みます。\n第2引数に、`d3.autoType`を指定することで、数字だけのセルを文字列から数値に変換しています。","pinned":false,"hidden":false,"mode":"md"},{"id":1091,"value":"rawdata = d3.tsv(uri, d3.autoType) //d3.autotype文字列から数値に変換","pinned":false,"hidden":false,"mode":"ojs"},{"id":1387,"value":"### Dataセルでプレビュー\n\nDataセルで内容を確認することができます。","pinned":false,"hidden":false,"mode":"md"},{"id":1625,"value":"つめたい・冷たいを揃えるなど、データの前処理を行う","pinned":false,"hidden":false,"mode":"md"},{"id":1379,"value":"rawdata","pinned":true,"hidden":false,"mode":"ojs"},{"id":1594,"value":"### Chartセルでプレビュー\n\nまずは、Chartセルでデータの分布を概観しておきましょう。\n\nつぎのオプションで作成すると次のようになります。\n自分のデータが正しく反映されているか、確認してください。\n\n- Y方向ファセットを人名\n- X軸を時間\n- Y軸を日付\n- 色を飲み物の種類","pinned":false,"hidden":false,"mode":"md"},{"id":1596,"value":"Plot.plot({\n marginRight: 100,\n x: {\n grid: true\n },\n y: {\n reverse: true,\n grid: true\n },\n color: {\n legend: true\n },\n marks: [\n Plot.auto(rawdata, {x: \"hour\", y: \"day\", fy: \"person\", color: \"drink\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"### 日時のデータをDateオブジェクトに変換する\n\nまず、日時のデータをJavaScriptのDateオブジェクトに変換する必要があります。\n\nここでは次の式を使います。\n\n```js\nnew Date(Date.UTC(year, monthIndex, day, hour, minute))\n```\n\n`Date.UTC()`は協定世界時で日時を指定し、1970年からのミリセカンド値を返す関数です。\nこの値をDateオブジェクトのコンストラクタのパラメータにします。\n\nUTCを使うのは、タイムゾーンを無視したいためです。\n複数のタイムゾーンを扱わない場合は、UTCに統一するほうが簡単に扱えます。\n\n1行目の日時は、次の式で変換できます。`monthIndex`はゼロスタートのため、`-1`を忘れずに。\n（`at(0)` は、 `[0]` と同じ）","pinned":false,"hidden":false,"mode":"md"},{"id":1215,"value":"new Date(\n Date.UTC(\n rawdata.at(0).year,\n rawdata.at(0).month - 1,\n rawdata.at(0).day,\n rawdata.at(0).hour,\n rawdata.at(0).minute\n )\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"### データに日時のプロパティを追加する\n\n`dataset` に `date` プロパティを追加します。\n\nデータのプロパティを変更したい場合は、`map()`メソッドを使って、**新しい配列**を作ります。\nもとの配列を改変しないようにしましょう。\n\n```js\ndataset = rawdata.map((d) => ({\n date: new Date(Date.UTC(d.year, d.month - 1, d.day, d.hour, d.minute)),\n ...d\n}))\n```\n\n`...d`は、スプレッド構文で、ここではオブジェクト`d`のすべてのプロパティをコピーしています。\n\n- 参考：[スプレッド構文 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)","pinned":false,"hidden":false,"mode":"md"},{"id":1397,"value":"demo_dataset = rawdata.map((d) => ({\n date: new Date(Date.UTC(d.year, d.month - 1, d.day, d.hour, d.minute)),\n ...d\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1410,"value":"### データをインポートする\n\nここまでのデータの読み込み、前処理は、別のノートブックにまとめておきましたので、個人のノートブックでTSVの読み込み、データの変換をする必要はありません。\n以下のコードで、`dataset`をインポートして使用してください。\n\n```js\nimport {dataset, people} from \"ad2642b7e4be8015\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1415,"value":"import { dataset, people } from \"ad2642b7e4be8015\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1417,"value":"dataset","pinned":true,"hidden":false,"mode":"ojs"},{"id":1627,"value":"Mapメソッドは非破壊のメソッド\n破壊か非破壊か毎回考える必要がある","pinned":false,"hidden":false,"mode":"md"},{"id":1420,"value":"people","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"### 配列の操作\n\n可視化をする前に配列を整えることが重要です。\n\nここではいくつかの配列操作を紹介します。\n\n#### 配列の改変\n\n配列の個数は変えずに、プロパティや値を変更する場合は、配列の`map()`メソッドを使って新しい配列を作ります。\n（上記）\n\n#### ソート\n\n配列の`sort()`メソッドを使います。`sort()`メソッドは元の配列を変更してしまう破壊的メソッドです。\n`[...array]`と書いて配列をコピーしてから、新しい配列をソートします。\n\nたとえば、`count`プロパティの値を昇順（小→大）でソートする場合、次のように書きます。\n\n```js\n[...dataset].sort((a,b) => a.count - b.count)\n```\n\n降順（大→小）でソートする場合、次のように書きます。\n\n```js\n[...dataset].sort((a,b) => b.count - a.count)\n```\n\nd3のソート関数を使うこともできます。\n\n\n```js\n[...dataset].sort((a,b) => d3.ascending(a.count, b.count)) // 昇順\n[...dataset].sort((a,b) => d3.descending(a.count, b.count)) // 降順\n```\n\n`d3.rank()`メソッドでは、ソートした値のみの配列を取得できます。\n\n```js\nd3.rank(dataset, (a,b) => d3.ascending(a.count, b.count)) // 昇順\nd3.rank(dataset, (a,b) => d3.descending(a.count, b.count)) // 降順\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1426,"value":"[...dataset].sort((a, b) => a.hour - b.hour)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1096,"value":"#### 抽出\n\n特定の条件に合致するデータのみを抽出するには、配列の`filter()`メソッドを使います。\n\nたとえば、個人のデータを抽出するには、次のように書きます。結果は配列で返ります。\n条件に合致するデータが見つからない場合は、空の配列`[]`が返ります。\n\n```js\ndataset.filter(d => d.person === \"Sugimoto\")\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1432,"value":"dataset.filter((d) => d.person === \"Tsuchiya\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":962,"value":"#### 抽出（１つだけ）\n\n特定の条件に合致するデータをを1つだけ抽出するには、配列の`find()`メソッドを使います。\n\n条件に合致する最初のデータが返ります。\n条件に合致するデータが見つからない場合は、`undefined`が返ります。\n\n```\ndataset.find(d => d.person === \"Sugimoto\")\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1438,"value":"dataset.find((d) => d.person === \"Tsuchiya\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1230,"value":"#### グループ化（めちゃめちゃ使う）\n\n配列をグループ化するには、`d3.group()`メソッドを使います。\n\n```js\nd3.group(dataset, d => d.person)\n```\n\n`d3.group()`メソッドは、__Mapオブジェクト__を返します。\nMapはObjectによく似ていますが、Objectよりもキーに自由度があるため、D3ではMapを多用します。\n\n`d3.group()`メソッドはd3v6以降の新しいメソッドです。\nネット上の古いサンプルコードでは、`d3.nest()`メソッドが使われていることがあります。\n`d3.nest()`メソッドは廃止されたので使えません。\n\n- 参照：[Map - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)\n\nMapオブジェクトではなく配列で取得したい場合は、`d3.groups()`メソッドを使います。\n\n```js\nd3.groups(dataset, d => d.person)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1444,"value":"d3.group(dataset, (d) => d.person)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1449,"value":"グループ化は、プロパティの値の一覧を作るのにも便利です。\n以下のコードで、飲み物の種類の一覧を取得できます。\n\n```js\n[...d3.group(dataset, d => d.drink).keys()]\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1453,"value":"[...d3.group(dataset, (d) => d.drink).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1233,"value":"#### 統計\n\n配列の値の統計処理をするためのさまざまなメソッドがあります。\n\n- `d3.max()` 最大値\n- `d3.min()` 最小値\n- `d3.extent()` 最小値と最大値の配列：スケール関数の引数に使うと便利\n- `d3.sum()` 合計値\n- `d3.mean()` 平均値\n- `d3.median()` 中央値\n- `d3.quantile()` [分位数](https://ja.wikipedia.org/wiki/%E5%88%86%E4%BD%8D%E6%95%B0)\n- `d3.deviation()` 標準偏差","pinned":false,"hidden":false,"mode":"md"},{"id":967,"value":"#### グループ化を使った抽出\n\n`people`は、`person`でグループしたデータです。\nそのため、`people.get()`でも名前で抽出できます。","pinned":false,"hidden":false,"mode":"md"},{"id":1458,"value":"people.get(\"Tsuchiya\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1238,"value":"`Inputs.select()`で`person`の選択メニューを作成します。\n`dataOfPerson`に抽出したデータが入ります。","pinned":false,"hidden":false,"mode":"md"},{"id":1107,"value":"viewof dataOfPerson = Inputs.select(people, { label: \"Person\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1469,"value":"dataOfPerson","pinned":true,"hidden":false,"mode":"ojs"},{"id":939,"value":"### 時間の軸を作る\n\n#### スケール関数\n\n時間軸を作るには、時間軸用のスケール関数`d3.scaleTime(), d3.scaleUtc()`を使うと便利です。\n\n今回は、タイムゾーンを使わないので、`d3.scaleUtc()`を使います。\n\n```js\n const xScale = d3\n .scaleUtc()\n .domain(d3.extent(dataset, (d) => d.date))\n .range([margin.left, width - margin.right]);\n```\n\n入力範囲`domain`には、dateの範囲（`[min, max]`）を指定します。\n配列の最小値と最大値を取得するには`d3.extent()`を使います。\nここでは`date`プロパティの範囲を得るために、第2引数に、`date`へのアクセサ関数を指定しています。\n\nつぎの2行のコードは、同じ結果を返します。\n\n```js\nd3.extent(dataset, d => d.date)\n[d3.min(dataset, d => d.date), d3.max(dataset, d => d.date)]\n```\n\n- 参考：[d3/d3-scale: Encodings that map abstract data to visual representation.](https://github.com/d3/d3-scale#time-scales)\n","pinned":false,"hidden":false,"mode":"md"},{"id":1247,"value":"#### 軸\n\n軸は、`d3.axisBottom()`で描いています。\n目盛りの間隔と表記（フォーマット）を指定するために、\n`tickValues()`メソッドと、`tickFormat()`メソッドを使っています。\n\n```js\n const xAxis = d3\n .axisBottom()\n .scale(xScale)\n .tickValues(xScale.ticks(d3.utcHour.every(12)))\n .tickFormat(d3.utcFormat(\"%d日 %H時\"));\n```\n\n- 参考：[d3/d3-time-format: Parse and format times, inspired by strptime and strftime.](https://github.com/d3/d3-time-format)","pinned":false,"hidden":false,"mode":"md"},{"id":1249,"value":"{\n const width = 800;\n const height = 100;\n const margin = { top: 10, right: 10, bottom: 20, left: 30 };\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width);\n\n // スケール関数\n const xScale = d3\n .scaleUtc()\n .domain(d3.extent(dataOfPerson, (d) => d.date))\n .range([margin.left, width - margin.right]);\n\n // 軸関数\n const xAxis = d3\n .axisBottom()\n .scale(xScale)\n .tickValues(xScale.ticks(d3.utcHour.every(12)))\n .tickFormat(d3.utcFormat(\"%d日 %H時\"));\n\n svg\n .append(\"g\")\n .selectAll(\"rect\")\n .data(dataOfPerson)\n .join(\"rect\")\n .attr(\"x\", (d) => xScale(d.date))\n .attr(\"y\", margin.top)\n .attr(\"width\", 4)\n .attr(\"height\", height - margin.bottom - margin.top)\n .attr(\"fill\", \"steelblue\")\n .attr(\"opacity\", 0.25);\n\n // 軸\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0, ${height - margin.bottom})`)\n .call(xAxis);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"### 日付と時間の軸で散布図を描く\n\nつぎに、縦軸を日付（17〜23）、\n横軸を時刻（00:00〜23:59）にした2次元平面にプロットします。","pinned":false,"hidden":false,"mode":"md"},{"id":1483,"value":"### データのグループ化\n\n作りたいチャートに合わせて、データをグループ化します。\n\n縦軸を日付にしたいので、`d3.group()`メソッドを使って、データを日付でグループ化します。\n結果は、Mapオブジェクトで返ってきます。\nデータが階層化されましたね。","pinned":false,"hidden":false,"mode":"md"},{"id":1497,"value":"dataOfPerson.at(0).date.getUTCDate()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1487,"value":"dataOfDates = {\n // データに　dateOnly と msec を追加\n // msecは、00:00からのミリ秒\n const dataWithDayMsec = dataOfPerson.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n msec: (d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000\n }));\n\n return d3.group(dataWithDayMsec, (d) => d.dateOnly);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"#### 階層化データをDOMの階層構造に落とし込む\n\nデータの階層にそって、チャートを描きます。\n\nSVGのDOMは、以下の階層構造になっています。\n\n軸関数の`tickFormat()`メソッドを使って、Y軸の目盛りを「月日(曜日)」表記に、X軸の目盛りを「時分」表記にしました。\n\n~~~\nsvg\n g.xAxis // X軸\n g.yAxis // Y軸\n g.day // 日付のグループ（データとバインド）\n circle // 青い円（データの値とバインド）\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1492,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":983,"value":"つぎの例は、1日を4つの時間帯にグループ化し、それぞれのグループ内で均等に円を配置します。\n\nSVGのDOMは、以下の階層構造になっています。\n\n~~~\nsvg\n g.xAxis // X軸\n g.yAxis // Y軸\n g.day // 日付のグループ (x 7)\n g.time // 時間帯のグループ (7 x 4)\n rect // 半透明の白い角丸の背景\n circle // 青い円（データと結合）\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1509,"value":"dataOfDatesTimes = {\n // データに　day と time を追加\n // timeは6時間ごとの時間帯で0,1,2,3の値をとる\n const dataWithDayTime = dataOfPerson.map((d) => ({\n ...d,\n dateOnly: new Date(\n Date.UTC(\n d.date.getUTCFullYear(),\n d.date.getUTCMonth(),\n d.date.getUTCDate()\n )\n ),\n time: Math.floor(\n ((d.date.getUTCHours() * 60 + d.date.getUTCMinutes()) * 60 * 1000) /\n (6 * 60 * 60 * 1000)\n )\n }));\n return d3.group(\n dataWithDayTime,\n (d) => d.dateOnly,\n (d) => d.time\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1514,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1516,"value":"### カラースケール\n\n最後に円の色を変えます。\n\n値に応じて色をマッピングするので、ここでもスケール関数を使います。\nたとえば次のように書きます。\n\n~~~js\nconst color = d3.scaleOrdinal() // 順序尺度のためのスケール関数\n .domain(['赤色', '青色', '黄色']) // 入力ドメインは、データ内の値の配列\n .range(['red', 'blue', 'yellow']); // 出力レンジは、attrで指定する色の値の配列（#000000やrgb()、hsl()でもOK）\n~~~\n\n下の例では、データに存在するすべての色の値をあらかじめ知ることができないため、\nデータに登場するdrinkを10色のカラーパレットにあてはめています（もし11種類以上あれば、カラーパレットをくり返します）。\n\n~~~js\nconst drinks = d3.group(data, d => d.drink);\nconst color = d3\n .scaleOrdinal()\n .domain([...drinks.keys()])\n .range(d3.schemeCategory10);\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1522,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1526,"value":"drinks = d3.group(dataset, (d) => d.drink)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1529,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([...drinks.keys()])\n .range([\n \"white\",\n \"orange\",\n \"silver\",\n \"black\",\n \"paleblue\",\n \"gray\",\n \"green\",\n \"yellow\",\n \"none\",\n \"silver\",\n \"red\",\n \"blue\",\n \"gold\",\n \"green\",\n \"gray\",\n \"white\",\n \"purple\"\n ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1531,"value":"colorScale(\"水\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1117,"value":"### 極座標を作る\n\n極座標を作るには、角度を出力するスケール関数を作ると便利です。\n\n極座標用の軸関数はないので、自分で実装する必要があります。","pinned":false,"hidden":false,"mode":"md"},{"id":1544,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"### 外部のSVGファイルを読み込む\n\nSVGで、四角や円などの基本的な図形以外の複雑な図形は`path`要素で描けます。\nただし、頂点やコントロールポイントの座標を手書きで指定するのは難しいので、複雑な図形は、ドローイングソフトを使って描いたものを読み込みます。\n\n座標値が重要なので、原点をどこにするかをよく考えて描きます。\nアイコンのような使い方をする場合は、原点を中心にして描くと扱いやすいです。\n\n1. Adobe IllustratorやInkscapeなどでSVGファイルを保存します。\n2. SVGOMG で最適化します。\nhttps://jakearchibald.github.io/svgomg/","pinned":false,"hidden":false,"mode":"md"},{"id":985,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1272,"value":"Illustratorが書き出したSVGコード。（`width=\"100\"`のみ追記）","pinned":false,"hidden":false,"mode":"md"},{"id":1557,"value":"_heart = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":1559,"value":"最適化したSVGコード。（`width=\"100\"`のみ追記）","pinned":false,"hidden":false,"mode":"md"},{"id":1561,"value":"heart = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":987,"value":"SVGのなかの要素を取得するには、`select()`メソッドを使います。","pinned":false,"hidden":false,"mode":"md"},{"id":1566,"value":"heartPath = d3.select(heart).select(\"path\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1568,"value":"heartD = heartPath.attr(\"d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1570,"value":"d3Heart = d3.select(heart)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1123,"value":"新たに作成したSVGに、`path`要素を追加し、`d`属性にパスを指定しています。","pinned":false,"hidden":false,"mode":"md"},{"id":1280,"value":"{\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", 100);\n\n // 10個のグループ要素を生成　X座標、色、透明度を指定\n const g = svg\n .selectAll(\"g\")\n .data(d3.range(10))\n .join(\"g\")\n .attr(\"transform\", (d) => `translate(${d * 75}, 0)`)\n .attr(\"fill\", d3.scaleLinear().domain([0, 9]).range([\"orange\", \"pink\"]))\n .attr(\"stroke\", \"red\")\n .attr(\"opacity\", (d) => 0.1 + d / 9);\n\n // グループ要素にpath要素を追加し、d属性にheartPathのd属性を指定\n g.append(\"path\").attr(\"d\", heartD);\n\n // 次のように SVG 要素をコピーして追加する方法もある\n // g.each(function () {\n // d3.select(this).node().appendChild(heart.cloneNode(true));\n // });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"さきほどのチャートの円をハート形に変えてみます。","pinned":false,"hidden":false,"mode":"md"},{"id":1284,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"mdh`#### アニメーション（トランジション）\n\nトランジション機能で属性の値を徐々に変化させることができます。\nD3セレクションオブジェクトの\\`transition()\\`メソッドを使います。\nここでは、散布図の各ポイントの半径を0から指定の値まで変化させています。\n\n~~~js\n svg\n .selectAll(\"circle\")\n .data(dataset)\n .join(\"circle\")\n .attr(\"cx\", d => xScale(d.x))\n .attr(\"cy\", d => yScale(d.y))\n ___.attr(\"r\", 0)___ // 初期値（半径0）\n .attr(\"fill\", \"red\")\n .attr(\"opacity\", 0.5)\n ___.transition()___ // ここからトランジション\n ___.duration(3000)___ // トランジションにかかる時間（3000ms）\n ___.delay((d, i) => i * 100)___ // 遅延時間（データ番号順に100ms）\n ___.attr(\"r\", d => rScale(d.z))___; // 最終値\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1585,"value":"scatterUrl = `https://docs.google.com/spreadsheets/d/e/2PACX-1vRgABhzZkXwZihskMCzNWKcL5lqRwyHRF-bygd7uxZ1rq7DbgcZXpSLClyh9FPJlw_JroNhDK73QUq-/pub?gid=0&single=true&output=tsv`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"scatterData = d3.tsv(scatterUrl, d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"### ビデオ\n\n折れ線グラフの解説は省略します。下記のビデオを参考にしてください。\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":506,"value":"makeLinksTargetBlank = {\n // set all links target blank\n return d3.selectAll(\".observablehq-root a\").each(function () {\n const link = d3.select(this);\n if (link.attr(\"href\") !== \"\") {\n link.attr(\"target\", \"_blank\");\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1241,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"import { graphic } from \"@d3/margin-convention\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"import { linkButton } from \"@sugi2000/link-button\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"import { toc } from \"@sugi2000/toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"import { banner } from \"@sugi2000/banner\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1014,"value":"import { buttons } from \"@observablehq/keys\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"import { mdh } from \"@sugi2000/d3-6-0-migration-guide-in-japanese\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}