2b:null 2c:["$","title",null,{"children":"mHealth Steps Horizon Chart | Trevor Manz | Observable"}] 31:[] 2f:{"id":"a68e96c2adc7c8db","slug":"mhealth-steps-horizon-chart","title":"mHealth Steps Horizon Chart","thumbnail":"14130de6a2ebea92ab27582d6307aea496de832bece6a508928b10d4bd090150","access_level":"public","create_time":"$D2018-09-19T12:56:36.285Z","update_time":"$D2018-10-08T15:13:22.779Z","view_time":null,"first_public_time":"$D2018-10-08T15:09:54.002Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"eea54452b8f3877b","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":"starter_2024"},"version":459,"publish_version":459,"role":null,"authored":false,"authors":[{"type":"individual","id":"075e7cdc2ad9e61e","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":null}],"members":[{"type":"individual","id":"075e7cdc2ad9e61e","login":"manzt","name":"Trevor Manz","avatar_url":"https://avatars-next.observableusercontent.com/2a99588ee6cff6ad670b3293028aef7dfc1103b71c4553590075886e2deba4c1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"mHealth Steps Horizon Chart","cells":[{"id":0,"value":"md`# mHealth Steps Horizon Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof mode = radio({\n options: [\n { label: 'offset', value: 'offset' },\n { label: 'mirror', value: 'mirror'},\n ],\n value: 'offset'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"chart = {\n const svg = d3.select(DOM.svg(width, h));\n \n // Define Axes\n const xAxis = d3.axisBottom().scale(x);\n \n \n // Area Chart\n const g = svg.append(\"g\").attr(\"transform\", `translate(0, 0)`)\n \n g.append(\"clipPath\")\n .attr(\"id\", \"clipy\")\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", step)\n \n g.append(\"defs\").append(\"path\")\n .attr(\"id\", \"path-def\")\n .datum(normed)\n .attr(\"d\", area);\n \n \n g.append(\"g\")\n .attr(\"clip-path\", \"url(#clipy)\")\n .selectAll(\"use\")\n .data(overlaps)\n .enter().append(\"use\")\n .attr(\"fill\", d => color(d.index))\n .attr(\"transform\", d => mode === \"mirror\" && d.index < 0\n ? `scale(1,-1) translate(0, ${d.index * step})`\n : `translate(0,${(d.index + 1) * step})`)\n .attr(\"href\", \"#path-def\")\n \n \n // Append Axes last\n svg.append(\"g\").call(xAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof overlap = slider({\n min: 1, \n max: 5, \n step: 1, \n value: 2, \n title: \"overlap\", \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"x = d3.scaleTime()\n .range([0, width])\n .domain(d3.extent(normed.map(d => d.date)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"y = {\n const max = d3.max(normed, d => Math.abs(d.value)) \n return d3.scaleLinear()\n .range([ h * overlap, -overlap * h ])\n .domain([-max, +max])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"area = d3.area()\n .curve(d3.curveBasis)\n .x(d => x(d.date))\n .y0(0)\n .y1(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"step = h","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"h = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"color = i => d3[scheme][overlap * 2 + 1][i + (i >= 0) + overlap]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"overlaps = Array.from({length: overlap * 2} , (_, i) => Object.assign({index: i < overlap ? -i - 1: i - overlap}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"margin = ({top: 5, right: 1, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"median = d3.median(data.map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"normed = data.map(({ date, value }) => ({date, value: value - median}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n let { data } = await d3.json('https://gist.githubusercontent.com/manzt/869451c346b6dcbb0b5f955d4e21f9e0/raw/909ec88d8da5b179a21dcfc3d1f444b78566bbf7/mHelathSteps.json');\n return JSON.parse(data).map(({date, value}) => ({ date: new Date(date), value: +value })).slice(0,100);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import { slider, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"