32:T50b,# Remake of the remake of the relentless 2020 news cycle in one chart This is a recreation of [Ben Tanen's recreation](https://observablehq.com/@ben-tanen/the-relentless-2020-news-cycle-in-one-chart ) of [this chart](https://www.axios.com/news-cycle-2020-google-trends-chart-8a27fc67-2dd0-45b6-ae23-2672c2771c50.html?utm_source=newsletter&utm_medium=email&utm_campaign=newsletter_axiosam&stream=top) from Danielle Alberti at Axios. This recreation was made to see if I could use Observable Plot to make this chart, which Ben made in D3. Started with Mike Bostock's [ridgeline example](https://github.com/observablehq/plot/blob/main/test/plots/metro-unemployment-ridgeline.js). The only cell I added is the [remake](https://observablehq.com/d/de3cda190b167370#cell-445) and this intro. Everything else is Ben's (or Danielle's). Notes: - was able to use simplier data format (data_raw_new) because Plot took care of the faceting. - even in Plot can still smooth the line with catmull-rom! [documentation](https://observablehq.com/@observablehq/plot-line#cell-439) * Thank you [Ben](https://observablehq.com/@ben-tanen) for the inspiration and example! Thank you to Mike Bostock for the pointer to the ridgeline example! Thank you to Fil for suggesting improvements to my Plot!* 33:Tfc4,chart = { /*** init svg plot ***/ const svg = d3.select(DOM.svg(chart_param.width, chart_param.height)), cp = chart_param; /*** draw axis lines + labels ***/ // 1. first creating array of information about where to place axis lines const d0 = new Date("01/01/2020"); let date_points = [ ]; for (let i = 1; i <= 12; i++) { const d1 = new Date(i + "/01/2020"), month_str = d1.toLocaleDateString("en-US", {month: "long"}); date_points.push({ month_str: month_str.substring(0, 3) + (month_str.length > 3 ? "." : ""), days_into_year: (d1 - d0) / (1000 * 60 * 60 * 24) }); } // but if chart is quite narrow, just use 3 set axis lines if (chart_param.width <= 750) { date_points = [ { month_str: "Jan. 1", days_into_year: 0 }, { month_str: "Jun. 31", days_into_year: 182 }, { month_str: "Dec. 30", days_into_year: 364 } ] } // 2. draw axis groups const x_date = d3.scaleLinear() .domain([0, 364]) .range(x.range()); const ag = svg.selectAll("g.axis_group") .data(date_points).enter() .append("g") .classed("axis_group", true) .attr("transform", d => `translate(${cp.margin.left + x_date(d.days_into_year)}, ${cp.margin.top})`); // 3. draw axis lines ag.append("line") .classed("axis_line", true) .attr("x1", 0) .attr("y1", 0) .attr("x2", 0) .attr("y2", cp.height - cp.margin.top - cp.margin.bottom) .style("stroke", "#c9c9c9"); // 4. draw axis labels ag.append("text") .classed("axis_text", true) .attr("x", 0) .attr("y", cp.height - cp.margin.top - cp.margin.bottom + 5) .style("font-size", "14px") .style("text-anchor", "middle") .style("alignment-baseline", "hanging") .text(d => d.month_str); // 5. create object to cover axis lines above top ridge let cover_path = [...data[0].data]; cover_path.push({week_num: 53, interest: 100}); cover_path.push({week_num: 1, interest: 100}); svg.append("path") .attr("id", "axis_line_cover") .attr("d", line2(cover_path)) .attr("transform", `translate(${cp.margin.left}, ${cp.margin.top})`) .style("fill", "white"); /*** create ridges ***/ // 1. create ridge groups in correct location with hover events const rg = svg.selectAll("g.ridge_group") .data(data).enter() .append("g") .classed("ridge_group", true) .attr("transform", d => `translate(${cp.margin.left}, ${cp.margin.top + (d.order - 1) * cp.margin.ridge})`) .on("mouseover", (e, d) => { svg.selectAll("g.ridge_group") .style("opacity", d0 => d0.search === d.search ? 1 : 0.5); }) .on("mouseout", (e, d) => { svg.selectAll("g.ridge_group") .style("opacity", 1); }); // 2. add ridge labels rg.append("text") .classed("ridge_label", true) .attr("x", -5) .attr("y", cp.ridge_height) .style("font-size", "14px") .style("text-anchor", "end") .style("alignment-baseline", "middle") .text(d => d.search); // 3. add path for ridge fill rg.append("path") .classed("ridge_fill", true) .attr("d", d => { // take original data and add points for bottom corners to create fill let path = [...d.data]; path.push({week_num: 53, interest: 0}); path.push({week_num: 1, interest: 0}); return line1(path); }) .style("fill", d => color(d.interest_avg).replace(")", ", 0.35)")) .style("stroke", "none"); // 4. add path for ridge rg.append("path") .classed("ridge_path", true) .attr("d", d => line2(d.data)) .style("fill", "none") .style("stroke", d => color(d.interest_avg)); // 5. add hover box (where user can hover) rg.append("rect") .attr("x", -cp.margin.left) .attr("y", cp.ridge_height * 0.65) .attr("width", width) .attr("height", cp.margin.ridge) .style("fill", "rgba(0, 0, 0, 0)"); return svg.node(); }34:[{"id":"d83c70695981c446f27959a9f904d8ed48173e32406220d03847b10253e5d25722e68ee726926b14db87f084722fd2601fa4ba5de9b22d523d047a82645a72be","href":"https://static.observableusercontent.com/files/d83c70695981c446f27959a9f904d8ed48173e32406220d03847b10253e5d25722e68ee726926b14db87f084722fd2601fa4ba5de9b22d523d047a82645a72be","name":"2020-news-cycle-data@2.csv","type":"text/csv","lastModified":1628032311495.288,"size":134840},{"id":"c443fadbe52a5a551a9a04a98c2e2e87a17d0cf710bc06ff22a9991c7bf940447888f74152592ea5f80c988264802aeccfeac65bfa550a888f53da438ec37b28","href":"https://static.observableusercontent.com/files/c443fadbe52a5a551a9a04a98c2e2e87a17d0cf710bc06ff22a9991c7bf940447888f74152592ea5f80c988264802aeccfeac65bfa550a888f53da438ec37b28","name":"2020-news-cycle-data@4.csv","type":"text/csv","lastModified":1628032311495.288,"size":183478}] 30:{"title":"Remake of the remake of the relentless 2020 news cycle in one chart","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"### My remake in Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":495,"value":"viewof smooth = Inputs.toggle({ label: \"smooth curves?\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"remake_in_plot = Plot.plot({\n width: width,\n height: 1800,\n marginTop: 25,\n x: {\n tickFormat: \"%b\",\n grid: true\n },\n y: {\n range: [20, -20],\n axis: null\n },\n fy: {\n domain: d3.groupSort(\n data_raw_new,\n (g) => d3.max(g, (d) => d.order),\n (d) => d.search\n ),\n label: null,\n padding: 0,\n round: false\n },\n facet: {\n data: data_raw_new,\n y: \"search\",\n marginLeft: 150\n },\n color: {\n range: [\"#d65e9b\", \"#8bb56e\"]\n },\n marks: [\n Plot.areaY(data_raw_new, {\n x: \"week\",\n y: \"interest\",\n fill: \"interest_avg\",\n fillOpacity: 0.5,\n curve: smooth ? \"catmull-rom\" : \"linear\"\n }),\n Plot.line(data_raw_new, {\n x: \"week\",\n y: \"interest\",\n stroke: \"interest_avg\",\n strokeOpacity: 1,\n curve: smooth ? \"catmull-rom\" : \"linear\"\n }),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":475,"value":"### Ben's version in D3","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"html`\n

Height is search interest in a given topic, indexed to 100

Color is average search interest between Dec. 29, 2019 – Dec. 30, 2020

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"chart_param_init = ({\n width: width,\n ridge_height: 40,\n margin: {\n top: 10,\n right: 25,\n bottom: 20,\n left: 210,\n ridge: 20\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"// after manually setting parameters in chart_param_init, height will be defined based on those params\nchart_param = Object.assign(\n chart_param_init, \n {\n height: chart_param_init.margin.top + chart_param_init.margin.bottom + \n data.length * chart_param_init.margin.ridge + chart_param_init.ridge_height \n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"// a simple line to plot to fill under the ridge (showing true data)\nline1 = d3.line()\n .x(d => x(d.week_num))\n .y(d => y(d.interest));","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"// similar to line1, just with curve to enclose data with a smooth ridge\nline2 = d3\n .line()\n .curve(d3.curveCatmullRom) // Note from Zan: good point made by Harry Stevens (https://observablehq.com/@harrystevens) that this would be better w/ d3.curveCatmullRom since \"catmull-rom splines are less likely to dip below the x-axis\". I also did use catmull-rom in the Plot implementation. This had been curveCardinal in Ben's implementation, but switching here based on Harry's advice & for consistency between the D3 & Plot implementations.\n .x((d) => x(d.week_num))\n .y((d) => y(d.interest))","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"color = d3.scaleLinear()\n .domain(d3.extent(data, d => d.interest_avg))\n .range([\"#d65e9b\", \"#8bb56e\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"{\n return html`${d3\n .ticks(d3.min(data, d => d.interest_avg), d3.max(data, d => d.interest_avg), 20)\n .map(color)\n .map(\n t =>\n ` `\n )}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data.map(d => d.data).flat(), d => d.week_num))\n .range([0, chart_param.width - chart_param.margin.left - chart_param.margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data.map(d => d.data).flat(), d => d.interest))\n .range([chart_param.ridge_height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"md` ## Data import + organization\nData originally comes from [Google Trends](https://trends.google.com/trends/), where I downloaded the interest over time data for each topic. When Google Trends had a defined topic for the particular search, I used that. Otherwise, I simply based it on the \"search term\" results. After downloading the data from Google Trends, I did some minor cleaning in R.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"data = [...d3.rollup(data_raw_new, v => v, d => d.search)].map(e => ({\n search: e[0],\n interest_avg: e[1][0].interest_avg,\n order: e[1][0].order,\n data: e[1].map(d => (({week_num, week, interest}) => ({week_num, week, interest}))(d))\n})).sort((a, b) => d3.ascending(a.order, b.order))","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"data_raw_new = FileAttachment(\"2020-news-cycle-data@4.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data_raw_old = FileAttachment(\"2020-news-cycle-data@2.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"md`## Notes + Learnings\n\nSince this was an exercise to work on my D3/Observable chops, I wanted to note a few things I learned or found interest or difficult along the way.\n\n- Danielle used two different paths to generate each ridge: one for creating the fill under the ridge, which reflects the actual data with no curve and the other for creating a smooth cover over the top of the ridge. If you look closely at some of the ridges (e.g., Kim Jong-un) you can see small gaps between the stroke and the fill.\n- There are a few ways one can sort the ridges in a ridge plot (based on weighted average, based on where the peak is, etc.). For this chart, Danielle appears to have sorted it based on when the first significant bump occurs (around 50% interest or higher), which is a smart way to do it, especially since some topics had multiple bumps throughout the year.\n- The first few topics seem to be highlighted there because they are of interest throughout the year (there was no single spike for \"masks\" or \"TikTok\").\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}