31:T1a31,chart = { const chartOuterWidth = 1200 const chartRowOuterHeight = 50 const outerCircleRadius = 8 const circleStroke = 3 const margins = { right: 100, left: 150, top: 0, bottom: 0, } const popoverWidth = 300 const baseFontSize = width > 600 ? 14 : 28 const chartWidth = chartOuterWidth - margins.right - margins.left const chartRowHeight = chartRowOuterHeight - margins.top - margins.bottom const wrapper = htl.html`

` const popover = htl.html`

` const popoverTemplate = d => htl.html`

${d.title}

${d.categories.join(', ')}

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

` const charts = d3.range(2017, new Date().getFullYear() + 1).map(yr => { // Filter to data only for the year we're interested in const filteredData = data.filter(d => d.date.getUTCFullYear() === yr) // Create an x scale that covers that entire year const x = d3.scaleUtc() .domain([new Date(Date.UTC(yr, 0, 1)), new Date(Date.UTC(yr + 1, 0, 1))]) .range([0, chartWidth]) // Create a beeswarm using that x scale const beeswarm = beeswarmForce() .x(d => x(d.date)) .y(chartRowHeight / 2) .r(d => outerCircleRadius) // Apply the beeswarm to the data const beeswarmedData = beeswarm(filteredData) // Calculate actual dimensions of the chart from the beeswarmed data const actual = { height: d3.max(beeswarmedData, d => d.y) - d3.min(beeswarmedData, d => d.y) + 2 * outerCircleRadius, y0: d3.min(beeswarmedData, d => d.y) - outerCircleRadius, } const chart = d3.select(htl.html``) // Add month tick marks chart.append('g') .attr('transform', `translate(${margins.left} ${margins.top})`) .selectAll('line') .data(d3.timeMonth.range( new Date(Date.UTC(yr, 0, 1)), new Date(Date.UTC(yr + 1, 1, 1)) )) .join('line') .attr('x1', x) .attr('x2', x) .attr('y1', actual.y0) .attr('y2', actual.height) .attr('stroke', '#EEE') // Add central axis chart.append('line') .attr('x1', 0) .attr('x2', chartOuterWidth) .attr('y1', actual.y0 + actual.height / 2) .attr('y2', actual.y0 + actual.height / 2) .attr('stroke', '#000') // Add jan and dec marks chart.append('text') .attr('x', 75) .attr('y', actual.y0 + actual.height / 2) .attr('text-anchor', 'start') .attr('dy', width > 600 ? 15 : 25) .attr('font-size', baseFontSize) .attr('font-family', FONT_STACK) .attr('fill', '#777') .text('Jan') chart.append('text') .attr('x', width > 600 ? chartOuterWidth - 50 : chartOuterWidth - 25) .attr('y', actual.y0 + actual.height / 2) .attr('text-anchor', 'end') .attr('dy', width > 600 ? 15 : 25) .attr('font-size', baseFontSize) .attr('font-family', FONT_STACK) .attr('fill', '#777') .text('Dec') // Add year label chart.append('text') .attr('x', 5) .attr('y', actual.y0 + actual.height / 2) .attr('text-anchor', 'start') .attr('dy', width > 600 ? -5 : -10) .attr('font-size', baseFontSize * 1.25) .attr('font-family', FONT_STACK) .text(yr) const g = chart .append('g') .attr('transform', `translate(${margins.left} ${margins.top})`) g.selectAll('a') .data(beeswarmedData) .join('a') .attr('href', d => d.data.url) .insert('circle') .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('fill', d => categoryColor(d.data.categories[0])) .attr('r', outerCircleRadius - circleStroke) .attr('stroke', '#000') .attr('stroke-width', circleStroke) .on( 'mouseover', (e, d) => { const [x, y] = d3.pointer(e, wrapper) // Turn the border of the circle colorful d3.select(e.currentTarget) .transition() .duration(250) .attr('stroke', categoryColor(d.data.categories[0])) // Add data to the popover d3.select(popover) .text('') .insert(() => popoverTemplate(d.data)) // Show the popover d3.select(popover) .style('top', y + 'px') .style( 'left', (x + popoverWidth > chart.node().getBoundingClientRect().width) ? x - 300 + 'px' : x + 'px' ) .transition() .delay(250) .duration(250) .style('opacity', 1) } ) .on( 'mousemove', (e, d) => { const [x, y] = d3.pointer(e, wrapper) d3.select(popover) .style('top', y + 'px') .style( 'left', (x + popoverWidth > chart.node().getBoundingClientRect().width) ? x - 300 + 'px' : x + 'px' ) } ) .on( 'mouseout', (e, d) => { // Turn the border of the circle black d3.select(e.currentTarget) .transition() .duration(250) .attr('stroke', '#000') // Hide the popover d3.select(popover) .transition() .delay(500) .duration(250) .style('opacity', 0) } ) return chart.node() }) charts.forEach(c => wrapper.append(c)) wrapper.append(htl.html`

600 ? 'right' : 'left', fontSize: '14px', color: '#555', marginTop: '10px', }}> Timeline placement is inexact. ${!touchDevice ? 'Mouse over an incident to see exact date and details.' : null}
Harris Lapiroff/Freedom of the Press Foundation

`) wrapper.append(popover) return wrapper }32:[] 2f:{"title":"Five Years of Tracking Press Freedom","cells":[{"id":0,"value":"# Five Years of Tracking Press Freedom","pinned":false,"hidden":false,"mode":"md"},{"id":484,"value":"Today marks five years since we launched the [U.S. Press Freedom Tracker](https://pressfreedomtracker.us/), a project of [Freedom of the Press Foundation](https://freedom.press/) and the [Committee to Protect Journalists](https://cpj.org/).\n\nIn our six years of documentation — the canonical database for press freedom violations in the United States dates to January 2017 — the Tracker team has documented more than 1600 incidents across nearly a dozen categories, affecting more than 1100 journalists and news organizations. We’ve published more than 100 in-depth analyses of press freedom issues.\n\n[_Read full blog post »_](https://pressfreedomtracker.us/blog/celebrating-5-years-since-launch-of-the-us-press-freedom-tracker/)","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"***\n\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"data = (await d3.csv('https://pressfreedomtracker.us/api/edge/incidents/?format=csv&limit=99999&fields=date,title,url,categories', d3.autoType))\n .filter(d => d.date > new Date(Date.UTC(2016, 11, 31)))\n .map(d => ({\n ...d,\n categories: d.categories.split(', ')\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"categoryColor = d3.scaleOrdinal(new Set(data.map(d => d.categories).flat()), [\n\t'#E07A5F',\n\t'#669599',\n\t'#B0829D',\n\t'#63729A',\n\t'#F4C280',\n\t'#7EBBC8',\n\t'#F9B29F',\n\t'#98C9CD',\n\t'#E2B6D0',\n\t'#B2B8E5',\n\t'#FBE0BC',\n\t'#BAECF7',\n\t'#975544',\n\t'#435556',\n\t'#6B5261',\n\t'#484B6B',\n\t'#957932',\n\t'#54767D',\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"FONT_STACK = '\"Helvetica Neue\",\"Segoe UI\",\"Roboto\",\"Helvetica\",\"Arial\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\"'","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"touchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":509,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"import { beeswarmForce } from \"@harrystevens/force-directed-beeswarm\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}