31:Tab1,chart = { const root = pack(data); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height1]) .attr("font-size", 10) .attr("font-family", 'Helvetica') .attr("text-anchor", "middle"); const leaf = svg.selectAll("g") .data(root.leaves()) .join("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`); leaf.append("circle") .attr("User", d => (d.leafUid = DOM.uid("leaf")).User) .attr("r", d => d.r/1.05) .attr("fill-opacity", 0.3) .attr("fill", d => color(d.data.Subject)) .attr("font-size", 10) .attr("font-family", "Helvetica") .on("mouseover", function(e,d) { d3.select(this) .attr("fill-opacity", "1"); tooltip .html(`${d.data.Subject}${d.data.Subject_2}

User: ${d.data.User}
Why it hold my attention: ${d.data.Why}
Day I saw the tweet: ${d.data.Date}
Language: ${d.data.Language}
I follow: ${d.data.Follow}
Retweet: ${d.data.Retweet}
Like: ${d.data.Like}
Share: ${d.data.Share}

Click the bubble to see the Tweet`); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible');; }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { d3.select(this).attr('stroke-width', '0') .attr("stroke", "#fff") .attr("fill-opacity", "0.3") tooltip.style("visibility", "hidden"); }) .on('click', function(e,d) { console.log('open tab'); window.open(` ${d.data.Tweet}` ); }); leaf.append("clipPath") .attr("User", d => (d.clipUid = DOM.uid("clip")).User) .append("use") .attr("xlink:href", d => d.leafUid.href); /* leaf.append("text") .attr("clip-path", d => d.clipUid) .selectAll("tspan") .data(d => d.data.User.split(/(?=[A-Z][a-z])|\s+/g)) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${i - nodes.length / 2 + 0.8}em`) .text(d => d) .attr("font-size", 5); */ leaf.append("title") .text(d => `${d.data.User === undefined ? "" : `${d.data.User} `}${format(d.Value)}`); svg.call(bubblelegend) return svg.node(); }32:T8a9,chart3 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width3, height3]); var formatSuffixDecimal2 = d3.format("") svg.append("g") .selectAll("g") .data(series) .join("g") .attr("fill", d => color3(d.key)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x3(d.data.date)) .attr("y", d => y3(d[1])) .attr("height", d => y3(d[0]) - y3(d[1])) .attr("width", x3.bandwidth()) .attr("fill-opacity", "0.8") .on("mouseover", function(e,d) { d3.select(this) .attr("stroke", "#000000") .attr('stroke-width', '0.5') .attr('stroke-opacity', '1'); tooltip .html(`${d.key}: ${formatSuffixDecimal2((y3(d[0]) - y3(d[1]))/30)}`); let tooltipWidth = tooltip.node().offsetWidth; let tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible');; }) .on("mousemove", function() { tooltip .style("top", d3.event.pageY - 10 + "px") .style("left", d3.event.pageX + 10 + "px"); }) .on("mouseout", function() { d3.select(this) .attr('stroke-width', '0') .attr("stroke", "#000000") tooltip.style("visibility", "hidden"); }) .append("title") .text(d => `${d.data.date} ${d.key}`); svg.append("text") .text("Catalan elections") .attr("dx", width3 -725) .attr("dy", height3 - margin3.top + margin3.bottom - 540) .attr("font-family", "Helvetica") .attr("opacity", "0.7") .attr("font-size", 13) svg.append("text") .text("Barça elections") .attr("dx", width3 -300) .attr("dy", height3 - margin3.top + margin3.bottom - 490) .attr("font-family", "Helvetica") .attr("opacity", "0.7") .attr("font-size", 13) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:T5bb,bubblelegend = svg => { const bubblelegend = svg.selectAll(".legend") .data(dataSubject) .enter(); bubblelegend .append('text') .text(d => d[0]) .attr('x', legendOrigin[0] -6) .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.35 * i * 1.15 - 10) .style('font-family', 'Helvetica') .style('font-size', `${labelHeight-2}px`) .attr("opacity", 0.6); bubblelegend .append('circle') .attr('cx', legendOrigin[0] -60) .attr('cy', (d,i) => legendOrigin[1] + labelHeight * 1.35 * i *1.15 + 3) .attr('r', 12) .attr('width', labelHeight) .attr('height', labelHeight) .attr('fill', (d) => color(d[0])) .attr("fill-opacity",".5") // .attr('stroke', (d) => color(d[0])) // .style('stroke-width', '1.4px'); svg.append("text") .attr('x', legendOrigin[0] + labelHeight * 1.2 -40) .attr('y', (d,i) => legendOrigin[1] + labelHeight + labelHeight * 1.2 *i +395) .attr("text-anchor", "middle") .style("font-size", "11px") .attr("font-family", "Helvetica") .attr('font-weight', 'bold') //.text("Subject") .attr("opacity", 0.6); bubblelegend .append('rect') .attr('x', 2) .attr('y', 18) .attr('fill', 'white') .attr("fill-opacity","0") .attr('stroke', 'grey') .style('stroke-width', '0.03px') .attr("stroke-opacity",".3") .attr('width', 150) .attr('height', 320) return bubblelegend; }34:T4fc,function labels(svg) { let label = svg.append("g") .style("font", "bold 12px var(--sans-serif)") .style("font-variant-numeric", "tabular-nums") .attr("text-anchor", "start") .selectAll("text"); return ([date, data2], transition) => label = label .data(data2.slice(0, n), d => d.name) .join( enter => enter.append("text") .attr("transform", d => `translate(${x((prev.get(d) || d).value)},${y((prev.get(d) || d).rank)})`) .attr("y", y.bandwidth() / 2) .attr("x", 6) .attr("dy", "-0.25em") .text(d => d.name) .call(text => text.append("tspan") .attr("fill-opacity", 0.7) .attr("font-weight", "normal") .attr("x", 6) .attr("dy", "1.15em")), update => update, exit => exit.transition(transition).remove() .attr("transform", d => `translate(${x((next.get(d) || d).value)},${y((next.get(d) || d).rank)})`) .call(g => g.select("tspan").tween("text", d => textTween(d.value, (next.get(d) || d).value))) ) .call(bar => bar.transition(transition) .attr("transform", d => `translate(${x(d.value)},${y(d.rank)})`) .call(g => g.select("tspan").tween("text", d => textTween((prev.get(d) || d).value, d.value)))); }35:[{"id":"c0c12119d1a5fae758b889786b4df06da15585c74c202959522d32f40dd98bbd5227fe213432620ee756a9301cb0ab631ffec065ec59f42ccfb98dd0240e97b1","href":"https://static.observableusercontent.com/files/c0c12119d1a5fae758b889786b4df06da15585c74c202959522d32f40dd98bbd5227fe213432620ee756a9301cb0ab631ffec065ec59f42ccfb98dd0240e97b1","name":"60DaysOfMyLife2@3.csv","type":"text/csv","lastModified":1616007807266,"size":70225},{"id":"a486a275b5cbebaa81d392c84ebc47612d469b05ff2af04df38f0b0fd0cb5318a9f9c8da1ecd7e5cd6b0d575424171488851ab4515a3d9c17e0b953b33186039","href":"https://static.observableusercontent.com/files/a486a275b5cbebaa81d392c84ebc47612d469b05ff2af04df38f0b0fd0cb5318a9f9c8da1ecd7e5cd6b0d575424171488851ab4515a3d9c17e0b953b33186039","name":"60DaysOfMyLife3@3.csv","type":"text/csv","lastModified":1616007849247.381,"size":960},{"id":"466ff4b1b77db36ec60a5d9f2837756839d18352c805fba19a956ca44b2818c0d073b88884a4202ae68ec67fcea6f6ac18261b049534f3bc0d6aec4f114fc989","href":"https://static.observableusercontent.com/files/466ff4b1b77db36ec60a5d9f2837756839d18352c805fba19a956ca44b2818c0d073b88884a4202ae68ec67fcea6f6ac18261b049534f3bc0d6aec4f114fc989","name":"60DaysOfMyLife@4.csv","type":"text/csv","lastModified":1616008300243.392,"size":48432}] 2f:{"title":"Tweets that have holded my attention","cells":[{"id":0,"value":"md`# Tweets that have holded my attention`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"md`\n\nSince the 1st of February till 17th of March I collected all the tweets that caught an eye on me. In total I've picked up ${key(\"335 tweets\")}, which I categorized in **10 big areas**. \n\nEach bubble is a Tweet and if you **hover** the mouse pointer over them you can see all the annotated information: the subcategory it belongs, who was the user of the tweet, when I saw it, why it holded my attention... and if you **click** the bubble you can go to the tweet itself.\n\nThe **size** of the bubble is given by whether I have retweeted (+2), liked it (+1) or shared it (+0.5).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"md`\n\n## Top 15 subcategories`","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`\n\nThere are ${key(\"58 different subcategories\")} in all the collected tweets. Which have been the 15 that most caught my attention and how have they evolved?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":153,"value":"viewof replay = html`