2c:null 2d:["$","title",null,{"children":"Untitled | Wanlin Xie | Observable"}] 32: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 } 33: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() } 34: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); }35: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)); } }36: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); } 37: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); }38: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)) } 39:T7dc,html` `3a:[] 30:{"id":"6ef34c3efe7b240b","slug":"untitled/5","title":"","thumbnail":"604d8ca1a6db4ed8e4cf4f8bff15886f015364033d63c062afd6dd1fa09f21ac","access_level":"public","create_time":"$D2018-12-02T19:09:33.597Z","update_time":"$D2018-12-03T21:23:30.411Z","view_time":null,"first_public_time":"$D2018-12-02T19:14:15.642Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"1a3e221c67368a81","login":"wanlinxie","name":"Wanlin Xie","avatar_url":"https://avatars-next.observableusercontent.com/467b7f1f22ab814deffc36fd99610b4ae9b3b5b0d644241752eb650b306cce5e","tier":"starter_2024"},"version":2244,"publish_version":2244,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc0e5de77e41b67f","login":"wanlinxie","name":"Wanlin Xie","avatar_url":"https://avatars-next.observableusercontent.com/467b7f1f22ab814deffc36fd99610b4ae9b3b5b0d644241752eb650b306cce5e","tier":null}],"members":[{"type":"individual","id":"dc0e5de77e41b67f","login":"wanlinxie","name":"Wanlin Xie","avatar_url":"https://avatars-next.observableusercontent.com/467b7f1f22ab814deffc36fd99610b4ae9b3b5b0d644241752eb650b306cce5e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"","cells":[{"id":0,"value":"title = html`

Analyzing Facebook Sentiment in TechCrunch with Stock Price in: 2018

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1834,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"cellSize = 18","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"c_height = cellSize 9","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2027,"value":"l_width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"l_height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1698,"value":"legend_width = 150","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"legend_height = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"timeWeek = d3.timeMonday","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"countDay = d => (d.getDay() + 6) % 7","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1395,"value":"format_stock = d3.format(\".5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"format = d3.format(\"+.2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"formatDate = d3.timeFormat(\"%x\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"formatDay = d => ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"formatMonth = d3.timeFormat(\"%b\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"formatDateLine = d3.timeFormat(\"%d %b\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"h_color = d3.scaleSequential(d3.interpolateRdYlGn).domain([-0.3,0.7])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"heat_margin=({top: 20, right: 30, bottom: 10, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"getClickableTitle = (title, url) => {\n //console.log(\"
\" + title + \"
\");\n return \"
\" + title + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"function generateInfoPane(date, score, price) {\n \n return \"
\" + getScoresInInfobox(score, price) + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":731,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 31:"$30:body"