31:T4dc,// This cell is quietly responsible for loading the data from the API and also displaying a loading image. // Under normal circumstances these contortions aren't necessary, however, since the API can take quite a // while to respond and the chart cell draws a blank while waiting, this might be confusing for an // uninitiated visitor--particularly when we embed the chart on another website. Hence: some hacks to display // a loading image. viewof rawData = { const spinner = html` ` fetch(DATA_URL).then(async response => { spinner.value = await response.text() spinner.dispatchEvent(new CustomEvent("input")) spinner.innerHTML = '' }) return spinner }32:T70d,chart = { // Layout const popoverPadding = 5 const menu = highlighter() // Chart const incidentsByDateWithinRange = Array.from(incidentsByDate).filter( ([key, incidents]) => dfns.isWithinInterval( incidents[0].date, { start: timeScale.domain()[0], end: timeScale.domain().slice(-1)[0], } ) ) const chart = html` ` d3.select(chart) .select('.data') .selectAll() .data(incidentsByDateWithinRange) .join('g') .call(incidentColumn) // Interactivity: Clicking takes you to incident const incidentCircles = d3.select(chart).selectAll('.incident-circle') incidentCircles.on('click', function() { window.open(this.__data__.slug); }) // Interactivity: Tooltip Preview if (!narrow) { tippy( chart.querySelectorAll('.incident-circle'), { content: (el) => popOverInner(el.__data__), allowHTML: true, placement: 'left', theme: 'light', animation: 'shift-away', onShow: function(instance) { var img = instance.popper.querySelector('img'); if (!img) return; img.src = img.dataset.src; }, } ) } // Interactivity: Dropdown Menu menu.addEventListener('input', (e) => { incidentCircles.attr( 'class', d => `incident-circle ${shouldHighlight(d, e.target.value) && 'incident-circle--highlight'}` ) }) return html`${[menu, legend(), chart]}` }33:T5fd,highlighter = () => { const cities = Array.from(new Set(incidents.map(d => `${d.city}, ${d.state}`))) const options = [ { label: 'All', value: 'all' }, { label: 'Assailant', options: Object.entries(ASSAILANTS).map(([value, label]) => { const incidentCount = incidents.filter(inc => inc.assailant === value).length if (incidentCount === 0) return // Don't include assailants which we have no incidents for yet return { value, label: `${label} (${incidentCount})` } }).filter(d => d) }, { label: 'City', options: cities.sort().map(c => { const incidentCount = incidents.filter(inc => `${inc.city}, ${inc.state}` === c).length return { label: `${c} (${incidentCount})`, value: c } }) } ] const defaultValue = 'all' const option = ({ label, value }) => html`` const optGroup = ({ label, options }) => html`${options.map(option)}` const select = html`` const output = html`

Highlight

${select}

` output.value = select.value select.addEventListener('change', (e) => { output.value = select.value output.dispatchEvent(new CustomEvent("input")) }) return output }34:T573,legend = () => { const legendRadius =5 // Create a set of all categories that are in use let usedCategories = new Set() incidents.forEach(inc => inc.categories.forEach(cat => usedCategories.add(cat))) return html`

${Array.from(usedCategories).sort().map(cat => html.fragment`

${cat} ${incidents.filter(inc => inc.categories.includes(cat)).length}

`)}

Multiple Categories

` }35:T5b4,styles = html``36:T55a,extra_styles = html``37:[] 2f:{"title":"\n \n George Floyd Protests:\n \n Press Freedom Violations Per Day\n","cells":[{"id":0,"value":"html`\n

\n
\n George Floyd Protests:\n
\n Press Freedom Violations Per Day\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1288,"value":"md`While covering protests across the nation—spurred by the death of George Floyd, a Black man in police custody in Minneapolis on May 25, 2020—an unprecedented number of journalists have been assaulted, arrested or otherwise prevented from documenting history.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"md`Data comes from the [U.S. Press Freedom Tracker](https://pressfreedomtracker.us/george-floyd-protests/). These events are actively being reported and the data here is incomplete. While there are currently **${incidents.length} incidents** at protests in the database. This chart will update if new incidents are verified and reported.\n\nYou can view more details about all incidents on the [tracker](https://pressfreedomtracker.us/george-floyd-protests/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"md`***\n\n## Implementation Details: How the Chart is Made`","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"md`### Fetch and process data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1140,"value":"md`There is a cell at the top of the document that is responsible both for fetching the data into \\`rawData\\` and displaying a loader while data is fetching. Cell will be blank once data fetch is complete (useful for embedding). Once we have the data, the following cells are responsible for processing it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md`This parser will convert string dates from the API to javascript Date objects:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"md`Fetch and process incidents to split array fields and format states:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"processIncident = ({ categories, state, date, ...rest }) => ({\n categories: categories.split(', '),\n state,\n date: parseDate(date),\n ...rest\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"incidents = d3.csvParse(rawData, processIncident)","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`Group incidents by date:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"incidentsByDate = d3.group(incidents, d => d3.timeFormat('%Y-%-m-%-d')(d.date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`### Layout Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":972,"value":"md`Configure some layout variables for the chart:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1056,"value":"breakpoint = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1070,"value":"narrow = width < breakpoint","pinned":true,"hidden":false,"mode":"ojs"},{"id":1433,"value":"columnMax = narrow ? 20 : 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"margin = narrow ? {left: 40, top: 20, bottom: 20, right: 0 } : { left: 20, right: 20, top: 10, bottom: 20 }","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"chartWidth = narrow ? 280 : 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"chartHeight = narrow ? incidentsByDate.length * 75 : 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":975,"value":"md`Create scale functions mapping data (dates and incidents) to pixel locations:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"timeScale = d3.scaleBand()\n .domain(\n d3.timeDay.range(\n d3.min(Array.from(incidentsByDate), ([key, entries]) => parseDate(key)),\n END_DATE ? END_DATE : new Date(+d3.max(incidentsByDate, d => parseDate(d.key)) + 24 * 60 * 60 * 1000)\n )\n )\n .range([\n narrow ? margin.top : margin.left,\n narrow ? chartHeight - margin.bottom : chartWidth - margin.right\n ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"timeScaleCentroid = i => timeScale(i) + timeScale.bandwidth() / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"countScale = d3.scaleBand()\n .domain(d3.range(0, columnMax + 1, 1))\n .range([\n narrow ? margin.left : chartHeight - margin.bottom,\n narrow ? chartWidth - margin.right : margin.top\n ])\n .padding(0.15)","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"countScaleCentroid = i => countScale(i) - countScale.bandwidth() / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1217,"value":"circleRadius = 3","pinned":true,"hidden":false,"mode":"ojs"},{"id":978,"value":"md`A utility to determine whether an incident should be highlighted or not, based on the currently selected highlight value:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"shouldHighlight = (d, h) => {\n if (h === 'all') {\n return true\n } else if (Object.keys(ASSAILANTS).includes(h)) {\n // It's an assailant filter\n if (d.assailant === h) return true\n // Special handling for the law enforcement filter to consider \"arrests\" law enforcement assailants\n if (d.assailant === 'law_enforcement' && d.categories.includes('Arrest / Criminal Charge')) return true\n } else {\n // It's a city filter\n if (`${d.city}, ${d.state}` === h) return true\n }\n return false\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":960,"value":"md`## Chart Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"md`The following component renders a dropdown menu of possible things to highlight:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1306,"value":"md`The following renders a legend:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1309,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":964,"value":"md`The following renders the content inside of an incident preview popover:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"popOverInner = (d) => `\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":982,"value":"md`A gray rectangle that highlights a particular date (used in chart to highlight weekends):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"dateHighlighter = (date) => narrow ? svg.fragment`` : svg.fragment``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":988,"value":"md`Date labels for the time-axis:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"dateLabel = t => (\n svg.fragment`\n ${!narrow ? svg.fragment`${d3.timeFormat('%a')(t)}` : ''}\n ${d3.timeFormat('%-m/%-e')(t)}\n `\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":994,"value":"md`A grid line for marking off incident count intervals:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"gridLine = i => narrow ? svg.fragment`\n \n`: svg.fragment`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1531,"value":"md`A grid line for marking off dates:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1529,"value":"dateGridLine = t => narrow ? svg.fragment`\n \n` : svg.fragment`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1003,"value":"md`Put the three above components together into one:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1006,"value":"gridAndAxes = () => {\n const allTicks = timeScale.domain()\n // Only display every other label on wide screens\n const labelTicks = allTicks.filter((_, i) => narrow ? true : !(i % 2))\n \n return svg.fragment`\n \n \n ${timeScale.domain().filter((date) => [0, 6].includes(date.getDay())).map(dateHighlighter)}\n \n ${allTicks.filter((_, i) => i !== 0).map(dateGridLine)}\n \n ${countScale.domain().filter(i => i % 5 === 0).map(gridLine)}\n \n ${labelTicks.map(dateLabel)}\n \n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1619,"value":"md`A label for the tops of columns:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"dateTotalLabel = d => narrow ? svg.fragment`\n \n ${d.values.length}\n \n` : svg.fragment`\n \n ${d.values.length}\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1210,"value":"md`And a component for rendering an incident circle. This one is written in D3 instead of an SVG literal because we use D3 to manipulate its data as part of the interactivity:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"incidentColumn = g => g.selectAll('g')\n .data(([key, incidents]) => incidents.map(\n (v, i, arr) => Object.assign({\n subColNumber: Math.floor(i / columnMax),\n totalSubCols: Math.ceil(arr.length / columnMax)\n }, v)\n ))\n .join('g')\n .call(incidentCircle)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1214,"value":"incidentCircle = (g, d) => {\n g.attr(\n 'class', 'incident-circle incident-circle--highlight'\n )\n \n g.append((d, i) => {\n const subColWidth = circleRadius + 1\n const startOffset = - subColWidth * d.totalSubCols\n const colOffset = startOffset + subColWidth + (2 * subColWidth * d.subColNumber)\n const indexInCol = i % columnMax\n \n const timePos = timeScaleCentroid(d.date) + colOffset\n const countPos = countScaleCentroid(indexInCol) + circleRadius\n const joinedCoords = narrow ? `${countPos} ${timePos}` : `${timePos} ${countPos}`\n \n return svg.fragment`\n \n \n ${categoryArcs(d.categories)}\n \n \n `\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1320,"value":"categoryArcs = (categories, radius=circleRadius) => svg.fragment`\n ${categories.map((cat, i, all) => svg.fragment`\n \n `)}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`***\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md `### To Do\n\n- Show popover instead of opening a new tab on tap on mobile\n- Wrap incidents row-wise instead of column-wise\n- Colorblind accessibility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"md`### Styles and Configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"md`### Constants and Utilities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"DATA_URL = 'https://pressfreedomtracker.us/api/edge/incidents/?tags=Black+Lives+Matter&date_lower=2020-01-01&date_upper=2020-12-31&fields=title,slug,teaser_image,categories,date,assailant,city,state&limit=9999&format=csv'","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"CATEGORY_COLORS = ({\n 'Arrest/Criminal Charge': '#DD830D',\n 'Border Stop': '#1297BA',\n 'Chilling Statement': '#334FA0',\n 'Denial of Access': '#FFCB1E',\n 'Equipment Search or Seizure': '#5B9932',\n 'Equipment Damage': '#9ED23D',\n 'Leak Case': '#3AAA9E',\n 'Assault': '#B22A2A',\n 'Prior Restraint': '#B93E9A',\n 'Subpoena/Legal Order': '#803E79',\n 'Other Incident': '#2d2e2e',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1683,"value":"ASSAILANTS = ({\n unknown: 'Unknown',\n 'law enforcement': 'Law Enforcement',\n 'private security': 'Private Security',\n politician: 'Politician',\n 'public figure': 'Public Figure',\n 'private individual': 'Private Individual',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1698,"value":"END_DATE = new Date(2020, 5, 26)","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"slugify = require('slugify')","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"tippy = require('tippy.js@6.2.3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":770,"value":"R = require('https://unpkg.com/ramda@0.27/dist/ramda.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"dfns = require('https://bundle.run/date-fns@2.14.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"import { select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}