31:[] 2f:{"title":"mHealth Steps Horizon Chart","cells":[{"id":0,"value":"md`# mHealth Steps Horizon Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"viewof scheme = html``","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":226,"value":"step = h","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"h = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"color = i => d3[scheme][overlap * 2 + 1][i + (i >= 0) + overlap]","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":88,"value":"margin = ({top: 5, right: 1, bottom: 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"median = d3.median(data.map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"normed = data.map(({ date, value }) => ({date, value: value - median}))","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"import { slider, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}