2c:null 2d:["$","title",null,{"children":"data_drawing | kom-shin | Observable"}] 32:Tc7b,{ const xScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleUtc() .domain([0, 24 * 60 * 60 * 1000]) .range([margin.top, height - margin.bottom]); //軸メモリ // const xAxis = d3 // .axisBottom() // .scale(xScale) // .ticks(7) // .tickFormat(d => d3.timeFormat(`%d日`)(d)) // 目盛りのフォーマット（書式）を指定 // .tickSize(-(height - margin.top - margin.bottom)); // const yAxis = d3 // .axisLeft() // .scale(yScale) // .ticks(4) // .tickFormat(d3.utcFormat('%H:%M')) // .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(groupedData) .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)`); //SVG // const shape = timeG // .selectAll('g.shape') // .data(d => d[1]) // .join('g') // .attr('x', d => xScale(d.day) + xScale.bandwidth() / 2) // .attr('y', d => yScale(d.time)) // // .attr('transform', d => `translate(${xScale(d.day) + xScale.bandwidth() / 2}, ${yScale(d.time)})`) // .attr('class', material) // .attr('fill', d => action(d)) // .attr('stroke-width', 1) // .attr("opacity", 0.75); //丸で表示 // svg // .selectAll("circle") // .data(dataWithDay) // .join("circle") // .attr('transform', d => `translate(${xScale(d.day) + xScale.bandwidth() / 2}, ${yScale(d.time)})`) // .attr("r", 5) // .attr('fill', d => action(d)) // .attr("opacity", 0.5); svg .selectAll("line") .data(dataWithDay) .join("line") .attr("x1", d => xScale(d.day)+ xScale.bandwidth() / 2) .attr("y1", margin.bottom) .attr("x2", d => xScale(d.day)+ xScale.bandwidth() / 2) .attr("y2", height-margin.bottom) .attr("stroke",'white') .attr('stroke-width', 1) .attr("opacity", 0.2); svg .selectAll("text") .attr('text-anchor', 'middle') .data(dataWithDay) .join("text") .text(function(d){ return _material(d) }) .attr('x', d => xScale(d.day) + 34) .attr('y', d => yScale(d.time) + 5) .attr('fill', d => action(d)) .attr("opacity", 0.5); // svg // .selectAll('g.xAxis, g.yAxis') // .selectAll('line, path') // .attr('stroke', 'white') // .attr('opacity', 0.5); // for (let node of shape.nodes()) { // svgMaterial(node); // } return svg.node(); }33:T9d2,action = d => { if (d.action == '拭く' || d.action == 'ふく') { return 'red'; } else if (d.action == '書く' || d.action == '描く' || d.action == 'かく') { return 'blue'; } else if (d.action == '読む'　|| d.action == 'よむ') { return 'yellow'; } else if (d.action == 'めくる') { return 'green'; } else if (d.action == '持つ' || d.action == '手に取る') { return 'purple'; } else if (d.action == '貼る' || d.action == 'はる') { return 'pink'; } else if (d.action == '着ける' || d.action == 'つける') { return 'blown'; } else if (d.action == '剥がす' || d.action == 'はがす') { return 'purple'; } else if (d.action == 'めくる') { return 'ivory'; } else if (d.action == '出す' || d.action == 'だす') { return 'orange'; } else if (d.action == 'しまう') { return 'magenta'; } else if (d.action == '置く' || d.action == 'おく') { return 'cyan'; } else if (d.action == 'どかす') { return 'violet'; } else if (d.action == '運ぶ' || d.action == '持ち運ぶ') { return 'lavender'; } else if (d.action == '開く' || d.action == '開ける' || d.action == '広げる') { return 'skyblue'; } else if (d.action == '閉じる' || d.action == '閉める' || d.action == 'たたむ') { return 'olive'; } else if (d.action == '擤む' || d.action == 'かむ') { return 'maroon'; } else if (d.action == '捨てる'　|| d.action == 'すてる') { return 'indigo'; } else if (d.action == '切る'　|| d.action == 'きる') { return 'navy'; } else if (d.action == '破る'　|| d.action == 'やぶる') { return 'lime'; } else if (d.action == 'はたく') { return 'darkblue'; } else if (d.action == '注ぐ' || d.action == 'そそぐ') { return 'khaki'; } else if (d.action == '渡す' || d.action == 'わたす') { return 'turquoise'; } else if (d.action == '貰う' || d.action == 'もらう') { return 'crimson'; } else if (d.action == '張る') { return 'gold'; } else if (d.action == '返す' || d.action == '裏返す') { return 'silver'; } else if (d.action == '見る' || d.action == 'みる') { return 'gray'; } else if (d.action == '入れ替える') { return 'white'; } else { return 'black'; } } // action = d => d3 // .scaleOrdinal() // .domain(['拭く','書く', '読む', 'めくる', '持つ', '']) // .range(['red', 'blue', 'yellow', 'green', 'purple', 'black'])(d.action)34:[] 30:{"id":"e3218125d9b944b7","slug":"data_drawing","title":"data_drawing","thumbnail":"8a930f667d9eb3e1c56a77116ba500ae61a503403a69ae8e605510c122f20c70","access_level":"public","create_time":"$D2020-11-20T07:59:19.881Z","update_time":"$D2021-01-22T06:29:56.840Z","view_time":null,"first_public_time":"$D2020-11-20T08:01:02.642Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aac889ca864777ad","login":"kom-shin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/780884286f059ec8795e6c3fc5c29d062aa51c84063a8f776bb696189a2b20bc","tier":"starter_2024"},"version":542,"publish_version":542,"role":null,"authored":false,"authors":[{"type":"individual","id":"d22ce38c122609b3","login":"kom-shin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/780884286f059ec8795e6c3fc5c29d062aa51c84063a8f776bb696189a2b20bc","tier":null}],"members":[{"type":"individual","id":"d22ce38c122609b3","login":"kom-shin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/780884286f059ec8795e6c3fc5c29d062aa51c84063a8f776bb696189a2b20bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"data_drawing","cells":[{"id":0,"value":"md`# data_drawing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof name = {\n const nameSelect = d3.select(\n select({ title: 'ユーザ名', options: ['', ...names], value: 'kom-shin' })\n );\n\n nameSelect\n .select('select')\n .style('font-size', '1.5rem')\n .style('padding', '0.5rem');\n return nameSelect.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"md`以下下準備`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"width = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"height = 300;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"margin = ({ top: 30, right: 30, bottom: 30, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"data = getData(name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"dataWithDay = data.map(d => ({\n day: new Date(\n d.date.getFullYear(),\n d.date.getMonth(),\n d.date.getDate()\n ).getTime(),\n time: (d.date.getHours() * 60 + d.date.getMinutes()) * 60 * 1000,\n ...d\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"times = d3.group(data, d => d.date.getTime())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"dates = d3.group(dataWithDay, d => d.day)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"groupedData = d3.group(dataWithDay, d => d.day, d => d.time)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"material = d => {\n if (d.material == 'さらさら') {\n return 'rustling';\n } else if (d.material == 'ツルツル') {\n return 'silky';\n } else if (d.material == 'ふわふわ') {\n return 'fluffy';\n } else if (d.material == 'すべすべ') {\n return 'smoothness';\n }\n}\n\n// material = d => d3\n// .scaleOrdinal()\n// .domain(['ふわふわ','すべすべ', 'さらさら', 'つるつる', 'その他'])\n// .range(['fluffy', 'smoothness', 'rustling', 'silky', 'aaa'])(d.material)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"_material = d => {\n if (d.material == 'さらさら') {\n return '■';\n } else if (d.material == 'ツルツル'　|| d.material == 'つるつる') {\n return '●';\n } else if (d.material == 'ふわふわ') {\n return '▶︎';\n } else if (d.material == 'すべすべ') {\n return '♦︎';\n } else if (d.material == 'ざらざら') {\n return '^';\n } else if (d.material == 'かたい') {\n return '#';\n } else if (d.material == 'ペラペラ' || d.material == 'ぺらぺら') {\n return '~';\n } else if (d.material == 'しっとり') {\n return '=';\n } else if (d.material == 'かさかさ') {\n return '<';\n } else if (d.material == 'あつい') {\n return '>';\n } else {\n return '×'\n }\n}\n// _material = d => d3\n// .scaleOrdinal()\n// .domain(['ふわふわ','すべすべ', 'さらさら', 'つるつる'])\n// .range(['▲', '♦︎', '■', '●'])(d.material)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"svgMaterial = d => {\n if (String(d.className.baseVal) == 'rustling') {\n d.appendChild(rectPath.node().cloneNode(true));\n } else if (String(d.className.baseVal) == 'silky') {\n d.appendChild(circlePath.node().cloneNode(true));\n } else if (String(d.className.baseVal) == 'fluffy') {\n d.appendChild(onionPath.node().cloneNode(true));\n } else if (String(d.className.baseVal) == 'smoothness') {\n d.appendChild(diamondPath.node().cloneNode(true));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"rect = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"rectPath = d3.select(rect).select('path')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"circle = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"circlePath = d3.select(circle).select('path')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"diamond = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"diamondPath = d3.select(diamond).select('path')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"onion = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"onionPath = d3.select(onion).select('path')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"hexagon = svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"hexagonPath = d3.select(hexagon).select('path')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"url = \"https://gist.githubusercontent.com/sugi2000/a80f234bc484064f8988d15179ef39cd/raw/8189375af8c3c796c4e81fb85cd5b6c556c2a46f/random-xyz.csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"import { names, getData } from \"@sugi2000lab/import-csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"md `SVGを使って材質を形に置き換える、一日に対して時間軸４本描写すること、凡例を載せることを今後できたらと思ってます`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"