31:T73d,function showTooltip(d, i) { const container = selectAncestor(this, "div") const boundingClientRect = this.getBoundingClientRect(); const containerBoundingClientRect = container.getBoundingClientRect(); // const coords = d3.mouse(container) const x = boundingClientRect.left - containerBoundingClientRect.left - 4 + (boundingClientRect.width / 2); // const x = boundingClientRect.left - containerBoundingClientRect.left - 4; const y1 = boundingClientRect.top - containerBoundingClientRect.top + (boundingClientRect.height / 2); const y2 = boundingClientRect.top - containerBoundingClientRect.top + boundingClientRect.height + 30; const containerDivLine = d3.select(container) .append("div") .attr("id", "tooltip-guide") .style("opacity", 0) .style("background-color", "black") .style("width", "1px") .style("position", "absolute") .style("pointer-events", "none") .style("top", `${y1}px`) .style("height", `${y2 - y1}px`) .style("left", `${x}px`) .style("width", "1px") .transition(d3.transition().duration(1000)) .style("opacity", 1) const containerDiv = d3.select(container) .append("div") .attr("id", "tooltip") .style("opacity", 0) .style("background-color", "white") .style("color", "black") .style("max-width", `${500}px`) // max width .style("max-height", "350px") .style("overflow-y", "scroll") .style("padding", "10px") .style("position", "absolute") .style("pointer-events", "none") .style("border-top", `1px ${"black"} solid`) .style("box-shadow", "3px 3px 5px #cccccc") .style("top", `${y2}px`) // .style("top", `${coords[1]}px`) .style("left", `${x}px`) // .style("left", `${coords[0]}px`) .html(() => d.tweet) .transition(d3.transition().duration(1000)) .style("opacity", 1) }32:T957,// data = d3.csv("https://raw.githubusercontent.com/roop-pal/russian-troll-tweets-visualization/master/149_Fearmonger_tweet_sentiments.csv", d => { // const tweet = d.tweet; // const sentiment = +d.sentiment; // if(tweet === ""){return} // var category = "neutral" // if(sentiment < -0.5){category = "highly negative";} // if(sentiment > 0.5){category = "highly positive";} // return {"tweet":tweet, "sentiment":sentiment, "category":category} // }) csv_data = {const csv_data = await d3.csv("https://raw.githubusercontent.com/roop-pal/russian-troll-tweets-visualization/master/149_Fearmonger_tweet_sentiments.csv", d => { const tweet = d.tweet; const sentiment = +d.sentiment; if(tweet === ""){return} var category = "tweet" return {"tweet":tweet, "sentiment":sentiment, "category":category} }) return csv_data;} // mutable data = { // var numNeg = 0; // var numPos = 0; // var numNeut = 0; // var samples = 20; // const data = await d3.csv("https://raw.githubusercontent.com/roop-pal/russian-troll-tweets-visualization/master/149_Fearmonger_tweet_sentiments.csv", d => { // const tweet = d.tweet; // const sentiment = +d.sentiment; // if(tweet === ""){return} // var category = "tweet" // return {"tweet":tweet, "sentiment":sentiment, "category":category}}) // shuffle(data); // var data_sample = []; // var sent_vals = new Set([]); // var idx = 0; // while(numNeg < samples || numPos < samples || numNeut < samples){ // console.log(data[idx].sentiment); // if(data[idx].sentiment < -0.5 && numNeg < samples && !(sent_vals.has(data[idx].sentiment))){ // data_sample.push(data[idx]); // sent_vals = sent_vals.add(data[idx].sentiment); // numNeg = numNeg + 1; // }if(data[idx].sentiment > 0.5 && numPos < samples && !(sent_vals.has(data[idx].sentiment))){ // data_sample.push(data[idx]); // sent_vals = sent_vals.add(data[idx].sentiment); // numPos = numPos + 1; // }else if(data[idx].sentiment < 0.5 && data[idx].sentiment > -0.5 && numNeut < samples && // !(sent_vals.has(data[idx].sentiment))){ // data_sample.push(data[idx]); // sent_vals = sent_vals.add(data[idx].sentiment); // numNeut = numNeut + 1; // } // idx = idx + 1; // } // return data_sample; // } 33:T431,function getData(){ var numNeg = 0; var numPos = 0; var numNeut = 0; var samples = 20; shuffle(csv_data); var data_sample = []; var sent_vals = new Set([]); var idx = 0; while(numNeg < samples || numPos < samples || numNeut < samples){ var curr = csv_data[idx]; if(filter != "" && !(curr.tweet.includes(filter))){ continue } if(curr.sentiment < -0.5 && numNeg < samples && !(sent_vals.has(curr.sentiment))){ data_sample.push(curr); sent_vals = sent_vals.add(curr.sentiment); numNeg = numNeg + 1; }if(curr.sentiment > 0.5 && numPos < samples && !(sent_vals.has(curr.sentiment))){ data_sample.push(curr); sent_vals = sent_vals.add(curr.sentiment); numPos = numPos + 1; }else if(curr.sentiment < 0.5 && curr.sentiment > -0.5 && numNeut < samples && !(sent_vals.has(curr.sentiment))){ data_sample.push(curr); sent_vals = sent_vals.add(curr.sentiment); numNeut = numNeut + 1; } idx = idx + 1; } return data_sample; }34:T428,renderChart = (target) => { target.selectAll('circle') .data(data) .enter().append('circle') .attr('r', 3) .attr("fill", d => { if(d.sentiment > 0.5){ return "green"; }else if(d.sentiment < -0.5){ return "red"; }else{ return "gray"; }}) .attr('cx', d => xScale(d.sentiment)) .attr('cy', d => yScale(d.category)) .on("mouseover", showTooltip) .on("mouseout", hideTooltip); //.attr('cx', d => xScale(d.category)) //.attr('cy', d => yScale(d.sentiment)); // target.append("text") // .attr("class", "x label") // .attr("text-anchor", "end") // .attr("x", width) // .attr("y", height) // .text("income per capita, inflation-adjusted (dollars)"); target.append('g') .call(xAxis); target.append('g') .call(yAxis); }35:[] 2f:{"title":"Scatterplot MAdness","cells":[{"id":0,"value":"md`# Scatterplot MAdness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"viewof filter = text({placeholder: \"Filter Tweets\", description: \"Type a word to search for\", submit: \"Filter\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"{\n const button = html`