2b:null 2c:["$","title",null,{"children":"Does news have an impact on BTC price? | GnimOay | Observable"}] 31:T470,md` # Description This is a visualization assignment on news about Bitcoin for the course of _Information Visualization_ at University Paris-Sud. The objective is to find news's influence over BTC price In particular, we focus on these aspects: - The influence of the news amount to the Bitcoin price - The most influencing keywords (both negative and positive) affecting the Bitcoin price - What kind of time frame would the influence last - With these information, it will not only benefit researchers on analysis but also help us "predict" BTC price when faced with future news For now, the current visualization will help users understand how news amount relates to the Bitcoin price and a Word Cloud from a period before chosen date. For the next step, we are visualizing all keywords in the news header with different color or tint. For example, the words relatively more positive to the Bitcoin price can be yellow and these negative words to the Bitcoin price can be blue. The final visualization will be more interactive when the performance issues were solved. _More details are placed __after__ Visualization._ `32:T9d9,viewof hist = { const height = 150; const context = DOM.context2d(width, height); const canvas = context.canvas; canvas.value = (tRange[1] - tRange[0]) / 2 + tRange[0]; // const buffer = Object.assign(canvas, {}); const step = pa_newsCount_l.length / width; let year = 0; let lastProg = 0; let yearPos = 10; let clickedPos = null; // let rectW = ((newsValidPeriod / 365) * width) / (tRange[1] - tRange[0]); function draw() { context.clearRect(0, 0, width, height); context.beginPath(); // context.moveTo(40, 56); // context.lineTo(65, 56); // context.fillText('Price:', 10, 60); context.moveTo(0, height - pa_newsCount_l[0].price); for (let i = 0; i < width; ++i) { const t = i / width; const r = Math.floor(255 * Math.sin(Math.PI * (t + 0 / 3)) ** 2); const g = Math.floor(255 * Math.sin(Math.PI * (t + 1 / 3)) ** 2); const b = Math.floor(255 * Math.sin(Math.PI * (t + 2 / 3)) ** 2); const index = Math.min(i * step, pa_newsCount_l.length - 1); const data = pa_newsCount_l[index | 0]; const h = data.count; // context.fillStyle = `rgba(${r},${g},${b},0.8)`; context.fillStyle = "#88D1F1"; context.fillRect(i, height - h, 1, height); context.strokeStyle = "#333"; context.lineTo(i, height - Math.sqrt(price[data.key].price)); if (year != data.year) { if (i - lastProg < 30) yearPos += 15; year = data.year; // context.scale(-1, 1); context.fillStyle = "#f13133"; context.fillText(year, i, yearPos); context.fillStyle = "#88D1F1"; // context.scale(1, 1); lastProg = i; } } context.stroke(); // if (clickedPos) { // context.fillStyle = "#333"; // context.ellipse(clickedPos.x, clickedPos.y, 10, 10); // } // context.fillStyle = '#3332'; // context.fillRect(histClickLayerX - 2, 0, 4, height); // requestAnimationFrame(draw); } canvas.ontouchend = canvas.onmouseup = (evt) => { evt.preventDefault(); canvas.value = (evt.layerX / width) * (tRange[1] - tRange[0]) + tRange[0]; canvas.dispatchEvent(new CustomEvent("input")); //通知value更新, 没太弄懂机制 clickedPos = { x: evt.layerX, y: evt.layerY }; }; // canvas.onmousedown = canvas.ontouchstart = evt => // (mutable histClickLayerX = evt.layerX); // canvas.onmousemove = evt => { // mouseX = evt.layerX; // }; canvas.className = "rainbow-canvas"; draw(); return canvas; }33:T8d3,chart = { //// //////// //////////// //// //////// //////////// //////////// //// // Dynamic updating for words?? //////// //////// cloudSvg.selectAll("*").remove(); cloudSvg.style("background", "black").style("border-radius", "7px"); const scaler = cloudKwdAmount / recentKwdsWeight.length; const cloud = d3 .cloud() .size([width, cloudHeight]) .words(recentKwdsWeight) .padding(padding) .rotate(-5) .font(fontFamily) .fontSize((d) => Math.sqrt(Math.sqrt(d.value)) * scaler * fontScale) .on("word", ({ size, x, y, rotate, text }) => { cloudSvg .append("text") .attr("font-size", size) .attr("transform", `translate(${x},${y}) rotate(${rotate})`) .attr("cursor", "pointer") .attr( "fill", d3 .scaleLinear() .domain([0, 0.5, 1]) .range([PALETTE.priceDown, "white", PALETTE.priceUp]) .clamp(true)(recentWrdWeightMap[text]) ) .on("mouseup", (d, i, a) => { mutable selectedWord = a[0].innerHTML; }) .on("mouseover", function (d, i, a) { d3.select(this).transition().duration("80").attr("opacity", ".3"); tooltipCloud.value .style("display", "block") .transition() .duration(50) .style("opacity", 1); const kwdObj = keywords[a[0].innerHTML]; tooltipCloud.value .html( `

${a[0].innerHTML} was mentioned in ${kwdObj.newsIds.size} news

Viewed by ${kwdObj.views} times

Received ${kwdObj.replies} replies

` ) .style("left", d3.event.clientX + 10 + "px") .style("top", d3.event.clientY + 5 + "px"); }) .on("mouseout", function (d, i) { d3.select(this).transition().duration("500").attr("opacity", "1"); tooltipCloud.value .style("display", "none") .transition() .duration("50") .style("opacity", 0); }) .text(text); }); cloud.start(); invalidation.then(() => cloud.stop()); return cloudSvg.node(); }34:T4a7,html`${kwdNews.slice(0, topNewsAmount).map((news) => { const priceChange = parseFloat(news.change.splice(news.change.length - 1, 1)); return `

${news.subject}

from: ${news.user} • Views: ${news.views} • Replies: ${news.replies}

\$${news.price} ${news.change}

${news.id .splice(8, 1) .splice(6, 0, "/") .splice(4, 0, "/")}

`; })}`35:T57a,viewof keywords = { const kwds = {}; const dates = await Object.keys(newsByDate); // all dates with news dates.map(date => { const dayNews = newsByDate[date]; // all news on that day dayNews.map(news => { news.kwds.map(kwd => { if (!kwds.hasOwnProperty(kwd)) { const ids = new Set(); ids.add(news.id); kwds[kwd] = { count: 1, newsIds: ids, presenceDates: [Date.parse(fixDateStr(news.id.slice(0, 8)))], replies: 0, views: 0 }; } else { kwds[kwd].count++; kwds[kwd].newsIds.add(news.id); kwds[kwd].presenceDates.push( Date.parse(fixDateStr(news.id.slice(0, 8))) ); } // accumulate the amount of replies and views of the news to which the keyword belongs kwds[kwd].replies += isNaN(parseInt(news.replies)) ? 0 : parseInt(news.replies); kwds[kwd].views += isNaN(parseInt(news.views)) ? 0 : parseInt(news.views); }); }); }); return VV( '2. Generate the collection of all __keywords__\ \n- with id to the keyword\'s source news\ \n- with dates list of its presence\ \n- with the score of that word\ \n- Count __reply__ and __view__ amount for each kwd\ \n- Provide the data in list format as well: __keywords_l__', kwds ); }36:T4c1,stopwords = new Set( "i,me,my,myself,we,us,our,ours,ourselves,you,your,yours,yourself,yourselves,he,him,his,himself,she,her,hers,herself,it,its,itself,they,them,their,theirs,themselves,what,which,who,whom,whose,this,that,these,those,am,is,are,was,were,be,been,being,have,has,had,having,do,does,did,doing,will,would,should,can,could,ought,i'm,you're,he's,she's,it's,we're,they're,i've,you've,we've,they've,i'd,you'd,he'd,she'd,we'd,they'd,i'll,you'll,he'll,she'll,we'll,they'll,isn't,aren't,wasn't,weren't,hasn't,haven't,hadn't,doesn't,don't,didn't,won't,wouldn't,shan't,shouldn't,can't,cannot,couldn't,mustn't,let's,that's,who's,what's,here's,there's,when's,where's,why's,how's,a,an,the,and,but,if,or,because,as,until,while,of,at,by,for,with,about,against,between,into,through,during,before,after,above,below,to,from,up,upon,down,in,out,on,off,over,under,again,further,then,once,here,there,when,where,why,how,all,any,both,each,few,more,most,other,some,such,no,nor,not,only,own,same,so,than,too,very,say,says,said,shall,cd,com,new,ãƒâã‚â²ãƒâã¢â‚¬å¡ãƒâ¢ã¢â€šâ?,&,use,app,$1,s,sec,mt,u,week,want,wants,open,get,com|,co,|,way,day,set,today,btc,bitcoin,$,j,ceo,got".split( "," ) )37:T48f,// example: domain='mydomain' keyword='mykwd' HeartCounter = { // 可能要学会些 viewof api才能实现 export return (domain, keyword, preStr = 'Liked by ', postStr = ' people.') => { const ctx = DOM.context2d(150, 150); ctx.beginPath(); ctx.moveTo(75, 40); ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); ctx.fillStyle = '#f75c5cff'; ctx.fill(); ctx.canvas.setAttribute('class', 'canvas-heart'); ctx.canvas.setAttribute( 'style', ` transform:scale(${heartScale}) ` ); ctx.canvas.onclick = async function(evt) { if (heartAnim.isLiked) return; mutable heartCount = (await (await fetch( 'https://api.countapi.xyz/hit/' + domain + '/' + keyword )).json()).value; heartAnim.hitTimeStamp = Date.now(); heartAnim.isAnimating = true; }; return md` ## ${preStr + heartCount + postStr}

${ctx.canvas}

`; }; }38:[{"id":"187759c95216f1ec8d16ffd58da14870e3d061ad0410726e2a2a5711d7120bc7103043f0daa9d5c5bcd2e639177fcc7622e57e807ed12d7bc587f741f9ea7c1c","href":"https://static.observableusercontent.com/files/187759c95216f1ec8d16ffd58da14870e3d061ad0410726e2a2a5711d7120bc7103043f0daa9d5c5bcd2e639177fcc7622e57e807ed12d7bc587f741f9ea7c1c","name":"image@1.png","type":"image/png","lastModified":1575658223666.159,"size":1158163},{"id":"250c754493b64dface02074484022779f14c95ff79791bd6b2faf431698d1aae3d8aeef8e7c065be021e2c5e1cb3b554a132f6dbe6696a7f3a428636e77a1aa8","href":"https://static.observableusercontent.com/files/250c754493b64dface02074484022779f14c95ff79791bd6b2faf431698d1aae3d8aeef8e7c065be021e2c5e1cb3b554a132f6dbe6696a7f3a428636e77a1aa8","name":"image.png","type":"image/png","lastModified":1575654983374.441,"size":355286},{"id":"66191e4aaf3ac563f5a51671cf46640a7d134ee39ea3b6b8f269a4468f5024e013ad96ee875cf89cd65293ee8dc130cbda2e969e749ae3eac6e3bbc680ae0281","href":"https://static.observableusercontent.com/files/66191e4aaf3ac563f5a51671cf46640a7d134ee39ea3b6b8f269a4468f5024e013ad96ee875cf89cd65293ee8dc130cbda2e969e749ae3eac6e3bbc680ae0281","name":"news_count.json","type":"application/json","lastModified":1575734333556.124,"size":43679},{"id":"d70e945fa050e9d4d2f3df97e648d2b26aa5398fb5f1a500b226abb1d662731f3fed1bada33a436cfe9ba72fc83845c245b73f54310742645c6f60711465517f","href":"https://static.observableusercontent.com/files/d70e945fa050e9d4d2f3df97e648d2b26aa5398fb5f1a500b226abb1d662731f3fed1bada33a436cfe9ba72fc83845c245b73f54310742645c6f60711465517f","name":"news_by_date.json","type":"application/json","lastModified":1575734275157.521,"size":8388119},{"id":"bd0cd5999fe3edf944bb47847e8cb179a6918ae8878e26e7ec625f5cfca93bd440584cb785df9f5b55d93a0fff994fffe28d5b78e651fb76bc776c14cd7a4891","href":"https://static.observableusercontent.com/files/bd0cd5999fe3edf944bb47847e8cb179a6918ae8878e26e7ec625f5cfca93bd440584cb785df9f5b55d93a0fff994fffe28d5b78e651fb76bc776c14cd7a4891","name":"price.json","type":"application/json","lastModified":1575750445361.275,"size":485672},{"id":"f1b0e4d635e5a1e3d9a03135b95921df49aef5944713174a85dd0dd207d9df2a4eba12d947790bd9a9dc6b5769df71c74f81192ac32489f87979bc5bb67bae69","href":"https://static.observableusercontent.com/files/f1b0e4d635e5a1e3d9a03135b95921df49aef5944713174a85dd0dd207d9df2a4eba12d947790bd9a9dc6b5769df71c74f81192ac32489f87979bc5bb67bae69","name":"image@2.png","type":"image/png","lastModified":1576763731290.89,"size":156063}] 2f:{"id":"faff48ff2e6fc1c6","slug":"bitcoin-viz","title":"Does news have an impact on BTC price?","thumbnail":"ebbf7fe51d6f54a143cfce313b1500dc81ff9020b5434526c28e3c910a53123b","access_level":"public","create_time":"$D2019-12-06T14:56:50.600Z","update_time":"$D2022-07-07T10:35:52.553Z","view_time":null,"first_public_time":"$D2019-12-06T14:57:14.977Z","fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":2813,"publish_version":2813,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[{"id":"d99a756e2653b1c7","reply_to_id":null,"content":"Why is the value of the BTC inverted here?\n\nIt be nice to see the current data until end of 2020.","create_time":"$D2021-01-14T14:28:40.239Z","update_time":"$D2021-01-14T14:29:12.377Z","resolved":true,"user":{"type":"individual","id":"bc1a500ffc26e982","login":"domdomhaas","name":"Dominik Haas","avatar_url":"https://avatars-next.observableusercontent.com/c15b32c72c2339b879c55ab6440be3d5001fb27a749eded6b6e8b4f240687b1a","tier":null}},{"id":"f6ddf93c0a1674c4","reply_to_id":"d99a756e2653b1c7","content":"the inversion was a deliberate mistake, corrected.\nmight update the BTC price data recently.","create_time":"$D2022-06-22T10:44:51.465Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Does news have an impact on BTC price?","cells":[{"id":0,"value":"md`# Does news have an impact on BTC price? `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1094,"value":"html`

Data loading takes around 15 seconds

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"html` ${headImg} `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2753,"value":"md`___Link to this project:___ bit.ly/3a7Ofjl`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1416,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"md`---\n# Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"md`**News amount over time, disaplays alongside BTC price** \nPrice: __black__ \nNews Amount: blue (_News amount might be regarded as attention_)\n\n__1. 👇 Choose the time frame you wanna explore__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":634,"value":"viewof tRange = rangeSlider({\n min: 2010,\n max: 2020,\n // Note that values must be specified as array of length 2.\n value: this\n ? this.value[1] !== this.value[0]\n ? this.value\n : [this.value[0], this.value[0] + 1]\n : [2016, 2019],\n // Custom slider CSS, replaces all styles.\n theme: RSThemes.Retro,\n display: v =>\n v.map(v =>\n yearWithProg2Date(v)\n .toISOString()\n .slice(0, 10)\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1645,"value":"md`__2. 👇Click on the histogram to select a date__, Current Selected Date is: ${theDate}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1939,"value":"md`The keywords from news that influenced the price for that date will form a word cloud. \n__3. 👇Make a guess! The news would have an influence for how many days?__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1239,"value":"viewof newsValidPeriod = slider({\n // title: 'Make a guess! The news would have an influence for how many days?',\n desc: 'TIP: Usually, a news would be obsolete 3 days after..',\n min: 1,\n max: 14,\n step: 1,\n value: 3,\n // highlight: {\n // lower: 1,\n // upper: 3,\n // colors: {\n // normal: '#EDEDED',\n // inactive: '#B7E5C6',\n // active: PALETTE.interactiveNum\n // },\n // preventUpdate: false\n // },\n // theme: 'default-round',\n background: {\n type: 'double',\n colors: [PALETTE.mainTone, 'white']\n }\n // oninput: objs => {\n // objs.output.textContent = 15 - objs.value;\n // }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2068,"value":"md`__4. 👇How do we weigh a word__? \n_Count:_ times the keyword was mentioned \n_Views:_ times the news containing the keyword was viewed \n_Replies:_ .... was replied`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2211,"value":"viewof kwdBy = select({\n // title: 'Weight the keywords by..',\n options: ['replies', 'views', 'count'],\n selected: 'count',\n selectStyle: {\n width: '145px',\n background: PALETTE.mainTone,\n color: '#000',\n border: `0.5px solid ${'#333'}`\n },\n // divStyle: { display: 'inline-block' },\n caretStyle: {\n fill: '#333'\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"{\n const tmpPrice = price[theDate.splice(7, 1, '').splice(4, 1, '')];\n // return tmpPrice;\n const priceClr = tmpPrice.change >= 0 ? PALETTE.priceUp : PALETTE.priceDown;\n return md`__Keywords from the past ${newsValidPeriod} ${\n newsValidPeriod > 1 ? 'days' : 'day'\n } of ${theDate}__ were weighed by __${kwdBy}__. The BTC price on that day is ${'$' +\n tmpPrice.price}, which ${\n tmpPrice.change >= 0 ? 'rised' : 'declined'\n } by ${tmpPrice.change + '%'} compared to one day before`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2537,"value":"md`__5. 👇Click on the keyword that looks interesting.__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1381,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2523,"value":"md`#### 👇Top ${topNewsAmount} news related to ${selectedWord} \nCheck them out if it attracts your eye!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2389,"value":"viewof topNewsAmount = slider({\n min: 1,\n max: 50,\n value: 15,\n step: 1,\n background: {\n type: 'double',\n colors: [PALETTE.mainTone, 'white']\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2387,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2498,"value":"HeartCounter('gnimoay.com', 'btc-viz', 'This project was liked by ', ' people.')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"md`---\n# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"md`> ## TODO\n- __Time period filter__ \nDue to performance issue, it's not fully implemented yet. Maybe further prepare data in advance to avoid long time queries at runtime\n- __Interactively set offset between news and BTC price.__ \nThe same reason as above\n- __Merge some of the elements__ \nFor now, they are fragmented. Some can be merged into one place.\n- __Further refined word cloud that allows interactivity__ \nClick keyword to see related news and display that news in a new chart which provides \"attitude\" according to the keywords inside\n- __Text area to interactively remove keywords while inspecting__ \nLet the user determine which keyword is not relevant\n- https://simplestatistics.org/docs/ 统计学分析\n- Use D3 to refactor hist, [example](https://observablehq.com/@yurivish/peak-detection?collection=@observablehq/libraries)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"md`## Inspirations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"exp2 = FileAttachment(\"image.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"md`[tunnel](https://codepen.io/snorkltv/pen/d351c553d86981ff6dcce28fa823ffaa)\n\n\n- Use circles representing news amount, and show the words cloud in the circles.\n- Use the __reply amount__\n- Use the __views amount__\n- show all(or top) titles linked to a KWD\n- also provide a link to that news using Google/ or the 1st search result\n- __Visualize the keywords in a news title, tint the keyword according to BTC price change after news is out.(the period of 1/2/3 weeks after the release of news?__\n - Let the user use slider 设置计算news title性质时的统计区间\n - 根据以上统计情况给相应news title定性\n - 根据所有news的统计结果, BTC price up/down 的比例决定 keyword的 tint\n - 使用以上tint依据, 对wordcloud中的词tint\n - 同样地, 也对每个news title中的词tint\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"md`## Examples\n- [Hertzsprung–Russell Diagram](https://observablehq.com/@mbostock/hertzsprung-russell-diagram) \n- [Inequality in American Cities](https://observablehq.com/@mbostock/inequality-in-american-cities)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"md`## Data Resource\n[BTC reward halving info](https://www.binance.vision/halving) \n[halving 2](https://www.bitcoinblockhalf.com/)\n## Guidelines\n__Color Template__ ColorBrewer\n${await FileAttachment(\n \"image@2.png\"\n).url()} \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":63,"value":"md`## Misc`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"md`### Load Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"newsCount_raw = {\n const f = await FileAttachment(\"news_count.json\").json();\n return Object.keys(f).reduce((acc, cur) => {\n return { ...acc, [formatDateStr(cur)]: f[cur] };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"price_raw = {\n const f = await FileAttachment(\"price.json\").json();\n return Object.keys(f).reduce((acc, cur) => {\n return { ...acc, [formatDateStr(cur)]: f[cur] };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"newsByDate = {\n const f = await FileAttachment(\"news_by_date.json\").json();\n return Object.keys(f).reduce((acc, cur) => {\n return { ...acc, [formatDateStr(cur)]: f[cur] };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"md`### Process Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"price = Object.keys(price_raw).reduce((obj, k) => {\n const date = parseDateStr(k);\n const data = price_raw[k];\n obj[k] = {\n price: parseFloat(rmComma(data.price)),\n open: parseFloat(rmComma(data.open)),\n high: parseFloat(rmComma(data.high)),\n low: parseFloat(rmComma(data.low)),\n vol: (parseFloat(rmComma(data.vol)) * 1000) | 0,\n change: parseFloat(rmComma(data.change)), //%\n year: date.year,\n month: date.month,\n day: date.day\n };\n return obj;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":425,"value":"price_l = {\n const l = [];\n for (const k of Object.keys(price)) {\n l.push({ ...price[k], key: k });\n }\n return l;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":280,"value":"newsCount = Object.keys(newsCount_raw).reduce((obj, k) => {\n const dates = parseDateStr(k);\n obj[k] = {\n count: newsCount_raw[k],\n year: dates.year,\n day: dates.day,\n month: dates.month\n };\n return obj;\n}, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"newsCount_l = {\n const l = [];\n for (const k of Object.keys(newsCount)) {\n l.push({\n ...newsCount[k],\n key: k\n });\n }\n return l;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"newsCount_s = {\n return function* gen() {\n for (let i = 0; i < newsCount_l.length; i++) {\n yield newsCount_l[i];\n }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":734,"value":"{\n const dates = Object.keys(newsByDate); // all dates with news\n const nbid = {};\n dates.map(date => {\n const preId = parseDateStr(date);\n for (const [i, news] of newsByDate[date].entries()) {\n news.kwds = extractWords(news.subject);\n news.id = date + i;\n nbid[news.id] = news;\n }\n });\n mutable newsById = nbid;\n return PROCEDURE(\n '1. Extract keywords in news title and merged into obj __newsByDate__\\\n\\n- Give each news an id\\\n\\n- store news in a list: __newsById__'\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2361,"value":"mutable newsById = {\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2052,"value":"keywords","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1549,"value":"keywords_l = Object.entries(keywords).map(([k, v]) => {\n return { name: k, ...v };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"md`---\n#### Price & Amount`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1990,"value":"mutable histClickLayerX = 336","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"pa_price_l = price_l.filter(obj =>\n inRange(yearProgress(obj.key) + parseFloat(obj.key.substring(0, 4)), tRange)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1170,"value":"pa_newsCount_l = newsCount_l.filter(obj =>\n inRange(yearProgress(obj.key) + parseFloat(obj.key.substring(0, 4)), tRange)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":686,"value":"md`---\n#### Word Cloud`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1392,"value":"viewof kwdWeight_l = {\n const a = keywords_l\n .map(kwd => {\n // 权重算法需要设计一下, 或者interactively自定义??\n return {\n text: kwd.name,\n value: Math.sqrt(kwd[kwdBy])\n };\n })\n .sort((a, b) => b.value - a.value);\n return VV(\n `1. Calc keyword\\'s weight according to user\\'s choice: ${kwdBy}, __sorted__ and stored into: __kwdWeight_l__ `,\n a\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2037,"value":"kwdWeight_l","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1569,"value":"viewof recentKwdsWeight = VV(\n `2. __recentKwdsWeight__: Keywords in the past ${newsValidPeriod} days weighted by ${kwdBy}`,\n kwdWeight_l\n .filter(k =>\n keywords[k.text].presenceDates.find(\n date =>\n date < theDate_n && // before the date\n Math.abs(date - theDate_n) <= newsValidPeriod * 24 * 60 * 60 * 1000\n )\n )\n .slice(0, cloudKwdAmount)\n .map(kwd => {\n let accScore = 0;\n const tmpL = Array.from(keywords[kwd.text].newsIds);\n tmpL.map(id => {\n accScore += parseFloat(newsById[id].change.slice(0, -1));\n });\n const avgScore = (accScore / tmpL.length + 100) / 200;\n return {\n ...kwd,\n clrScore: d3.interpolate(PALETTE.priceDown, PALETTE.priceUp)(avgScore),\n avgScore: (avgScore - 0.5) * 12 + 0.5\n };\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2682,"value":"recentKwdsWeight","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2635,"value":"mutable recentWrdWeightMap = {\n return recentKwdsWeight.reduce((acc, cur) => {\n return { ...acc, [cur.text]: cur.avgScore };\n }, {});\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2342,"value":"mutable selectedWord=''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1290,"value":"theDate = new Date(theDate_n).toISOString().slice(0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1561,"value":"theDate_n = Date.parse(Math.floor(hist).toString() + '-01-01') +\n (hist % 1) * SECONDS_A_YEAR * 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"cloudKwdAmount = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"fontScale = 11","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"fontFamily = 'sans-serif'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":720,"value":"cloudHeight=600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"padding = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":658,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2082,"value":"stopSubStr = 'ã,ã,ƒ,â,'.split(',')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2493,"value":"md`#### News`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2353,"value":"mutable kwdNews = {\n // news by keyword\n let nbKwd = keywords.hasOwnProperty(selectedWord)\n ? Array.from(keywords[selectedWord].newsIds)\n : [];\n let accScore = 0;\n nbKwd.map(id => {\n accScore += parseFloat(newsById[id].change.slice(0, -1));\n });\n mutable kwdScore[selectedWord] = accScore / nbKwd.length;\n return nbKwd\n .map(id => {\n const tmp = newsById[id];\n const idx = tmp.subject.indexOf('?');\n // if (idx > 10) tmp.subject = tmp.subject.slice(idx);\n return {\n ...tmp,\n subject: tmp.subject.replace(\n /[ÃƒÂÃ‚Â²ÃƒÂÃ¢â‚¬Å¡Ãƒâ€˜Ã…Â¡…²ÃƒÂÃ¢â‚¬Å¡Ãƒâ€˜Ã…Â¡]/g,\n \"\"\n ),\n replies: isNaN(parseInt(newsById[id].replies))\n ? 0\n : parseInt(newsById[id].replies)\n };\n })\n .sort((a, b) => b.replies - a.replies);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2574,"value":"mutable selectedWordClr = d3.interpolate(PALETTE.priceDown, PALETTE.priceUp)(\n mutable kwdScore[selectedWord] / 100\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2559,"value":"mutable kwdScore = {\n return {};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2267,"value":"md`## Other operations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2259,"value":"tooltipCloud = VV(\n 'prepare tooltip for cloud',\n d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip-cloud\")\n .style(\"opacity\", 0)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2347,"value":"cloudSvg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, cloudHeight])\n .attr(\"font-family\", fontFamily)\n .attr(\"text-anchor\", \"middle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2304,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"{\n if (!String.prototype.splice) {\n /**\n * {JSDoc}\n *\n * The splice() method changes the content of a string by removing a range of\n * characters and/or adding new characters.\n *\n * @this {String}\n * @param {number} start Index at which to start changing the string.\n * @param {number} delCount An integer indicating the number of old chars to remove.\n * @param {string} newSubStr The String that is spliced in.\n * @return {string} A new string with the spliced substring.\n */\n String.prototype.splice = function(start, delCount, newSubStr) {\n newSubStr = newSubStr==undefined? '':newSubStr;\n return (\n this.slice(0, start) +\n newSubStr +\n this.slice(start + Math.abs(delCount))\n );\n };\n }\n return 'Insert splice function to String Type';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1835,"value":"PALETTE = {\n return {\n mainTone: '#3b5fc0',\n interactiveNum: '#1e9bcb',\n priceUp: '#38cc70',\n priceDown: '#cc3879'\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1829,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1763,"value":"function download(content, fileName, contentType) {\n var a = document.createElement(\"a\");\n var file = new Blob([content], {type: contentType});\n a.href = URL.createObjectURL(file);\n a.download = fileName;\n a.click();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"SECONDS_A_YEAR = 60 * 60 * 24 * 365","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1182,"value":"// datestr: yyyymmdd\nfunction yearProgress(datestr) {\n const start = Date.parse(datestr.substring(0, 4) + '-01-01');\n return (Date.parse(fixDateStr(datestr)) - start) / (1000 * SECONDS_A_YEAR);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1893,"value":"// date format: 2019.5 === 2019, July 02 (mid year\nfunction yearWithProg2Date(yearProg){\n const prog=yearProg%1\n const start = Date.parse((yearProg-prog)+'-01-01');\n return new Date(1000*SECONDS_A_YEAR*prog+start)\n // return (Date.parse(fixDateStr(datestr)) - start) / (1000 * SECONDS_A_YEAR);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1895,"value":"yearWithProg2Date(2015.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1538,"value":"// str: yyyymmdd -> yyyy-mm-dd\nfunction fixDateStr(str) {\n return str.splice(6, 0, '-').splice(4, 0, '-');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":674,"value":"function extractWords(source) {\n return source\n .split(/[\\s,.]+/g)\n .map(w => w.replace(/^[“‘\"\\-—()\\[\\]{}]+/g, \"\"))\n .map(w => w.replace(/[;:.!?()\\[\\]{},\"'’”\\-—]+$/g, \"\"))\n .map(w => w.replace(/['’]s$/g, \"\"))\n .map(w => w.replace(/['’\"]/g, \"\"))\n .map(w =>\n w.replace(\n /[ÃƒÂÃ‚Â²ÃƒÂÃ¢â‚¬Å¡Ãƒâ€˜Ã…Â¡…²ÃƒÂÃ¢â‚¬Å¡Ãƒâ€˜Ã…Â¡|µš…¾œµËœ†™µ¾œµšµ¹šš‹“œ´¾œš¹µš¦šµš‹]/g,\n \"\"\n )\n )\n\n .map(w => w.substring(0, 30))\n .map(w => w.toLowerCase())\n .filter(\n w =>\n w &&\n !batchTestSubstrInStr(stopSubStr, w) &&\n !stopwords.has(w) &&\n isNaN(parseFloat(w))\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2087,"value":"function batchTestSubstrInStr(substrList, str) {\n for (const substr of substrList) if (str.includes(substr)) return true;\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":904,"value":"function inRange(num, range) {\n return num >= range[0] && num <= range[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"// remove comma from string\nfunction rmComma(str) {\n return str.split(',').join('');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":413,"value":"function parseDateStr(str) {\n const dates = str.split('/');\n return {\n year: parseInt(str.substring(0,4)),\n day: parseInt(str.substring(6)),\n month: parseInt(str.substring(4, 6))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":974,"value":"function formatDateStr(str) {\n const event = new Date(str);\n const options = {\n year: 'numeric',\n month: '2-digit',\n day: '2-digit'\n };\n const l = event.toLocaleDateString('en-US', options).split('/');\n return l[2] + l[0] + l[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":654,"value":"function drawEchart(option) {\n var div = html`

`;\n echarts.init(div).setOption(option);\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":758,"value":"function PROCEDURE(dscp) {\n return md`👈📟 ${dscp}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1496,"value":"// ViewValue\nfunction VV(view, value) {\n const tmp = PROCEDURE(view);\n tmp.value = value;\n return tmp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":173,"value":"md`## Library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"import { image as headImg } from \"@observablehq/file-attachments\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"d3 = {\n const d3 = await require(\"d3@5\", \"d3-array@2\");\n d3.cloud = await require(\"d3-cloud@1\");\n return d3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"import { rangeSlider, themes as RSThemes } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"import { echarts } from '@bumbeishvili/hello-echarts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1236,"value":"import { slider,checkbox, select } from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2719,"value":"md`## Egg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2732,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2721,"value":"animScheduler = {\n if (!heartAnim.isAnimating) return mutable heartScale;\n if (now - heartAnim.hitTimeStamp >= heartAnim.duration) {\n heartAnim.isAnimating = false;\n heartAnim.isLiked = true;\n }\n mutable heartScale =\n 1.3 * beat((now - heartAnim.hitTimeStamp) / (heartAnim.duration * 2), 4, 2);\n return heartScale;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2730,"value":"heartAnim = {\n return {\n isAnimating: false,\n hitTimeStamp: 0,\n isLiked: false,\n duration: 1000\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2723,"value":"mutable heartScale = 1.3 * 0.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2725,"value":"mutable heartCount = (await (await fetch(\n 'https://api.countapi.xyz/get/gnimoay.com/btc-viz'\n)).json()).value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2727,"value":"import { beat } from '@mattdesl/heartbeat-function'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"