2d:null 2e:["$","title",null,{"children":"Netflix daily average per month | Oliver Roick | Observable"}] 33:T8b6,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const tooltip = new Tooltip(); const defs = svg.append("defs"); const pattern = defs.append("pattern") .attr("id", "dots") .attr("x", 0) .attr("y", 0) .attr("width", 3) .attr("height", 3) .attr("patternUnits", "userSpaceOnUse"); pattern.append("circle") .attr("cx", .5) .attr("cy", .5) .attr("r", .5) .attr("fill", "black"); pattern.append("circle") .attr("cx", 2) .attr("cy", 2) .attr("r", .5) .attr("fill", "black"); svg.append("g") .attr("fill", "url(#dots)") .attr("stroke", "#5D5B5B") .selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.date)) .attr("y", d => y(d.duration)) .attr("height", d => y(0) - y(d.duration)) .attr("width", barWidth) .on("mouseover", (e, d) => tooltip.show(e, d)) .on("mousemove", (e, d) => tooltip.move(e, d)) .on("mouseout", () => tooltip.hide()); svg.append("path") .datum(rollingAvg(6)) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 6) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.append("path") .datum(rollingAvg(6)) .attr("fill", "none") .attr("stroke", "#5D5B5B") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-dasharray", "2,4") .attr("d", line); svg.append("path") .datum(rollingAvg(12)) .attr("fill", "none") .attr("stroke", "#ffffff") .attr("stroke-width", 6) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.append("path") .datum(rollingAvg(12)) .attr("fill", "none") .attr("stroke", "#5D5B5B") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append(() => tooltip.node); return svg.node(); }34:[{"id":"beb0c2767d4a412798a03507e3c73fe48541e8cdcb1ba3b7915c04715ac83c99b211b293fc16cb0de004f86b7dfbc6cb324bf735c1020df9951b0aa5e2c546db","href":"https://static.observableusercontent.com/files/beb0c2767d4a412798a03507e3c73fe48541e8cdcb1ba3b7915c04715ac83c99b211b293fc16cb0de004f86b7dfbc6cb324bf735c1020df9951b0aa5e2c546db","name":"activity.csv","type":"text/csv","lastModified":1612625786862.604,"size":118949}] 31:{"id":"aa48a786a5915f60","slug":"netflix-daily-average-per-month","title":"Netflix daily average per month","thumbnail":"fc22cecbb0aeb575b96db14ebc55c25d5aa85f28c7c5ae8695abb56bd4ba90ea","access_level":"public","create_time":"$D2021-02-06T15:36:26.862Z","update_time":"$D2021-03-29T14:34:03.007Z","view_time":null,"first_public_time":"$D2021-04-10T13:35:39.784Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"597bb0e3b73bdb31","login":"oliverroick","name":"Oliver Roick","avatar_url":"https://avatars-next.observableusercontent.com/028a7df3c24147daa760c7a44469ccf1a4e1e6dcd9bd0ed0d0733a28a5138f5b","tier":"starter_2024"},"version":565,"publish_version":565,"role":null,"authored":false,"authors":[{"type":"individual","id":"38ae2e37692b009c","login":"oliverroick","name":"Oliver Roick","avatar_url":"https://avatars-next.observableusercontent.com/028a7df3c24147daa760c7a44469ccf1a4e1e6dcd9bd0ed0d0733a28a5138f5b","tier":null}],"members":[{"type":"individual","id":"38ae2e37692b009c","login":"oliverroick","name":"Oliver Roick","avatar_url":"https://avatars-next.observableusercontent.com/028a7df3c24147daa760c7a44469ccf1a4e1e6dcd9bd0ed0d0733a28a5138f5b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Netflix daily average per month","cells":[{"id":0,"value":"md`# Netflix daily average per month`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"class Tooltip {\n constructor() {\n this._date = svg``;\n this._duration = svg``;\n this.node = svg`\n \n ${this._date}\n ${this._duration}\n \n`;\n } \n\n show(e, d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${x(d.date) + barWidth / 2},${e.offsetY})`);\n this._date.textContent = formatDate(d.date);\n this._duration.textContent = toHours(d.duration);\n }\n move(e, d) {\n this.node.setAttribute(\"transform\", `translate(${x(d.date) + barWidth / 2},${e.offsetY})`);\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"yAxis = {\n return g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .tickValues(ticks.map(x => x * 60))\n .tickFormat((seconds) => seconds / 60))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"#5D5B5B\")\n .attr(\"text-anchor\", \"start\")\n .text(\"Minutes\"))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat((l) => `${formatYear(l)} →`).tickSizeOuter(0))\n .selectAll(\"text\")\n .style(\"text-anchor\", \"start\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"line = d3.line()\n .curve(d3.curveCardinal)\n .defined(d => !isNaN(d.avg))\n .x(d => x(d.date) + (barWidth / 2))\n .y(d => y(d.avg))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"y = {\n const max = d3.max(data, d => d.duration);\n return d3.scaleLinear()\n .domain([0, scaleHours]).nice()\n .range([height - margin.bottom, margin.top]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"x = d3.scaleTime()\n .domain([\n data[data.length-1].date,\n new Date(data[0].date.getFullYear(), data[0].date.getMonth() + 1, data[0].date.getDate())\n ])\n .range([margin.left, width - margin.left]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"barWidth = (width - margin.left) / data.length - 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"ticks = {\n const maxMinutes = scaleHours / 60;\n const ticks = [];\n for (let i = 1; i * 10 <= maxMinutes; i++) {\n ticks.push(i * 10);\n }\n return ticks;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"scaleHours = {\n const max = d3.max(data, d => d.duration);\n return max - max % 3600 + 3600;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"rollingAvg = (len) => data.map(({ date }, index) => {\n let sum;\n if (index < data.length - len - 1) {\n sum = [...Array(len).keys()].reduce((acc, indexShift) => data[indexShift + index].duration + acc, 0);\n }\n\n return {\n avg: sum / len,\n date\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = {\n const raw = await FileAttachment(\"activity.csv\").csv();\n const grouped = byMonth(raw);\n return Object.keys(grouped).map((key) => {\n const date = new Date(key);\n const avg = grouped[key] / new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\n return {\n date,\n duration: Math.round(avg, 0)\n }\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"byMonth = (records) => records.reduce(\n (resultObj, record) => {\n const date = new Date(record.START_TIME.replace(' ', 'T'));\n const key = new Date(date.getFullYear(), date.getMonth(), 1, 12, 0, 0)\n const duration = record.DURATION;\n const value = resultObj.hasOwnProperty(key)\n ? resultObj[key] + toSeconds(duration)\n : toSeconds(duration);\n\n return {...resultObj, [key]: value}\n },\n {}\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"toSeconds = (duration) => {\n const [hours, minutes, seconds] = duration.split(':');\n return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"toHours = (duration) => {\n const format = (val) => val < 10 ? `0${val}` : val;\n const hours = Math.floor(duration / 3600);\n const minutes = Math.floor(duration % 3600 / 60);\n const seconds = duration % 3600 % 60;\n return `${hours}:${format(minutes)}:${format(seconds)}`;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"formatDate = d3.utcFormat(\"%b %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"formatYear = d3.utcFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"margin = ({top: 30, right: 0, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"