2c:null 2d:["$","title",null,{"children":"Peak Detection for Data Visualization | l92 | Observable"}] 32:T608,function detectPeaks(data, accessor, options) { let {lookaround, sensitivity, coalesce, full} = Object.assign({ lookaround: 2, sensitivity: 1.4, coalesce: 0, full: false }, options || accessor) let values = typeof accessor == "function" ? data.map(accessor) : data // Compute a peakiness score for every sample value in `data` // We normalize the scale of the scores by mean-centering and dividing by the standard deviation // to get a dimensionless quantity such that can be used as a sensitivity parameter // across different scales of data (s. t. normalize(x) == normalize(k*x)) let scores = normalize( values.map( (value, index) => peakiness( values.slice(max(0, index - lookaround), index), value, values.slice(index + 1, index + lookaround + 1) ) ) ) // Candidate peaks are indices whose score is above the sensitivity threshold let candidates = d3.range(scores.length).filter(index => scores[index] > sensitivity) // If we have multiple peaks, coalesce those that are close together let groups = candidates.length ? [[candidates[0]]] : [] d3.pairs(candidates).forEach(([a, b]) => { if (b - a < coalesce) { groups[groups.length - 1].push(b) } else { groups.push([b]) } }) // Represent every group of peaks by the highest peak in the group let peaks = groups.map( group => group[d3.scan(group, (a, b) => values[b] - values[a])] ) return full ? { data, values, scores, candidates, groups, peaks } : peaks }33:T1213,chart = (data, peakConfig={lookaround, sensitivity, coalesce, full: false}, editable=false) => { // Field accessor functions let xf = d => d.date let yf = d => d.views let x = d => xscale(xf(d)) let peaks = detectPeaks(data, yf, peakConfig) let [min, max] = d3.extent(data, yf) if (min === max) { max += 0.01 // Prevent degenerate plots (e.g. all zeros) by giving us a vertical height to play with } // Heuristic: We want to offset the title in the event that it may overlap with a peak label. // If the peak is more than 75% of the way to being the tallest on screen, and in the x region // under the title, offset it. We also always keep editable charts at max height so they don't skip around. // In that case, we make the offset a bit smaller so they take up less room, making it look a bit worse when there's an early peak. let titleOffset = 25 + (editable || peaks.some(peak => (yf(data[peak]) / max > 0.75) && xscale(xf(data[peak])) < 200) ? (editable ? 40 : 45) : 0) // Dimension calculation let hoverOffset = 20 let height = 110 + titleOffset + hoverOffset let chartHeight = height - hoverOffset // The y scale depends on dimensions, so compute it here let yscale = d3.scaleLinear([0, max], [chartHeight, titleOffset]) let y = d => yscale(yf(d)) // Area generation for paths let curve = d3.curveMonotoneX let line = d3.line().x(x).y(y).curve(curve) let area = d3.area().x(x).y0(height - hoverOffset).y1(y).curve(curve) // Labeling and the naming of things let labelFormat = { // Add years when necessary for disambiguation year: start.getYear() == end.getYear() ? undefined : "numeric", "month": "long", "day": "numeric" } let startLabel = data[0].date.toLocaleString(undefined, labelFormat) let endLabel = data[data.length - 1].date.toLocaleString(undefined, labelFormat) let articleSlug = unescape(data[0].article), articleName = articleSlug.replace(/_/g, ' ') // Appropriately subtitle charts that span multiple years let yearRange = start.getYear() == end.getYear() ? start.getFullYear() : (start.getFullYear() + '–' + end.getFullYear()) // Visualizing peaks let offsets = peakOffsets(peaks, x, y, data) let peakMarkup = peaks.map((p, i) => { let xpos = x(data[p]), ypos = y(data[p]), o = offsets // Anchor the text based on proximity to the sides of the visualization let anchor = xpos < 50 ? 'start' : xpos > width - 50 ? 'end' : 'middle' // Use short or long date formats based on whether you are part of a contiguous run of three offset peaks let labelStyle = (o[i] && o[i-1] && o[i+1] && (o[i-2] || o[i+2])) ? "short" : "long" let label = peakLabel(data[p], labelStyle) return ` ${label} ` }) let node = html` ` // Augment the SVG with data for use by the hover function d3.select(node).datum({data, peaks, y}) return node }34:Tb38,hover = (svg) => { let left = svg.select('.x-axis text:first-child') let right = svg.select('.x-axis text:last-child') svg .on('mouseenter', update) .on('mousemove', update) .on('mouseleave', done) .on('click', done) svg.select('.touch-surface') .on('touchstart', update) .on('touchmove', update) .on('click', () => d3.event.stopPropagation()) // all x-coordinates available for snapping let snapsBySvg = svg.data().map(d => d.peaks.map(p => xscale(d.data[p].date))) let snapsUnion = Array.from(new Set(snapsBySvg.flatMap(identity))) function done() { svg.classed('hovering', false) left.classed('hidden', false) right.classed('hidden', false) } function update(d, i) { // `update` is called in the context of a particular svg element, with that element's data. // Therefore `this` here refers to something other than `this` inside the `svg.each`. let [hx, hy] = d3.mouse(this) d3.event.type == "touchmove" && d3.event.preventDefault() // We resolve peak snapping with respect to the hovered svg. // potential x-coordinates to snap this hover position to // snapsBySvg[i] let snaps = snapsUnion.filter(x => Math.abs(x - hx) < 10) let snapped = snaps.length > 0 if (snapped) { hx = snaps[findmin(snaps, x => Math.abs(x - hx))] } let hdate = xscale.invert(hx) // Re-set `hx` to clamp the x position to the projected data range of the x scale. // Bug: this will not do the right thing if one time series is shorter than another — // the label will contain the correct date but the x position will not snap to it. // This is because the clamped xscale ranges across the entire [start, end] date range. hx = xscale(hdate) let anchor = hx > width - 200 && hx > 150 ? 'end' : 'start' svg .classed('hovering', true) .each(function({data, peaks, y}, i) { let value = data[findmin(data, d => abs(d.date - hdate))] let date = value.date let timestamp = dateToTimestamp(date) let dateLabel = date.toLocaleString(undefined, { month: "long", weekday: "long", day: "numeric"//, year: "numeric" }) // Hide axes when the label is near, or, to save intricate special-casing, // if the screen is small. left.classed('hidden', hx < 60 || width < 400) right.classed('hidden', hx > width - 300 || width < 400) let hover = d3.select(this).select('.hover') hover .attr('transform', `translate(${hx}, 0)`) .classed('snapped', snapped && snapsBySvg[i].includes(hx)) hover.select('text') .attr('text-anchor', anchor) .text(`${dateLabel} — ${comma(value.views)} pageviews`) hover.select('line').attr('y1', y(value)) }) } return svg.nodes() }35:T819,editable = (query, callback) => search(query, start, end).then(data => { let node = chart(data, {lookaround, sensitivity, coalesce, full: false}, true) // todo: 🔗to link to the page let foreignObject = d3.select(node).append('foreignObject') .classed('hidden', true) .attr('x', 0) .attr('y', -6) .attr('width', 400) .attr('height', 100) let spacify = s => s.replace(/\_/g, ' ') let commit = () => { let value = input.property('value') console.log(spacify(value).toLowerCase(), spacify(query).toLowerCase()) if (spacify(value).toLowerCase() === spacify(query).toLowerCase()) { return false} autocomplete(value).then(data => { if (!data.length) { return } if (data[0].query.toLowerCase() === value.toLowerCase()) { callback(data[0].query) } else { let top = data[0].query input.property('value', top) callback(top) } }) return true } let input = foreignObject.append('xhtml:input') .attr("xmlns", "http://www.w3.org/1999/xhtml") .attr('value', spacify(query)) .on('click', () => d3.event.stopPropagation()) .on('dblClick', () => d3.event.stopPropagation()) .on('keydown', function() { if(d3.event.code == "Escape") { d3.select(this).property('value', spacify(query)) foreignObject.classed('hidden', true).node().blur() return } if(d3.event.code == "Enter") { commit() return } }) let svg = d3.select(node) svg.select('.title a').on('click', () => { d3.event.stopPropagation() d3.event.preventDefault() foreignObject.classed('hidden', false) input.node().focus(); input.node().setSelectionRange(0, query.length); }) let unfocus = () => { foreignObject.classed('hidden', true) d3.select(this).property('value', spacify(query)) } let done = () => { if (!commit()) { unfocus() } } input.on('blur', done) svg.on('click.edit', done) return node })36:T49f,timeSeriesStyle = html` `37:T527,// Documentation: https://wikitech.wikimedia.org/wiki/Analytics/AQS/Pageviews search = (query, startDate, endDate) => { let project = "en.wikipedia" let article = encodeURIComponent(query) let granularity = "daily" let access = "all-access" let agent = "user" let date let url = `https://wikimedia.org/api/rest_v1/metrics/pageviews/per-article/${project}/${access}/${agent}/${article}/${granularity}/${dateToTimestamp(startDate)}/${dateToTimestamp(endDate)}` console.log(query, url) return d3.json(url) .catch(e => ({ items: [] })) .then(d => d.items) .then(items => { // Fill in missing days with zeroes let result = new Array(dayDiff(startDate, endDate) + 1).fill(null) items.forEach(d => { d.date = parseDateString(d.timestamp) result[dayDiff(startDate, d.date)] = d }) result.forEach((d, i) => { if (d === null) { let date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i) result[i] = Object.assign({ project, article, granularity, timestamp: dateToTimestamp(date), access, agent, views: 0, date: date }) } }) result.sort((a, b) => d3.ascending(a.date, b.date)) return result }) }38:T6cf,fontStyle = html` `39:[] 30:{"id":"3981a43bc64a84b9","slug":"peak-detection-for-data-visualization","title":"Peak Detection for Data Visualization","thumbnail":"0d2d4b471d90b957e8ed382afc276fb639ae5c440863ef6ec2f0ddffeed7717c","access_level":"public","create_time":"$D2019-05-29T08:07:54.521Z","update_time":"$D2019-05-29T08:09:45.931Z","view_time":null,"first_public_time":"$D2019-05-29T08:10:12.292Z","has_unpublished_edits":null,"fork":{"id":"7ef754ce2713ee8b","slug":"peak-detection","title":"Peak Detection for Data Visualization","owner":{"id":"106fc7e7a0f11e48","login":"yurivish","name":"Yuri Vishnevsky"}},"stars":3,"starred":false,"owner":{"type":"team","id":"7599d6d491a078d0","login":"jdspersonal","name":"l92","avatar_url":"https://avatars-next.observableusercontent.com/525d0ac06e9323b4ca5f54a4876a71283eda96b27af12396def8deb39925f308","tier":"starter_2024","bio":""},"version":7425,"publish_version":7425,"role":null,"authored":false,"authors":[{"type":"individual","id":"98b73cb35a65bd1c","login":"jdspersonal","name":"l92","avatar_url":"https://avatars-next.observableusercontent.com/525d0ac06e9323b4ca5f54a4876a71283eda96b27af12396def8deb39925f308","tier":null,"bio":""}],"members":[{"type":"individual","id":"98b73cb35a65bd1c","login":"jdspersonal","name":"l92","avatar_url":"https://avatars-next.observableusercontent.com/525d0ac06e9323b4ca5f54a4876a71283eda96b27af12396def8deb39925f308","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Peak Detection for Data Visualization","cells":[{"id":0,"value":"{\n fontStyle;\n return md`# Peak Detection for Data Visualization`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4502,"value":"md`## Example\nLet's look at data on the number of visitors to Wikipedia pages. The peaks in this data represent times when there was a sudden spike of interest in a particular page.\n\nHere are the daily pageviews of the Wikipedia page for pumpkins in 2018:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4507,"value":"csearch(\"Pumpkin\").then(data => {\n let node = chart(data)\n let svg = d3.select(node)\n svg.datum().peaks = []\n svg.select('.peaks').remove()\n return html`${hover(d3.select(node))}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4504,"value":"md`\nThere's a large peak near the end of the year. What do you think that is? If we hover over the chart we see that interest in pumpkins peaked on Halloween.\n\nIt would be nice if the chart guided us towards this conclusion instead of making us work for it. Here it is again, this time with the peaks automatically detected and marked:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4618,"value":"{\n await visibility()\n return plot(\"Pumpkin\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4625,"value":"md`\nNow the insight is immediate. We can see that the large peak falls on Halloween, and that the peak following it is on Thanksgiving.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2561,"value":"md`\n## Easter hunt\n\nPeak detection can also be used for completely frivolous purposes, such as determining the date of Easter purely from the pageviews of a curated set of Wikipedia pages (which is much more fun than the traditional method for computing it).\n\nIn addition to ${quer3(\"Easter\", \"Jesus\", \"Peeps\", \"Cadbury_Creme_Egg\")} you can explore seasonality in ${quer3(\"month names\", \"April\", \"May\", \"June\")}, peaks in ${quer3(\"love\", \"Love\", \"Eros\", \"Floristry\")}, ${quer3(\"sports\", \"World_Cup\", \"France\", \"Croatia\")}, or anything else — simply click on a chart name and type to explore your own patterns.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4272,"value":"playground = {\n await visibility();\n // note: this doesn't do much, since q1, q2, and q3 are still evaluated. \n // We'd like a way for them to await on this cell's visibility...\n return html`

${q1}${q2}${q3}

`\n}\n\n// Promise.all([\"Jesus\", \"Peeps\", \"Cadbury_Creme_Egg\"].map(csearch)).then(data => {\n// let nodes = data.map(d => chart(d))\n// return html`

${hover(d3.selectAll(nodes))}

`\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7360,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":651,"value":"md`## Peak Detection Library\nYou can use peak detection in your own applications by using the \\`detectPeaks\\` function provided by this notebook, which accepts a time series and returns the indices of any detected peaks.\n\n~~~js\nimport {detectPeaks} from '@yurivish/peak-detection'\n~~~\n\nCall \\`detectPeaks\\` with an array of numbers to get back an array of peak indices:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3030,"value":"detectPeaks([2, 0, 10, 2, 1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":682,"value":"md`You can pass an accessor function to transform each element of the array before peak detection occurs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"detectPeaks([{value: 2}, {value: 0}, {value: 10}, {value: 3}, {value: 1}], d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"md`Configuration options can fine-tune the behavior of the algorithm:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"detectPeaks([1, 3, 2, 0, 10, 3, 1, 4], { \n lookaround: 2, // the number of neighbors to compare to on each side\n sensitivity: 1, // sensitivity, in terms of standard deviations above the mean\n coalesce: 2 // coalesce together peaks within this distance of each other\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6886,"value":"md`## The Algorithm\nThe approach to peak-detection used in this piece is a modification of one presented in a [paper](https://www.researchgate.net/publication/228853276_Simple_Algorithms_for_Peak_Detection_in_Time-Series) by Girish Palshikar titled _Simple Algorithms for Peak Detection in Time-Series_.\n\n1. Compute a peak score for each data sample by comparing it to its shortest neighbors on each side (**lookaround**). The bigger the difference, the higher the score.\n\n2. Each data sample now has a score, which is used to filter the peaks. We apply a sensitivity threshold (**sensitivity**) to the scores to pick out the globally strongest peaks.\n\n3. To prevent peaks that span multiple samples from appearing multiple times in the final list, coalesce peaks that are close together (**coalesce**), grouping them and keeping the highest peak from each group.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4752,"value":"md`## Explore the Parameter Space\nThe sliders below control the peak detection in all of the charts on this page. They can help you get a feel for how the algorithm works and expose some of its more subtle aspects — there are nonlinear interactions due to peak coalescing.\n\nFor example, lowering the sensitivity may introduce a new candidate peak that lies between two existing peaks, causing all three to get coalesced and result in a net reduction in the number of peaks.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6208,"value":"{\n await visibility()\n return editable(queryPeakTest, query => { mutable queryPeakTest = query })\n .then(q => {\n hover(d3.select(q))\n return html`

${q}

`\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof lookaround = slider({ value: 5, min: 1, max: 20, step: 1, title: 'Lookaround', description: 'The number of neighbors to look at in each direction when computing peakiness scores. '})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"viewof sensitivity = slider({ value: 2, min: 0.1, max: 5, step: 0.1, title: 'Sensitivity Cutoff', description: 'The number of standard deviations above the mean to consider peakworthy'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof coalesce = slider({ value: 15, min: 0, max: 15, step: 1, title: 'Coalesce', description: 'The number of neighbors to look at in each direction when coalescing nearby peaks'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6891,"value":"md`Thanks for reading!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7120,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5177,"value":"md`### Appendix: Fonts\nThe fonts used for some visual elements of this piece are [Valkyrie](https://mbtype.com/fonts/valkyrie/) and [Concourse](https://mbtype.com/fonts/concourse/), commercial fonts available for purchase from [MB Type](https://mbtype.com/).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4827,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7030,"value":"md`### Appendix: Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"// Assigns a spikiness score to `value`, based on its left and right neighbors\npeakiness = (left, value, right) => {\n // assume zero outside the boundary\n return value - d3.max([d3.min(left) || 0, d3.min(right) || 0]) // this can be max or mean.\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"normalize = xs => {\n let mean = d3.mean(xs)\n let stdev = d3.deviation(xs)\n return xs.map(x => (x - mean) / stdev)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7085,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5561,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5700,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6073,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6555,"value":"// quick link creator to set three things.\nquer3 = (title, a, b, c) => { \n let el = html`${title}`\n el.onclick = () => { mutable queryOne = a; mutable queryTwo = b; mutable queryThree = c; }\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6024,"value":"mutable queryOne = \"Jesus\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6055,"value":"mutable queryTwo = \"Peeps\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6083,"value":"mutable queryThree = \"Cadbury_Creme_Egg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6825,"value":"mutable queryPeakTest = \"Fidget_spinner\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5996,"value":"plot = query => csearch(query).then(data => {\n let node = chart(data)\n return html`${hover(d3.select(node))}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6112,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6071,"value":"justAddHovers = hover(d3.selectAll([q1, q2, q3]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6057,"value":"q1 = editable(queryOne, query => { mutable queryOne = query })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6001,"value":"q2 = editable(queryTwo, query => { mutable queryTwo = query })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6080,"value":"q3 = editable(queryThree, query => { mutable queryThree = query })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5710,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5869,"value":"xscale = d3.scaleTime([start, end], [0, width-30]).clamp(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5590,"value":"short = d3.format(\".1s\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1073,"value":"gradient = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5554,"value":"csearch = (query) => (cache[query] ? Promise.resolve(cache[query]) : search(query, start, end)).then(data => {\n data = typeof data == \"string\" ? JSON.parse(data) : data\n data.forEach(d => d.date = new Date(d.date)) // undo serialization\n cache[query] = JSON.stringify(data)\n return data\n})\n// new Promise((resolve, reject) => {\n// let objs = JSON.parse(cache[query])\n// objs.forEach(obj => obj.date = new Date(obj.date)) // undo serialization\n// resolve(objs)\n// }) : search(query, start, end).then(d => {\n// // todo: don't cache the date\n// cache[query] = JSON.stringify(d)\n// // d.map(d => ({ article: d.article, timestamp: d.timestamp, views: d.views, date: d.date}\n// return d\n// })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3881,"value":"peakOffsets = (ps, x, y, data) => {\n // Simple approximate decollision: vertically offset overlapping peaks,\n // rolling over to zero offset after several consecutive offsets\n let offsets = new Array(ps.length).fill(0)\n let offsetDistance = 50, offsetAmount = 12\n ps.forEach((p, i) => {\n if (i == 0) { return }\n let ydiff = y(data[p]) - y(data[ps[i-1]])\n let xdiff = x(data[p]) - x(data[ps[i-1]])\n if (Math.abs(ydiff) < 10 && xdiff < offsetDistance) {\n offsets[i] = mod((offsets[i-1]||0) - offsetAmount - ydiff, -2*offsetAmount)\n }\n })\n return offsets \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3839,"value":"findmax = (a, f=identity) => {\n if (!a.length) throw new Error(\"Empty array has no maximum index.\")\n return a.reduce((I, x, i, arr) => f(x) > f(arr[I]) ? i : I, 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3856,"value":"findmin = (a, f=identity) => {\n if (!a.length) throw new Error(\"Empty array has no maximum index.\")\n return a.reduce((I, x, i, arr) => f(x) < f(arr[I]) ? i : I, 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3444,"value":"comma = d3.format(',')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3240,"value":"peakLabel = (d, month=\"long\") => d.date.toLocaleString(undefined, {\n \"month\": month,\n // \"weekday\": \"short\",\n \"day\": \"numeric\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3375,"value":"shortNum = d3.format(\".1s\") // todo: this rounds in a way that is inaccurate","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3203,"value":"arrow = `M2.73484 7.26517C2.88128 7.41161 3.11872 7.41161 3.26517 7.26517L5.65165 4.87868C5.7981 4.73223 5.7981 4.4948 5.65165 4.34835C5.5052 4.2019 5.26777 4.2019 5.12132 4.34835L3 6.46967L0.87868 4.34835C0.732233 4.2019 0.494796 4.2019 0.34835 4.34835C0.201903 4.4948 0.201903 4.73223 0.34835 4.87868L2.73484 7.26517ZM2.625 1.63918e-08L2.625 7L3.375 7L3.375 -1.63918e-08L2.625 1.63918e-08Z`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3057,"value":"autocomplete = text => d3.json(`https://en.wikipedia.org/w/api.php?search=${text}&action=opensearch&limit=5&namespace=0&profile=classic&redirects=resolve&origin=*&format=json`)\n .then(data => d3.zip(...data.slice(1))\n .map(([query, description, url]) => ({ query, description, url }))\n .filter(d => !d.description.endsWith(\"may refer to:\")))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6627,"value":"start = new Date(2018, 0, 1)\n// {\n// let date = new Date(end)\n// // Go back a year and a month to avoid Computus biting us in the ass.\n// // E.g. April 5, 2019 has no easters within a year back.\n// date.setFullYear(date.getFullYear() - 1)\n// date.setMonth(date.getMonth() - 1) // to ensure we have wikidata\n// return date\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"end = new Date(2019, 0, 0)\n// {\n// let date = new Date()\n// date.setMonth(date.getMonth() - 1)\n// date.setHours(0)\n// date.setMinutes(0)\n// date.setSeconds(0)\n// date.setMilliseconds(0)\n// return date\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1859,"value":"cache = ({}) // localStorage // ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5761,"value":"abs = Math.abs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"// Convert a JS date object to a string in the format expected by the Wikipedia pageview API\ndateToTimestamp = d => {\n let year = d.getFullYear()\n let month = (d.getMonth() + 1).toString().padStart(2, '0')\n let day = d.getDate().toString().padStart(2, '0')\n return `${year}${month}${day}00`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"// Parse a Wikipedia pageview API-style date format into a JS date object\nparseDateString = s => {\n let year = +s.substring(0, 4)\n let monthIndex = +s.substring(4, 6) - 1\n let day = +s.substring(6, 8)\n let hour = +s.substring(8, 10)\n return new Date(year, monthIndex, day, hour) \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3914,"value":"// note: only approximately correct; handles DST changes via rounding.\n// Returns the number of days difference between the first and second dates.\ndayDiff = (firstDate, secondDate) => Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(24*60*60*1000 /* hours*minutes*seconds*milliseconds */)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"count = (arr, f) => arr.reduce((a, b) => a + !!f(b), 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3045,"value":"identity = d => d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"max = Math.max","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2592,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import {slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3566,"value":"mod = (a, n) => ((a%n)+n)%n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7130,"value":"reddish = '#DB0000'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3824,"value":"pink = '#FF4387'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4260,"value":"gray = '#999'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"