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", timeZone: 'UTC' } let startLabel = data[0].date.toLocaleString('en-US', labelFormat) let endLabel = data[data.length - 1].date.toLocaleString('en-US', 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 }