boxplot = { const target = html`

`; const margin = { top: 10, right: 30, bottom: 50, left: 100 }; const width = 800 - margin.left - margin.right; const height = 4500 - margin.top - margin.bottom; const svg = d3 .select(target) .select("#box_plot") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); const y = d3 .scaleBand() .range([0, height]) .domain([ 'Pavel Matveev', 'Kris Marszalek', 'Bill Shihara', 'Timo Schlaefer', 'Ray Youssef', 'Jed McCaleb', 'Peter Wall', 'Yoshitaka Kitao', 'Stephen Pair', 'Charles Hoskinson', 'Max Boonen', 'Abigail Johnson', 'Josh Mandel', 'Mike Belshe', 'Akon', 'Sam Bankman-Fried', 'Bill Barhydt', 'Marcus Swanepoel', 'Alex Mashinsky', 'Dan Schulman', 'Olaf Carlson-Wee', 'Marius Reitz', 'Sergey Nazarov', 'Guy Hirsch', 'Zac Prince', 'Phil Chen', 'Vladimir Tenev', 'Justin Sun', 'James Butterfill', 'Barry Silbert', 'David Trainer', 'Sumit Gupta', 'Brock Pierce', 'Paolo Ardoino', 'Yoni Assia', 'Tyler Winklevoss', 'Roger Ver', 'John Wu', 'Michael Sonnenshein', 'Daniel Ives', 'Tom Jessop', 'Kelly Loeffler', 'Joseph Lubin', 'Tom Emmer', 'Matthew Hougan', 'Patrick M. Byrne', 'Changpeng Zhao', 'Peter Smith', 'Asiff Hirji', 'Erik Voorhees', 'Charlie Lee', 'Meltem Demirors', 'Fred Wilson', 'Mike Kayamori', 'Scaramucci', 'George McDonaugh', 'Bobby Cho', 'Jeremy Allaire', 'Michael J. Saylor', 'Lex Sokolin', 'Paul Tudor Jones', 'Vinny Lingham', 'John McAfee', 'Brian Armstrong', 'Umar Farooq', 'Adam White', 'Bill Miller', 'Jesse Powell', 'Spencer Bogart', 'Antoni Trenchev', 'Nigel Green', 'Nischal Shetty', 'Adena Friedman', 'Iqbal Gandham', 'Antonopoulos', 'Arthur Hayes', 'Timothy C. Draper', 'Chris Weston', 'Raoul Pal', 'Nikolaos Panigirtzoglou', 'Peter Van Valkenburgh', 'Jehan Chu', 'David Tawil', 'Anthony Pompliano', 'Gavin Smith', 'Avivah Litan', 'Ari Paul', 'Nayib Bukele', 'Mike McGlone', 'Jerry Brito', 'Michael Novogratz', 'Denis Vinokourov', 'Cointelegraph', 'Matthew Dibb', 'Kumar Gaurav', 'Vitalik Buterin', 'Mark Zuckerberg', 'Alistair Milne', 'Tesla', 'Max Keiser', 'Jim Reid', 'Dan Morehead', 'Colette Kress', 'Christine Lagarde', 'Kevin Weil', 'Thomas Glucksmann', 'Peter Thiel', 'Garlinghouse', 'Henri Arslanian', 'Mati Greenspan', 'Cameron Winklevoss', 'Thomas Lee', 'Michael Moro', 'Satoshi Nakamoto', 'Michael Terpin', 'Ted Livingston', 'Brian Kelly', 'Jen-Hsun Huang', 'David A. Marcus', 'Craig Erlam', 'Bobby Lee', 'Ryan Selkis', 'Laurence D. Fink', 'Dante Disparte', 'Gary Gensler', 'J. Christopher Giancarlo', 'Campbell Harvey', 'Vijay Ayyar', 'Jerome Powell', 'Nischal shetty', 'Jim Cramer', 'Jay Clayton', 'Steve Wozniak', 'Brad Garlinghouse', 'Andreas Antonopoulos', 'David Schwartz', 'Jack Dorsey', 'Wright', 'Timothy Tam', 'Subhash Chandra Garg', 'Kyle Samani', 'Fawad Razaqzada', 'Hester Peirce', 'Garrick Hileman', 'Joseph Edwards', 'Elon Musk', 'Jackson Palmer', 'Shaktikanta Das', 'Jameson Lopp', 'Anatoly Aksakov', 'Zennon Kapron', 'Sathvik Vishwanath', 'Vladimir Putin', 'Jeff Dorman', 'Mark Carney', 'Jamie Dimon', 'Virgil Griffith', 'Kim Grauer', 'Alex de Vries', 'Joseph Borg', 'Ki Young Ju', 'Peter Schiff', 'Alex Kruger', 'Kenneth Rogoff', 'Tom Robinson', 'Andrew Bailey', 'Maxine Waters', 'Sherrod Brown', 'Lisa Monaco', 'Arun Jaitley', 'Craig Steven Wright', 'Steven Mnuchin', 'Warren Buffett', 'Michael Sherwin', 'Nicky Morgan', 'Scott Spencer', 'Jennifer Robertson', 'Rob Leathern', 'Andrew Yang', 'Mark Zuckerberg' ]) .padding(.6); console.log("Andrew Yang as Y Scale:" + y('Andrew Yang')); svg .append("g") .call(d3.axisLeft(y).tickSize(0)) .select(".domain") .remove(); d3.selectAll(".yAxis>.tick>text").each(function(d, i) { d3.select(this).style("font-size", "100px"); }); const x = d3 .scaleLinear() .domain([-1, 1]) .range([100, width]); svg .append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x).ticks(10)) .select(".domain") .remove(); const myColor = d3 .scaleSequential() .domain([-1, 1]) .interpolator(d3.interpolateInferno); svg .append("text") .attr("text-anchor", "middle") .style("fontSize", "large") .attr("x", width / 2) .attr("y", height + margin.top + 30) .text("Crypto Sentiment"); console.log(d3.nest()); const sumstat = d3 .nest() .key(function(d) { return d.name; }) .rollup(function(d) { const q1 = d3.quantile( d .map(function(g) { return g.sentiment; }) .sort(d3.ascending), .25 ); const median = d3.quantile( d .map(function(g) { return g.sentiment; }) .sort(d3.ascending), .5 ); const q3 = d3.quantile( d .map(function(g) { return g.sentiment; }) .sort(d3.ascending), .75 ); const interQuantileRange = q3 - q1; const min = q1 - 1.5 * interQuantileRange; const max = q3 + 1.5 * interQuantileRange; return { q1: q1, median: median, q3: q3, interQuantileRange: interQuantileRange, min: min, max: max }; }) .entries(data); svg .selectAll("vertLines") .data(sumstat) .enter() .append("line") .attr("x1", function(d) { return d.q1; }) .attr("x2", function(d) { return d.q3; }) .attr("y1", function(d) { return y(d.key) + y.bandwidth() / 2; }) .attr("y2", function(d) { return y(d.key) + y.bandwidth() / 2; }) .attr("stroke", "black") .attr("opacity", 1) .style("max-width", 200); svg .selectAll("boxes") .data(sumstat) .enter() .append("rect") .attr("x", function(d) { return x(d.value.q1); }) // console.log(x(d.value.q1)) ; .attr("width", function(d) { return (x(d.value.q3) - x(d.value.q1)) / 1.1; }) .attr("y", function(d) { return y(d.key); }) .attr("height", y.bandwidth()) .attr("stroke", "black") .style("fill", "#69b3a2") .style("opacity", 0.3); svg .selectAll("medianLines") .data(sumstat) .enter() .append("line") .attr("y1", function(d) { return y(d.key) + y.bandwidth(); }) .attr("y2", function(d) { return y(d.key) + y.bandwidth(); }) .attr("x1", function(d) { return x(d.value.median); }) .attr("x2", function(d) { return x(d.value.median); }) .attr("stroke", "black") .style("width", 2000); const tooltip = d3 .select(target) .select("#box_plot") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("font-size", "16px"); const mouseover = function(d) { tooltip .transition() .duration(200) .style("opacity", 1); tooltip .html( "Speaker: " + d.name + "
" + "Average Quote Sentiment: " + d.averageSent + "
" + "% Quote sentiment: " + d.sentiment ) // + d.Prior_disorder + "
" + "HR: " + d.HR) .style("left", d3.mouse(this)[0] + 30 + "px") .style("top", d3.mouse(this)[1] + 30 + "px"); }; const mousemove = function(d) { tooltip .style("left", d3.mouse(this)[0] + 30 + "px") .style("top", d3.mouse(this)[1] + 30 + "px"); }; const mouseleave = function(d) { tooltip .transition() .duration(200) .style("opacity", 0); }; const jitterWidth = 50; svg .selectAll("indPoints") .data(data) .enter() .append("circle") .attr("cx", function(d) { return x(d.sentiment); }) .attr("cy", function(d) { return +( y(d.name) + y.bandwidth() / 2 - jitterWidth / 2 + Math.random() * jitterWidth ); }) .attr("r", 4) .style("fill", function(d) { return myColor(+d.sentiment); }) .attr("stroke", "black") .on("mouseover", mouseover) .on("mousemove", mousemove) .on("mouseleave", mouseleave); return target; }