2b:null 2c:["$","title",null,{"children":"「生活登山」 | 2022 TMU DataViz | Observable"}] 31: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(); }32:T192c,compass = svg``33:[] 2f:{"id":"d6482a2ec0ff2252","slug":null,"title":"「生活登山」","thumbnail":"e5f482bd709dcc252d9c08a4dea9d59ba148a11fc199a307a4dd578ee5801ae8","access_level":"public","create_time":"$D2022-11-25T06:39:55.409Z","update_time":"$D2022-12-16T06:16:20.118Z","view_time":null,"first_public_time":"$D2022-11-25T06:39:55.409Z","has_unpublished_edits":null,"fork":{"id":"1c1d9c31411851c5","slug":null,"title":"My Data Drawing","owner":{"id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz","avatar_url":"https://avatars-next.observableusercontent.com/20a88d07d4e0d57432f57ec54df2aa13774d478859b8015b6c3fcddf28aac5f5","tier":"starter_2024"},"version":548,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"04bed945b0f7c6a2","login":"matsushita-yuri","name":"Yuri","avatar_url":"https://avatars-next.observableusercontent.com/963fb3915b8b57b18e6f23b531b6ce8e2c5ef34d6d88c9b650c8717804762b73","tier":null}],"members":[{"type":"team","id":"f72792763363b4a6","login":"2022-tmu-dataviz","name":"2022 TMU DataViz","avatar_url":"https://avatars-next.observableusercontent.com/20a88d07d4e0d57432f57ec54df2aa13774d478859b8015b6c3fcddf28aac5f5","tier":"starter_2024","role":"editor"},{"type":"individual","id":"04bed945b0f7c6a2","login":"matsushita-yuri","name":"Yuri","avatar_url":"https://avatars-next.observableusercontent.com/963fb3915b8b57b18e6f23b531b6ce8e2c5ef34d6d88c9b650c8717804762b73","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"「生活登山」","cells":[{"id":0,"value":"\n# 「生活登山」\n### 作：マツシタユウリ\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"## 解説\n\n- 一週間でボタンを押した回数のデータをビジュアライズしたものです。\n- 横軸が日にち、縦軸が時間です。ボタンを押した時間に黒い点が打たれます。複数回ボタンが押された時（点が重なっているとき）、回数分だけ緑色の線が点を囲むように引かれます。ボタンが押された回数が多い時間帯ほど、緑色の線の間隔は狭くなります。\n- 山の等高線のように見えるので「生活登山」と名付けました。","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { names, dataset } from \"b0c06c8d8a1da6a3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":" 選択した名前のデータが入ります","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"viewof dataOfName = Inputs.select(names, {\n value: names.get(\"Matsushita\"),\n label: \"名前\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"