33:Ta5a,buttons = { const buttons =html` ` function myfunc(p) { var ss = title.innerHTML; ss= ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " "+ p.innerHTML; } // buttons.querySelector("#a").onclick = () => { // update(mydata2012,stock2012); // var ss = title.innerHTML; // ss = ss.split(" ").slice(0,-1).join(" "); // title.innerHTML = ss + " 2012"; // reset_mark(); // } buttons.querySelector("#b").onclick = () => { update(mydata2013,stock2013); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2013"; reset_mark(); } buttons.querySelector("#c").onclick = () => { update(mydata2014,stock2014); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2014"; reset_mark(); } buttons.querySelector("#d").onclick = () => { update(mydata2015,stock2015); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2015"; reset_mark(); } buttons.querySelector("#e").onclick = () => { update(mydata2016,stock2016); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2016"; reset_mark(); } buttons.querySelector("#f").onclick = () => { update(mydata2017,stock2017); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2017"; reset_mark(); } buttons.querySelector("#g").onclick = () => { update(mydata2018,stock2018); var ss = title.innerHTML; ss = ss.split(" ").slice(0,-1).join(" "); title.innerHTML = ss + " 2018"; reset_mark(); } return buttons } 34:Ta54,chart ={ //do some initializations const viz = d3.select(DOM.svg(width, (c_height+l_height+30))) .style("font", "10px sans-serif") .style("width", "100%") .style("height", "100%") .attr("id","viz"); //.on("mousemove touchmove", moved); //line chart mutable x = d3.scaleTime() .domain(d3.extent(stock2018, d => d.date)) .range([margin.left, margin.left+l_width]) //var viz = d3.select("svg#viz"); //viz.selectAll("g.xaxis").remove() viz.append("g") .attr("class", "xaxis") .call(xAxis) viz.append("g") .attr("class", "yaxis") .call(yAxis) var line_chart = viz.append("g"); line_chart .attr("width", l_width-10) .attr("height", l_height) .attr('id', 'linechart') .on("mouseleave", left); //red dot! and price text viz.append("g") .append('circle') .attr('r',4) .attr('cx',4) .attr('cy',l_height+c_height) .attr('id','mouse') const price_text=viz.append("text") .attr("id","mouseprice") .attr("x",0) .attr("y",0) .attr("text-anchor", "middle") .style("font-size", "1.5em") .style('opacity','0') //create an fake rectangle to add moved function viz.append('rect') .attr("width", l_width) .attr("height", l_height+50) .attr('x',20) .attr('y',c_height+margin.top+heat_margin.top+30) .attr('id','fakerect') .style('opacity',0) .on("mousemove touchmove", moved); //draw line chart drawline(line_chart,stock2018); //draw sentiment score heat map var heat_map = viz.append("g"); heat_map .attr("width", width) .attr("height", c_height) .attr('id', 'heatmap') .attr("transform",`translate(${heat_margin.left},${heat_margin.top + cellSize * 1.5})`) .on("mouseleave", left); drawheat(heat_map,mydata2018); //add the legend var legend_neg = viz.append('text') .attr('x',width-heat_margin.left-margin.left-legend_width-85) .attr('y',15) .attr('fill','black') .style('font-weight','bold') .style("font-size", "1em") .text ('Neg'); var legend_pos = viz.append('text') .attr('x',width-heat_margin.left-margin.left-55) .attr('y',15) .attr('fill','black') .style('font-weight','bold') .style("font-size", "1em") .text ('Pos'); drawLegend(viz); return viz.node() } 35:T163f,html`

Introduction

The broad goal of our project is to explore correlations between the stock price of Facebook and how it is talked about in TechCrunch articles. Stock price is incredibly unpredictable but with limited information, most investors look towards news reports to gauge how they should invest. This is our motivation in quantifying news article sentimentality and see how well it matches up with the market.

Related Work

Text sentimentality is a huge field in natural language processing and many exciting projects exist that portray it. For example, the following app: https://www.csc2.ncsu.edu/faculty/healey/tweet_viz/tweet_app/ will plot user inputted text onto different visualization formats for text sentimentality. Out of the many possible ways we explored to map sentimentality, we chose a format similar to this project: https://beta.observablehq.com/@mbostock/d3-calendar-view as we wanted to see data that spanned a full year.

Methodology

For our project, we first needed a dataset containing a list of relevant news article links. We considered using google news API, but we quickly realized that they only provide one month’s worth of data. The advantage there however was that they collect data from multiple news sources. However, since we wanted to see trends over multiple years, we decided to use a web scraper. The web scraper we used is actually from a previous hackathon project to scrape from TechCrunch. TechCrunch is special because of the specific way they list their url’s that makes it simple to scrape. Once getting the list of url’s, we parsed out the relevant ones by looking for a substring of “facebook” in the article title. Then, for each url, we retrieved the full article text along with the title using Beautiful Soup (a python library) and ran the tokenized text through a sentimentality analyzer (NLTK). The sentiment is defined as -1 for purely negative sentiment, and +1 for purely positive sentiment (with 0 meaning neutral). Our final data format was the date the article is published, the link to the article, the title of the article, and the sentiment score. Our data files and code can be found here: https://github.com/wanlinxie/dataviztry2 The second part of the data we needed was the stock data. This was simply retrieved from Yahoo Finance where we downloaded daily historical data. For our graph, we decided to only use the close price (the price the stock ends on when the market closes each day) to simplify the visualization.

Design

When choosing our design, we wanted to provide a clear correlation between the stock data and news article sentiment. The format of the stock data we decided should be a line graph as that is the most recognizable format in viewing stock price. It also makes sense as we want to see the trend over time. However, for the news sentiment, we explored a couple options. Our first idea was to plot the sentiment as a different line graph over the stock price (after scaling it to match the stock price). However, due to the high frequency of the news articles, the line was extremely intelligible and this idea was quickly abandoned. We also tried converting the sentiment to a scatter plot to see if it would look less messy. However, it was extremely hard to see a correlation and the sentiment points looked like noise. Finally, we settled on a calendar-view of a heat map. A heat map for encoding sentiment makes sense since we are trying to encode negativity and positivity. Therefore, we chose a scale from red to green. The calendar view also enables us to encode the date of article. This enables the user to see sentiment trend over time instead of a single article on its own. This also helps us clean up the data as we are able to average sentiment scores if multiple articles are published on one day. To provide the extra information (clickable links), we originally decided on a pop-up that would appear once a user clicked on the heat map square. However, we realized that the pop-up was distracting and eventually moved it to a fixed side panel.

Implementation

For our implementation, we used Python to create our dataset and parse through our data. For our visualization, everything is made using D3 in this Observable notebook.

Discussion

We feel that our final presentation was successful as this is a topic that has very useful and practical applications, especially for investors. There was a lot of interest into how this tool could be expanded and improved to be even more indicative of the market. We hope that our work provides new insight about one of the factors in stock price and is a fun exploratory tool for people interested in the market.

Future Work

We would love to improve this project in the future so it could perhaps one day be used in fields like quantitative trading. Because we were only able to scrape data from TechCrunch, we saw that our data was leaning more positive in general. By adding links from more datasets, we can expand our knowledge base which could lead to more interesting discoveries. We would love to add data from sites like MarketWatch or the Wall Street Journal and observe how it affects the overall sentiment. Due to the way we have written our code and structured this notebook, adding new data is extremely easy once we are given access to the links.

Acknowledgements or References

Thank you so much to Professor Agnes Chang and the TAs Conder Shou and Jeevan Farias for providing us guidance this semester. Also thank you to everyone who was at our mid-project review and the final showcase that gave us their insight. `36:T8bf,function drawheat(g,sen_data){ var format_data = format_years_data(sen_data) const year = g.selectAll("g") .data(format_data) .enter().append("g") .attr("id","heat") year.append("text") .attr("x", -5) .attr("y", -5+heat_margin.top) .attr("font-weight", "bold") .attr("text-anchor", "end") .attr('font-size','2.5em') .text(d => d.key); year.append("g") .attr("text-anchor", "end") .selectAll("text") .data((d3.range(7)).map(i => new Date(1995, 0, i))) .enter().append("text") .attr("x", -3) .attr("y", d => (countDay(d) + 1) * cellSize+heat_margin.top-10) .attr("dy", "0.31em") .text(formatDay); // plot_rect(year, sen_data); const rect = year.append("g") .attr('id','rectg') .selectAll("rect") .data(sen_data) rect.enter().append("rect") .attr("width", cellSize - 1) .attr("height", cellSize - 1) .attr("x", d => timeWeek.count(d3.timeYear(d.key), d.key) * cellSize + 0.5) .attr("y", d => countDay(d.key) * cellSize + 0.5+heat_margin.top) .attr('id',d=>{ const year_num = d.key.getFullYear(); const month_num = d.key.getMonth()+1; const date_num = d.key.getDate(); var s = 's'+year_num.toString()+'s'+month_num.toString()+'s'+date_num.toString(); return s; }) .attr("fill","#fff") .transition() .attr("fill", d => h_color(d.value.score)) .duration(1000) g.select("g").selectAll("rect") .on("click",clicked) .on("mouseover",mouseover) .on("mouseleave",mouseleave) .append("title") .text(d => `${formatDate(d.key)}: ${format(d.value.score)}`); const month = year.append("g") .attr("id","month") .selectAll("g") .data(d => d3.timeMonths(d3.timeMonth(d.values[d.values.length - 1].key), d.values[0].key)) .enter().append("g"); // month.filter((d, i) => i).append("path") // .attr("fill", "none") // .attr("stroke", "#fff") // .attr("stroke-width", 3) // .attr("d", pathMonth); month.append("text") .attr("x", d => timeWeek.count(d3.timeYear(d), timeWeek.ceil(d)) * cellSize + 2) .attr("y", -5+heat_margin.top) .text(formatMonth); }37:T64d,function mouseover(d){ const g1 = d3.select("svg").selectAll("g#heatmap"); const year1 = g1.select("g#heat") year1.selectAll('rect') .filter(node=> node === d) .style("stroke-width",3) .style('stroke','rgb(50,50,50)'); //clear existed_circle var g = d3.select('svg').selectAll('g#linechart'); g.select('#markcircle').remove(); g.select("#closeprice").remove(); // //clear blue dot var g2 = d3.select("svg").select('circle#mouse'); g2.attr('r',0); var t2 = d3.select("svg").select("#mouseprice"); t2.style('opacity',0); d3.event.preventDefault(); var cur_date = d3.timeDay.round(d.key); var year = cur_date.getFullYear(); var cur_stock_data = year_dict[year]; cur_date = new Date(2020,cur_date.getMonth(),cur_date.getDate()); var date_list = []; cur_stock_data.forEach(d=>{ date_list.push(d.date.getTime()); }) date_list = date_list.reverse(); const right = date_list.length - 1 -d3.bisectLeft(date_list, cur_date.getTime(), 1); if (cur_stock_data[right].date.getTime() === cur_date.getTime()) { //console.log(d); var cx = mutable x(cur_date); var cy = mutable y(cur_stock_data[right].close); drawCircle(cx,cy,h_color(d.value.score)); } else{ const left = right+1; var cx = mutable x(cur_date); var x1 = mutable x(cur_stock_data[left].date); var x2 = mutable x(cur_stock_data[right].date); var y1 = mutable y(cur_stock_data[left].close); var y2 = mutable y(cur_stock_data[right].close); var cy = (cx-x1)*(y2-y1)/(x2-x1)+y1; drawCircle(cx,cy,h_color(d.value.score)); } }38:T466,function clicked(d){ // //show the circle on the line chart //compute intersection d3.event.preventDefault(); var cur_date = d3.timeDay.round(d.key); var year = cur_date.getFullYear(); var cur_stock_data = year_dict[year]; cur_date = new Date(2020,cur_date.getMonth(),cur_date.getDate()); var date_list = []; cur_stock_data.forEach(d=>{ date_list.push(d.date.getTime()); }) date_list = date_list.reverse(); const right = date_list.length - 1 -d3.bisectLeft(date_list, cur_date.getTime(), 1); if (cur_stock_data[right].date.getTime() === cur_date.getTime()) { var cx = mutable x(cur_date); var cy = mutable y(cur_stock_data[right].close); } else{ const left = right+1; var cx = mutable x(cur_date); var x1 = mutable x(cur_stock_data[left].date); var x2 = mutable x(cur_stock_data[right].date); var y1 = mutable y(cur_stock_data[left].close); var y2 = mutable y(cur_stock_data[right].close); var cy = (cx-x1)*(y2-y1)/(x2-x1)+y1; } //draw panel if (popup != null) removePopup(); //remove before creating createPopup(d,cy); } 39:T58a,function moved(d){ //clear var heatmap_g = d3.select("svg").selectAll("g#heatmap"); const year1 = heatmap_g.select("g#heat") year1.selectAll('rect') .style("stroke-width",0) .style('stroke','rgb(50,50,50)'); //find x coordinate const xm = d3.mouse(this)[0]; var cur_date = d3.timeDay.round(mutable x.invert(xm)); var month_num = cur_date.getMonth()+1; var date_num = cur_date.getDate(); //get year number var ss = title.innerHTML; ss= ss.split(" ").slice(-1)[0]; ss = ss.slice(0,4); const dst_id = 's'+ss+"s"+month_num.toString()+"s"+date_num.toString(); //find correspond rectangle!! var rect = heatmap_g.select("#"+dst_id); rect.style("stroke-width",3) .style('stroke','rgb(7, 102, 255)'); d3.event.preventDefault(); //draw red dot !! //get y coordinate!!!! var cur_stock_data = year_dict[parseInt(ss)]; var date_list = []; cur_stock_data.forEach(d=>{ date_list.push(d.date.getTime()); }) date_list = date_list.reverse(); const right = date_list.length - 1 -d3.bisectLeft(date_list, cur_date.getTime(), 1); const left = right+1; var cx = mutable x(cur_date); var x1 = mutable x(cur_stock_data[left].date); var x2 = mutable x(cur_stock_data[right].date); var y1 = mutable y(cur_stock_data[left].close); var y2 = mutable y(cur_stock_data[right].close); var cy = (cx-x1)*(y2-y1)/(x2-x1)+y1; updateReddot(xm,cy); }3a:T4b8,function update (sen_data, stock_data) { //update the heatmap var g = d3.select("svg").selectAll("g#heatmap"); g.remove(); var viz = d3.select("svg#viz"); var heat_map =viz.append("g"); heat_map .attr("width", width) .attr("height", c_height) .attr('id', 'heatmap') .attr("transform",`translate(${heat_margin.left},${heat_margin.top + cellSize * 1.5})`) .on("mouseleave", left); drawheat(heat_map,sen_data); //update the line chart //update the axis mutable x = d3.scaleTime() .domain(d3.extent(stock_data, d => d.date)) .range([margin.left, margin.left+l_width]) mutable y = d3.scaleLinear() .domain([d3.min(stock_data,d=>d.close), d3.max(stock_data,d=>d.close)]).nice() .range([c_height + l_height - margin.bottom+heat_margin.top, c_height + heat_margin.top+ margin.top+30]) viz.selectAll("g.xaxis").remove() viz.selectAll("g.yaxis").remove() viz.append("g") .attr("class", "xaxis") .call(xAxis) viz.append("g") .attr("class", "yaxis") .call(yAxis) var t = d3.transition() .duration(500) .ease(d3.easeLinear); d3 .select(".line") .transition(t) .attr("d", line(stock_data)) } 3b:T846,html` `3c:[] 32:{"title":"","cells":[{"id":0,"value":"title = html`

Analyzing Facebook Sentiment in TechCrunch with Stock Price in: 2018

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2193,"value":" html`\n\nWe welcome you to find interesting relationships between the news sentimentality and stock price of Facebook. This notebook focuses only on news articles from the popular news source TechCrunch. Sentimentality ranges from -1 (negative sentiment) to +1 (positive sentiment) and visualled encoded in color through a calendar view. Feel free to change the years to see how the stock has changed over the years! You can also click on a calendar day to display the articles published that day and navigate to the links for more information.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2195,"value":" html`\n\n

To get started, try navigating to ... <\\h4>\n
\n
2018, Jul 17
\n
2016, Apr 01
\n
2014, Mar 12
\n
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2266,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"function left(){\n var heatmap_g = d3.select(\"svg\").selectAll(\"g#heatmap\");\n const year1 = heatmap_g.select(\"g#heat\")\n year1.selectAll('rect')\n .style(\"stroke-width\",0)\n .style('stroke','rgb(50,50,50)');\n \n //remove markcircle\n var g = d3.select('svg').selectAll('g#linechart');\n g.select('#markcircle').remove();\n g.select(\"#closeprice\").remove();\n \n //remove mousecircle\n var g2 = d3.select(\"svg\").select('circle#mouse');\n g2.attr('r',0);\n var t2 = d3.select(\"svg\").select(\"#mouseprice\");\n t2.style('opacity',0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1693,"value":"function drawLegend(g){\n const defs = g.append(\"defs\");\n \n const linearGradient = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient\");\n \n linearGradient.selectAll(\"stop\")\n .data(h_color.ticks().map((t, i, n) => ({ offset: `${100i/n.length}%`, color: h_color(t) })))\n .enter().append(\"stop\")\n .attr(\"offset\", d => d.offset)\n .attr(\"stop-color\", d => d.color);\n \n g.append('g')\n .attr(\"transform\", `translate(${width-heat_margin.left-margin.left-legend_width-60},0)`)\n .append(\"rect\")\n //.attr('transform', `translate(${0}, 0)`)\n\t.attr(\"width\", legend_width)\n\t.attr(\"height\", legend_height)\n\t.style(\"fill\", \"url(#linear-gradient)\");\n \n g.append('g')\n .call(axisBottom);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":528,"value":"function drawline(g,stockdata) { \n g.append(\"path\")\n .datum(stockdata)\n .attr(\"class\", \"line\")\n .attr('stroke', '#aeb0b2')\n .attr('stroke-width', 2)\n .attr('d', line)\n .attr('fill', 'none') ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"function mouseleave(d){\n const g = d3.select(\"svg\").selectAll(\"g#heatmap\");\n const year = g.select(\"g#heat\")\n year.selectAll('rect')\n .filter(node=> node === d)\n .style(\"stroke-width\",0)\n .style('stroke','rgb(50,50,50)');\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1945,"value":"function updateReddot(cx,cy){\n var dot = d3.select(\"svg\").select('circle#mouse');\n //console.log(dot);\n dot\n .attr('cx',cx)\n .attr('cy',cy)\n .attr('r',5)\n .attr('fill','#0066cc')\n \n var t = d3.select(\"svg\").select('#mouseprice');\n var true_y = mutable y.invert(cy);\n var true_x = mutable x.invert(cx);\n t\n .attr('x',cx+25)\n .attr('y',cy+20)\n .style('opacity',1)\n .style('font-weight','bold')\n .text (formatDateLine(true_x)+\", \"+\"$\"+format_stock(true_y));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"drawCircle = (cx,cy,co)=>{\n //console.log(co);\n var g = d3.select(\"svg\").selectAll('g#linechart');\n g.append(\"g\")\n .append('circle')\n .attr('r',0)\n .attr('cx',cx)\n .attr('cy',cy)\n .transition()\n .attr('r',6)\n .attr('id','markcircle')\n .attr('fill',co)\n .attr('stroke','black')\n .attr('stroke-width',3)\n .duration(200)\n \n var true_y = mutable y.invert(cy);\n var true_x = mutable x.invert(cx);\n const percentage_text=g.append(\"text\")\n .attr(\"id\",\"closeprice\")\n .attr(\"x\", cx+25) \n .attr(\"y\", cy+20)\n .attr(\"text-anchor\", \"middle\") \n .style(\"font-size\", \"1.5em\")\n .text (formatDateLine(true_x)+\", \"+\"$\"+format_stock(true_y))\n .style('opacity',0)\n .transition()\n .style('opacity',1)\n .duration(200);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1334,"value":"year_dict={\n return {\n '2012':stock2012,\n '2013':stock2013,\n '2014':stock2014,\n '2015':stock2015,\n '2016':stock2016,\n '2017':stock2017,\n '2018':stock2018,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"function reset_mark() {\n var g = d3.select('svg').selectAll('g#linechart');\n g.select('#markcircle').remove();\n g.select('#closeprice').remove();\n \n // var rule = d3.select(\"svg\").selectAll(\"g\").selectAll(\"line#rule\");\n // rule.transition()\n // .style(\"opacity\",0)\n // .duration(100)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"format_years_data = d => d3.nest()\n .key(d =>d.key.getFullYear())\n .entries(d)\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"cellSize = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"c_height = cellSize 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":2027,"value":"l_width = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"l_height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":1698,"value":"legend_width = 150","pinned":true,"hidden":false,"mode":"ojs"},{"id":1701,"value":"legend_height = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"timeWeek = d3.timeMonday","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"countDay = d => (d.getDay() + 6) % 7","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"function pathMonth(t) {\n const n = 7;\n const d = Math.max(0, Math.min(n, countDay(t)));\n const w = timeWeek.count(d3.timeYear(t), t);\n return `${d === 0 ? `M${w * cellSize},0`\n : d === n ? `M${(w + 1) * cellSize},0`\n : `M${(w + 1) * cellSize},0V${d * cellSize}H${w * cellSize}`}V${n * cellSize}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1395,"value":"format_stock = d3.format(\".5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"format = d3.format(\"+.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"formatDate = d3.timeFormat(\"%x\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"formatDay = d => ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"formatMonth = d3.timeFormat(\"%b\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2154,"value":"formatDateLine = d3.timeFormat(\"%d %b\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":382,"value":"h_color = d3.scaleSequential(d3.interpolateRdYlGn).domain([-0.3,0.7])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1661,"value":"axisScale = d3.scaleLinear()\n .domain(h_color.domain())\n .range([width-legend_width-margin.right, width-margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1707,"value":"axisBottom = g => g\n .attr(\"class\", `x-axis`)\n .attr(\"transform\", `translate(${-heat_margin.left-legend_width+100},${legend_height+10})`)\n .call(d3.axisBottom(axisScale)\n .ticks(legend_width / 35)\n .tickSize(-5))","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"heat_margin=({top: 20, right: 30, bottom: 10, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"mutable x = d3.scaleTime()\n .domain(d3.extent(stock2018, d => d.date))\n .range([margin.left, margin.left+width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1465,"value":"mutable y =d3.scaleLinear()\n .domain([d3.min(stock2018,d=>d.close), d3.max(stock2018,d=>d.close)]).nice()\n .range([c_height + l_height - margin.bottom+heat_margin.top, c_height + heat_margin.top+ margin.top+30])","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${c_height+l_height-margin.bottom+heat_margin.top})`)\n .call(d3.axisBottom(mutable x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left+5},0)`)\n .call(d3.axisLeft(mutable y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Stock Price (USD)\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"line = d3.line()\n .x(d => mutable x(d.date))\n .y(d => mutable y(d.close))","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"popup = { \n\n //init\n var len = mydata2018.length;\n \n return createPopup(mydata2018[len - 1], stock2018[len - 1].close);\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2059,"value":"function getChangableHeader(d) {\n //console.log(h_color(d.value.score));\n var converter = d3.timeFormat(\"%b %e %Y\")\n \n return \"
What people are talking about on \" + \n \"
\" + converter(d.key) + \"
:
\";\n //color modify ^ here e.g. \"#ffffff\"\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":625,"value":"getClickableTitle = (title, url) => {\n //console.log(\"
\" + title + \"
\");\n return \"
\" + title + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"function getClickableTitles (titles, urls) {\n \n const max = 3;\n \n //\"
What people are talking about:
\n \n var stat = \"
\";\n \n var num = titles.length;\n \n if (num > max)\n num = max;\n \n for (var i = 0; i < num; i++)\n stat += getClickableTitle(titles[i], urls[i]);\n \n stat += \"
\"\n \n return stat;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"function getContentInPopup(d,cy) {\n var true_y = mutable y.invert(cy);\n \n var info = generateInfoPane(d.key, d.value.score,true_y);\n \n var articles = getClickableTitles(d.value.title, d.value.url);\n \n var header = getChangableHeader(d);\n \n return info + header + articles;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"function createPopup(d,cy) {\n \n var stat = getContentInPopup(d, cy);\n\n var popup = d3.select(\"body\")\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .html(stat)\n\n return popup;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1592,"value":"function removePopup() {\n \n var element = document.getElementById('tooltip');\n \n if (element == null)\n return;\n \n var parent = element.parentNode; \n parent.removeChild(element);\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"function generateInfoPane(date, score, price) {\n \n return \"
\" + getScoresInInfobox(score, price) + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"function getDateInInfobox(date) {\n var converter = d3.timeFormat(\"%b %e %Y\")\n return \"
\" + converter(date) + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"function getScoresInInfobox(score, price) {\n \n return \"
\" \n + getScoreWrapper(\"STOCK\", price) \n + getScoreWrapper(\"SENTIMENT\", score)\n + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"function getScoreWrapper(topic, score) {\n var sConverter;\n if(topic === \"STOCK\")\n {sConverter = d3.format(\"$.3f\");}\n else\n {sConverter = d3.format(\"+.3f\");}\n \n return \"
\" + topic + \"
\" \n + \"
\" + sConverter(score) + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"function myRollup(v) \n{\n var urls = [];\n var titles = [];\n \n for (var i = 0; i < v.length; i++)\n {\n urls.push(v[i].url);\n titles.push(v[i].titles);\n }\n\n var pair = {\n \"url\": urls,\n \"title\": titles,\n \"score\": d3.mean(v, d => d.score)\n };\n \n // console.log(\"pair\", pair); \n \n return pair; //return {\"url\": [], \"score\": double}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":" mydata2017 = {\n \n var parse = d3.timeParse(\"%m/%d/%Y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/776acac759695123e4ce7aee412918b5/raw/8973885f6d5a911cabb893c6d9d116cebda528e7/2017facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n data1.forEach(function(d){\n d.key = parse(d.key);})\n//return data;\nreturn data1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"stock2017 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/0da9849556841aace1fbbe8abe34cc07/raw/4615881b7d7a3aa585d0df4c727b6b3d6d46371d/fb_stock_price_2017.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"mydata2018 = {\n var parse = d3.timeParse(\"%m/%d/%Y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/776acac759695123e4ce7aee412918b5/raw/8973885f6d5a911cabb893c6d9d116cebda528e7/2018facebook_final.csv\",d=> {\n\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n data1.forEach(function(d){\n d.key = parse(d.key);})\n\nreturn data1;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"stock2018 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/a6318b1c04a78a0626dbeacb7d4a7ab9/raw/956b0d1f0329fe126e56f82ff028f592d1b9849a/fb_stock_price_2018.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"mydata2016 = {\n var parse = d3.timeParse(\"%m/%d/%Y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/776acac759695123e4ce7aee412918b5/raw/8973885f6d5a911cabb893c6d9d116cebda528e7/2016facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n \n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n \n data1.forEach(function(d){\n d.key = parse(d.key);})\nreturn data1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"stock2016 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/251cc56a13b1ef1cd56bfbc5b1a1a163/raw/3599b610e1137a8f7e131fe9bea95438e6f7ab39/fb_stock_price_2016.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"mydata2015 = {\n var parse = d3.timeParse(\"%m/%d/%Y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/776acac759695123e4ce7aee412918b5/raw/8973885f6d5a911cabb893c6d9d116cebda528e7/2015facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n data1.forEach(function(d){\n d.key = parse(d.key);})\n//return data;\nreturn data1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"stock2015 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/2ab3e9cf7934f04c3bb7b0f56096f6f9/raw/4f5dc7eb5b9b1bf7c7424e29bbf353536ec66494/fb_stock_price_2015.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"mydata2014 = {\n var parse = d3.timeParse(\"%m/%d/%Y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/776acac759695123e4ce7aee412918b5/raw/8973885f6d5a911cabb893c6d9d116cebda528e7/2014facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n data1.forEach(function(d){\n d.key = parse(d.key);})\nreturn data1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":989,"value":"stock2014 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/3f487a9a0cd988dcf22eff2dbc58767d/raw/9951309b7deea59de401cbf84baf17c24bf33a9c/fb_stock_price_2014.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":468,"value":"mydata2013 = {\n var parse = d3.timeParse(\"%m/%d/%Y\");\nconst data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/776acac759695123e4ce7aee412918b5/raw/8973885f6d5a911cabb893c6d9d116cebda528e7/2013facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n data1.forEach(function(d){\n d.key = parse(d.key);})\nreturn data1;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":991,"value":"stock2013 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/552abf07761cebefd0170be6f6574b56/raw/5b5deb0b4b21efe1e43eaddfb5c73cd2b8a6a89b/fb_stock_price_2013.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":472,"value":"mydata2012 = {\nvar parse = d3.timeParse(\"%m/%d/%Y\");\nconst data = await d3.csv(\"https://gist.githubusercontent.com/ChelseaZheng/1762a226865c341a5f4ae9f39aaf8b37/raw/d031be50d46db0f482ae764c3200ce9a2f7441bc/2012facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores),\n titles: d.titles\n };\n})\n \n\n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n \n data1.forEach(function(d){\n d.key = parse(d.key);})\nreturn data1;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"stock2012 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n \n const data = await d3.csv(\"https://gist.githubusercontent.com/wanlinxie/5e9b6b4a41b9fa88958bb260fe4a5d31/raw/6f0b68732c466262f9c522b23183ba4908f644ea/fb_stock_price_2012.csv\", (d,i,columns)=>{\n\n d.close = parseFloat(d.close);\n d.date = parse(d.date);\n d.date.setFullYear(2020);\n\n\n return {\n date: d.date,\n close: d.close\n };\n \n\n }) \n return data;}","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3c","stdlib":"1","titling":"auto"}