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: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); }36: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)); } }37: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); } 38: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); }39: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)) } 3a:T7dc,html` `3b:[] 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":true,"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":"$35","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":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"$38","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 .transition()\n .attr('cx',cx)\n .attr('cy',cy)\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":"$39","pinned":true,"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":"$3a","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":"$W3b","stdlib":"1","titling":"auto"}