31: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(); }32:[{"id":"d83c70695981c446f27959a9f904d8ed48173e32406220d03847b10253e5d25722e68ee726926b14db87f084722fd2601fa4ba5de9b22d523d047a82645a72be","href":"https://static.observableusercontent.com/files/d83c70695981c446f27959a9f904d8ed48173e32406220d03847b10253e5d25722e68ee726926b14db87f084722fd2601fa4ba5de9b22d523d047a82645a72be","name":"2020-news-cycle-data@2.csv","type":"text/csv","lastModified":1609369308625.809,"size":134840},{"id":"c443fadbe52a5a551a9a04a98c2e2e87a17d0cf710bc06ff22a9991c7bf940447888f74152592ea5f80c988264802aeccfeac65bfa550a888f53da438ec37b28","href":"https://static.observableusercontent.com/files/c443fadbe52a5a551a9a04a98c2e2e87a17d0cf710bc06ff22a9991c7bf940447888f74152592ea5f80c988264802aeccfeac65bfa550a888f53da438ec37b28","name":"2020-news-cycle-data@4.csv","type":"text/csv","lastModified":1609435684228.689,"size":183478}] 2f:{"title":"The relentless 2020 news cycle in one chart","cells":[{"id":0,"value":"md`# The relentless 2020 news cycle in one chart\nA recreation 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. \n\nThis recreation is purely an exercise to work on my D3/Observable chops. I also added a few additional topics that seemed relevant to 2020 (e.g., Sourdough, Zoom, Taylor Swift, etc.). \n\n***`","pinned":false,"hidden":false,"mode":"ojs"},{"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":"$31","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.line()\n .curve(d3.curveCardinal)\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":"$W32","stdlib":"1","titling":"auto"}