2c:null 2d:["$","title",null,{"children":"2020-11-20 Seminar in Data Visualization | Network Design Studio, TMU | すぎもと組 | Observable"}] 32:T7a3,scatter_plot = { // サイズと余白 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(dataset, d => d.x)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset, d => d.y)]) .nice() .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(dataset, 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("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(dataset) .join("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", d => rScale(d.z)) .attr("fill", "red") .attr("opacity", 0.5); // 軸の線を白色に svg .selectAll('g.xAxis, g.yAxis') .selectAll('line, path') .attr('stroke', 'white') .attr('opacity', 0.5); return svg.node(); }33:T5ae,{ const width = 800; const height = 300; const margin = { top: 30, right: 30, bottom: 30, left: 30 }; const xScale = d3 .scaleLinear() .domain([0, 23]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.top, height - margin.bottom]); const xAxis = d3 .axisBottom() .scale(xScale) .ticks(23) .tickSize(-(height - margin.top - margin.bottom)); const yAxis = d3 .axisLeft() .scale(yScale) .ticks(7) .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("circle") .data(data) .join("circle") .attr("cx", d => xScale(d.date.getHours())) .attr("cy", d => yScale(d.date.getDate()) + yScale.bandwidth() / 2) .attr("r", 10) .attr("fill", "red") .attr("opacity", 0.5); svg .selectAll('g.xAxis, g.yAxis') .selectAll('line, path') .attr('stroke', 'white') .attr('opacity', 0.5); return svg.node(); }34:T7f2,{ 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("circle") .data(dataWithDay) .join("circle") .attr("cx", d => xScale(d.time)) .attr("cy", d => yScale(d.day) + yScale.bandwidth() / 2) .attr("r", 10) .attr("fill", "red") .attr("opacity", 0.5); svg .selectAll('g.xAxis, g.yAxis') .selectAll('line, path') .attr('stroke', 'white') .attr('opacity', 0.5); return svg.node(); }35:Tc4d,{ 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: Math.floor( ((d.date.getHours() * 60 + d.date.getMinutes()) * 60 * 1000) / (6 * 60 * 60 * 1000) ), ...d })); const dates = d3.group(dataWithDay, d => d.day); const groupedData = d3.group(dataWithDay, d => d.day, d => d.time); const xScale = d3 .scaleLinear() .domain([0, 4]) .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(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(`%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); 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)`); // 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', 'orange') .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", "red") .attr("opacity", 0.5); svg .selectAll('g.xAxis, g.yAxis') .selectAll('line, path') .attr('stroke', 'white') .attr('opacity', 0.5); return svg.node(); }36:Tbbb,{ 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: Math.floor( ((d.date.getHours() * 60 + d.date.getMinutes()) * 60 * 1000) / (6 * 60 * 60 * 1000) ), ...d })); const dates = d3.group(dataWithDay, d => d.day); const groupedData = d3.group(dataWithDay, d => d.day, d => d.time); const xScale = d3 .scaleLinear() .domain([0, 4]) .range([margin.left, width - margin.right]); const yScale = d3 .scaleBand() .domain([...dates.keys()]) .range([margin.top, height - margin.bottom]); const colors = d3.group(data, d => d.color); const color = d3 .scaleOrdinal() .domain([...colors.keys()]) .range(d3.schemeCategory10); const dow = d => '日月火水木金土'[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(`%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); 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)`); 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.color)) .attr("opacity", 0.5); // svg // .selectAll("circle") // .data(dataWithDay) // .join("circle") // .attr("cx", d => xScale(d.time) + xScale(0.5) - xScale(0)) // .attr("cy", d => yScale(d.day) + yScale.bandwidth() / 2) // .attr("r", 10) // .attr("fill", "red") // .attr("opacity", 0.5); svg .selectAll('g.xAxis, g.yAxis') .selectAll('line, path') .attr('stroke', 'white') .attr('opacity', 0.5); return svg.node(); }37:T7e7,{ // サイズと余白 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(dataset, (d) => d.x)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset, (d) => d.y)]) .nice() .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(dataset, (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("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(dataset) .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(); }38:T9a6,{ // サイズと余白 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(dataset, d => d.x)]) .nice() .range([margin.left, width - margin.right]); const yScale = d3 .scaleLinear() .domain([0, d3.max(dataset, d => d.y)]) .nice() .range([height - margin.bottom, margin.top]); const rScale = d3 .scaleSqrt() // 平方根（ルート2）スケール　データ値を面積にマッピングしたいときに便利なスケール関数 .domain([0, d3.max(dataset, 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("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(dataset) .join("circle") .attr("cx", d => xScale(d.x)) .attr("cy", d => yScale(d.y)) .attr("r", 0) .attr("fill", "red") .attr("opacity", 0.5) .style('cursor', 'pointer') .on('mouseover', (event, d) => { d3.select(event.currentTarget) .transition() .attr('fill', '#000'); }) // .on('mouseout', (event, d) => { // d3.select(event.currentTarget) // .transition() // .attr('fill', 'red'); // }) .on('click', (event, d) => { d3.select(event.currentTarget) .transition() .attr('cy', yScale(0)); }) .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(); }39:[] 30:{"id":"4a0f5476bddb80d3","slug":"2020-11-20-seminar-in-data-visualization","title":"2020-11-20 Seminar in Data Visualization","thumbnail":"347dc7fae09f005f3b722085bcd7c533b066bf2b9d1cd2781671f2f9436e2432","access_level":"public","create_time":"$D2020-11-16T12:52:44.038Z","update_time":"$D2021-11-19T01:02:15.006Z","view_time":null,"first_public_time":"$D2020-11-20T06:19:08.218Z","has_unpublished_edits":null,"fork":{"id":"d6f32333ff4c90e2","slug":"2020-11-13-seminar-in-data-visualization-3-of-3","title":"2020-11-13 Seminar in Data Visualization 3 of 3","owner":{"id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組"}},"stars":0,"starred":false,"owner":{"type":"team","id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組","avatar_url":"https://avatars-next.observableusercontent.com/c7504ede11e556181b55f0b28f2ee9005e02b9eac2471f6480e562a0ff3d8dfc","tier":"education_2026"},"version":1150,"publish_version":1150,"role":null,"authored":false,"authors":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}],"members":[{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null,"role":"editor"}],"comments":[{"id":"355528686cd15eb4","reply_to_id":null,"content":"https://observablehq.com/@taiki4532/data-drawing","create_time":"$D2020-11-20T07:37:43.909Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4b7dc05076733908","login":"taiki4532","name":"Taiki Sekiguchi","avatar_url":"https://avatars-next.observableusercontent.com/8fd3dcc90fb16d4e4280f19b9b25ec6d72cdb6bab6541a0e992ec8b7f7979312","tier":null}},{"id":"e20db769bfe37f9b","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@kominamiyuto/datadawing","create_time":"$D2020-11-20T07:39:36.460Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d9c4d2f39919a8bb","login":"kominamiyuto","name":"kominami","avatar_url":"https://avatars-next.observableusercontent.com/1ac782347f415c947a22818ac2cf8c73a0804bcfbc4168980c82ca6a2b2cb551","tier":null}},{"id":"b6431fe2c8924cb7","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@junna-oikawa/data-drawing","create_time":"$D2020-11-20T07:42:49.493Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"a0602b0b6835e9f4","login":"junna-oikawa","name":"","avatar_url":"https://avatars-next.observableusercontent.com/69ed736302eb9dbf5adaca594e1678591144a2d7157ec577e42e934c9dfc925d","tier":null}},{"id":"fcb4f2f74186791a","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@sumikko-mountain/one-week-use-of-paper_201010-16","create_time":"$D2020-11-20T07:46:48.395Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"751514e4cb4a16bf","login":"sumikko-mountain","name":"YUIKO SUYAMA","avatar_url":"https://avatars-next.observableusercontent.com/9ea4b3ab49d5846d1a11e11b9b0151c58d47a3d8e35454893036c517d781f81a","tier":null}},{"id":"a8a34296426fa5ad","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@hiromi-mitsuoka/import-mycsv","create_time":"$D2020-11-20T07:47:19.676Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"aa99dac913269771","login":"hiromi-mitsuoka","name":"Hiromi Mitsuoka","avatar_url":"https://avatars-next.observableusercontent.com/480468519a37ec7781aad10710e1fd0b148fe33c6c4eda59f99da94851622b6a","tier":null}},{"id":"4671d931551b4d11","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@yuukikoyama/data-drawing","create_time":"$D2020-11-20T07:56:08.654Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"196ad439b8279b00","login":"yuukikoyama","name":"小山佑季","avatar_url":"https://avatars-next.observableusercontent.com/f765b72dbc2a96192c189619aec43a7edcbf2e4ee24be8e44647d32cea021c85","tier":null}},{"id":"bfaea621cd1c154b","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@kom-shin/data_drawing","create_time":"$D2020-11-20T08:01:48.518Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"d22ce38c122609b3","login":"kom-shin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/780884286f059ec8795e6c3fc5c29d062aa51c84063a8f776bb696189a2b20bc","tier":null}},{"id":"6eddaafc617215d5","reply_to_id":"355528686cd15eb4","content":"https://observablehq.com/@hitomi-neko/data-drawing","create_time":"$D2020-11-20T08:16:53.872Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1cdd06ad943a7d8f","login":"hitomi-neko","name":"","avatar_url":"https://avatars-next.observableusercontent.com/c3e23bd42a87e9909567f5dac050e5821138356cfda23d480056551ad0bc4622","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"914505911afcd4e0","slug":"2020-ii","title":"2020ネットワーク演習II","owner":{"id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組"}},"type":"notebook","body":{"titling":"auto","title":"2020-11-20 Seminar in Data Visualization","cells":[{"id":0,"value":"md`# 2020-11-20 Seminar in Data Visualization\n\nSUGIMOTO Tatsuo, Tokyo Metropolitan University\n\n**ネットワーク演習II** \n東京都立大学システムデザイン学部インダストリアルアート学科 \n杉本達應\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1032,"value":"md`\n- リアクションペーパー\n- 事例紹介\nCOVID-19 in NYC by Zip Code & Income\nhttps://observablehq.com/@autopaideia/covid-19-in-nyc-by-zip-code-income\n- 課題確認\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"mdh`\n### CSVと散布図（Scatter Plot）\n\n下の散布図は、課題の解答例です。\nくわしくはコードを読んでください。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"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":7,"value":"mdh`\n### 自分のデータを読み込む\n\nこれからデータドローイングをD3で再現します。\n\\`d3.csv()\\`メソッドでCSVファイルを読み込みます。\n\n~~~js\ndata = d3.csv(___url___, d3.autoType)\n~~~\n\n注：このメソッドはPromiseを返す非同期メソッドです。\nObservableでは上のようにシンプルに書けますが、一般的なWeb開発では書き方が変わりますので注意してください。\n\n~~~js\ndata = await d3.csv(url, d3.autoType);\n~~~\n\n~~~js\nd3.csv(url, d3.autoType).then(data => console.log(data));\n~~~\n\n以下は受講生のデータを切り替えて読み込む方法です。\n受講生のCSVデータを読み込むノートブックをインポートします。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"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":850,"value":"md`受講生のユーザ名リストの選択メニューをかんたんに作成するためのノートブックをインポートします。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"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":872,"value":"md`ユーザ名の選択メニューを作成します。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`メニューで選んだユーザ名のCSVを読み込み、data と名づけます。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"data = getData(name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`#### 単純な時系列で可視化する\n\n左から右に時間がすすむ1つの水平軸でプロットします。\nほとんど同じ時刻に複数のデータがあり重なり合ってしまうのを避けるため、ランダムに上下に散らしています。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"timeline = {\n const width = 800;\n const height = 100;\n const margin = { top: 10, right: 10, bottom: 20, left: 10 };\n const svg = d3\n .create('svg')\n .attr('width', width)\n .attr('height', height);\n\n const xScale = d3\n .scaleTime() // 時間スケール\n .domain(d3.extent(data, d => d.date)) // d3.extent() => [最小値, 最大値]\n .range([margin.left, width - margin.right]);\n\n const xAxis = d3\n .axisBottom()\n .scale(xScale)\n .tickFormat(d3.timeFormat('%d日 %H時'));\n\n svg\n .append('g')\n .selectAll('rect')\n .data(data)\n .join('rect')\n .attr('x', d => xScale(d.date) - 5)\n .attr(\n 'y',\n d =>\n margin.top +\n (height - margin.top - margin.bottom) / 2 -\n 10 +\n Math.random() * 20\n )\n .attr('width', 10)\n .attr('height', 10)\n .attr('opacity', 0.2);\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`#### 日付と時間の軸でマトリクスを描く\n\n縦軸を日付（10〜16）、\n横軸を時間（0〜23）にし、2次元平面にプロットします。\n\nデータ内に登場するすべての日付を取得するには\\`d3.group()\\`メソッドを使います。\n\n~~~js\ndates = d3.group(data, d => d.date.getDate())\n~~~\n\ngroup()メソッドは、__Mapオブジェクト__を返します。\nMapはObjectによく似ていますが、Objectよりも利点があるため、D3の将来バージョンではMapを多用することになるそうです。\n\ngroup()メソッドはd3v6の新しいメソッドです。\nネットのサンプルコードには、まだほとんど登場していません。\n以前は、d3.nest()メソッドを使っていましたが廃止されました。\n\n参考：\nhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"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":698,"value":"md`ここから日付だけを取り出したい場合は、次のようにします。\n\n~~~js\n[...dates.keys()]\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"[...dates.keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"md`時刻を詳細に記録している場合は、マトリクスではなくX軸を時間にすることもできます。\n次の例では、dataに新しいキー day と time を作り、それぞれ日付（年月日）と時刻（時分秒）のミリ秒値を入れています。\nこの新しいデータをもとに要素を配置しています。\n\n上の例では、日付と時間に、どちらも単純な整数値しか入っていませんでした。\n今回のdayとtimeには年月日・時分秒の情報（Date型のもとになるミリ秒）が入っています。\nそのため、Y軸の目盛りを「年月日＋曜日」表記に、X軸の目盛りを「時分」表記にすることができます。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"md`つぎの例は、1日を4つの時間帯にグループ化し、それぞれのグループ内で均等に円を配置します。\n\nSVGのDOMはつぎのような階層構造になっています。\n\n svg\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":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":752,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md`最後に円の色を変えます。\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データに登場する色を10色のカラーパレットにあてはめています（もし11種類以上あれば、カラーパレットをくり返します）。\n\n~~~js\nconst colors = d3.group(data, d => d.color);\nconst color = d3\n .scaleOrdinal()\n .domain([...colors.keys()])\n .range(d3.schemeCategory10);\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":904,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"dataset = d3.csv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"md`### 外部のSVGファイルを読み込む\n\n四角や円など基本的な図形は描けるようになりました。\n複雑な図形もpath要素を使えば描けますが、頂点やコントロールポイントの座標を手書きで書くのは難しいです。\n複雑な図形を描きたいときはドローイングソフトを使います。\n\n1. Adobe IllustratorやInkscapeなどでSVGファイルを保存します。\n\n2. SVGOMG で最適化します。\nhttps://jakearchibald.github.io/svgomg/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"_heart = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"heart = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1113,"value":"md`SVGのなかの要素を取得するには、select()メソッドを使います。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"heartPath = d3.select(heart).select('path')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1116,"value":"md`新たに作成したSVGに、path要素を複製して挿入しています。`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"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(\"opacity\", (d) => 0.1 + d / 9);\n\n // グループ要素にpath要素を追加し、d属性にheartPathのd属性を指定\n g.append(\"path\").attr(\"d\", heartPath.attr(\"d\"));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"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~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1035,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"mdh`#### イベント\n\nセレクションをマウスやクリックのイベントに反応させることができます。\n\nD3セレクションオブジェクトのon()メソッドを使います。\n\n参照：\nhttps://github.com/d3/d3-selection#selection_on\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`#### 課題：データドローイングのD3版の制作\n\n紙と同じものでなくてもかまいません。\n作りやすいように修正してください。\n\nまずはノートブックを作成し、公開したURLをこのセルにコメントしてください。\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`### 本日の課題\n\n1. [リアクションペーパー](https://docs.google.com/forms/d/e/1FAIpQLSenD096ludFkIN6HHHFgSpEwAYo3bgAzTQaS69aS06QfomQzQ/viewform)の提出（本日中）\n- D3チュートリアルの復習\n- 課題制作：来週発表（できたところまでを発表） #実況ch も活用してください\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"import { graphic } from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import { mdh } from '@sugi2000/d3-6-0-migration-guide-in-japanese'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1119,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"inlineImage = (url, size = 0.4) => {\n return `

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"