2f:T167a,//データを充電デバイスの個数が変動する時間をと個数などを入れた配列に変換する関数 function chargingData(data) { //年や時間のデータをDate形式のデータに変えて開始時刻と終了時刻を返す関数 const events = data.map((d) => { const startDate = new Date( d.year, d.month - 1, d.day, d.start_hour, d.start_min ); const endDate = new Date( d.end_year, d.end_month - 1, d.end_day, d.end_hour, d.end_min ); return { start_time: startDate, end_time: endDate, in_use: d.in_use === "YES" }; }); // 出力したデータから最小・最大時間を抜き出す const minTime = new Date(Math.min(...events.map((e) => e.start_time))); const maxTime = new Date(Math.max(...events.map((e) => e.end_time))); const minuteDataMap = new Map(); // minTime から maxTime までの総経過分を計算 (1000ms * 60s = 60000ms で1分) // Math.round()で四捨五入し分を出す const totalMinutes = Math.round( (maxTime.getTime() - minTime.getTime()) / 60000 ); // totalMinutes分の配列を作成、全てをundefined(_)からiに変更することで時間をminTimeからの経過分数で表す const allMinutesArray = Array.from({ length: totalMinutes }, (_, i) => i); // map() を使用して、すべての経過分を処理 allMinutesArray.map((minuteIndex) => { // 開始時刻 (minTime) に minuteIndex 分を加算して現在時刻を計算 const currentTime = new Date(minTime.getTime() + minuteIndex * 60000); // timeKey は Map のキーとしてのみ使用 //getFullYear()→年を出す　getMonth()→月-1を出す //padStart(2,"0")二桁未満の数字の最初に0をつける //timeKeyは2025-10-21 00:00のように返ってくる const timeKey = `${currentTime.getFullYear()}-${(currentTime.getMonth() + 1) .toString() .padStart(2, "0")}-${currentTime .getDate() .toString() .padStart(2, "0")} ${currentTime .getHours() .toString() .padStart(2, "0")}:${currentTime .getMinutes() .toString() .padStart(2, "0")}`; const { deviceCount, inUseCount } = events.reduce( (counts, event) => { // 開始時刻>=, 終了時刻< const isCharging = currentTime >= event.start_time && currentTime < event.end_time; if (isCharging) { counts.deviceCount++; if (event.in_use) { counts.inUseCount++; } } return counts; }, { deviceCount: 0, inUseCount: 0 } //初期値 ); minuteDataMap.set(timeKey, { time: currentTime, device_number: deviceCount, in_use_number: inUseCount }); }); const initialAccumulator = { // 最終的な結果を保持する配列 aggregatedData: [], currentGroup: null }; //sortで文字順に並び替える //keysでminuteDataMapのtime,device_number,in_use_numberを返す const minuteKeys = Array.from(minuteDataMap.keys()).sort(); // minuteKeys を reduce で処理する const finalAccumulator = minuteKeys.reduce((acc, timeKey) => { const dataPoint = minuteDataMap.get(timeKey); if (acc.currentGroup === null) { // 最初のグループを開始 acc.currentGroup = { start_time: dataPoint.time, device_number: dataPoint.device_number, in_use_number: dataPoint.in_use_number }; } else if ( dataPoint.device_number === acc.currentGroup.device_number && dataPoint.in_use_number === acc.currentGroup.in_use_number ) { // 状態継続: 何もしない (acc.currentGroup はそのまま) } else { // 状態変化 -> 前のグループを終了 // 終了時刻は現在のデータポイントの1分前 const previousTime = new Date(dataPoint.time); previousTime.setMinutes(previousTime.getMinutes() - 1); acc.currentGroup.end_time = previousTime; // 終了したグループを結果配列に追加 acc.aggregatedData.push(acc.currentGroup); // 新しいグループを開始 acc.currentGroup = { start_time: dataPoint.time, device_number: dataPoint.device_number, in_use_number: dataPoint.in_use_number }; } return acc; }, initialAccumulator); const aggregatedData = finalAccumulator.aggregatedData; if (finalAccumulator.currentGroup !== null) { // 最後のグループの end_time は、全体の maxTime を使用 finalAccumulator.currentGroup.end_time = maxTime; aggregatedData.push(finalAccumulator.currentGroup); } return aggregatedData.map((d) => { // 日付のみを出す const formatDay = (date) => { // const year = date.getFullYear(); // const month = (date.getMonth() + 1).toString().padStart(2, "0"); const day = date.getDate().toString().padStart(2, "0"); return Number(`${day}`); }; const startHour = d.start_time.getHours(); // 昼の12時（正午）以降かどうかを判定 (12, 13, ..., 23 が TRUE) const isAfternoon = startHour >= 12; return { // 開始時刻を日付（数字）、時、分に分解 start_day: formatDay(d.start_time), start_hour: startHour, start_min: d.start_time.getMinutes(), // 終了時刻を日付（数字）、時、分に分解 end_day: formatDay(d.end_time), end_hour: d.end_time.getHours(), end_min: d.end_time.getMinutes(), device_number: d.device_number, in_use_number: d.in_use_number, // ✅ 新しく追加したフラグ is_afternoon: isAfternoon }; }); }30:T8d5,//継続時間を1時間ずつ切り分ける関数。充電していない時間も配列を一個加える。 function hourByDay(processedData) { // Dateに変換する関数 const createDate = (day, hour, min) => { const now = new Date(); const year = now.getFullYear(); const month = now.getMonth(); const date = day; return new Date(year, month, date, hour, min); }; const finalSegments = processedData.reduce((finalSegmentsAcc, segment) => { const startTime = createDate( segment.start_day, segment.start_hour, segment.start_min ); const endTime = createDate( segment.end_day, segment.end_hour, segment.end_min ); //開始から終了までの長さを計算する const durationMins = (endTime.getTime() - startTime.getTime()) / 60000; let totalHours = 0; const fullHours = Math.floor(durationMins / 60); //端数の時間を除いて何時間充電していたか？ const remainingMins = durationMins % 60; // 端数の分は何分か？ let roundedHour = 0; //1時間未満を全て1時間とする&端数が45以上なら1時間とする if ((fullHours == 0 && remainingMins > 0) || remainingMins >= 45) { roundedHour = 1; } totalHours = fullHours + roundedHour; // 整数時間 + 端数の時間 // device_number が 0 の場合、totalHours を 1 に上書きする＝時間の数増える図形を0の場合一個にする if (Number(segment.device_number) === 0 && totalHours > 0) { totalHours = 1; } if (totalHours > 0) { // 開始時刻 const currentDay = segment.start_day; //totalHoursの長さの配列を作って開始日とデバイス数と使用デバイス数を午前午後boolを入れる const newSegments = Array.from({ length: totalHours }, (_, i) => { return { day: currentDay, device_number: Number(segment.device_number), in_use_number: Number(segment.in_use_number), is_afternoon: segment.is_afternoon }; }); // 最終的な配列に追加する finalSegmentsAcc.push(...newSegments); } return finalSegmentsAcc; }, []); //初期値 return finalSegments; }31:Tbb8,mitsuiChart = (data) => { const processedData = chargingData(data); const nextData = hourByDay(processedData); const finalData = HourIndex(nextData); const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //背景 svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#fff"); //marginを追加 const g = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const points = g .selectAll("path.point") .data(finalData) .join("path") .attr("class", "point"); const scaleNumX = d3.max(finalData, (d) => d.hour_index); //x軸に入る個数の最大 const scaleNumY = d3.max(finalData, (d) => d.day) - d3.min(finalData, (d) => d.day) + 1; //y軸に入る数(日数) const scaleNum = Math.min(widthA / scaleNumX, heightA / scaleNumY); //NumXとNumYのうち小さい方を図形サイズとする //hour_indexの最大値を日毎に求める(右詰めにするときに使用) const maxHourData = d3 .groups(finalData, (d) => d.day) .map(([day, values]) => ({ day: day, max_hour_index: d3.max(values, (d) => d.hour_index) })); const dayDomain = maxHourData.map((d) => d.day); const maxHourRange = maxHourData.map((d) => d.max_hour_index); //日付を入れるとその日のhour_indexの最大値を返す関数 const maxHour = d3.scaleOrdinal().domain(dayDomain).range(maxHourRange); points .attr("d", (d) => pattern(d.device_number)) //デバイスの個数によって呼び出すsvgを変更 .attr("stroke", "black") .attr("stroke-width", (d) => (d.device_number == 0 ? 0 : 10)) //デバイスが0の時に線を消す .attr("transform", (d, i) => { const x = d.is_afternoon === false ? ((d.hour_index - 1) * widthAll) / scaleNumX //午前は左詰め : ((scaleNumX - (maxHour(d.day) - d.hour_index) - 1) * widthAll) / scaleNumX; //午後は右詰め const y = (heightAll / scaleNumY) * (d.day - d3.min(finalData, (d) => d.day)); //日付でyを決定 return `translate(${x},${y}) scale(${0})`; }) .attr("fill", (d) => { // 透明度を取得 const alpha = d.device_number === 0 ? 0 : d.in_use_number / d.device_number; //デバイス数が0なら透明度0、1以上なら使用デバイスの割合に return `rgba(0, 0, 0, ${alpha})`; }) .transition() .duration(3000) .delay((d, i) => i * 10) .attr("transform", (d, i) => { const x = d.is_afternoon === false ? ((d.hour_index - 1) * widthAll) / scaleNumX //午前は左詰め : ((scaleNumX - (maxHour(d.day) - d.hour_index) - 1) * widthAll) / scaleNumX; //午後は右詰め const y = (heightAll / scaleNumY) * (d.day - d3.min(finalData, (d) => d.day)); //日付でyを決定 return `translate(${x},${y}) scale(${scaleNum})`; }); return svg.node(); }32:T1c4c,mitsuiLegend = (data) => { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); //種類 // const size1 = heightAll / 24 <= 24 ? 24 : heightAll / 24; const size1 = heightAll / 24; //大きい文字のサイズ const size2 = (size1 / 5) * 3; //小さい文字のサイズ svg .append("text") .attr("x", 0) .attr("y", size1) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", size1) .text("記号の種類=充電していたデバイスの数"); const numHeight = size1 + 10; const scale1 = widthAll < 600 ? widthA / 7 : 600 / 550 / 7; const scaleSize = scale1 * 550; //大きい記号のサイズ const num = ["1個", "2個", "3個", "4個", "5個", "6個"]; svg .selectAll("g") .data(num) .join("path") .attr("class", "g") .attr("d", (d, i) => pattern(i + 1)) .attr( "transform", (d, i) => `translate(${scale1 * 550 * i}, ${numHeight}) scale(${scale1})` ); svg .selectAll("g") .data(num) .join("text") .attr("x", (d, i) => scale1 * 550 * i + scaleSize / 2) .attr("y", numHeight + scaleSize / 2) .attr("fill", "white") .attr("font-weight", "bold") .attr("font-size", size2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .text((d) => d); //縦軸 svg .append("text") .attr("x", 0) .attr("y", size1 * 2 + scaleSize + 10) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", size1) .text("縦軸=日付"); svg .append("text") .attr("x", 0) .attr("y", size1 * 2 + scaleSize + 20 + size2) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text("上から下へ日付が進むごとに行を変更"); //数 const scale2 = widthAll < 600 ? widthA / 10 : 600 / 550 / 10; const scaleSize2 = scale2 * 550; //小さい記号のサイズ svg .append("text") .attr("x", 0) .attr("y", size1 * 3 + scaleSize + 20 + size2 * 2) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", size1) .text("記号の数=充電していた時間(1h)"); svg .append("text") .attr("x", scaleSize2 * 3 + 10) .attr("y", size1 * 3 + scaleSize + 20 + size2 * 4) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text("3つ=約3時間充電していた"); svg .append("text") .attr("x", scaleSize2 * 3 + 10) .attr("y", size1 * 3 + scaleSize + 20 + size2 * 5) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text("(1~104分充電で1つ、105~165分で2つ)"); //濃度 svg .append("text") .attr("x", 0) .attr("y", size1 * 3 + scaleSize + size2 * 3 + scaleSize2 * 2) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", size1) .text("記号の濃度=充電中使用していたデバイス数/充電デバイス数"); const arrayOpa = [ "丸:1個のデバイス中0個を使った(透明度0)", "三角:2個のデバイス中1個を使った(透明度0.5)", "四角:3個のデバイス中3個を使った(透明度1)" ]; svg .selectAll("g") .data(arrayOpa) .join("text") .attr("x", 200) .attr( "y", (d, i) => size1 * 3 + scaleSize + 20 + size2 * (4 + i) + scaleSize2 * 2 ) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text((d) => d); const numArray = [ { opa: 0, pattern: Pattern1D }, { opa: 0.5, pattern: Pattern2D }, { opa: 1, pattern: Pattern3D } ]; svg .selectAll("g") .data(numArray) .join("path") .attr("class", "g") .attr("stroke-width", 10) .attr("stroke", "black") .attr("fill", (d) => `rgba(0, 0, 0, ${d.opa})`) .attr("d", (d) => d.pattern) .attr( "transform", (d, i) => `translate(${10 + i * 55}, ${ size1 * 3 + scaleSize + size2 * 4 + scaleSize2 * 2 }) scale(0.1)` ); const timeArray = [0, 1, 2]; svg .selectAll("g") .data(timeArray) .join("path") .attr("class", "g") .attr("d", Pattern1D) .attr( "transform", (d, i) => `translate(${i * scaleSize2}, ${ size1 * 3 + scaleSize + 20 + size2 * 3 }) scale(${scale2})` ); const Array = [ { opa: 1, pattern: Pattern1D }, { opa: 0.5, pattern: Pattern2D }, { opa: 0.5, pattern: Pattern2D }, { opa: 0.5, pattern: Pattern2D }, { opa: 0.3, pattern: Pattern3D } ]; svg .selectAll("g") .data(Array) .join("path") .attr("class", "g") .attr("stroke-width", 10) .attr("stroke", "black") .attr("fill", (d) => `rgba(0, 0, 0, ${d.opa})`) .attr("d", (d) => d.pattern) .attr( "transform", (d, i) => `translate(${i * 55 + 5}, ${ size1 * 7 + scaleSize + 20 + size2 * 11 + scaleSize2 * 2 }) scale(0.1)` ); const Array2 = [ { opa: 0, pattern: Pattern1D }, { opa: 0.5, pattern: Pattern2D }, { opa: 0.5, pattern: Pattern2D }, { opa: 1, pattern: Pattern1D } ]; svg .selectAll("g") .data(Array2) .join("path") .attr("class", "g") .attr("stroke-width", 10) .attr("stroke", "black") .attr("fill", (d) => `rgba(0, 0, 0, ${d.opa})`) .attr("d", (d) => d.pattern) .attr( "transform", (d, i) => `translate(${i * 55 + 355}, ${ size1 * 7 + scaleSize + 20 + size2 * 11 + scaleSize2 * 2 }) scale(0.1)` ); svg .append("text") .attr("x", 0) .attr("y", size1 * 6 + scaleSize + 20 + size2 * 6 + scaleSize2 * 2) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", size1) .text("記号の位置=充電開始時刻"); svg .append("text") .attr("x", 20) .attr("y", size1 * 6 + scaleSize + 20 + size2 * 8 + scaleSize2 * 2) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text("左詰め：12時前に充電開始　右詰め：12時より後に充電開始"); svg .append("text") .attr("x", 0) .attr("y", size1 * 7 + scaleSize + 20 + size2 * 10 + scaleSize2 * 2) .attr("fill", "black") .attr("font-weight", "bold") .attr("font-size", size1) .text("例"); svg .append("text") .attr("x", 20) .attr("y", size1 * 10 + scaleSize + 20 + size2 * 12 + scaleSize2 * 2) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text( "12時より前：1個の端末を使用しながら充電開始→1時間後に1個の端末を使用せず追加充電→3時間後に1個の端末を使用せず追加充電" ); svg .append("text") .attr("x", 20) .attr("y", size1 * 10 + scaleSize + 20 + size2 * 11 + scaleSize2 * 2) .attr("fill", "black") .attr("font-weight", "nomal") .attr("font-size", size2) .text( "12時より後：1個の端末を使用せず充電開始→1時間後に1個の端末を使用しながら追加充電→2時間後に使用していなかった端末の充電終了" ); return svg.node(); }33:[] 2d:{"title":"三井 Data Drawing","cells":[{"id":0,"value":"# 三井 Data Drawing","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"ラジオボタンの表示","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"viewof currentData = Inputs.radio(dataByName, {\n label: md`**Name**`,\n value: dataByName.get(\"Mitsui\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"チャートの表示","pinned":false,"hidden":false,"mode":"md"},{"id":18,"value":"mitsuiChart(currentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"凡例の表示","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"mitsuiLegend(currentData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"---\n\n関数の定義","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"// セル名: processedChargingData (結果の配列)\n\nprocessedData = {\n return chargingData(currentData);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"// セル名: finalData\nNextData = hourByDay(processedData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"//HourIndexを配列に追加して、dayが変わる毎に数字が1に戻るようにすることでx軸の計算が楽になるようにする\n\nfunction HourIndex(segments) {\n //処理している配列のdayの-1をlastDayとして記録\n let lastDay = null;\n let currentHourIndex = 0;\n\n // reduce を使って、前の要素の day を参照しながら処理を蓄積する\n const finalSegments = segments.reduce((acc, segment) => {\n if (segment.day !== lastDay) {\n // 日が変わった場合、Indexを 1 にリセットし、lastDayを更新する\n currentHourIndex = 1;\n lastDay = segment.day;\n } else {\n // 日が変わっていない場合、Indexを増やす\n currentHourIndex++;\n }\n\n // hour_index 列を追する\n acc.push({\n ...segment,\n hour_index: currentHourIndex\n });\n\n return acc;\n }, []); // 初期値\n\n return finalSegments;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"finalData = {\n return HourIndex(NextData);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1473,"value":"height = (width * 150) / 215","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"margin = ({ top: 30, right: 30, bottom: 30, left: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1489,"value":"widthAll = width - (margin.left + margin.right)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"heightAll = height - (margin.top + margin.bottom)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"//All/512がg要素内で縦または横でピッタリに表示されるサイズ数字を大きくすると余白ができる\nwidthA = widthAll / 550","pinned":true,"hidden":false,"mode":"ojs"},{"id":1478,"value":"heightA = heightAll / 512","pinned":false,"hidden":false,"mode":"ojs"},{"id":1017,"value":"以下svg保存用","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"Pattern0 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"Pattern1 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"Pattern2 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"Pattern3 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"Pattern4 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1297,"value":"Pattern5 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1446,"value":"Pattern6 = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"Pattern0Path = d3.select(Pattern0).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"Pattern0D = Pattern0Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":846,"value":"d3Pattern1 = d3.select(Pattern0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"Pattern1Path = d3.select(Pattern1).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"Pattern1D = Pattern1Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"d3Pattern = d3.select(Pattern1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"Pattern2Path = d3.select(Pattern2).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"Pattern2D = Pattern2Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"d3Pattern2 = d3.select(Pattern2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"Pattern3Path = d3.select(Pattern3).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"Pattern3D = Pattern3Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"d3Pattern3 = d3.select(Pattern3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"Pattern4Path = d3.select(Pattern4).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"Pattern4D = Pattern4Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"d3Pattern4 = d3.select(Pattern4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1313,"value":"Pattern5Path = d3.select(Pattern5).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"Pattern5D = Pattern5Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"d3Pattern5 = d3.select(Pattern5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"Pattern6Path = d3.select(Pattern6).select(\"path\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1448,"value":"Pattern6D = Pattern6Path.attr(\"d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1450,"value":"d3Pattern6 = d3.select(Pattern6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"pattern = d3\n .scaleOrdinal()\n .domain([0, 1, 2, 3, 4, 5, 6])\n .range([\n Pattern0D,\n Pattern1D,\n Pattern2D,\n Pattern3D,\n Pattern4D,\n Pattern5D,\n Pattern6D\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", 100)\n .attr(\"viewBox\", [0, 0, width, 100]);\n\n svg\n .append(\"path\")\n .attr(\"d\", pattern(0))\n .attr(\"transform\", \"translate(0,0) scale(0.15)\")\n .attr(\"opacity\", \"0.1\");\n\n svg\n .append(\"path\")\n .attr(\"d\", pattern(1))\n .attr(\"transform\", \"translate(100,0) scale(0.15)\")\n .attr();\n svg\n .append(\"path\")\n .attr(\"d\", pattern(2))\n .attr(\"transform\", \"translate(200,0) scale(0.15)\")\n .attr();\n svg\n .append(\"path\")\n .attr(\"d\", pattern(3))\n .attr(\"transform\", \"translate(300,0) scale(0.15)\")\n .attr();\n svg\n .append(\"path\")\n .attr(\"d\", pattern(4))\n .attr(\"transform\", \"translate(400,0) scale(0.15)\")\n .attr();\n svg\n .append(\"path\")\n .attr(\"d\", pattern(5))\n .attr(\"transform\", \"translate(500,0) scale(0.15)\")\n .attr();\n svg\n .append(\"path\")\n .attr(\"d\", pattern(6))\n .attr(\"transform\", \"translate(600,0) scale(0.15)\")\n .attr();\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"---\n\nデータのインポート","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import { dataset, dataByName, names } from \"930e107bebaff325\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"[...d3.group(dataset, (d) => d.name).keys()]","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}