31:T920,text = html`

In 1963, Martin Luther King declared that “The whirlwinds of revolt will continue to shake the foundations of our nation until the bright day of justice emerges.” Today, his words reflect a profound reality; achieving radical societal change is never easy. Half a century ago and until the digital revolution, legislative change has often required ordinary people to mobilise physically in order to challenge the status quo through sustained civic protest. Historically, this type of civic engagement has proven to be a successful tool for pressuring governments into implementing political reforms. Most recently, the #JusticeForGeorgeFloyd movement has followed these steps, with more than 20 million Americans taking to the streets around the issue of police brutality. Their demands were reflected into legislation at different levels of government: according to the National Conference for State Legislatures, there have been 2,608 legislative changes in policing at the state level from May 2020 to April 2021. But how much of this was thanks to physical protest?

Unlike in 1963, today civic protest is not limited to the physical world. “Hashtag activism”, a new form of civic protest where people use social media to mobilise and voice protest into the web, has proven to have a real impact on legislators, possibly even greater than that of physical protests. The analysis of close to one million geolocated tweets from the #JusticeForGeorgeFloyd movement demonstrates that physical and digital protests are very closely related. On days where people protest more on social media, people also protest more in the street, and vice versa. In the case of #JusticeForGeorgeFloyd, people used Twitter to express outrage about events of police brutality and to organize physical protests. During protests, more acts of police brutality were documented and shared on Twitter, which led to yet more protests and to more people showing up to protests, and so on. This trend illustrates an intuitive cycle, where digital protest and physical protest interact together and amplify one-another.

`32:T19cf,chart1 = { const grid = d3.select(DOM.svg(width*2, height+100)) // scatterplot const svg = grid.append("g").attr("transform", `translate(0,70)`) // protests over time const svg2 = grid.append("g").attr("transform", `translate(${width},${height/2+70})`) // append invisible rectangle for tooltip interaction svg2.append("rect").attr("width", width).attr("height", height/2).style("opacity", 0) // tweets over time const svg3 = grid.append("g").attr("transform", `translate(${width},70)`) // append invisible rectangle for tooltip interaction svg3.append("rect").attr("width", width).attr("height", height/2).style("opacity", 0) const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .attr("text-anchor", "left") .text("The digital and physical protest cycle") g.append("line") .attr("x1", -margin.left) .attr("x2", -20) .attr("y1", -75) .attr("y2", -75) .attr("stroke", "black") g.append("text") .attr("class", "FigSubtitle") .attr("x", -margin.left) .attr("y", -60) .attr("text-anchor", "left") .text("Trends of digital protests and physical protests during the #JusticeForGeorgeFloyd movement") // scatterplot svg.append("g") .call(xAxis) .attr("class", "axis"); svg.append("g") .call(yAxis) .attr("class", "axis"); // regression line svg.append("path") .attr("class", "regression") .attr("stroke", d3.schemePaired[0]) .style("stroke-dasharray", ("5, 3")) .style('stroke-width', "2") .datum(powerRegression(data)) .attr("d", line) .attr("fill", "none"); svg.append("g") .attr("stroke", d3.schemePaired[1]) .attr("stroke-width", 1.5) // .attr("fill", d3.schemePaired[1]) .attr("fill", "none") .selectAll("circle") .data(data) .join("circle") .attr("cx", d => x(+d.tweet_count)) .attr("cy", d => y(+d.protest_count)) .attr("r", 3) .attr("class", "scatterCirc"); svg.append("g") .attr("stroke", "grey") .attr("stroke-width", 1.5) .attr("fill", "none") .append("circle") .attr("cx", width*0.77) .attr("cy", height*0.8) .attr("r", 3); svg.append("g") .attr("fill", "grey") .attr("class", "annotation") .append("text") .attr("text-anchor", "start") .attr("font-weight", "700") .attr("x", width*0.77+7) .attr("y", height*0.8+4) .text("= 1 day"); // protests over time svg2.append("g") .call(xAxis_date) .attr("class", "axis"); svg2.append("g") .call(yAxis_p_ts) .attr("class", "axis"); svg2.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-opacity", 0.6) .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line_p_ts); // tweets over time svg3.append("g") .call(xAxis_date) .attr("class", "axis"); svg3.append("g") .call(yAxis_t_ts) .attr("class", "axis"); svg3.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line_t_ts); // create tooltip and interaction with scatterplot const circleHL = svg.append("g"); const tooltip2 = svg2.append("g") const tooltip3 = svg3.append("g"); svg2.on("touchmove mousemove", function(event) { // console.log(d3.pointer(event, this)[0]) // console.log(d) circleHL.selectAll("circle").remove() d3.selectAll(".scatterCirc").attr("opacity", 1) const {date, tweet_count, protest_count} = bisect(d3.pointer(event, this)[0]); tooltip2 .attr("transform", `translate(${x_date(date)},${y_p_ts(protest_count)})`) .attr("class", "tooltip") .call(callout, `${formatDate(date)} ${protest_count} physical protests`); tooltip3 .attr("transform", `translate(${x_date(date)},${y_t_ts(tweet_count)})`) .attr("class", "tooltip") .call(callout, `${formatDate(date)} ${tweet_count} digital protests`) d3.selectAll(".scatterCirc").attr("opacity", 0.5) circleHL .append("circle") .attr("r", 3) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2) .attr("transform", `translate(${x(tweet_count)},${y(protest_count)})`) }); svg3.on("touchmove mousemove", function(event) { circleHL.selectAll("circle").remove() d3.selectAll(".scatterCirc").attr("opacity", 1) const {date, tweet_count, protest_count} = bisect(d3.pointer(event, this)[0]); tooltip2 .attr("transform", `translate(${x_date(date)},${y_p_ts(protest_count)})`) .attr("class", "tooltip") .call(callout, `${formatDate(date)} ${protest_count} physical protests`); tooltip3 .attr("transform", `translate(${x_date(date)},${y_t_ts(tweet_count)})`) .attr("class", "tooltip") .call(callout, `${formatDate(date)} ${tweet_count} digital protests`); d3.selectAll(".scatterCirc").attr("opacity", 0.5) circleHL .append("circle") .attr("r", 3) .attr("fill", "none") .attr("stroke", "red") .attr("stroke-width", 2) // .attr("opacity", 0.5) .attr("transform", `translate(${x(tweet_count)},${y(protest_count)})`) }); svg2.on("touchend mouseleave", function() { d3.selectAll(".scatterCirc") .attr("opacity", 1) .attr("stroke", d3.schemePaired[1]) .attr("stroke-width", 1.5) // remove red highlight circleHL.selectAll("circle").remove() tooltip3.call(callout, null) tooltip2.call(callout, null) }) svg3.on("touchend mouseleave", function() { d3.selectAll(".scatterCirc") .attr("opacity", 1) .attr("stroke", d3.schemePaired[1]) .attr("stroke-width", 1.5) // remove red highlight circleHL.selectAll("circle").remove() tooltip3.call(callout, null) tooltip2.call(callout, null) }) return grid.node(); }33:T14e1,chart3 = { const svg = d3.create("svg") .attr("viewBox", [0, -75, 975, 730]); const g = svg.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7-75})`); // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .attr("text-anchor", "left") .text("Spatial Mismatch") g.append("line") .attr("x1", -margin.left) .attr("x2", -20) .attr("y1", -75) .attr("y2", -75) .attr("stroke", "black") g.append("text") .attr("class", "FigSubtitle") .attr("x", -margin.left) .attr("y", -60) .attr("text-anchor", "left") .text("Spatial distribution of digital and physical protests during the #JusticeForGeorgeFloyd movement") // Background map svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#e5e5e5") .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // State names as centroids const centroids = svg.selectAll(".states") .data(stateCentroids) .join("text") .attr("class", "stateText") .attr("text-anchor", "middle") .style("fill", "rgb(77, 77, 77)") .attr("opacity", 0.8) .text(d => state_abbreviations.get(d[0].name)) .attr("stroke", "none") .attr("x", function (d){ return d[0].centroid[0]; }) .attr("y", function (d){ return d[0].centroid[1]; }); const legend_label_t = metric_t==="tweet_count_100k"?"Tweets per 100,000":"Total number of tweets" const legend_label_p = metric_p==="protest_count_100k"?"Physical protests per 100,000":"Total number of physical protests" // tweets legend const legend_t = svg.append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(length.ticks(4).slice(1).reverse()) .join("g") .attr("transform", (d, i) => `translate(${975 - (i + 1) * 18},575)`); legend_t.append("path") .attr("fill", "steelblue") .attr("fill-opacity", 0.3) .attr("stroke", "steelblue") .attr("d", d => spike(length(d))); legend_t.append("text") .attr("dy", "1.3em") .text(length.tickFormat(4, "s")); svg.append("g") .attr("transform", (d, i) => `translate(${985 - (i + 1) * 18},590)`) .append("text") .attr("fill", "#777") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", 700) .attr("dy", "1.5em") .text(legend_label_t); // protests legend const legend_p = svg.append("g") .attr("fill", "#777") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(length_p.ticks(4).slice(1).reverse()) .join("g") .attr("transform", (d, i) => `translate(${975 - (i + 1) * 18},430)`); legend_p.append("path") .attr("fill", "red") .attr("fill-opacity", 0.3) .attr("stroke", "red") .attr("d", d => spike(length_p(d))); legend_p.append("text") .attr("dy", "1.3em") .text(length_p.tickFormat(4, "s")); svg.append("g") .attr("transform", (d, i) => `translate(${985 - (i + 1) * 18},445)`) .append("text") .attr("fill", "#777") .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("font-weight", 700) .attr("dy", "1.5em") .text(legend_label_p); // tweet spikes svg.append("g") .attr("fill", "steelblue") .attr("fill-opacity", 0.3) .attr("stroke", "steelblue") .attr('class', 'spikesteelblue') .selectAll("path") .data(counties_data .filter(d => (d.title !== "Wilkinson County, GA")&&(d.title !== "Concho County, TX")&&(d[metric_t]>100)) ) .join("path") .attr("transform", d => `translate(${d.position})`) .attr("d", d => spike(length(+d[metric_t]))) .attr('id', d=>'spikesteelblue'+d.id) .raise() .on("mouseover", (event, d) => showTooltip(event, d, metric_t, metric_p, legend_label_t, legend_label_p, "steelblue")) .on("mouseleave", (event, d) => hideTooltip(event, d, "steelblue")) // protest spikes svg.append("g") .attr("fill", "red") .attr("fill-opacity", 0.2) .attr("stroke", "red") .attr("stroke-opacity", 0.6) .attr('class', 'spikered') .selectAll("path") .data(counties_data .filter(d => d[metric_p]>0) .sort((a, b) => d3.ascending(a.position[1], b.position[1]) || d3.ascending(a.position[0], b.position[0])) ) .join("path") .attr("transform", d => `translate(${d.position})`) .attr("d", d => spike(length_p(+d[metric_p]))) .attr('id', d=>'spikered'+d.id) .on("mouseover", (event, d) => showTooltip(event, d, metric_t, metric_p, legend_label_t, legend_label_p, "red")) .on("mouseleave", (event, d) => hideTooltip(event, d, "red")) return svg.node(); }34:Td53,chart2 = { const grid = d3.select(DOM.svg(width*2, height+70)); // tweets const svg = grid.append("g").attr("transform", `translate(0,70)`) // protests const svg2 = grid.append("g").attr("transform", `translate(${width},70)`) const g = grid.append("g") .attr('transform', `translate(${margin.left*1.1}, ${margin.top*5.7})`); // Title g.append("text") .attr("class", "FigTitle") .attr("x", -margin.left) .attr("y", -100) .attr("text-anchor", "left") .text("DigitaLegislation") g.append("line") .attr("x1", -margin.left) .attr("x2", -20) .attr("y1", -75) .attr("y2", -75) .attr("stroke", "black") g.append("text") .attr("class", "FigSubtitle") .attr("x", -margin.left) .attr("y", -60) .attr("text-anchor", "left") .text("Protests and legislative responses to policing for each of the U.S. 50 states") // tweets svg.append("g") .call(xAxis_t) .attr("class", "axis"); svg.append("g") .call(yAxis_l) .attr("class", "axis"); // regression line svg.append("path") .attr("class", "regression") .attr("stroke", d3.schemePaired[0]) .style("stroke-dasharray", ("5, 3")) .style('stroke-width', "2") .datum(powerRegression_t(data_state)) .attr("d", line_t) .attr("fill", "none"); const circles = svg.append("g") .selectAll("circle") .data(data_state) const dot = circles.join("circle") .attr("stroke", d3.schemePaired[1]) // .attr("stroke", "white") .attr("stroke-width", 1.5) // .attr("fill", d3.schemePaired[1]) .attr("fill", "none") .attr("cx", d => x_t(+d.tweets_100k)) .attr("cy", d => y_l(+d.count)) .attr("r", 3); const text = circles.join("text") .attr("class", "annotation") .attr("x", d => x_t(+d.tweets_100k)+6) .attr("y", d => y_l(+d.count)) .text(d=>d.state) .text(d=>(+d.count>120)| (+d.count<5)| (+d.tweets_100k>300)?d.state:""); // protests svg2.append("g") .call(xAxis_p) .attr("class", "axis"); svg2.append("g") .call(yAxis_l) .attr("class", "axis"); // regression line svg2.append("path") .attr("class", "regression") .attr("stroke", d3.schemePaired[0]) .style("stroke-dasharray", ("5, 3")) .style('stroke-width', "2") .datum(powerRegression_p(data_state)) .attr("d", line_p) .attr("fill", "none"); const circles2 = svg2.append("g") .selectAll("circle") .data(data_state) const dot2 = circles2.join("circle") .attr("stroke", d3.schemePaired[1]) // .attr("stroke", "white") .attr("stroke-width", 1.5) // .attr("fill", d3.schemePaired[1]) .attr("fill", "none") .attr("cx", d => x_p(+d.protests_100k)) .attr("cy", d => y_l(+d.count)) .attr("r", 3); const text2 = circles2.join("text") .attr("class", "annotation") .attr("x", d => x_p(+d.protests_100k)+6) .attr("y", d => y_l(+d.count)) .text(d=>d.state) .text(d=>(+d.count>120)| (+d.count<5)| (+d.protests_100k>5)?d.state:""); // .text(d=>(+d.count>120)| // (+d.count<5)| // (+d.tweets_100k>300)?d.state:""); return grid.node(); }35:T4ba,text3 = html`

So, do our results imply that physical protests have become obsolete in the digital era? Probably not. What these results do suggest, however, is that state representatives are more sensitive to their voters’ concerns when they are expressed through social media. This is after all not so surprising as digital protests involve more people than physical protests (e.g. one tweet can be retweeted millions of times). Hence, policymakers may feel more pressure to act in response to them. What is more, social media platforms like Twitter make it easier for activists to publicly target and pressure specific politicians. As a result, political issues can quickly turn into personal issues.

The methods through which ordinary people organise to influence politics are drastically changing. Some of these methods, such as hashtag activism, have often been questioned by a popular rhetoric: “Why don’t you get up and do something real instead of just tweeting?” It turns out that hashtag activists do a lot more than we may think. Perhaps, without them some of the most progressive pieces of legislation may have never seen the light of day.

`36:T581,chart4 = { const grid = d3.select(DOM.svg(width*2, height)); // tweets const svg = grid.append("g") // protests const svg2 = grid.append("g").attr("transform", `translate(${width},0)`) // tweets svg.append("g") .call(xAxis_t) .attr("class", "axis"); svg.append("g") .call(yAxis_p) .attr("class", "axis"); // regression line // svg.append("path") // .attr("class", "regression") // .attr("stroke", d3.schemePaired[0]) // .style("stroke-dasharray", ("5, 3")) // .style('stroke-width', "2") // .datum(powerRegression_t(data_state)) // .attr("d", line_t) // .attr("fill", "none"); const circles = svg.append("g") .selectAll("circle") .data(data_state) const dot = circles.join("circle") .attr("stroke", d3.schemePaired[1]) // .attr("stroke", "white") .attr("stroke-width", 1.5) // .attr("fill", d3.schemePaired[1]) .attr("fill", "none") .attr("cx", d => x_t(+d.tweets_100k)) .attr("cy", d => y_p(+d.protests_100k)) .attr("r", 3); const text = circles.join("text") .attr("class", "annotation") .attr("x", d => x_t(+d.tweets_100k)+6) .attr("y", d => y_p(+d.protests_100k)) .text(d=>d.state) .text(d=>(+d.count>120)| (+d.count<5)| (+d.tweets_100k>300)?d.state:""); // return grid.node(); }37:Te9d,chart = { const svg = d3.select(DOM.svg(_width + _margin.left + _margin.right, _height + _margin.top + _margin.bottom)) const g = svg.append('g').attr('transform', `translate(${_margin.left}, ${_margin.top+50})`) const formatted_data = []; statesCarto.forEach(function(d){ formatted_data.push( { 'state': d.state_full, 'state_postal': d.state_postal, 'row': +d.row, 'column': +d.column, 'data': [] } ) }) state_ts_data.forEach(function(d){ for (var i = 0; i < formatted_data.length; i++) { if (formatted_data[i].state_postal == d.state) { formatted_data[i].data.push( {'key': d.date, 'protests_100k': +d.protests_100k, 'tweets_100k': +d.tweets_100k } ) } } }) const uniqueDate = state_ts_data.map(item => item.date) .filter((value, index, self) => self.indexOf(value) === index); // xScale.domain(uniqueDate); xScale.domain(d3.extent(state_ts_data, d => new Date(d.date))); yScale.domain(d3.extent(state_ts_data, d => +d.protests_100k)); yScale_t.domain(d3.extent(state_ts_data, d => +d.tweets_100k)); // yScale.domain([0,10]); const lineGenerator_p = d3.line() .defined(d => !isNaN(d.protests_100k)) .x(d => xScale(new Date(d.key))) .y(d => yScale(1-d.protests_100k)) // .curve(d3.curveCardinal); const lineGenerator_t = d3.line() .defined(d => !isNaN(d.tweets_100k)) .x(d => xScale(new Date(d.key))) .y(d => yScale_t(1-d.tweets_100k)) const states = g.selectAll('.states') .data(formatted_data) .enter().append('g') .attr('class', 'states'); states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_row(d)})`) .append('rect') .attr('width', state_size) .attr('height', state_size) .attr('fill', 'rgba(51,51,51,0.05'); console.log(formatted_data) console.log(d3.extent(state_ts_data, d => +d.protests_100k)) const protestLine = states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_row(d)+50})`) .append('path') .datum(d => d.data) .attr('d', lineGenerator_p) .attr('stroke', 'red') .attr('stroke-width', 1.5) .attr('fill', 'none'); const tweetLine = states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_row(d)+50})`) .append('path') .datum(d => d.data) .attr('d', lineGenerator_t) .attr('stroke', 'steelblue') .attr('stroke-width', 1.5) .attr('fill', 'none'); states.append('g') .attr('transform', d => `translate(${x_column(d)}, ${y_row(d) + state_size})`) .call(d3.axisBottom().scale(xScale).tickSizeOuter(0).tickSizeInner(0).tickValues(["2020/5", "2020/11"]).tickFormat(function(d, i){ if(i == 0) {return "20'5"} else {return "20'11"} })) .call(g => g.selectAll('.tick text') .attr('font-size', 10) .attr('baseline-shift', '120%')) .call(g => g.selectAll('.tick:first-of-type text') .attr('text-anchor', 'start')) .call(g => g.selectAll('.tick:last-of-type text') .attr('text-anchor', 'end')) .call(g => g.selectAll('.tick line') .attr('fill', 'rgba(51,51,51,0.3)')) states.append('text') .attr('class', 'state-label') .attr('x', d => textPosition(d.column)) .attr('y', d => textPosition(d.row)) .attr('baseline-shift', '-100%') .style('font-family', 'Helvetica') .attr('font-size', 12) .style('font-weight', 'bold') .attr('fill', 'rgb(51,51,51)') .text(d => d.state_postal) // return svg.node() }38:T177a, // Using states data from https://observablehq.com/@aboutaaron/small-multiple-chart-cartogram statesCarto = [{ 'state_full': 'Alabama', 'state_postal': 'AL', 'row': 5, 'column': 6 }, { 'state_full': 'Alaska', 'state_postal': 'AK', 'row': 6, 'column': 1 }, { 'state_full': 'Arizona', 'state_postal': 'AZ', 'row': 4, 'column': 1 }, { 'state_full': 'Arkansas', 'state_postal': 'AR', 'row': 4, 'column': 4 }, { 'state_full': 'California', 'state_postal': 'CA', 'row': 3, 'column': 0 }, { 'state_full': 'Colorado', 'state_postal': 'CO', 'row': 3, 'column': 2 }, { 'state_full': 'Connecticut', 'state_postal': 'CT', 'row': 2, 'column': 9 }, { 'state_full': 'District of Columbia', 'state_postal': 'DC', 'row': 4, 'column': 8 }, { 'state_full': 'Delaware', 'state_postal': 'DE', 'row': 3, 'column': 9 }, { 'state_full': 'Florida', 'state_postal': 'FL', 'row': 6, 'column': 8 }, { 'state_full': 'Georgia', 'state_postal': 'GA', 'row': 5, 'column': 7 }, { 'state_full': 'Hawaii', 'state_postal': 'HI', 'row': 6, 'column': 0 }, { 'state_full': 'Idaho', 'state_postal': 'ID', 'row': 1, 'column': 1 }, { 'state_full': 'Illinois', 'state_postal': 'IL', 'row': 1, 'column': 5 }, { 'state_full': 'Indiana', 'state_postal': 'IN', 'row': 2, 'column': 5 }, { 'state_full': 'Iowa', 'state_postal': 'IA', 'row': 2, 'column': 4 }, { 'state_full': 'Kansas', 'state_postal': 'KS', 'row': 4, 'column': 3 }, { 'state_full': 'Kentucky', 'state_postal': 'KY', 'row': 3, 'column': 5 }, { 'state_full': 'Louisiana', 'state_postal': 'LA', 'row': 5, 'column': 4 }, { 'state_full': 'Maine', 'state_postal': 'ME', 'row': -1, 'column': 10 }, { 'state_full': 'Maryland', 'state_postal': 'MD', 'row': 3, 'column': 8 }, { 'state_full': 'Massachusetts', 'state_postal': 'MA', 'row': 1, 'column': 9 }, { 'state_full': 'Michigan', 'state_postal': 'MI', 'row': 1, 'column': 6 }, { 'state_full': 'Minnesota', 'state_postal': 'MN', 'row': 1, 'column': 4 }, { 'state_full': 'Mississippi', 'state_postal': 'MS', 'row': 5, 'column': 5 }, { 'state_full': 'Missouri', 'state_postal': 'MO', 'row': 3, 'column': 4 }, { 'state_full': 'Montana', 'state_postal': 'MT', 'row': 1, 'column': 2 }, { 'state_full': 'Nebraska', 'state_postal': 'NE', 'row': 3, 'column': 3 }, { 'state_full': 'Nevada', 'state_postal': 'NV', 'row': 2, 'column': 1 }, { 'state_full': 'New Hampshire', 'state_postal': 'NH', 'row': 0, 'column': 10 }, { 'state_full': 'New Jersey', 'state_postal': 'NJ', 'row': 2, 'column': 8 }, { 'state_full': 'New Mexico', 'state_postal': 'NM', 'row': 4, 'column': 2 }, { 'state_full': 'New York', 'state_postal': 'NY', 'row': 1, 'column': 8 }, { 'state_full': 'North Carolina', 'state_postal': 'NC', 'row': 4, 'column': 6 }, { 'state_full': 'North Dakota', 'state_postal': 'ND', 'row': 1, 'column': 3 }, { 'state_full': 'Ohio', 'state_postal': 'OH', 'row': 2, 'column': 6 }, { 'state_full': 'Oklahoma', 'state_postal': 'OK', 'row': 5, 'column': 3 }, { 'state_full': 'Oregon', 'state_postal': 'OR', 'row': 2, 'column': 0 }, { 'state_full': 'Pennsylvania', 'state_postal': 'PA', 'row': 2, 'column': 7 }, { 'state_full': 'Rhode Island', 'state_postal': 'RI', 'row': 2, 'column': 10 }, { 'state_full': 'South Carolina', 'state_postal': 'SC', 'row': 4, 'column': 7 }, { 'state_full': 'South Dakota', 'state_postal': 'SD', 'row': 2, 'column': 3 }, { 'state_full': 'Tennessee', 'state_postal': 'TN', 'row': 4, 'column': 5 }, { 'state_full': 'Texas', 'state_postal': 'TX', 'row': 6, 'column': 3 }, { 'state_full': 'Utah', 'state_postal': 'UT', 'row': 3, 'column': 1 }, { 'state_full': 'Vermont', 'state_postal': 'VT', 'row': 0, 'column': 9 }, { 'state_full': 'Virginia', 'state_postal': 'VA', 'row': 3, 'column': 7 }, { 'state_full': 'Washington', 'state_postal': 'WA', 'row': 1, 'column': 0 }, { 'state_full': 'West Virginia', 'state_postal': 'WV', 'row': 3, 'column': 6 }, { 'state_full': 'Wisconsin', 'state_postal': 'WI', 'row': 0, 'column': 5 }, { 'state_full': 'Wyoming', 'state_postal': 'WY', 'row': 2, 'column': 2 } ]39:T452,html` `3a:[{"id":"50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","href":"https://static.observableusercontent.com/files/50848f0dd4d2d9c84821adba90ca625cb2815694117bbb7b6ae393e788aae9d85f19a6c73d60d642bb04e2f95b87993e8c7312d4d4da6a1431c58460f5ad6c63","name":"counties-albers-10m.json","type":"application/json","lastModified":1617596127150.757,"size":795407}] 2f:{"title":" Take it to the tweets, not the streets","cells":[{"id":0,"value":"html`

Take it to the tweets, not the streets

In the digital era, hashtag activism may be a stronger predictor of legislative change than traditional protest

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"text2 = html`

With such a clear trend, one would expect that digital and physical protests happen in the same location. But this is not the case, as there is a clear spatial mismatch between the two phenomena: where digital protests abound, few people take the streets, and vice-versa. In other words, the data suggests that it is unlikely that both physical and digital protests will take place in the same specific location on the same given day. Rather, if on a given day there are more digital protests in a one location, it is likely that there will also be more physical protests in another location.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1380,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1384,"value":"viewof metric = select({\n title: \"Metric\",\n description: \"Select a metric\",\n options: [\n {label:\"Per 100,000\", value: \"_count_100k\"},\n {label:\"Absolute value\", value: \"_count\"}],\n value: \"_count_100k\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1389,"value":"text4 = html`

What is more, one would also expect that the two forms of protest are equally relevant for state-level legislative change. Strikingly, this does not appear to be true. Relating digital and physical protests to political change shows that digital protests in one state relate to more legislative responses in the same state, but physical protests are seemingly less effective. In fact, physical protests bear no (or even opposite) relationship with subsequent state-level legislative change.

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1105,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"md`### regression metrics\n\n- Daily Physical Protests vs. Daily Tweets: ${tex`R^2 = ${powerRegression(data).rSquared.toFixed(3)}`}\n- \nNumber of Legislative Responses to Policing vs. Tweets per 100,000 inhabitants: ${tex`R^2 = ${powerRegression_t(data_state.filter(d=>d.state!==\"DC\")).rSquared.toFixed(3)}`} \n- Number of Legislative Responses to Policing vs. Physical Protests per 100,000 inhabitants: ${tex`R^2 = ${powerRegression_p(data_state).rSquared.toFixed(3)}`} `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1205,"value":"md`### unused charts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"md`### cartogram`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"_margin = ({ top: 100, bottom: 100, left: 20, right: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":544,"value":"_width = 960 - _margin.left - _margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"_height = 800 - _margin.top - _margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"offset = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"state_size = _width / offset","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"state_padding = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"xScale = d3.scaleUtc()\n .range([0, state_size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"yScale_t = d3.scaleLinear()\n .range([0, state_size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"yScale = d3.scaleLinear()\n .range([0, state_size])","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"x_column = ({column}) => column * (state_size + state_padding)","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"y_row = ({row}) => row * (state_size + state_padding)","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"textPosition = (cell, size = state_size, padding = state_padding) => \n (cell * (size + padding)) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1628,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1626,"value":"function formatValue(value) {\n return value.toLocaleString(\"en\", {\n style: \"currency\",\n currency: \"USD\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1623,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n // .style(\"font\", \"10px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"lightgrey\")\n .attr(\"stroke-width\", \"0.5px\");;\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1619,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x_date.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && (date - a.date > b.date - date) ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"showTooltip = function showTooltip(event, d, metric_t, metric_p, legend_label_t, legend_label_p, color) {\n\n d3.selectAll('.spikered,.spikesteelblue')\n .attr(\"fill-opacity\", 0.1)\n .attr(\"stroke-opacity\", 0.3)\n \n d3.select('#spike'+ color + d.id)\n .attr(\"stroke\", \"black\")\n .attr(\"fill-opacity\", 0.2)\n .attr(\"stroke-opacity\", 0.6)\n // .raise()\n // console.log(d)\n tooltip\n .transition()\n .duration(0)\n .style(\"opacity\", 1)\n \n tooltip\n .html(`${d.title}
\n${format(+d[metric_t])+\" \"+legend_label_t.toLowerCase()}
\n${format(+d[metric_p])+\" \"+legend_label_p.toLowerCase()}`)\n .style(\"left\", event.pageX + 10+ \"px\")\n .style(\"top\", event.pageY - 28 + \"px\");\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"hideTooltip = function hideTooltip(event, d, color) {\n\n d3.select('#spike'+ color + d.id)\n .attr(\"stroke\", color)\n .attr(\"class\", \"spike\"+color)\n\n d3.selectAll('.spikered')\n .attr(\"fill-opacity\", 0.2)\n .attr(\"stroke-opacity\", 0.6)\n\n d3.selectAll('.spikesteelblue')\n .attr(\"fill-opacity\", 0.3)\n .attr(\"stroke-opacity\", 1)\n .raise()\n \n tooltip\n .transition()\n .duration(500)\n .style(\"opacity\", 0);\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"projection = d3.geoAlbersUsa().scale(1400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"format = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"spike = (length, width = 7) => `M${-width / 2},0L0,${-length}L${width / 2},0`","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"length = d3.scaleLinear([0, d3.max(counties_data.filter(d=>(d.title !== \"Wilkinson County, GA\")&&(d.title !== \"Concho County, TX\")), d => +d[metric_t])], [0, 100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"length_p = d3.scaleLinear([0, d3.max(counties_data, d => +d[metric_p])], [0, 100])","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"logRegression_t = d3.regressionLog()\n .x((d) => +d.tweets_100k)\n .y((d) => +d.count)","pinned":false,"hidden":false,"mode":"ojs"},{"id":377,"value":"powerRegression_t = d3.regressionPow()\n .x((d) => +d.tweets_100k)\n .y((d) => +d.count)","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"powerRegression_p = d3.regressionPow()\n .x((d) => +d.protests_100k)\n .y((d) => +d.count)","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"powerRegression = d3.regressionPow()\n .x((d) => +d.tweet_count)\n .y((d) => +d.protest_count)","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"line_p = d3.line()\n .x(d => x_p(d[0]))\n .y(d => y_l(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"line_t = d3.line()\n .x(d => x_t(d[0]))\n .y(d => y_l(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"line_p_ts = d3.line()\n .defined(d => !isNaN(d.protest_count))\n .x(d => x_date(new Date(d.date)))\n .y(d => y_p_ts(+d.protest_count))","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"line_t_ts = d3.line()\n .defined(d => !isNaN(d.tweet_count))\n .x(d => x_date(new Date(d.date)))\n .y(d => y_t_ts(+d.tweet_count))","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"line = d3.line()\n .x(d => x(d[0]))\n .y(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`### axes and scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"yAxis_p = g => g\n .attr(\"transform\", `translate(${width-margin.right},0)`)\n .call(d3.axisLeft(y_p).tickSize(width-margin.left-margin.right))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Physical protests per 100,000 inhabitants\").attr(\"transform\", `translate(-${width-margin.left-margin.right},-10)`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"yAxis_l = g => g\n .attr(\"transform\", `translate(${width-margin.right},0)`)\n .call(d3.axisLeft(y_l).tickSize(width-margin.left-margin.right).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Number of legislative responses to policing\").attr(\"transform\", `translate(-${width-margin.left-margin.right},-10)`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"yAxis_p_ts = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_p_ts).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Daily number of physical protests\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"yAxis_t_ts = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y_t_ts).tickFormat(d3.format(\".0s\")).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Daily number of tweets\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${width-margin.right},0)`)\n .call(d3.axisLeft(y).tickSize(width-margin.left-margin.right).ticks(5))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Daily number of physical protests\").attr(\"transform\", `translate(-${width-margin.left-margin.right},-10)`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"xAxis_p = g => g\n // .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_p).tickSize(height-margin.bottom).tickFormat(d3.format(\".0s\")))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Physical protests per 100,000 inhabitants\").attr(\"transform\", `translate(0,${height})`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"xAxis_t = g => g\n // .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x_t).tickSize(height-margin.bottom).tickFormat(d3.format(\".0s\")))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Tweets per 100,000 inhabitants\").attr(\"transform\", `translate(0,${height})`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"xAxis_date = g => g\n .attr(\"transform\", `translate(0,${height/2 - margin.bottom})`)\n .call(d3.axisBottom(x_date))\n // .call(g => g.select(\".domain\").remove())\n // .call(g => g.append(\"text\")\n // .attr(\"x\", width - margin.right)\n // .attr(\"y\", -4)\n // .attr(\"fill\", \"#000\")\n // .attr(\"font-weight\", \"bold\")\n // .attr(\"text-anchor\", \"end\")\n // .text(\"Daily Number of Tweets\").attr(\"transform\", `translate(0,${height})`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"xAxis = g => g\n // .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSize(height-margin.bottom).tickFormat(d3.format(\".0s\")))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(\"Daily number of tweets\").attr(\"transform\", `translate(0,${height})`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"y_p = d3.scaleSymlog()\n// y = d3.scaleLinear()\n .domain(d3.extent(data_state, d => +d.protests_100k)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"y_l = d3.scaleSymlog()\n// y = d3.scaleLinear()\n .domain(d3.extent(data_state, d => +d.count)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"y_t_ts = d3.scaleLinear()\n// y = d3.scaleLinear()\n .domain(d3.extent(data, d => +d.tweet_count)).nice()\n .range([height/2 - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"y_p_ts = d3.scaleLinear()\n// y = d3.scaleLinear()\n .domain(d3.extent(data, d => +d.protest_count)).nice()\n .range([height/2 - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"y = d3.scaleSymlog()\n// y = d3.scaleLinear()\n .domain(d3.extent(data, d => +d.protest_count)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"x_p = d3.scaleSymlog()\n// x = d3.scaleLinear()\n .domain(d3.extent(data_state, d => +d.protests_100k))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"x_t = d3.scaleSymlog()\n// x = d3.scaleLinear()\n .domain(d3.extent(data_state, d => +d.tweets_100k))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"x_date = d3.scaleUtc()\n .domain(d3.extent(data, d => new Date(d.date)))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"x = d3.scaleSymlog()\n// x = d3.scaleLinear()\n .domain(d3.extent(data, d => +d.tweet_count))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"md`### data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data_state = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/bca539575ee3086c0f915ae571d32c38/raw/445e03dc9e6a564de65ebee4f003317aa6f6206f/state_tpv_policies.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1651,"value":"data = data_raw.map(d=> {\n return {\n date: new Date(d.date),\n tweet_count: +d.tweet_count,\n protest_count: +d.protest_count\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"data_raw = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/28b382c0a6afa02e62ce30b902a0a4f5/raw/a40cc3efde15f60b3cd28bd035dffbb3d5d5f56e/tweets_protests_time.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"counties_raw = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/23c2a6aa41d033e28f4461d9f3719c77/raw/02a28b90a288e7cbb34ea939dccdfb58fa0f2a92/counties_stats.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":786,"value":"counties_data = counties_raw.map(d=> {\n const feature = features.get(d.GEOID);\n return {\n id: d.GEOID,\n title: d.NAMELSAD + \", \" + d.state_abbr,\n // position: projection([+d.lon, +d.lat]),\n position: feature && path.centroid(feature),\n tweet_count_100k: +d.tweet_count_100k,\n protest_count_100k: +d.protest_count_100k,\n tweet_count: +d.tweet_count,\n protest_count: +d.protest_count,\n pop_2019: +d.POP_ESTIMATE_2019\n };\n}).filter(d=>d.pop_2019>10000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"state_ts_data = d3.csv(\"https://gist.githubusercontent.com/lnicoletti/c5a20cf96aa0052cfb70edb25884576b/raw/566e5eb524165a7d0a3c4aaf44fafc3887faebd7/state_tp_time.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1412,"value":"states = topojson.feature(us, us.objects.states).features","pinned":false,"hidden":false,"mode":"ojs"},{"id":1398,"value":"stateCentroids = states.map(function (feature){\n return [{centroid: path.centroid(feature),\n name: feature.properties.name}];\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"features = new Map(topojson.feature(us, us.objects.counties).features.map(d => [d.id, d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1430,"value":"state_abbreviations = new Map(state_codes.map(d => [d.name, d.abbreviation]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`### constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"tooltip = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n // .style(\"font-size\", \"10pt\")\n // .style(\"font-family\", \"Lato\")\n .style(\"position\", \"absolute\")\n .style(\"text-align\", \"left\")\n .style(\"width\", \"auto\")\n .style(\"height\", \"auto\")\n .style(\"padding\", \"5px\")\n .style(\"background\", \"#fff\")\n // .style(\"border\", \"black\")\n .style(\"pointer-events\", \"none\")\n .style(\"opacity\", 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"metric_p = \"protest\"+metric","pinned":true,"hidden":false,"mode":"ojs"},{"id":995,"value":"metric_t = \"tweet\"+metric","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"width = 470","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`### modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"//lodash\n_ = {\n const [_, fp] = await Promise.all([\n require(\"lodash@4\"),\n require(\"https://cdn.jsdelivr.net/gh/lodash/lodash@4/dist/lodash.fp.min.js\")\n ]);\n return fp(_);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1432,"value":"import { data as state_codes } from \"@observablehq/electoral-college-decision-tree\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":871,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3 = require.alias({\n \"d3\": \"d3@6\",\n \"d3-regression\": \"d3-regression@1\",\n})(\"d3\", \"d3-regression\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3a","stdlib":"1","titling":"auto"}