31:T9fe,chart = { const chart = d3.select(html`

` chart.selectAll('rect') .data(dates) .join('rect') .attr('fill', d => colorScale(d.incidents.length)) .attr('x', d => xScale(daysSinceStart(d.date) % COLUMNS)) .attr('y', d => yScale(daysSinceStart(d.date))) .attr('width', xScale.bandwidth() - GUTTER) .attr('height', xScale.bandwidth() - GUTTER) .on('mouseover', function () { d3.select(this).attr('stroke', '#000') }) .on('mouseout', function () { d3.select(this).attr('stroke', 'transparent') }) .on('click', function (e, d) { updateDetails(d) }) const updateDetails = ({date, incidents}) => { details.innerHTML = `

${d3.timeFormat('%B %-d, %Y')(date)}

` + incidents.map(d => `

${d.title}

${d.categories}

`).join('') + (incidents.length === 0 ? 'No incidents on this date.' : '') } return html`

${chart.node()}

${annotations.map(([date, content]) => html.fragment`

${d3.timeFormat('%B %-d, %Y')(date)} ${content}

`)}

${details}

` }32:[] 2f:{"title":"1,500 Days (almost) of Press Freedom Violations","cells":[{"id":0,"value":"md`# 1,500 Days _(almost)_ of Press Freedom Violations\n\nThe [U.S. Press Freedom Tracker](https://pressfreedomtracker.us/) has been recording press freedom incidents in the U.S.—including arrests, physical assaults, equipment seizure and damage, and more—since January 1, 2017.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = d3.csv('https://pressfreedomtracker.us/all-incidents/export/?fields=title,slug,date,categories', ({date, ...d}) => ({\n date: d3.timeParse('%Y-%m-%d')(date),\n ...d\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"dates = d3.timeDay.range(START_DATE, END_DATE).map((date, i) => ({\n daysFromStart: i,\n date,\n incidents: data.filter(d => +d3.timeDay.floor(d.date) === +d3.timeDay.floor(date))\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"annotations = [\n [new Date(2017, 0, 20), 'Inauguration day.'],\n [new Date(2017, 8, 15), 'A cop is found not guilty of murdering a black man, Anthony Lamar, whom he shot and killed, sparking a month of protests in St. Louis MO.'],\n [new Date(2020, 2, 17), 'Stay-at-home restrictions begin in a few states.'],\n [new Date(2020, 4, 25), 'Minneapolis police kill George Floyd, a black man in their custody, sparking a series of nationwide protests.'],\n [new Date(2020, 10, 4), 'Election day.'],\n [new Date(2021, 0, 6), 'Rioters storm the U.S. Capitol.'],\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"START_DATE = new Date(Date.UTC(2017, 0, 20))","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"END_DATE = new Date(Date.UTC(2021, 0, 21))","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"CHART_WIDTH = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"CHART_HEIGHT = Math.ceil(dates.length / COLUMNS) * xScale.bandwidth() - 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"COLUMNS = 28","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"GUTTER = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"xScale = d3.scaleBand().domain(d3.range(0, COLUMNS)).range([0, CHART_WIDTH + GUTTER])","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"yScale = v => Math.floor(v / xScale.domain().length) * xScale.bandwidth()","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"colorScale = d3.scaleLinear().domain([0, 10, 20]).range(['#EEE', '#38A', '#000'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"daysSinceStart = date => d3.timeDay.count(START_DATE, date) - 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"md`***\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { svg, html } from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}