2c:null 2d:["$","title",null,{"children":"Data Drawing | 小山佑季 | Observable"}] 32:T81c,{ const width = 800; const height = 300; const margin = { top: 30, right: 30, bottom: 30, left: 110 }; const dataWithDay = data.map(d => ({ day: new Date( d.date.getFullYear(), d.date.getMonth(), d.date.getDate() ).getTime(), time: (d.date.getHours() * 60 + d.date.getMinutes()) * 60 * 1000, ...d })); const dates = d3.group(dataWithDay, d => d.day); const xScale = d3 .scaleUtc() .domain([0, 24 * 60 * 60 * 1000]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.top, height - margin.bottom]); const dow = d => '日月火水木金土'[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.timeFormat(`%Y年%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); //データ svg .selectAll("rect") .data(dataWithDay) .join("rect") .attr("x", d => xScale(d.time)) .attr("y", d => yScale(d.day) + yScale.bandwidth() / 2) .attr('width', 25) .attr('height', 25) .attr("fill", "gray") .attr("opacity", 0.5); svg .selectAll('g.xAxis, g.yAxis') .selectAll('line, path') .attr('stroke', 'black') .attr('opacity', 0.5); return svg.node(); }33:[] 30:{"id":"db3e90e50e38d7d9","slug":"data-drawing","title":"Data Drawing","thumbnail":"0d1d1dfa949ba3408a725e024288accfd1595ec786c821eeb737a59d36a233ac","access_level":"public","create_time":"$D2020-11-20T07:33:51.225Z","update_time":"$D2020-12-04T05:53:23.761Z","view_time":null,"first_public_time":"$D2020-11-20T07:33:55.439Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"31c7cca6c8136f9a","login":"yuukikoyama","name":"小山佑季","avatar_url":"https://avatars-next.observableusercontent.com/f765b72dbc2a96192c189619aec43a7edcbf2e4ee24be8e44647d32cea021c85","tier":"starter_2024"},"version":132,"publish_version":132,"role":null,"authored":false,"authors":[{"type":"individual","id":"196ad439b8279b00","login":"yuukikoyama","name":"小山佑季","avatar_url":"https://avatars-next.observableusercontent.com/f765b72dbc2a96192c189619aec43a7edcbf2e4ee24be8e44647d32cea021c85","tier":null}],"members":[{"type":"individual","id":"196ad439b8279b00","login":"yuukikoyama","name":"小山佑季","avatar_url":"https://avatars-next.observableusercontent.com/f765b72dbc2a96192c189619aec43a7edcbf2e4ee24be8e44647d32cea021c85","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { names, getData } from \"@sugi2000lab/import-csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"import { select } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof name = {\n const nameSelect = d3.select(\n select({ title: 'ユーザ名', options: ['', ...names] })\n );\n\n nameSelect\n .select('select')\n .style('font-size', '1.5rem')\n .style('padding', '0.5rem');\n return nameSelect.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"data = getData(name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"dates = d3.group(data, d => d.date.getDate())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"[...dates.keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"//さらさら\nsarasara = svg`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"//つるつる\ntsuru = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"//ざらざら\nzara = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"//しっとり\nshitori = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"url = \"https://gist.githubusercontent.com/yukikoyama0000/8441fbe27463373834f98d8db098144a/raw/eb6477d08040890a99060867105c51df40e94189/xyz%2520csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"