31:T41d,With all of the uncertainty around Twitter's future, many are considering leaving the platform. But before blindly jumping into the unknown, users should seriously consider downloading and saving their Twitter data to analyze it for important trends, insights and information that they can take with them. We created the free dataviz tool below to illustrate how data visualization can help better inform users **_before they decide to delete their Twitter accounts and abandon years of useful data._** Without dataviz, these insights are nearly impossible for anyone to decipher from a data file alone. **Any Twitter user (person or business) can follow these easy steps:** 1. Go [this Twitter settings page](https://twitter.com/settings/download_your_data) and request an archive from Twitter. 2. Wait approximately 24 hours to receive your data from Twitter as a zip file. 3. Load the `tweets.js` file from the data folder in the downloaded archive using the '__Choose File__' button below. 5. Scroll down and start investigating important trends!32:Tcb4,addTooltips = (chart, styles) => { const stroke_styles = { stroke: "blue", "stroke-width": 3 }; const fill_styles = { fill: "blue", opacity: 0.5 }; // Workaround if it's in a figure const type = d3.select(chart).node().tagName; let wrapper = type === "FIGURE" ? d3.select(chart).select("svg") : d3.select(chart); // Workaround if there's a legend.... const svgs = d3.select(chart).selectAll("svg"); if (svgs.size() > 1) wrapper = d3.select([...svgs].pop()); wrapper.style("overflow", "visible"); // to avoid clipping at the edges // Set pointer events to visibleStroke if the fill is none (e.g., if its a line) wrapper.selectAll("path").each(function (data, index, nodes) { // For line charts, set the pointer events to be visible stroke if ( d3.select(this).attr("fill") === null || d3.select(this).attr("fill") === "none" ) { d3.select(this).style("pointer-events", "visibleStroke"); if (styles === undefined) styles = stroke_styles; } }); if (styles === undefined) styles = fill_styles; const tip = wrapper .selectAll(".hover") .data([1]) .join("g") .attr("class", "hover") .style("pointer-events", "none") .style("text-anchor", "start"); // Add a unique id to the chart for styling const id = id_generator(); // Add the event listeners d3.select(chart).classed(id, true); // using a class selector so that it doesn't overwrite the ID wrapper.selectAll("title").each(function () { // Get the text out of the title, set it as an attribute on the parent, and remove it const title = d3.select(this); // title element that we want to remove const parent = d3.select(this.parentNode); // visual mark on the screen const t = title.text(); if (t) { parent.attr("__title", t).classed("has-title", true); title.remove(); } // Mouse events parent .on("pointerenter pointermove", function (event) { const text = d3.select(this).attr("__title"); const pointer = d3.pointer(event, wrapper.node()); if (text) tip.call(hover, pointer, text.split("\n")); else tip.selectAll("*").remove(); // Raise it d3.select(this).raise(); // Keep within the parent horizontally const tipSize = tip.node().getBBox(); if (pointer[0] + tipSize.x < 0) tip.attr( "transform", `translate(${tipSize.width}, ${pointer[1] + 7})` ); else if (pointer[0] + tipSize.width > wrapper.attr("width")) tip.attr( "transform", `translate(${wrapper.attr("width") - tipSize.width}, ${ pointer[1] + 7 })` ); }) .on("pointerout", function (event) { tip.selectAll("*").remove(); // Lower it! d3.select(this).lower(); }); }); // Remove the tip if you tap on the wrapper (for mobile) wrapper.on("touchstart", () => tip.selectAll("*").remove()); // Define the styles chart.appendChild(html`","pinned":true,"hidden":false,"mode":"html"},{"id":976,"value":"### Tooltip code","pinned":false,"hidden":false,"mode":"md"},{"id":963,"value":"function tweetsSummary(d) {\n return `${d.slice(0,5)\n .sort((a,b) => b.favorite_count - a.favorite_count)\n .map(d => \"• \" + d.full_text.slice(0, 100) + \"...\")\n .join(\"\\n\")}\\n...`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"Plot = tooltipPlugin(await require(\"@observablehq/plot\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"import {id_generator} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"tooltipPlugin = (Plot) => {\n const { plot } = Plot;\n Plot.plot = ({ tooltip, ...options }) => addTooltips(plot(options), tooltip);\n return Plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":953,"value":"// Function to position the tooltip\nhover = (tip, pos, text) => {\n const side_padding = 10;\n const vertical_padding = 5;\n const vertical_offset = 15;\n\n // Empty it out\n tip.selectAll(\"*\").remove();\n\n // Append the text\n tip\n .style(\"text-anchor\", \"start\")\n .style(\"pointer-events\", \"none\")\n .attr(\"transform\", `translate(${pos[0]}, ${pos[1] + 7})`)\n .selectAll(\"text\")\n .data(text)\n .join(\"text\")\n .style(\"dominant-baseline\", \"ideographic\")\n .text((d) => d)\n .attr(\"y\", (d, i) => (i - (text.length - 1)) * 15 - vertical_offset)\n .style(\"font-weight\", (d, i) => (i === 0 ? \"bold\" : \"normal\"));\n\n const bbox = tip.node().getBBox();\n\n // Add a rectangle (as background)\n tip\n .append(\"rect\")\n .attr(\"y\", bbox.y - vertical_padding)\n .attr(\"x\", bbox.x - side_padding)\n .attr(\"width\", bbox.width + side_padding * 2)\n .attr(\"height\", bbox.height + vertical_padding * 2)\n .style(\"fill\", \"white\")\n .style(\"stroke\", \"#d3d3d3\")\n .lower();\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}