3f:null 40:["$","title",null,{"children":"Menciones Diputados en los medios | Tomás Gómez | Observable"}] 46:Taa41,{ let list = html` ` yield list list.addEventListener("change", ()=>{ document.querySelector("#fname").value = document.querySelector("#selnames").value }) }47:Tfe9,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("04/06/2022"); let date_points = [ ]; for (let i = 3; i <= 12; i++) { const d1 = new Date(i + "/06/2022"), 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: "Mar. 6", days_into_year: 65 }, { 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, 110]) .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("font", "open-sans") .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(); }48:[{"id":"3e81ae86804fb5f8b6e4038f85dd7adeabd7a4170164f9cd36e73522d27d6ec8be632fb51262b94df62d9c5b9f7da673b93fca306b65e429315643c34539e409","href":"https://static.observableusercontent.com/files/3e81ae86804fb5f8b6e4038f85dd7adeabd7a4170164f9cd36e73522d27d6ec8be632fb51262b94df62d9c5b9f7da673b93fca306b65e429315643c34539e409","name":"diputados_nombre_orden@1.csv","type":"text/csv","lastModified":1662568254849.315,"size":104849},{"id":"3e81ae86804fb5f8b6e4038f85dd7adeabd7a4170164f9cd36e73522d27d6ec8be632fb51262b94df62d9c5b9f7da673b93fca306b65e429315643c34539e409","href":"https://static.observableusercontent.com/files/3e81ae86804fb5f8b6e4038f85dd7adeabd7a4170164f9cd36e73522d27d6ec8be632fb51262b94df62d9c5b9f7da673b93fca306b65e429315643c34539e409","name":"diputados_nombre_orden.csv","type":"text/csv","lastModified":1662568249988.381,"size":104849},{"id":"f53b1463bf839a6baee8c51bc9b7046a30cfac7ec8a8f31ee4da5b8d527bd9e2b3bef8fd1c72c0324744b2940b39c2332764ac0a9e6cb087ebb49c57354076f0","href":"https://static.observableusercontent.com/files/f53b1463bf839a6baee8c51bc9b7046a30cfac7ec8a8f31ee4da5b8d527bd9e2b3bef8fd1c72c0324744b2940b39c2332764ac0a9e6cb087ebb49c57354076f0","name":"diputados_final@1.csv","type":"text/csv","lastModified":1662650336147.974,"size":98335},{"id":"f53b1463bf839a6baee8c51bc9b7046a30cfac7ec8a8f31ee4da5b8d527bd9e2b3bef8fd1c72c0324744b2940b39c2332764ac0a9e6cb087ebb49c57354076f0","href":"https://static.observableusercontent.com/files/f53b1463bf839a6baee8c51bc9b7046a30cfac7ec8a8f31ee4da5b8d527bd9e2b3bef8fd1c72c0324744b2940b39c2332764ac0a9e6cb087ebb49c57354076f0","name":"diputados_final.csv","type":"text/csv","lastModified":1662650329791.767,"size":98335}] 44:{"id":"6a3b7315160947f2","slug":"menciones-diputados-en-los-medios","title":"Menciones Diputados en los medios","thumbnail":"6d139541bd11d92f928b40bded17c46ecda0f3175367d7f9c243e0381891b6ef","access_level":"public","create_time":"$D2022-09-01T15:51:00.232Z","update_time":"$D2022-09-08T15:18:55.428Z","view_time":null,"first_public_time":"$D2022-09-01T16:47:29.577Z","has_unpublished_edits":null,"fork":{"id":"718968bdacb0ce61","slug":"the-relentless-2020-news-cycle-in-one-chart","title":"The relentless 2020 news cycle in one chart","owner":{"id":"ec7d5a5929e2447a","login":"ben-tanen","name":"Ben Tanen"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e6269dadf239c382","login":"tomas-gomez","name":"Tomás Gómez","avatar_url":"https://avatars-next.observableusercontent.com/3a9b789447e9a85a750a2608243f4417f0fbaf547b07b912a028646355e75189","tier":"starter_2024","bio":"","following":false},"version":568,"publish_version":568,"role":null,"authored":false,"authors":[{"type":"individual","id":"23229e463f3f537e","login":"tomas-gomez","name":"Tomás Gómez","avatar_url":"https://avatars-next.observableusercontent.com/3a9b789447e9a85a750a2608243f4417f0fbaf547b07b912a028646355e75189","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"23229e463f3f537e","login":"tomas-gomez","name":"Tomás Gómez","avatar_url":"https://avatars-next.observableusercontent.com/3a9b789447e9a85a750a2608243f4417f0fbaf547b07b912a028646355e75189","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Menciones Diputados en los medios","cells":[{"id":0,"value":"md`# Menciones Diputados en los medios\n\n\n***`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"import {LineChart} from \"@d3/line-with-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"{\n let theform = html`\n

Forms look nice too!

\nName \n

( Try putting Pattaya or Dancing Script and click change - use any name from Google Fonts)

\n`\n yield theform; // this makes sure the HTML is there before we try to add event listeners\n document.querySelector(\"#change\").addEventListener(\"click\", changeFont)\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"mutable fontName = \"open sans\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"changeFont = ()=>{\n console.log(\"changefont\")\n mutable fontName = document.querySelector(\"#fname\").value\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"viewof dataset = Inputs.select([\"Todos\", \"Chile Podemos Más\", \"Nuevo Pacto Social\", \"Apruebo Dignidad\", \"Frente Social Cristiano\",\n \"Partido de la Gente\", \"Dignidad Ahora\", \"Centro Unido\", \"IND\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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: 110,\n ridge: 20\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"color = d3.scaleLinear()\n .domain(d3.extent(data, d => d.interest_avg))\n .range([\"#d65e9b\", \"#d65e9b\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"function pacto(dataset) {\n if (dataset == \"Todos\"){\n var datas = [\"Chile Podemos Más\", \"Apruebo Dignidad\", \"Nuevo Pacto Social\", \"Frente Social Cristiano\", \"IND\", \"Partido de la Gente\",\n \"Dignidad Ahora\", \"Centro Unido\"]\n return datas;\n }\n else {\n var datas = new Array(dataset)\n return datas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"orden = function orden(e, dataset) {\n if (dataset == \"Todos\"){\n return e[1][0].order;\n }\n else {\n return e[1][0].order_pacto;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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: orden(e, dataset),\n pacto_numero: e[1][0].pacto,\n data: e[1].map(d => (({week_num, week, interest}) => ({week_num, week, interest}))(d))\n})).filter(d => pacto(dataset).includes(d.pacto_numero)).sort((a, b) => d3.ascending(a.order, b.order))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"data_raw_new = FileAttachment(\"diputados_final@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"data_raw_old = FileAttachment(\"diputados_final.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"