2c:null 2d:["$","title",null,{"children":"D3.js Introdunction Part 4 / D3.js 入門その4 | Network Design Studio, TMU | すぎもと組 | Observable"}] 32:T44a,{ const width = 800; const height = 100; const margin = { top: 10, right: 10, bottom: 20, left: 30 }; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width); // スケール関数 const xScale = d3 .scaleUtc() .domain([ d3.min(currentData, (d) => d.date), d3.max(currentData, (d) => d.endDate) ]) .range([margin.left, width - margin.right]); // 軸関数 const xAxis = d3 .axisBottom() .scale(xScale) .tickValues(xScale.ticks(d3.utcHour.every(12))) .tickFormat(d3.utcFormat("%d日 %H時")); svg .append("g") .selectAll("rect") .data(currentData) .join("rect") .attr("x", (d) => xScale(d.date)) .attr("y", margin.top) .attr("width", (d) => xScale(d.endDate) - xScale(d.date)) // .attr("width", 4) .attr("height", height - margin.bottom - margin.top) .attr("fill", "steelblue") .attr("opacity", 0.25); // 軸 svg .append("g") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); return svg.node(); }33:T799,{ 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([...d3.group(dataOfDates, (d) => d.dateOnly).keys()]) .range([margin.top, height - margin.bottom]); // 軸関数 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(dateFormat) // 目盛りのフォーマット（書式）を指定 .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); // X軸 svg .append("g") .attr("class", "xAxis") .attr("transform", `translate(0, ${height - margin.bottom})`) .call(xAxis); // Y軸 svg .append("g") .attr("class", "yAxis") .attr("transform", `translate(${margin.left}, 0)`) .call(yAxis); // ドット svg .append("g") .selectAll("circle") .data(dataOfDates) .join("circle") .attr("cx", (d) => xScale(d.msec)) .attr("cy", (d) => yScale(d.dateOnly) + yScale.bandwidth() / 2) .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(); }34:T7f5,{ 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([...dataGroupedByDates.keys()]) .range([margin.top, height - margin.bottom]); 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(dateFormat) // 目盛りのフォーマット（書式）を指定 .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(dataGroupedByDates) .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(); }35:Ta9b,{ 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 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(dateFormat) .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(); }36:T8f0,{ 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 devices = d3.group(currentData, (d) => d.device_type); const color = d3 .scaleOrdinal() .domain([...devices.keys()]) .range(d3.schemeCategory10); 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(dateFormat) .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.device_type)) .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(); }37:T995,sugimotoChart = (data) => { // function myChart(data) { // 1行目と同じ意味 // const width = 800; const height = (width * 150) / 215; // ポストカードと同じ縦横比にする const margin = { top: height * 0.05, right: 30, bottom: 30, left: 120 }; const dataOfDatesTimes = getDataOfDatesTimes(data); 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.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) => colorScale(d.material)) .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(); }38:T5b1,{ 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(currentData, (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(currentData) .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(); }39:T98f,{ 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(currentData, (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(); }3a:T812,{ replay; // サイズと余白 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(); }3b:T812,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(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", (d) => rScale(d.z)) .attr("fill", "red") .attr("opacity", 0.5) .append("title") .text((d) => `${d.id} (x: ${d.x} y: ${d.y} z: ${d.z})`); // 軸の線を白色に svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); return svg.node(); }3c:Tdf9,scatter_plot_with_tooltip = { // サイズと余白 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) .style("overflow", "visible"); // 背景 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); // 円の生成 const circle = svg .selectAll("circle") .data(scatterData) .join("circle") .attr("cx", (d) => xScale(d.x)) .attr("cy", (d) => yScale(d.y)) .attr("r", (d) => rScale(d.z)) .attr("fill", "red") .attr("fill-opacity", 0.5); // 軸の線を白色に svg .selectAll("g.xAxis, g.yAxis") .selectAll("line, path") .attr("stroke", "white") .attr("opacity", 0.5); // ツールチップ const tooltip = svg .append("g") .attr("class", "tooltip") .style("pointer-events", "none") .style("visibility", "hidden"); tooltip .append("rect") .attr("fill", "white") .attr("stroke", "orange") .attr("rx", 10) .attr("width", 130) .attr("height", 90) .attr("opacity", 0.8); const showMyTooltip = (event) => { const mouseX = d3.pointer(event)[0] + 10; const mouseY = d3.pointer(event)[1] + 10; const datum = d3.select(event.target).datum(); tooltip.attr("transform", `translate(${mouseX},${mouseY})`); tooltip .selectAll("text") .data([ { label: "id", value: datum.id }, { label: "x", value: datum.x }, { label: "y", value: datum.y }, { label: "z", value: datum.z } ]) .join("text") .text((d) => `${d.label}: ${d.value}`) .attr("x", 10) .attr("y", (d, i) => 20 + 20 * i) .attr("fill", (d, i) => (i === 0 ? "#800" : "gray")) .attr("font-weight", (d, i) => (i === 0 ? "bold" : "normal")); tooltip.style("visibility", "visible"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 1); }; const hideMyTooltip = (event) => { tooltip.style("visibility", "hidden"); // console.log(event.currentTarget); d3.select(event.currentTarget).attr("fill-opacity", 0.5); }; circle .on("pointerenter pointermove", showMyTooltip) .on("pointerleave", hideMyTooltip); return svg.node(); }3d: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(); }3e:[] 30:{"id":"6c8b796ac8ba9de4","slug":"d3-js-introdunction-part-4-d3-js-4","title":"D3.js Introdunction Part 4 / D3.js 入門その4","thumbnail":"20ad9d20aa726379eb8960ede01fff8571c3fe88d430801c7c9f671dd1630f77","access_level":"public","create_time":"$D2023-11-16T06:33:58.142Z","update_time":"$D2025-11-17T06:04:46.692Z","view_time":null,"first_public_time":"$D2023-11-20T03:41:21.438Z","has_unpublished_edits":null,"fork":{"id":"79b8e4b7f8f2eae9","slug":"d3-js-introdunction-part-3-d3-js-3","title":"D3.js Introdunction Part 3 / D3.js 入門その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":2099,"publish_version":null,"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"},{"type":"team","id":"50d6555a7b3f1d85","login":"sugi2000lab","name":"Network Design Studio, TMU | すぎもと組","avatar_url":"https://avatars-next.observableusercontent.com/c7504ede11e556181b55f0b28f2ee9005e02b9eac2471f6480e562a0ff3d8dfc","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3.js Introdunction Part 4 / D3.js 入門その4","cells":[{"id":0,"value":"# D3.js Introdunction Part 4 / D3.js 入門その4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"### 時系列データを表示する\n\n日常記録のスプレッドシートの「All」シートをTSVで公開しました。\nURLは以下の通りです。\n\nコードを書きやすくするために、ヘッダの文字列を英語にしました。\nまた、name 列を追加しています。\n\n```\nuri = \"${uri}\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1381,"value":"uri = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vR9ZdgFnwu4UwLC6S2ui8Wb78z8zesSQvlSHCCyudgKTY3nFuXxSbelypQDz7kiZCHeN3rzLcC_pHo9/pub?gid=1874210190&single=true&output=tsv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"### TSVを読み込む\n\n`d3.tsv()`メソッドでTSVデータを読み込みます。\n第2引数に、`d3.autoType`を指定することで、数字だけのセルを文字列から数値に変換しています。\n\nさらに、配列の`.filter()`メソッドを使って、`name`がない行を削除しています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1091,"value":"rawdata = (await d3.tsv(uri, d3.autoType)).filter((d) => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"### Tableセルでプレビュー\n\nTableセルで内容を確認することができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1379,"value":"rawdata","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1594,"value":"### Chartセルでプレビュー\n\nまずは、Chartセルでデータの分布を概観しておきましょう。\n\nつぎのオプションで作成すると次のようになります。\n自分のデータが正しく反映されているか、確認してください。\n\n- Y方向ファセットを人名\n- X軸を時間\n- Y軸を日付\n- 色をデバイスの種類","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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: \"start_hour\", y: \"day\", fy: \"name\", color: \"device_type\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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).start_hour,\n rawdata.at(0).start_min\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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.start_hour, d.start_min)),\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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1397,"value":"demo_dataset = rawdata.map((d) => ({\n date: new Date(\n Date.UTC(d.year, d.month - 1, d.day, d.start_hour, d.start_min)\n ),\n ...d\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"

\n\n

【重要】データをインポートする

\n\nここまでのデータの読み込みと前処理は、別のノートブックにまとめまています。\n\n${linkButton('2025 Charging Data', 'https://observablehq.com/d/930e107bebaff325')}\n\n

\nこのノートブックのデータをインポートすることで、一人ひとりが個別にTSVの読み込み、データの変換をする必要はありません。\n以下のコードで、`dataset`と`dataByName`と`names`をインポートして使用してください。\n

\n\n```js\nimport {dataset, dataByName, names} from \"930e107bebaff325\"\n```\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1415,"value":"import { dataset, dataByName, names } from \"930e107bebaff325\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"dataset","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1420,"value":"names","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"### 配列の操作\n\n可視化をする前に配列を整えることが重要です。\n\nここではいくつかの配列操作を紹介します。\n\n#### 配列の改変\n\n配列の個数は変えずに、プロパティや値を変更する場合は、配列の`map()`メソッドを使って新しい配列を作ります。\n（上記）\n\n#### ソート\n\n配列の`sort()`メソッドを使います。`sort()`メソッドは元の配列を変更してしまう破壊的メソッドです。\n`[...array]`と書いて配列をコピーしてから、新しい配列をソートします。\n\nたとえば、`start_pct`プロパティの値を昇順（小→大）でソートする場合、次のように書きます。\n\n```js\n[...dataset].sort((a,b) => a.start_pct - b.start_pct)\n```\n\n降順（大→小）でソートする場合、次のように書きます。\n\n```js\n[...dataset].sort((a,b) => b.start_pct - a.start_pct)\n```\n\nd3のソート関数を使うこともできます。\n\n\n```js\n[...dataset].sort((a,b) => d3.ascending(a.start_pct, b.start_pct)) // 昇順\n[...dataset].sort((a,b) => d3.descending(a.start_pct, b.start_pct)) // 降順\n```\n\n`d3.rank()`メソッドでは、ソートした値のみの配列を取得できます。\n\n```js\nd3.rank(dataset, (a,b) => d3.ascending(a.start_pct, b.start_pct)) // 昇順\nd3.rank(dataset, (a,b) => d3.descending(a.start_pct, b.start_pct)) // 降順\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1426,"value":"[...dataset].sort((a, b) => a.hour - b.hour)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1096,"value":"#### 抽出\n\n特定の条件に合致するデータのみを抽出するには、配列の`filter()`メソッドを使います。\n\nたとえば、個人のデータを抽出するには、次のように書きます。結果は配列で返ります。\n条件に合致するデータが見つからない場合は、空の配列`[]`が返ります。\n\n```js\ndataset.filter(d => d.name === \"Sugimoto\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1432,"value":"dataset.filter((d) => d.name === \"Sugimoto\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"#### 抽出（１つだけ）\n\n特定の条件に合致するデータをを1つだけ抽出するには、配列の`find()`メソッドを使います。\n\n条件に合致する最初のデータが返ります。\n条件に合致するデータが見つからない場合は、`undefined`が返ります。\n\n```\ndataset.find(d => d.name === \"Sugimoto\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1438,"value":"dataset.find((d) => d.name === \"Sugimoto\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"#### グループ化\n\n配列をグループ化するには、`d3.group()`メソッドを使います。\n\n```js\nd3.group(dataset, d => d.name)\n```\n\n`d3.group()`メソッドは、__Mapオブジェクト__を返します。\nMapはObjectによく似ていますが、Objectよりもキーに自由度があるため、D3ではMapを多用します。\n\n\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.name)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1444,"value":"dataByName2 = d3.group(dataset, (d) => d.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"グループ化は、プロパティの値の一覧を作るのにも便利です。\n以下のコードで、デバイスの種類の一覧を取得できます。\n\n```js\n[...d3.group(dataset, d => d.device_type).keys()]\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1453,"value":"[...d3.group(dataset, (d) => d.device_type).keys()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":967,"value":"#### セレクトメニューで抽出\n\n`names`配列からセレクトメニューやラジオボタンを作り、データを抽出することができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1238,"value":"`Inputs.select()`で名前の選択メニューを作成します。\n`currentData`に選択中の名前のデータが入ります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1107,"value":"viewof currentData = Inputs.select(dataByName, {\n label: md`**Name**`,\n value: dataByName.get(\"Sugimoto\")\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2037,"value":"viewof name_radio = Inputs.radio(dataByName, {\n label: md`**Name**`,\n value: dataByName.get(\"Sugimoto\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"`currentData`に選択メニューで選択中の名前のデータが入っています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1469,"value":"currentData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1249,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1854,"value":"### Plot版\nおなじものをPlotで書くと、簡潔に書けます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1832,"value":"Plot.plot({\n height: 100,\n x: {\n tickFormat: d3.utcFormat(\"%m月%d日\")\n },\n y: {\n ticks: []\n },\n marks: [\n Plot.rect(currentData, {\n x1: \"date\",\n x2: \"endDate\",\n y1: 0,\n y2: 1,\n fill: \"steelblue\",\n fillOpacity: 0.25,\n tip: true\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"### 日付と時間の軸で散布図を描く\n\nつぎに、縦軸を日付（15〜21）、\n横軸を時刻（00:00〜23:59）にした2次元平面にプロットします。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1896,"value":"### データの変更\n\n作りたいチャートに合わせて、データのキーを追加します。\n\nここでは、2つのキーを追加した`dataOfDates`を作成します。\n\n- `dateOnly`: 時刻情報を除いた日付だけのデータ。既存の`day`を使ってもよいが、年月の情報も入れておくと目盛りに日付を入れることができる。\n- `msec`: 1日のなかの時刻情報（0時基準の経過時間をミリセカンド単位で）","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1910,"value":"dataOfDates = {\n // データに　dateOnly と msec を追加\n // msecは、00:00からのミリ秒\n return currentData.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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1958,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"### Plot版","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1863,"value":"Plot.plot({\n height: 300,\n marginLeft: 90,\n grid: true,\n x: {\n domain: [0, 24 * 60 * 60 * 1000],\n tickFormat: d3.utcFormat(\"%H:%M\"),\n ticks: [0, 6, 12, 18, 24].map((h) => h * 60 * 60 * 1000),\n label: \"時刻\"\n },\n y: {\n ticks: 7,\n tickFormat: dateFormat,\n reverse: true,\n label: \"日\"\n },\n marks: [\n Plot.dot(dataOfDates, {\n x: \"msec\",\n y: \"dateOnly\",\n r: 15,\n fill: \"steelblue\",\n fillOpacity: 0.25\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1969,"value":"#### フォーマット関数\n\nY軸の目盛りを「月日(曜日)」表記にするためのフォーマット関数`dateFormat()`を作成しています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1932,"value":"dateFormat = (date) => {\n const dow = (d) => \"日月火水木金土\".at(new Date(d).getDay());\n return d3.utcFormat(`%m月%d日（${dow(date)}）`)(date);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"### [応用] データのグループ化\n\nD3版では、データをグループ化すると扱いやすいことがあります。\n\n縦軸を日付にしたいので、`d3.group()`メソッドを使って、データを日付でグループ化します。\n結果は、Mapオブジェクトで返ってきます。\nデータが階層化されましたね。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1487,"value":"dataGroupedByDates = d3.group(dataOfDates, (d) => d.dateOnly)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1492,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":983,"value":"#### 6時間単位のグループ化\n\nつぎの例は、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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1509,"value":"dataOfDatesTimes = {\n // データに　day と time を追加\n // timeは6時間ごとの時間帯で0,1,2,3の値をとる\n const dataWithDayTime = currentData.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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1514,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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データに登場する`device_type`を10色のカラーパレットにあてはめています（もし11種類以上あれば、カラーパレットをくり返します）。\n\n~~~js\nconst devices = d3.group(data, d => d.device_type);\nconst color = d3\n .scaleOrdinal()\n .domain([...devices.keys()])\n .range(d3.schemeCategory10);\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1522,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"devices = d3.group(dataset, (d) => d.device_type)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1529,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([...devices.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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1531,"value":"colorScale(\"ノートPC\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1641,"value":"### チャートの関数化\n\n上のチャートを関数にします。第1引数でデータを渡します。\n\nここでは、グループ化したデータ`dataOfDatesTimes`を取得するための関数`getDataOfDatesTimes()`も新たに作っています。\n\n関数化することで、引数のデータを入れ替えたり、他のノートブックからインポートすることができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1644,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"ドローイングカードの裏面に書いていた凡例や解説も、データをもとにして生成することができます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1993,"value":"sugimotoLegend(currentData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"sugimotoLegend = (data) => {\n const height = (width * 150) / 215;\n\n const devices = [...d3.group(data, (d) => d.device_type).keys()];\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"width\", width);\n\n const g = svg\n .append(\"g\")\n .selectAll(\"g\")\n .data(devices)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(20, ${20 + i * 30})`);\n\n g.append(\"circle\")\n .attr(\"r\", 10)\n .attr(\"fill\", colorScale)\n .attr(\"stroke\", \"#222\");\n\n g.append(\"text\")\n .attr(\"x\", 20)\n .attr(\"dy\", 8)\n .text((d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"getDataOfDatesTimes = (data) => {\n // データに　day と time を追加\n // timeは6時間ごとの時間帯で0,1,2,3の値をとる\n const dataWithDayTime = data.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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1659,"value":"引数に`dataset`を渡すと次のようになります。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1656,"value":"sugimotoChart(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1665,"value":"特定の人のデータだけを表示させることもできます。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1662,"value":"sugimotoChart(dataset.filter((d) => d.name === \"Sugimoto\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"関数のセルの左側アクションメニューから「Copy import」を選択すると、インポートのためのコードをコピーすることができます。\n\n上の関数だと、次のようになります。\n\n~~~js\nimport { sugimotoChart } from \"@sugi2000lab/d3-js-introdunction-part-4-d3-js-4\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1117,"value":"### 極座標を作る\n\n極座標を作るには、角度を出力するスケール関数を作ると便利です。\n\n極座標用の軸関数はないので、自分で実装する必要があります。\n\nここでは、時刻を入力すると角度を出力するスケール関数`angle()`を定義し、\n`line`要素の`transform`属性の`rotate()`で回転させています。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1544,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1263,"value":"### 外部のSVGファイルを読み込む\n\nSVGで、四角や円などの基本的な図形以外の複雑な図形は`path`要素で描けます。\nただし、頂点やコントロールポイントの座標を手書きで指定するのは難しいので、複雑な図形は、外部のドローイングアプリケーションを使って描いたものを読み込みます。\n\nSVGを読み書きできるアプリケーション\n\n- Adobe Illustrator\n- Figma\n- Affinity\n- Inkscape\n\n座標値が重要なので、原点をどこにするかをよく考えて描きます。\nアイコンのような使い方をする場合は、原点を中心にして描くと扱いやすいです。\n\n1. 別のアプリケーションでSVGファイルを保存します。\n2. SVGOMG で最適化します。\nhttps://jakearchibald.github.io/svgomg/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":985,"value":"