33:Ta11,buttons = { const buttons =html`

Choose a Year:

` 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:T6e2,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 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", width) .attr("height", l_height) .attr('id', 'linechart'); //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", width) .attr("height", l_height) .attr('x',0) .attr('y',c_height+margin.top+heat_margin.top) .attr('id','fakerect') .style('opacity',0) .on("mousemove touchmove", moved) .on("mouseleave", left); //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 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:T5a5,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(); // 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:T48c,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; } //show the panel console.log("before", popup); if (popup != null) removePopup(); //remove before creating createPopup(d, cy); } 38:T5be,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; // console.log('x',xm); // console.log('y',cy); updateReddot(xm,cy); }39:T500,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, width - margin.right]) 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]) //console.log('call update,change x,y axis!') //!!!!!!!!!!!!!!!!!!!!!!! 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:T985,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":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: `${100*i/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', 3)\n .attr('d', line)\n .attr('fill', 'none') ;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"$36","pinned":true,"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":true,"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','red')\n \n var t = d3.select(\"svg\").select('#mouseprice');\n var true_y = mutable y.invert(cy);\n t\n .attr('x',cx+25)\n .attr('y',cy+20)\n .style('opacity',1)\n .text (format_stock(true_y));\n}","pinned":true,"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 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(format_stock(true_y))\n .style('opacity',0)\n .transition()\n .style('opacity',1)\n .duration(200);\n}","pinned":true,"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":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":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":true,"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, width - margin.right])","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":true,"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":true,"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 var tooltip = d3.select(\"body\")\n .append(\"div\")\n .style(\"opacity\",0.0);\n \n return tooltip;\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 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":1594,"value":"getClickableLink = (title, url) => {\n return \"
\" + title + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1597,"value":"getClickableLinks = (urls) => { //urls should begin with \"https://\"\n \n const max = 3;\n \n var stat = \"

\";\n \n var titles = extractTitles(urls);\n \n //urls.length === titles.length\n // return \"

\" + title + \"

\";\n \n var num = urls.length;\n \n if (num > max)\n num = max;\n \n for (var i = 0; i < num; i++)\n stat += getClickableLink(titles[i], urls[i]);\n \n stat += \"

\"\n \n return stat;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"function getContentInPopup(d, cy) {\n var true_y = mutable y.invert(cy);\n var info = generateInfoPane(d.key, d.value.score,true_y);\n \n var articles = getClickableTitles(d.value.title, d.value.url);\n \n // console.log(\"articles\", articles);\n \n return info + articles;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1590,"value":"function createPopup(d,cy) {\n \n var stat = getContentInPopup(d,cy);\n \n d3.select(\"body\")\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .html(stat) \n .append(\"text\")\n .attr(\"id\", \"btn\")\n .text(\"X\")\n .on(\"click\", function(d) { removePopup(); })\n \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 \n console.log(\"remove!\", parent);\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"function extractTitle(url)\n{\n const prefixlen = 35;\n var rawTitle = url.substr(prefixlen - 1, url.length - prefixlen);\n \n var strs = rawTitle.split(\"-\");\n \n var title = \"\";\n \n if (strs.length < 1)\n return title;\n \n for (var i = 0; i < strs.length; i++)\n {\n //Capitalize\n title += strs[i].charAt(0).toUpperCase() + strs[i].substr(1);;\n \n if (i < strs.length - 1)\n title += \" \";\n }\n\n return title;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1026,"value":"function extractTitles(urls)\n{\n var titles = [];\n \n for (var i = 0; i < urls.length; i++)\n titles.push(extractTitle(urls[i]));\n \n return titles;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1599,"value":"function generateInfoPane(date, score, price) {\n \n return \"

\" + getDateInInfobox(date) + \n getScoresInInfobox(score, price) + \"

\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1601,"value":"function getDateInInfobox(date) {\n var yConverter = d3.timeFormat(\"%Y\");\n // var mConverter = d3.time.format(\"%B\");\n var dConverter = d3.timeFormat(\"%e\");\n var converter = d3.timeFormat(\"%b %e %Y\")\n // var dateStr = \"

\" + mConverter(date) \n // + \"

\" + dConverter(date) \n // + \"

\" + yConverter(date) + \"

\";\n \n // return \"

\" + formatMonth(date) \n // + \"

\" + dConverter(date) \n // + \"

\" + yConverter(date) + \"

\";\n return \"

\" + converter(date) + \"

\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"function getScoresInInfobox(score, price) {\n \n return \"

\" \n // + getScoreWrapper(\"POSITIVE\", scores) \n + getScoreWrapper(\"STOCK\", price) \n + getScoreWrapper(\"SENTIMENT\", score)\n + \"

\";\n \n // return \"

+ \"

\" + \"

\" + score +\"

\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1605,"value":"function getScoreWrapper(topic, score) {\n var sConverter = d3.format(\".3f\");\n \n return \"

\" + topic + \"

\" \n + \"

\" + sConverter(score) + \"

\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"async function processData(myUrl)\n{\n var parse = d3.timeParse(\"%m/%d/%y\");\n \n // const rawdata = await d3.csv(url,\n // d => { return { date: d.dates,\n // url: d.url,\n // score: parseFloat(d.scores);} });\n \n let promise = d3.csv(myUrl, d=> {\n return {\n date: d.dates,\n url: d.url,\n score: parseFloat(d.scores)\n };\n });\n \n let rawdata = await promise;\n \n console.log(\"rawdata\", rawdata);\n\n const data = d3.nest()\n .key(d =>d.date )\n .rollup(function(v) { return myRollup(v); })\n .entries(rawdata);\n \n console.log(\"data\", data);\n\n data.forEach(function(d){\n d.key = parse(d.key);})\n\n return data;\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"}