2f:Te4e,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/density-contours function DensityContours( data, { x = ([x]) => x, // given d in data, returns the (quantitative) x-value y = ([, y]) => y, // given d in data, returns the (quantitative) y-value xLabel, // a label for the x-axis yLabel, // a label for the y-axis bandwidth = 30, // the bandwidth for contouring (in pixels) thresholds = 40, // requested number of contours fill = "none", // the fill color (either a constant or a function of the density) stroke = typeof fill === "function" ? null : "currentcolor", // stroke color (either a constant or a function of the density) strokeWidth = (d, i) => (i % 5 ? 0.25 : 1), // stroke width as a function of the density marginTop = 20, // top margin, in pixels marginRight = 30, // right margin, in pixels marginBottom = 30, // bottom margin, in pixels marginLeft = 40, // left margin, in pixels width = 640, // outer width, in pixels height = 400, // outer height, in pixels xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] yDomain, // [ymin, ymax] yRange = [height - marginBottom, marginTop] // [bottom, top] } = {} ) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); const I = d3.range(data.length); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg .append("g") .attr("class", "compass") .attr("transform", "translate(1300,300)") .node() .appendChild(compass.cloneNode(true)); if (xDomain === undefined) xDomain = d3.extent(X); if (yDomain === undefined) yDomain = d3.extent(Y); const xScale = d3.scaleLinear().domain(xDomain).nice().rangeRound(xRange); const yScale = d3.scaleLinear().domain(yDomain).nice().rangeRound(yRange); const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).tickSizeOuter(0); const contours = d3 .contourDensity() .x((i) => xScale(X[i])) .y((i) => yScale(Y[i])) .size([width, height]) .bandwidth(bandwidth) .thresholds(thresholds)(I); svg .append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) .call((g) => g.select(".domain").remove()) .call((g) => g .select(".tick:last-of-type text") .clone() .attr("x", -50) .attr("y", -100) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "30") .text(yLabel) ); svg .append("g") .attr("stroke-linejoin", "round") .attr("fill", typeof fill === "function" ? null : fill) .attr("stroke", typeof stroke === "function" ? null : stroke) .attr( "stroke-width", typeof strokeWidth === "function" ? null : strokeWidth ) .selectAll("path") .data(contours) .join("path") .attr("fill", typeof fill === "function" ? (d) => fill(d.value) : null) .attr( "stroke", typeof stroke === "function" ? (d) => stroke(d.value) : null ) .attr( "stroke-width", typeof strokeWidth === "function" ? (d, i) => strokeWidth(d.value, i) : null ) .attr("d", d3.geoPath()); svg .append("g") .attr("stroke", "white") .selectAll("circle") .data(I) .join("circle") .attr("cx", (i) => xScale(X[i])) .attr("cy", (i) => yScale(Y[i])) .attr("r", 2); return svg.node(); }30:T192c,compass = svg``31:[] 2d:{"title":"「生活登山」","cells":[{"id":0,"value":"\n# 「生活登山」\n### 作：マツシタユウリ\n","pinned":false,"hidden":false,"mode":"md"},{"id":262,"value":"## 解説\n\n- 一週間でボタンを押した回数のデータをビジュアライズしたものです。\n- 横軸が日にち、縦軸が時間です。ボタンを押した時間に黒い点が打たれます。複数回ボタンが押された時（点が重なっているとき）、回数分だけ緑色の線が点を囲むように引かれます。ボタンが押された回数が多い時間帯ほど、緑色の線の間隔は狭くなります。\n- 山の等高線のように見えるので「生活登山」と名付けました。","pinned":false,"hidden":false,"mode":"md"},{"id":185,"value":"chart = DensityContours(dataOfName, {\n x: (d) => d.date.getUTCDay(),\n y: (d) => d.date.getUTCHours(),\n yLabel:\n \"Day1　　　　　Day2　　　　　Day3　　　　　Day4　　　　　Day5　　　　　Day6　　　　　Day7\",\n width: 1500,\n height: 900,\n stroke: \"green\",\n marginRight: 100,\n marginLeft: 100,\n marginTop: 150,\n marginBottom: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { names, dataset } from \"b0c06c8d8a1da6a3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":" 選択した名前のデータが入ります","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof dataOfName = Inputs.select(names, {\n value: names.get(\"Matsushita\"),\n label: \"名前\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}