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

Pick 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:T54a,chart ={ //do some initializations const viz = d3.select(DOM.svg(width, (c_height+l_height))) .style("font", "10px sans-serif") .style("width", "100%") .style("height", "100%") .attr("id","viz") //line chart //add xAxis, yAxis mutable x = d3.scaleTime() .domain(d3.extent(stock2018, d => d.date)) .range([margin.left, width - margin.right]) viz.append("g") .attr("class", "xaxis") .call(xAxis) viz.append("g") .attr("class", "yaxis") .call(yAxis) var line_chart = viz.append("g"); var heat_map = viz.append("g"); line_chart .attr("width", width) .attr("height", l_height) .attr('id', 'linechart') //draw line chart drawline(line_chart,stock2018); //draw sentiment score heat map heat_map .attr("width", width) .attr("height", c_height) .attr('id', 'heatmap') .attr("transform",`translate(30,${0 + cellSize * 1.5})`); drawheat(heat_map,mydata2018); //draw rule // const rule = viz.append("g") // .append("line") // .attr("y1",c_height+l_height-margin.bottom) // .attr("y2",c_height) // .attr('stroke','red') // .attr('stroke-width',1) // .attr("id","rule") // .style("opacity",0); return viz.node() } 35:T7ad,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) .attr("font-weight", "bold") .attr("text-anchor", "end") .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", -5) .attr("y", d => (countDay(d) + 0.5) * cellSize) .attr("dy", "0.31em") .text(formatDay); // plot_rect(year, sen_data); const rect = year.append("g") .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) .attr("fill","#fff") .transition() .attr("fill", d => { if (d.value.score < 0) return neg_color(d.value.score); else return pos_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) .text(formatMonth); }36:T565,function clicked(d){ // //show the circle on the line chart // updaterule(d); //compute intersection //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(cur_stock_data[right]); var cx = mutable x(cur_date); var cy = y(cur_stock_data[right].close); drawCircle(cx,cy); } 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 = y(cur_stock_data[left].close); var y2 = y(cur_stock_data[right].close); var cy = (cx-x1)*(y2-y1)/(x2-x1)+y1; drawCircle(cx,cy); } if (popup != null) removePopup(); //remove before creating createPopup(d); console.log("popup", popup) } 37:T903,html` `38:[] 32:{"title":"","cells":[{"id":1637,"value":"version = {return \"Normal\"}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1639,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"title = html`

FACEBOOK Sentimentality and 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":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', '#ffab00')\n .attr('stroke-width', 3)\n .attr('d', line)\n .attr('fill', 'none') \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":909,"value":"function mouseover(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\",3)\n .style('stroke','rgb(50,50,50)');\n }","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":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":1352,"value":"drawCircle = (cx,cy)=>{\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',5)\n .attr('id','markcircle')\n .attr('fill','#28118e')\n .duration(1000)\n \n var true_y = 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(1000);\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":"function update (sen_data, stock_data)\n{\n //update the heatmap\n var g = d3.select(\"svg\").selectAll(\"g#heatmap\");\n g.remove();\n \n var viz = d3.select(\"svg#viz\");\n var heat_map =viz.append(\"g\");\n heat_map\n .attr(\"width\", width)\n .attr(\"height\", c_height)\n .attr('id', 'heatmap')\n .attr(\"transform\",`translate(30,${0 + cellSize * 1.5})`);\n drawheat(heat_map,sen_data);\n \n //update the line chart\n //update the axis\n mutable x = d3.scaleTime()\n .domain(d3.extent(stock_data, d => d.date))\n .range([margin.left, width - margin.right])\n var newxAxis = g => g\n .attr(\"transform\", `translate(0,${c_height+l_height-margin.bottom})`)\n .call(d3.axisBottom(mutable x).ticks(width / 80).tickSizeOuter(0))\n \n \n viz.selectAll(\"g.xaxis\")\n .call(newxAxis);\n var t = d3.transition()\n .duration(500)\n .ease(d3.easeLinear);\n \n d3\n .select(\".line\")\n .transition(t)\n .attr(\"d\", line(stock_data))\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"updaterule = d=> {\n \n var rule = d3.select(\"svg\").selectAll(\"g\").selectAll(\"line#rule\");\n \n var date = d3.timeDay.round(d.key)\n date = new Date(2020,date.getMonth(),date.getDate());\n rule.transition()\n .attr(\"transform\", `translate(${mutable x(date) + 0.5},0)`)\n .style(\"opacity\",1)\n .duration(1000)\n \n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"function reset_mark() {\n var g = d3.select('svg').selectAll('g#linechart');\n g.select('#markcircle').remove();\n g.select('#closeprice').remove();\n \n // var rule = d3.select(\"svg\").selectAll(\"g\").selectAll(\"line#rule\");\n // rule.transition()\n // .style(\"opacity\",0)\n // .duration(100)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"format_years_data = d => d3.nest()\n .key(d =>d.key.getFullYear())\n .entries(d)\n .reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"cellSize = 18","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"width = 1000","pinned":true,"hidden":false,"mode":"ojs"},{"id":216,"value":"c_height = cellSize * 9","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"l_height = 500","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":"pos_color = d3.scaleSequential(d3.interpolateGreens).domain([0,0.7])","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"neg_color = d3.scaleSequential(d3.interpolateReds).domain([-0.3,0])","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":504,"value":"mutable x = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"y = d3.scaleLinear()\n .domain([0, 210]).nice()\n .range([c_height + l_height - margin.bottom, c_height + margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${c_height+l_height-margin.bottom})`)\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(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\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"line = d3.line()\n .x(d => mutable x(d.date))\n .y(d => y(d.close))","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"popup = { \n \n var tooltip = d3.select(\"body\")\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .style(\"opacity\",0.0);\n \n return tooltip;\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1670,"value":"function getContentInPopup(d) {\n \n var info = generateInfoPane(d.key, d.value.score);\n \n var articles = getClickableLinks(d.value.url);\n \n return info + articles;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"function createPopup(d) {\n \n var stat = getContentInPopup(d);\n \n var popup = d3.select(\"body\")\n .append(\"div\")\n .attr(\"id\", \"tooltip\")\n .style(\"opacity\",0.0)\n .html(stat) \n .style(\"left\", \"20%\")\n .style(\"top\", \"3%\")\n .style(\"opacity\",0.8)\n .append(\"text\")\n .attr(\"id\", \"btn\")\n .text(\"X\")\n .on(\"click\", function(d) { removePopup(); })\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"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":625,"value":"getClickableLink = (title, url) => {\n return \"
\" + title + \"
\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"getClickableLinks = (urls) => { //urls should begin with \"https://\"\n \n var stat = \"

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

\" + title + \"

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

\"\n \n return stat;\n \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":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 for (var i = 0; i < v.length; i++)\n urls.push(v[i].url);\n\n var pair = {\n \"url\": urls,\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":1463,"value":"function generateInfoPane(date, score) {\n var info = \"

\";\n \n return \"

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

\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1472,"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":1475,"value":"function getScoresInInfobox(scores) {\n \n return \"

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

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

+ \"

\" + \"

\" + score +\"

\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1523,"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":621,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":" mydata2017 = {\n var parse = d3.timeParse(\"%m/%d/%y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/MargretWG/382dbd8c7ce0f7c38a1e7fc99ff7031d/raw/517d92e578772f49753cb83908cb40f5a5019e79/2017facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores)\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/MargretWG/c89150ba9c5c4a06c5d99b1d0866b5dd/raw/e2e485e9ad0a111fd016faf4ba1bf2b4aacb608d/2018facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores)\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 // console.log(\"2016\");\n \n var parse = d3.timeParse(\"%m/%d/%Y\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/MargretWG/15a13c952fe47f8014b540c641132c06/raw/db61b7226545b6c27ae440c9eab1c7a3cc754679/2016facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url: d.url,\n score: parseFloat(d.scores)\n };\n})\n \n // console.log(\"d\", data)\n \n const data1 = d3.nest()\n .key(d=>d.date)\n .rollup(function(v) {return myRollup(v);})\n .entries(data);\n \n console.log(\"data1\", data1);\n \n data1.forEach(function(d){\n d.key = parse(d.key);})\n \n // data1.splice(198,1);\n\n return 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/MargretWG/91b8e965c8ea3fcde027793e58e91696/raw/74ce76862fba6fcd2a8bc7e516388d64830a9bd4/2015facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores)\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/MargretWG/9ce983bd1b25fceaa35021bcf3539900/raw/22229a88ae741e0f68015b21242c801e8273e528/2014facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores)\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\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/MargretWG/f1e41bc68213e9a0868dc15a14c6daad/raw/d1c0439289ecb94162c1f642ea7770e0e6dd46fa/2013facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores)\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\");\n const data = await d3.csv(\"https://gist.githubusercontent.com/MargretWG/de41dbb3b73b0b5677c0fb6446af010e/raw/7f1040460a36f1bc0ef30b46e5dc8938017ed6d9/2012facebook_final.csv\",d=> {\n return {\n date: d.dates,\n url:d.url,\n score: parseFloat(d.scores)\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;}","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":"$W38","stdlib":"1","titling":"auto"}