2d:null 2e:["$","title",null,{"children":"Årsplanlegger | Gorm | Observable"}] 33:T24b4,spiralChart = { const points = d3.range(start, end, (end - start) / 1000) const colorScale = (month, color) => d3.scaleLinear() .domain([0,2]) .range([ntnuSupportColorsLighter[color], ntnuSupportColorsLight[color]])(month) const svg = d3.create('svg') .attr('viewBox', `0 0 ${width} ${height}`) .attr('id', 'wheel') // .attr('width', width) // .attr('height', width) const g = svg.append("g") .attr("transform", "translate(" + (width) / 2 + "," + (height) / 2 + ")") g.append('text') .text(data.title.title) .attr('text-anchor', 'middle') .style('font-size', d3.min([innerRadius/2.5, 60])) .style('font-weight', 600) g.append('text') .text(data.title.subtitle) .attr('text-anchor', 'middle') .attr('dy', d3.min([innerRadius/2.5, 60])) .style('font-size', d3.min([innerRadius/4.5, 30])) g.selectAll('path.track') .data(trackArcs) .enter().append('path') .attr('d', d => d) .attr("fill", (d,i) => ntnuSupportColorsLighter[i]) .attr("stroke", "#666") // .call(d3.drag().on('start', drag.started).on('drag', drag.dragged).on('end', drag.ended)) .call(d3.drag().on('start', e => { const radians = (Math.atan2(e.x, -e.y) + Tau) % Tau const distance = Math.hypot(e.x, -e.y) const {date, track} = getTrack(radians, distance) dragObject.from = date dragObject.to = d3.timeDay.offset(date, 1) dragObject.track = track console.log("test") g.selectAll('path#test') .data([dragObject]) .join('path') .attr('id', 'test') .attr('d', d => { console.log(d) return arc(d.from, d.to, d.track)}) .attr("fill", (d,i) => ntnuSupportColorsLight[d.track]) .attr("stroke", "#666") }).on('drag', e => { const radians = (Math.atan2(e.x, -e.y) + Tau) % Tau const distance = Math.hypot(e.x, -e.y) const {date, track} = getTrack(radians, distance) dragObject.to = date d3.selectAll('path#test') .data([dragObject]) .join(update => update.attr('d', d => arc(d.from, d.to, d.track))) // this doesn't work... })) data.rings.forEach((ringData, trackNo) => { g.selectAll('path.period') .data(ringData.periods) .enter().append('path') .attr('d', d => arc(d.fromDate, d.toDate, trackNo, 0, divisionPoint)) .attr("fill", (d,i) => ntnuSupportColorsLight[trackNo]) .attr('stroke', '#666') .attr('stroke-width', 1.7) g.selectAll('path.period') .data(ringData.periods) .enter().append('path') .attr('id', (d,i) => `p-${trackNo}-${i}`) .attr('d', d => angularLine(d.fromDate, d.toDate, trackNo, 0.15)) .attr("fill", 'none') .attr('stroke', 'none') g.selectAll('text.period') .data(ringData.periods) .enter().append('text') .append('textPath') .attr("xlink:href", (d,i) => `#p-${trackNo}-${i}`) .attr("startOffset", 4) .style("text-anchor","start") .style('font-weight', 300) .style('font-size', d3.min([trackWidth/2, 16])) .attr('fill', 'black') .text(d => d.label) }) // TODO: the three sections below should be packaged in a function for each track, with week, month and divisionPoint as arguments g.selectAll('path.week') .data(weekLines) .enter().append('path') .attr('d', d => d) .attr('fill', 'none') .attr('stroke', '#bbb') g.selectAll('path.month') .data(monthLines) .enter().append('path') .attr('d', d => d) .attr('fill', 'none') .attr('stroke', '#999') g.append('path') .attr('d', divider) .attr('fill', 'none') .attr('stroke', '#999') g.selectAll('path.week') .data(weekLines2) .enter().append('path') .attr('d', d => d) .attr('fill', 'none') .attr('stroke', '#bbb') g.selectAll('path.month') .data(monthLines2) .enter().append('path') .attr('d', d => d) .attr('fill', 'none') .attr('stroke', '#999') g.append('path') .attr('d', divider2) .attr('fill', 'none') .attr('stroke', '#999') g.selectAll('path.weekNo') .data(d3.pairs(weekData)) .enter().append('path') .attr('id', (d,i) => `weekText${i}`) .attr('d', d => angularLine(d[0].date, d[1].date, 0, divisionPoint + 0.025)) .attr('fill', 'none') .attr('stroke', 'none') g.selectAll('text.weekNo') .data(d3.pairs(weekData)) .enter().append('text') .append("textPath") .attr("xlink:href", (d,i) => `#weekText${i}`) .attr("startOffset", "50%") .style("text-anchor","middle") .style('font-weight', 300) .style('font-size', d3.min([trackWidth/4, 13])) .attr('fill', 'black') .text(d => d[0].number) g.selectAll('path.weekNo') .data(d3.pairs(weekData)) .enter().append('path') .attr('id', (d,i) => `week2Text${i}`) .attr('d', d => angularLine(d[0].date, d[1].date, 1, divisionPoint + 0.025)) .attr('fill', 'none') .attr('stroke', 'none') g.selectAll('text.weekNo') .data(d3.pairs(weekData)) .enter().append('text') .append("textPath") .attr("xlink:href", (d,i) => `#week2Text${i}`) .attr("startOffset", "50%") .style("text-anchor","middle") .style('font-weight', 300) .style('font-size', d3.min([trackWidth/4, 13])) .attr('fill', 'black') .text(d => d[0].number) data.rings.forEach((ringData, trackNo) => { if (trackNo < tracks) { g.selectAll('circle.event') // event circles .data(ringData.events) .enter().append('circle') .attr('cx', d => point(d.date, trackNo, divisionPoint/2)[0]) .attr('cy', d => point(d.date, trackNo, divisionPoint/2)[1]) .attr('r', trackWidth/4) .attr("fill", (d,i) => ntnuSupportColors[trackNo]) .attr('stroke', '#333') .attr('stroke-width', 1.7) // g.selectAll('text.event') // event icons // .data(ringData.events) // .enter().append('text') // .attr('x', d => point(d.date, trackNo, divisionPoint/2)[0]) // .attr('y', d => point(d.date, trackNo, divisionPoint/2)[1]) // .attr('text-anchor', 'middle') // .attr('dy', trackWidth/10) // .style('font-size', trackWidth/3) // .text(d => d.icon) if (spiralOrCircle == 'spiral') { g.append('path') .attr('id', `trackTitleStart${trackNo}`) .attr('d', angularLine(start, startContent, trackNo, 0.2)) .attr('fill', 'none') .attr('stroke', 'none') g.append("text") .append("textPath") .attr("xlink:href", `#trackTitleStart${trackNo}`) .attr("startOffset", "97%") .style("text-anchor","end") .style('font-weight', 400) .style('font-size', 16) .attr('fill', ntnuSupportColorsDark[trackNo]) .text(ringData.title) g.append('path') .attr('id', `trackTitleEnd${trackNo}`) .attr('d', angularLine(endContent, end, trackNo, 0.2)) .attr('fill', 'none') .attr('stroke', 'none') g.append("text") .append("textPath") .attr("xlink:href", `#trackTitleEnd${trackNo}`) .attr("startOffset", "3%") .style("text-anchor","start") .style('font-weight', 400) .style('font-size', 16) .attr('fill', ntnuSupportColorsDark[trackNo]) .text(ringData.title) } } }) // g.selectAll('path.quarter') // .data(quarters) // .enter().append('path') // .attr('d', d => d) // .attr('stroke', '#999') // g.append('circle') // .attr('r', innerRadius) // .attr('fill', 'none') // .attr('stroke', '#666') // g.append('circle') // .attr('r', (height-radiusMargin)/2) // .attr('fill', 'none') // .attr('stroke', '#999') g.append('circle') .attr('r', (height-20)/2) .attr('fill', 'none') .attr('stroke', '#eee') .attr('stroke-width', 20) g.selectAll('path.months') .data(months) .enter().append('path') .attr('id', d => `month${d.month}`) .attr('d', d => d3.lineRadial()([[dateToAngle(d.from), (height)/2], [dateToAngle(d.to), (height)/2]])) .attr('stroke', 'none') g.selectAll('path.monthDivider') .data(months) .enter().append('path') .attr('d', d => d3.lineRadial()([[dateToAngle(d.from), height/2-20], [dateToAngle(d.from), height/2]])) .attr('fill', 'none') .attr('stroke', 'white') .attr('stroke-width', 3) g.selectAll('text.months') .data(months) .enter().append('text') .append('textPath') .attr("xlink:href", d=> `#month${d.month}`) .attr("startOffset", "50%") .style("text-anchor","middle") .style('font-weight', 400) .style('font-size', 16) .attr('fill', '#333') .text(d => d.month) //d3.lineRadial()([[dateAngle, radius(layer, posInner)(date)],[dateAngle, radius(layer, posOuter)(date)]]) return svg.node() }34:T1277,{ const svg = d3.create('svg') .attr('width', width) .attr('height', width) const wheel = svg.append('g') .attr('transform', `translate(${width/2}, ${width/2})`) wheel.classed('wheel') data.rings.forEach((ring, i) => { wheel.selectAll(`path .month-arcs`) .data(data.years[0].monthAngles) // TODO: Make responsive to timeSlicer pos .enter().append('path') .classed(`month-arcs`, true) .attr('fill', (d,i) => colorScale(i%3, ring.color)) .attr('d', d => arcMaker({ startAngle: d.startAngle, endAngle: d.endAngle, innerRadius: ring.innerRadius, outerRadius: ring.outerRadius })) if (!ring.simplified) { wheel.selectAll(`path .week-lines`) .data(data.years[0].weekAngles) // TODO: Make responsive to timeSlicer pos .enter().append('path') .classed(`week-lines`, true) .attr('stroke', 'white') .attr('stroke-width', 1) .attr('d', d => lineRadial([[d.startAngle, ring.innerRadius], [d.startAngle, ring.outerRadius]])) } }) data.rings.forEach((ring, i) => { wheel.selectAll('path .periods') .data(ring.periods) .enter() .append('path') .classed('periods', true) .attr('fill', ntnuSupportColors[ring.color]) .attr('stroke', ntnuSupportColorsDark[ring.color]) .attr('stroke-width', 2) .attr('d', d => periodMaker({ startAngle: angleForDate(d.fromDate, data), endAngle: angleForDate(d.toDate, data), innerRadius: ring.innerRadius + 25, // Hand coded for design testing only outerRadius: ring.outerRadius + 10 })) .style('opacity', 0.7) const tempInsetVariable = 25 // Shameful;y bad coding practice wheel.selectAll('circle .events') .data(ring.events) .enter() .append('circle') .classed('events', true) .attr('fill', ntnuSupportColors[ring.color]) .attr('stroke', ntnuSupportColorsDark[ring.color]) .attr('stroke-width', 2) .attr('cx', d => d3.pointRadial(angleForDate(d.date, data), ring.outerRadius - tempInsetVariable)[0]) .attr('cy', d => d3.pointRadial(angleForDate(d.date, data), ring.outerRadius - tempInsetVariable)[1]) .attr('r', 20) .style('opacity', 1) wheel.selectAll('text .icon') .data(ring.events) .enter() .append('text') .classed('icon', true) .attr('x', d => d3.pointRadial(angleForDate(d.date, data), ring.outerRadius - tempInsetVariable)[0]) .attr('y', d => d3.pointRadial(angleForDate(d.date, data), ring.outerRadius - tempInsetVariable)[1]) .attr('dy', 6) .attr('text-anchor', 'middle') .text(d => d.icon) }) /////////////////////////////////////////////// // timeSlicer /////////////////////////////////////////////// if (data.timeSlicer.show) { const rotation = angleForDate(timeSlicerDate, data, 'start') * 360 / Tau const timeSlicer = svg.append('g') .attr('transform', `translate(${width/2}, ${width/2}) rotate(${rotation})`) timeSlicer.classed('time-slicer') timeSlicer.append('path') .classed('time-slicer', true) .attr('stroke', '#333') .attr('stroke-width', 1.5) .attr('d', lineRadial([[0, margin.linesInner], [0, width/2 - margin.linesOuter]])) timeSlicer.append('circle') .classed('time-slicer', true) .attr('fill', '#333') .attr('cx', 0) .attr('cy', -margin.linesInner) .attr('r', 3) timeSlicer.append('circle') .classed('time-slicer', true) .attr('fill', '#333') .attr('cx', 0) .attr('cy', - width/2 + margin.linesOuter) .attr('r', 3) const arrowheadPos = { x: 25, y: -width/2 + margin.linesOuter + 12 } // TODO: Add drop shadow to the left. Using drop shadow and clipping area? timeSlicer.append('line') .attr('stroke', '#333') .attr('stroke-width', 1.5) .attr('x1', 0) .attr('y1', arrowheadPos.y) .attr('x2', arrowheadPos.x) .attr('y2', arrowheadPos.y) const arrowhead = timeSlicer.append('g') .attr('transform', `translate(${arrowheadPos.x}, ${arrowheadPos.y})`) arrowhead.append('line') .attr('stroke', '#333') .attr('stroke-width', 2.5) .attr('x1', 0) .attr('y1', 0) .attr('x2', -10) .attr('y2', -7) arrowhead.append('line') .attr('stroke', '#333') .attr('stroke-width', 2.5) .attr('x1', 0) .attr('y1', 0) .attr('x2', -10) .attr('y2', 7) } return svg.node() }35:T72a,ringsData = () => { let rings = [ { title: "Indre planleggingsring", color: 0, simplified: true, periods: [ { label: "Gruppe A", fromDate: new Date('March 1, 2020'), toDate: new Date('April 1, 2020') }, { label: "Gruppe B", fromDate: new Date('April 1, 2020'), toDate: new Date('May 1, 2020') }, { label: "Gruppe C", fromDate: new Date('May 1, 2020'), toDate: new Date('June 1, 2020') }, { label: "Overgang til nye systemer", fromDate: new Date('August 1, 2020'), toDate: new Date('November 1, 2020') } ], events: [ { label: "Deadline!", icon: 'D', date: new Date("May 30, 2020") } ], }, { title: "Ytre planleggingsring", color: 1, simplified: false, periods: [ { label: "Søknadsperiode", fromDate: new Date('April 3, 2020'), toDate: new Date('May 15, 2020') }, { label: "Reorganisering", fromDate: new Date('June 3, 2020'), toDate: new Date('August 15, 2020') }, { label: "Budsjettering", fromDate: new Date('October 1, 2020'), toDate: new Date('December 15, 2020') } ], events: [ { label: "Apply for grants", icon: "F", date: new Date("June 15, 2020") }, { label: "Apply for grants", icon: 'G', date: new Date("November 1, 2020") } ], }, ] for (let i of d3.range(rings.length)) { Object.assign(rings[i], ringMaker(rings.length)[i]) } return rings }36:[] 31:{"id":"87e132977f457ccc","slug":"arshjul","title":"Årsplanlegger","thumbnail":"e897c289b030aacc109d95969405088721ec265476220d32a9659765a1459749","access_level":"public","create_time":"$D2020-10-20T14:32:55.995Z","update_time":"$D2020-12-04T08:09:56.250Z","view_time":null,"first_public_time":"$D2020-10-20T21:21:30.428Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"f3d57832c2badb0e","login":"gorm","name":"Gorm","avatar_url":"https://avatars-next.observableusercontent.com/326a2f8ee6fb03edee307c4785953559fe89e85fafa70d04bdd344f73bf1b446","tier":"starter_2024"},"version":2575,"publish_version":2575,"role":null,"authored":false,"authors":[{"type":"individual","id":"5f75b9e8c7765a19","login":"gorm","name":"Gorm","avatar_url":"https://avatars-next.observableusercontent.com/326a2f8ee6fb03edee307c4785953559fe89e85fafa70d04bdd344f73bf1b446","tier":null}],"members":[{"type":"individual","id":"5f75b9e8c7765a19","login":"gorm","name":"Gorm","avatar_url":"https://avatars-next.observableusercontent.com/326a2f8ee6fb03edee307c4785953559fe89e85fafa70d04bdd344f73bf1b446","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Årsplanlegger","cells":[{"id":0,"value":"md`# Årsplanlegger`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1768,"value":"md`\nDette er et utkast. Når jeg er mer sikker på designet vil jeg overføre det til et nettsted hvor målet er at man vil få muligheten til å lage egne årshjul og legge til perioder og hendelser ved å klikke og dra rundt på det. \n\nJuster fritt på ting for å endre utseendet. Det finnes en del bugs, men det viktigste for meg her var å demonstrere litt av mulighetsrommet. Jeg vil veldig gjerne høre hva slags konkret bruk av et årshjul dere ser for dere. Jeg regner med spiral-varianten er litt upraktisk for de fleste formål, men har likevel lagt mest arbeid inn i den så langt.\n\nRundingene er ment å representere hendelser som frister e.l. Tanken er at de vil kunne ha labels på siden av årshjulet, gjerne med lenker til andre nettsider, slik at årshjul kan brukes som startsider for forskjellige ting.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"viewof spiralOrCircle = radio({\n title: 'Spiral or circle',\n // description: 'Please select your preferred contact method',\n options: [\n { label: 'Spiral', value: 'spiral' },\n { label: 'Circle', value: 'circle' }\n ],\n value: 'spiral'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"viewof startDate = slider({\n min: new Date(2019, 0, 1).getTime(), \n max: new Date(2025, 0, 1).getTime(), \n // step: 1, \n format: date => d3.utcFormat(\"%Y-%m-%d\")(new Date(date)),\n value: new Date(2020, 0, 1).getTime(), \n title: \"Start date\", \n // description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"viewof endDate = slider({\n min: new Date(2019, 0, 1).getTime(), \n max: new Date(2025, 1, 1).getTime(), \n // step: 1, \n format: date => d3.utcFormat(\"%Y-%m-%d\")(new Date(date)),\n value: new Date(2022, 0, 1).getTime(), \n title: \"End date (for spiral only)\", \n // description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"viewof innerRadius = slider({\n min: 0, \n max: width/2, \n // step: 1, \n value: width/8, \n title: \"Inner radius\", \n // description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1043,"value":"viewof spiralSpacing = slider({\n min: 0, \n max: 5, \n // step: 1, \n value: 1, \n title: \"Spiral spacing\", \n // description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"viewof spiralOut = radio({\n title: 'Spiral direction',\n // description: 'Please select your preferred contact method',\n options: [\n { label: 'Out', value: 'out' },\n { label: 'In', value: 'in' }\n ],\n value: 'out'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1102,"value":"viewof tracks = slider({\n min: 1, \n max: 8, \n step: 1, \n value: 2, \n title: \"Number of tracks\", \n // description: \"Integers from zero through 100\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"viewof trackSpacing = slider({\n min: 0, \n max: 1, \n value: 0.2,\n step: 0.01, \n format: \".0%\",\n title: \"Track spacing\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2555,"value":"md`### List of things not yet implemented\n* Customization per track, e.g. whether to show week lines or month lines on a per track basis.\n* Interactivity: Click to create event, drag to create a time period.\n* Optional labels on the right and left hand sides, with lines from certain events. These can include links to websites. \n* Labels for periods where there is a lot of space (e.g. in circle mode) can be done a lot better!\n* Upside down labels can be turned right side up.\n\n### Notes\n* I've cheated a bit to avoid leap years making the lines irregular, by forcing every quarter to look the same. That way, leap years only affect the first quarter, which is far less visually distracting.\n* The current colors are from NTNU's graphical profile, but I think I need to make a more suitable selection. The NTNU colors get a little loud when there are more than two tracks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2501,"value":"dragObject = ({\n from: '',\n to: '',\n track: ''\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2355,"value":"drag = ({\n started: (e) => {\n const radians = (Math.atan2(e.x, -e.y) + Tau) % Tau\n const distance = Math.hypot(e.x, -e.y)\n const {date, track} = getTrack(radians, distance)\n dragObject.from = date\n dragObject.to = d3.timeWeek.offset(date, 1)\n dragObject.track = track\n console.log(dragObject)\n console.log(d3.select('g#wheel'))\n d3.select('g#wheel').append('path')\n .attr('d', d => arc(dragObject.from, dragObject.to, dragObject.track))\n .attr(\"fill\", (d,i) => ntnuSupportColorsLight[dragObject.track])\n .attr(\"stroke\", \"#666\")\n },\n dragged: e => {\n const radians = (Math.atan2(e.x, -e.y) + Tau) % Tau\n const distance = Math.hypot(e.x, -e.y)\n const {date, track} = getTrack(radians, distance)\n dragObject.to = date\n },\n ended: e => {}\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2194,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"height = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2199,"value":"radiusMargin = 40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1926,"value":"html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1611,"value":"md`## Notes to self\n\n* PRI: Forskning: Søknadsfrister (EU, NFR), inkluder lenker i label i kolonner på høyre og venstre side\n* Template med innad- og utadretta for studieløp (evigsirkel)\n* LTB-prosessen, langtidsbudskjett (sirkel, kanskje evig hvis på ukes detaljnivå)\n* For admin kan det være et poeng å se både forskningsspiralen og budskjettsirkelen`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2573,"value":"monthFormatter = new Intl.DateTimeFormat('nb', { month: 'long' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2165,"value":"months = d3.pairs(d3.timeMonth.range(new Date(2021,0,1), new Date(2022,1,1))).map(d => {\n const name = monthFormatter.format(d[0])\n \n return {\n month: name.charAt(0).toUpperCase() + name.slice(1),\n from: d[0],\n to: d[1]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"trackArcs = d3.range(tracks).map(d => arc(startContent, endContent, d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1784,"value":"monthLines = monthData.map(d => radialLine(d, 0, 0, divisionPoint))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2383,"value":"monthLines2 = monthData.map(d => radialLine(d, 1, 0, 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"weekLines = weekData.map(d => radialLine(d.date, 0, divisionPoint, 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2546,"value":"weekLines2 = weekData.map(d => radialLine(d.date, 1, divisionPoint, 1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1806,"value":"divisionPoint = 0.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1801,"value":"divider = angularLine(startContent, endContent, 0, divisionPoint)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2548,"value":"divider2 = angularLine(startContent, endContent, 1, divisionPoint)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"monthData = d3.timeMonth.range(startContent, endContent)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2448,"value":"yearSegments = d3.pairs([startContent, ...d3.timeYears(d3.timeDay.offset(startContent, 1), endContent), endContent])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"weekData = { // TODO: Double check that week numbers are correct\n return yearSegments.reduce((acc, curr) => {\n const mondays = d3.timeMondays(curr[0], curr[1])\n const firstWeekNo = getWeekNumber(mondays[0])\n const weekNumbers = d3.range(firstWeekNo, firstWeekNo + mondays.length).map(d => {\n if (d == 53) {\n return getWeekNumber(mondays[mondays.length-1])\n } else return d\n })\n \n return acc.concat(d3.zip(mondays, weekNumbers))\n }, []).map(d => ({number: d[1], date: d[0]}))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1326,"value":"getWeekNumber = date => {\n // https://no.wikipedia.org/wiki/Ukenummer\n const dayN = d3.timeDay.count(d3.timeYear(date), date) + 1\n const weekDayN = date.getDay() > 0 ? date.getDay() : 7\n const prelim = Math.floor((10 + dayN - weekDayN) / 7)\n if (prelim == 53 && d3.timeDay.count(date, d3.timeYear.ceil(date)) < 3) {\n return 1\n } else return prelim\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"bandwidth = {\n if (spiralOrCircle == 'circle') {\n return (height-radiusMargin)/2 - innerRadius\n } else {\n const startYearStart = new Date(start.getTime()).setMonth(0,1,0)\n const endYearStart = new Date(end.getTime()).setMonth(0,1,0)\n\n const startAngle = d3.timeDay.count(startYearStart, start) / daysInYear(start.getYear())\n let endAngle = d3.timeDay.count(endYearStart, end) / daysInYear(end.getYear())\n endAngle += d3.timeYear.count(startYearStart, endYearStart)\n\n const spirals = endAngle - startAngle\n\n return ((height-radiusMargin)/2 - innerRadius) / (spirals + 1 + spiralSpacing)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1937,"value":"startContent = new Date(startDate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"start = d3.timeMonth.offset(startContent, -6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1994,"value":"endContent = spiralOrCircle == 'spiral' ? new Date(endDate) : d3.timeYear.offset(startContent, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"end = d3.timeMonth.offset(endContent, 3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1624,"value":"point = (date, layer, pos) => {\n return d3.pointRadial(dateToAngle(date), radius(layer, pos)(date))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"radialLine = (date, layer, posInner=0, posOuter=1) => {\n const dateAngle = dateToAngle(date)\n \n return d3.lineRadial()([[dateAngle, radius(layer, posInner)(date)],[dateAngle, radius(layer, posOuter)(date)]])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1657,"value":"angularLine = (startDate, endDate, layer, pos) => {\n const steps = startDate < endDate ?\n d3.timeDay.every(4).range(d3.timeDay.offset(startDate,1), d3.timeDay.offset(endDate, -2)) :\n d3.timeDay.every(4).range(d3.timeDay.offset(endDate,1), d3.timeDay.offset(startDate, -2)).reverse()\n \n const data = [startDate, ...steps, endDate]\n \n return d3.lineRadial()\n .curve(d3.curveCardinal)\n .angle(dateToAngle) // TODO: Interpolate between two angles instead of calling this 100x\n .radius(radius(layer, pos))(data)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"arc = (startDate, endDate, layer, posInner=0, posOuter=1) => {\n return angularLine(startDate, endDate, layer, posOuter) + angularLine(endDate, startDate, layer, posInner).replace('M', 'L') + 'Z'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"d3.timeMonth.offset(d3.timeYear(start), 12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1823,"value":"d3.timeYear.ceil(start)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"dateToAngle = d => {\n const yearStart = d3.timeYear(d)\n const secondQuarter = d3.timeMonth.offset(yearStart, 3)\n const thirdQuarter = d3.timeMonth.offset(yearStart, 6)\n const fourthQuarter = d3.timeMonth.offset(yearStart, 9)\n \n if (d > fourthQuarter) {\n return d3.scaleLinear()\n .domain([fourthQuarter, d3.timeYear.ceil(d)])\n .range([3*Tau/4, Tau])(d)\n } else if (d > thirdQuarter) {\n return d3.scaleLinear()\n .domain([thirdQuarter, fourthQuarter])\n .range([Tau/2, 3*Tau/4])(d)\n } else if (d > secondQuarter) {\n return d3.scaleLinear()\n .domain([secondQuarter, thirdQuarter])\n .range([Tau/4, Tau/2])(d)\n } else {\n return d3.scaleLinear()\n .domain([yearStart, secondQuarter])\n .range([0, Tau/4])(d)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2392,"value":"angleToDate = angle => {\n const yearStart = new Date(2021, 0, 1)\n const secondQuarter = d3.timeMonth.offset(yearStart, 3)\n const thirdQuarter = d3.timeMonth.offset(yearStart, 6)\n const fourthQuarter = d3.timeMonth.offset(yearStart, 9) \n \n if (angle > 3*Tau/4) {\n return d3.scaleLinear()\n .domain([3*Tau/4, Tau])\n .range([fourthQuarter, d3.timeYear.offset(yearStart, 1)])(angle)\n } else if (angle > Tau/2) {\n return d3.scaleLinear()\n .domain([Tau/2, 3*Tau/4])\n .range([thirdQuarter, fourthQuarter, 1])(angle)\n } else if (angle > Tau/4) {\n return d3.scaleLinear()\n .domain([Tau/4, Tau/2])\n .range([secondQuarter, thirdQuarter, 1])(angle)\n } else {\n return d3.scaleLinear()\n .domain([0, Tau/4])\n .range([yearStart, secondQuarter, 1])(angle)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2110,"value":"// quarters = {\n// const edgeRadius = d3.scaleLinear()\n// .domain([start, end])\n// .range([innerRadius + trackStart[0], width/2])\n \n// const canonicalYear = new Date(2021, 0, 1)\n \n// const endMonth = d3.timeMonth(endContent)\n// const firstEndQuarter = d3.timeMonth.offset(endMonth, -endMonth.getMonth()%3 -9)\n \n// const startMonth = d3.timeMonth.offset(d3.timeMonth(startContent))\n// const firstStartQuarter = d3.timeMonth.offset(startMonth, startMonth.getMonth()%3)\n \n// return d3.range(0,12,3)\n// .map(d => dateToAngle(d3.timeMonth.offset(canonicalYear, d)))\n// .map((d,i) => d3.lineRadial()([\n// [d, radius(0,0)(d3.timeMonth.offset(firstStartQuarter, i*3))], \n// [d, radius(tracks-1, 1)(d3.timeMonth.offset(firstEndQuarter, i*3))]\n// ]))\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1647,"value":"radius = (layer, pos) => {\n const trackPos = trackStart[layer] + trackWidth * pos\n let range\n \n if (spiralOrCircle == 'spiral') {\n range = spiralOut == \"out\" ? \n [innerRadius + trackPos, (height-radiusMargin)/2 - bandwidth + trackPos] :\n [(height-radiusMargin)/2 - bandwidth + trackPos, innerRadius + trackPos]\n } else {\n range = [innerRadius + trackPos, innerRadius + trackPos]\n }\n \n return d3.scaleLinear()\n .domain([start, end])\n .range(range)\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2466,"value":"new Date().setMonth(0,1,0) < new Date() < new Date().setMonth(0,1,0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2458,"value":"getTrack(Math.PI, 380)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2391,"value":"getTrack = (radians, distance) => {\n const date = angleToDate(radians)\n const month = date.getMonth()\n const day = date.getDate()\n const r = radius(0,0)\n \n const bandStarts = yearSegments\n .filter(d => {\n const thisDate = new Date(d[0]).setMonth(month, day, 0)\n return d[0] < thisDate && thisDate < d[1]\n })\n .map(d => {\n const thisDate = new Date(d[0]).setMonth(month, day, 0)\n return {\n r: r(thisDate),\n date: thisDate\n }\n })\n \n \n // compare radialDistance with bandStarts and trackWidths etc\n let band\n let track\n for (let i = bandStarts.length -1; i >= 0; i--) {\n if (distance >= bandStarts[i].r) {\n band = i\n break\n }\n }\n for (let i = tracks -1; i >= 0; i--) {\n if (distance >= bandStarts[band].r + i * (trackWidth + trackSpacing)) {\n track = i\n break\n }\n }\n \n return {\n date: new Date(bandStarts[band].date),\n track: track\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1627,"value":"trackWidth = spiralOrCircle == 'spiral' ?\n bandwidth/((tracks) + trackSpacing * (tracks -1)) :\n bandwidth/((tracks) + trackSpacing * tracks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"trackStart = d3.range(tracks).map(d => (trackWidth * (1 + trackSpacing)) * d)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"md`---\n## Sirkel (gammelt utkast)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"viewof timeSlicerDate = Scrubber(d3.timeDay.range(new Date(2020,0,1), new Date(2021,0,1)), {\n autoplay: false,\n format: date => dayjs(date).format('D. MMMM YYYY'),\n loop: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"colorScale = (month, color) => d3.scaleLinear([0,2], [ntnuSupportColorsLighter[color], ntnuSupportColorsLight[color]])(month)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"data = {\n const thisYear = new Date().getFullYear()\n \n let raw = {\n timeSlicer: { \n date: new Date(thisYear, 0, 1),\n show: true\n },\n title: {\n title: \"NTNU\",\n subtitle: 'Avdelingsnavn',\n show: true\n },\n years: [thisYear, thisYear + 1].map(y => generateYearData(y)),\n rings: ringsData()\n }\n \n raw.timeSlicer.angle = angleForDate(raw.timeSlicer.date, raw, 'start')\n \n return raw\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"generateYearData = year => ({\n year: year,\n months: months2(year),\n monthAngles: angleMaker(Object.values(months2(year))),\n weeks: weeks(year),\n weekAngles: angleMaker(weeks(year)),\n daysInYear: daysInYear(year),\n firstWeekday: firstWeekday(year)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"periodMaker = d3.arc().cornerRadius(5).padAngle(0.01)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"angleMaker = d3.pie().sort(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"ringMaker = rings => {\n const innerMostRadius = margin.ringsInner - 20 // Can't be bothered to fix padding between rings\n const outerMostRadius = width/2 - margin.ringsOuter\n const radiusPadding = 20\n \n const ringWidth = (outerMostRadius - margin.ringsInner - radiusPadding) / rings\n \n return d3.range(rings).map((d,i) => ({\n innerRadius: innerMostRadius + ringWidth * i + radiusPadding,\n outerRadius: innerMostRadius + ringWidth * (i+1) \n }))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"margin = ({ ringsOuter: 20, linesOuter: 10, ringsInner: width/6, linesInner: width/6 - 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"md`---\n## Utilities`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"// Algorithm from https://en.wikipedia.org/wiki/Leap_year#Algorithm\nisLeapYear = year => {\n if (year % 4 != 0) { return false }\n else if (year % 25 != 0) { return true }\n else if (year % 16 != 0) { return false }\n else { return true }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"daysInYear = year => isLeapYear(year) ? 366 : 365","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"// Sakamoto's method https://en.wikipedia.org/wiki/Determination_of_the_day_of_the_week#Sakamoto's_methods\n// month number is 1-based, returns 0-based weekday\ndayOfWeek = (year, month, day) => {\n const t = [0,3,2,5,0,3,5,1,4,6,2,4]\n year = (month < 3) ? year-1 : year\n return (year + Math.floor(year/4) - Math.floor(year/100) + Math.floor(year/400) + t[month-1] + day -1 ) % 7\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"firstWeekday = year => dayOfWeek(year, 1, 1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"weekdays = ['Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag', 'Søndag']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"months2 = year => ({\n \"Januar\": 31,\n \"Februar\": isLeapYear(year) ? 29: 28,\n \"Mars\": 31,\n \"April\": 30,\n \"Mai\": 31,\n \"Juni\": 30,\n \"Juli\": 31,\n \"August\": 31,\n \"September\": 30,\n \"Oktober\": 31,\n \"November\": 30,\n \"Desember\": 31\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"// Takes a year and returns an array of week lengths\nweeks = year => {\n const firstWeekLength = 7-firstWeekday(year)\n const fullWeeks = Math.floor((daysInYear(year) - firstWeekLength) / 7)\n const lastWeekLength = (daysInYear - firstWeekLength) % 7\n \n let weekArray = Array(fullWeeks).fill(7)\n if (firstWeekLength >= 0) { weekArray.unshift(firstWeekLength) }\n if (lastWeekLength >= 0) { weekArray.push(lastWeekLength) }\n \n return weekArray\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"Tau = Math.PI * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2434,"value":"angleForDate = (date, data, pos = 'mid') => {\n const year = (date >= data.timeSlicer.date) ? data.years[0] : data.years[1]\n \n date = (pos == 'mid') ? new Date(date.getTime()).setHours(12,0,0) : new Date(date.getTime()).setHours(0,0,0)\n \n return d3.scaleTime()\n .domain([new Date(year.year, 0, 1), new Date(year.year + 1, 0, 1)])\n .range([0, Tau])(date)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2435,"value":"lineRadial = d3.lineRadial()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2437,"value":"arcMaker = d3.arc()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"dayjs = {\n const dayjs = await require('dayjs')\n await require('dayjs/locale/nb')\n var relativeTime = await require('dayjs/plugin/relativeTime')\n dayjs.locale('nb')\n dayjs.extend(relativeTime)\n return dayjs\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"dayjs('2018-05-05').format('D MMMM')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"import {ntnuBlue, ntnuSupportColors, ntnuSupportColorsLight, ntnuSupportColorsLighter, ntnuSupportColorsDark, ntnuSupportColorsDarker } from \"@gorm/ntnu-standards\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"new Date('14 oct 2020')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":950,"value":"import {slider, date, radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"