31:T5d9,dataMap = { const dayOfMonthPivot = new Map() const changePivot = new Map() const changePctPivot = new Map() const dates = [] const numbers = [] const change = [] const pctChange = [] data[currency].data .filter(d => { if (d.Open === 'null') return false // why are there null values in the dataset? const yearInt = parseInt(d.Date.split('-')[0]) return yearInt >= slider[0] && yearInt <= slider[1] }) .map(d => ({ Date: d.Date, Open: parseFloat(d.Open), Close: parseFloat(d.Close), Low: parseFloat(d.Low), High: parseFloat(d.High), })) .forEach((d, i, a) => { dates.push(d.Date) numbers.push([d.Open, d.Close, d.Low, d.High]) change.push(getChange(d, a[i - 1])) pctChange.push(getPctChange(d, a[i - 1])) populatePivot(new Date(d.Date).getDate(), dayOfMonthPivot, d) const c = getChange(d, a[i - 1]) populatePivot(new Date(d.Date).getDate(), changePivot, { Low: c[0], High: c[1] }) const cpct = getPctChange(d, a[i - 1]) populatePivot(new Date(d.Date).getDate(), changePctPivot, { Low: cpct[0], High: cpct[1] }) }) return { dates, numbers, change, pctChange, changePivot: new Map([...changePivot.entries()].sort((a, b) => a[0] - b[0])), changePctPivot: new Map([...changePctPivot.entries()].sort((a, b) => a[0] - b[0])), dayOfMonthPivot: new Map([...dayOfMonthPivot.entries()].sort((a, b) => a[0] - b[0])) }; }32:T4dc,getBoxplotOption = name => ({ dataset: [{ source: Array.from(dataMap[name].values()), }, { transform: { type: 'boxplot', config: { itemNameFormatter: params => Array.from(dataMap[name].keys())[params.value] } } }, { fromDatasetIndex: 1, fromTransformResult: 1 }], dataZoom: [ { type: 'inside', filterMode: 'weakFilter', start: 0, end: 100, yAxisIndex: 0 } ], tooltip: { trigger: 'axis', confine: true, axisPointer: { type: 'shadow' }, formatter: a => { const v = a[0].value return `Day of Month: ${v[0]}
min: ${v[1].toFixed(4)}
q1: ${v[2].toFixed(4)}
median: ${v[3].toFixed(4)}
q3: ${v[4].toFixed(4)}
max: ${v[5].toFixed(4)}` } }, xAxis: { type: 'category' }, yAxis: { name: 'Price USD' }, color: ['black'], series: [ { name: name, type: 'boxplot', datasetIndex: 1 }, { name: 'outliers', type: showOutliers[0] ? 'scatter' : null, symbolSize: 5, datasetIndex: 2, tooltip: { show: false }, itemStyle: { opacity: .3 } } ] })33:[{"id":"aad1e89d9e6f916e5b840899fa97ec0f072257c7ad4cc7676996249824d18c39413ea984d0f79612dcf78e2503e7fb32afd5bc95c606d689ddba4f8f797a9632","href":"https://static.observableusercontent.com/files/aad1e89d9e6f916e5b840899fa97ec0f072257c7ad4cc7676996249824d18c39413ea984d0f79612dcf78e2503e7fb32afd5bc95c606d689ddba4f8f797a9632","name":"BTC-USD.csv","type":"text/csv","lastModified":1621001976659.572,"size":196281},{"id":"5399f313d10bda92f8b0f9ae3e51232fbd35b228bdb86f60059d4462f0aab700cfec6d37588651873188f8fd7d904de0b9e5b138b9095907fdb8822282cd426a","href":"https://static.observableusercontent.com/files/5399f313d10bda92f8b0f9ae3e51232fbd35b228bdb86f60059d4462f0aab700cfec6d37588651873188f8fd7d904de0b9e5b138b9095907fdb8822282cd426a","name":"ETH-USD.csv","type":"text/csv","lastModified":1621001989134.41,"size":156770},{"id":"6bde13785460e5b87bdee8500796bc3b53e82ac3d166807887f9df86bf8fe0cb3e8f1d28ec4ddd4c4fb5f54fba3540789a9dbe7c5115b96afd66a8ca9091a737","href":"https://static.observableusercontent.com/files/6bde13785460e5b87bdee8500796bc3b53e82ac3d166807887f9df86bf8fe0cb3e8f1d28ec4ddd4c4fb5f54fba3540789a9dbe7c5115b96afd66a8ca9091a737","name":"DOGE-USD.csv","type":"text/csv","lastModified":1621021797622.84,"size":156072},{"id":"69d7db86601eb5fc782b62ada979ec91d8d0379cd79d7c0f27d91e389980717b01f8f1ad8ce3b30951b0cc5c9df1dbe22e52be153273a8f7ff8e9d75c4da21c8","href":"https://static.observableusercontent.com/files/69d7db86601eb5fc782b62ada979ec91d8d0379cd79d7c0f27d91e389980717b01f8f1ad8ce3b30951b0cc5c9df1dbe22e52be153273a8f7ff8e9d75c4da21c8","name":"BNB-USD.csv","type":"text/csv","lastModified":1621022716080.246,"size":96789},{"id":"791f2c3eacedeb2d7d12c3f697f65679d11c767e4c6f4b57be3ef741afdfccf74205d13470c4ababe26ea323dd7d01e41fab0cb23810cbdc62a28ce130d7a122","href":"https://static.observableusercontent.com/files/791f2c3eacedeb2d7d12c3f697f65679d11c767e4c6f4b57be3ef741afdfccf74205d13470c4ababe26ea323dd7d01e41fab0cb23810cbdc62a28ce130d7a122","name":"DOGE-USD (1).csv","type":"text/csv","lastModified":1621411644121.774,"size":156407},{"id":"25bdb535371e3d546886677e2010d1ad7479111bee345860d077f498ccf9e78f0989967b788c2bbac9ca9819f7599efda126e5fe4563af93764a717c361b918a","href":"https://static.observableusercontent.com/files/25bdb535371e3d546886677e2010d1ad7479111bee345860d077f498ccf9e78f0989967b788c2bbac9ca9819f7599efda126e5fe4563af93764a717c361b918a","name":"BNB-USD (1).csv","type":"text/csv","lastModified":1621411631107.324,"size":97174},{"id":"7d978256139c5e04725d56c977d64b799d2e56cfbb147fd69c2aa5c382fe744869ec805e1d8902511f8113fa1fba902f3c419d7a0974cd12c3f5bb6bd95a00fa","href":"https://static.observableusercontent.com/files/7d978256139c5e04725d56c977d64b799d2e56cfbb147fd69c2aa5c382fe744869ec805e1d8902511f8113fa1fba902f3c419d7a0974cd12c3f5bb6bd95a00fa","name":"ETH-USD (1).csv","type":"text/csv","lastModified":1621411616362.404,"size":157185},{"id":"8856363fbd69bf808dca52876fbc2860c0d5e1e35bacdfa49eadfd857337c6a351f6c3e41105070b0558c6ecdaf2587f806cc074d6294a534d63ef15b0041a99","href":"https://static.observableusercontent.com/files/8856363fbd69bf808dca52876fbc2860c0d5e1e35bacdfa49eadfd857337c6a351f6c3e41105070b0558c6ecdaf2587f806cc074d6294a534d63ef15b0041a99","name":"BTC-USD (1).csv","type":"text/csv","lastModified":1621411600839.618,"size":196721}] 2f:{"title":"","cells":[{"id":0,"value":"viewof title = md`## Thống Kê & Phân Tích Giá Tiền Ảo Bitcoin/Ethereum/Binance Coin/Dogecoin \n\n Nguồn: [${currency} price data](${data[currency].source}). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"md`These settings affect all subsequent charts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1173,"value":"viewof chartHeight = Range([300, 800], {value: 480, label: 'Set chart height'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"viewof currency = Inputs.select(['Bitcoin', 'Ethereum', 'BinanceCoin', 'Dogecoin'], {value: \"BTC\", label: md`Chọn Tiền Ảo`})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof slider = rangeSlider({\n title: 'Chọn Thời Gian theo Năm',\n min: 2014,\n max: 2021,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"md`Below is a candle stick chart displaying the daily price of ${currency}, combined with a lines representing the daily average and polynomial regression.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"viewof useLog = Checkbox([\"Use log for y-axis\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1343,"value":"dashboard = html` \n \n \n \n \n \n

\n ${viewof slider}\n

\n \n

\n ${viewof currency}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof chart = {\n const container = html`

`;\n echarts.registerTransform(ecStat.transform.regression);\n echarts.init(container).setOption({\n ...timeChartOption,\n title: { text: `Giá ${currency} Theo Ngày` },\n dataset: [{\n source: dataMap.numbers.map((d, i) => [i, d[1]])\n }, {\n transform: {\n type: 'ecStat:regression',\n config: { method: 'polynomial', order: 10 }\n }\n }],\n yAxis: {\n ...timeChartOption.yAxis,\n type: !!useLog.length ? 'log' : 'value'\n },\n series: [{\n name: `Daily ${currency} Price`,\n type: 'k',\n ...minMaxPins,\n data: dataMap.numbers\n }, {\n type: 'line',\n datasetIndex: 1,\n color: '#000',\n lineStyle: { opacity: 0.2, width: 2 },\n tooltip: { show: false },\n showSymbol: false\n }]\n });\n return container;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"md`The following two charts show fluctiations in ${currency} price, showing the total change and relative change of the a day's average ${currency} price compared to the average of the previous day.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"{\n const container = html`

`\n const data = dataMap.change.map(d => d[1])\n echarts.init(container).setOption({\n ...timeChartOption,\n visualMap: [{\n show: false,\n color: ['green', 'red'],\n type: 'continuous',\n seriesIndex: 0,\n min: Math.min(...data) / 2,\n max: Math.max(...data) / 2\n }],\n title: { text: `Daily Change in ${currency} Price` },\n series: [{\n name: `total change of daily ${currency} price`,\n type: 'line',\n ...minMaxPins,\n lineStyle: { width: 1 },\n showSymbol: false,\n data\n }]\n });\n return container\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":515,"value":"{\n const container = html`

`\n const data = dataMap.pctChange.map(d => d[1])\n echarts.init(container).setOption({\n ...timeChartOption,\n visualMap: [{\n show: false,\n color: ['green', 'red'],\n type: 'continuous',\n seriesIndex: 0,\n min: Math.min(...data) / 2,\n max: Math.max(...data) / 2\n }],\n yAxis: {\n name: '% change',\n axisLabel: {\n formatter: val => val * 100 + '%'\n },\n axisPointer: {\n label: {\n formatter: ({ value }) => (value * 100).toFixed(1) + '%'\n }\n }\n },\n title: { text: `Daily % Change in ${currency} Price` },\n series: [{\n name: 'relative change of daily ${currency} price',\n type: 'line',\n ...minMaxPins,\n lineStyle: { width: 1 },\n showSymbol: false,\n data\n }]\n});\n return container\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"md`The boxplot charts below show the spread of the ${currency} price, as well as the spread of the total and relative change in ${currency} price for each day of the month accross all years specified in the filter on top.\n\nOutliers can be toggled with the tickbox below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":778,"value":"viewof showOutliers = Checkbox([\"Show Outliers\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"{\n const container = html`

`\n echarts.init(container).setOption({\n ...getBoxplotOption('dayOfMonthPivot'),\n title: { text: `${currency} prices by day of the month` }\n })\n return container\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":764,"value":"{\n const container = html`

`\n echarts.init(container).setOption({\n ...getBoxplotOption('changePivot'),\n title: { text: `${currency} price change in total by day of the month` }\n })\n return container\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"{\n const container = html`

`\n echarts.init(container).setOption({\n ...getBoxplotOption('changePctPivot'),\n title: { text: `${currency} price change in percent by day of the month` },\n yAxis: {\n name: '% change',\n axisLabel: {\n formatter: val => val * 100 + '%'\n }\n }\n })\n return container\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":844,"value":"md`Below is all the number crunching and echarts settings.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = ({\n Bitcoin: {\n data: await FileAttachment('BTC-USD (1).csv').csv(),\n source: 'https://finance.yahoo.com/quote/BTC-USD/history?p=BTC-USD'\n },\n Ethereum: {\n data: await FileAttachment('ETH-USD (1).csv').csv(),\n source: 'https://finance.yahoo.com/quote/ETH-USD/history?p=ETH-USD'\n },\n BinanceCoin: {\n data: await FileAttachment('BNB-USD (1).csv').csv(),\n source: 'https://finance.yahoo.com/quote/BNB-USD/history?p=BNB-USD'\n },\n Dogecoin: {\n data: await FileAttachment('DOGE-USD (1).csv').csv(),\n source: 'https://finance.yahoo.com/quote/DOGE-USD/history?p=DOGE-USD'\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"getChange = (d, prevD = d) => {\n return [d.Open - prevD.Open, d.Close - prevD.Close, d.Low - prevD.Low, d.High - prevD.High]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"getPctChange = (d, prevD = d) => {\n const getPct = key => (d[key] - prevD[key]) / prevD[key]\n return [getPct('Open'), getPct('Close'), getPct('Low'), getPct('High')]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"populatePivot = (key, pivot, d) => {\n if(!pivot.has(key)) {\n pivot.set(key, [])\n }\n pivot.get(key).push(d.Low, d.High)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"timeChartOption = ({\n dataZoom: [\n {\n type: 'inside',\n start: 0,\n end: 100\n },\n {\n start: 0,\n end: 100\n }\n ],\n tooltip: {\n trigger: 'axis',\n axisPointer: {\n type: 'cross',\n label: {\n backgroundColor: '#6a7985'\n }\n }\n },\n axisPointer: {\n link: { xAxisIndex: 'all' },\n label: {\n backgroundColor: '#777'\n }\n },\n xAxis: {\n data: dataMap.dates\n },\n yAxis: { name: 'Price USD' },\n legend: null,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1153,"value":"getScatterOption = name => {\n const data = []\n const entries = Array.from(dataMap[name].entries())\n entries.forEach(e => {\n e[1].forEach(v => {\n data.push([e[0], v])\n })\n })\n \n return {\n xAxis: { type: 'category' },\n yAxis: { name: 'Price USD' },\n color: ['black'],\n series: [\n {\n type: 'scatter',\n symbolSize: 5,\n data\n }\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1068,"value":"minMaxPins = ( \n {\n markPoint: {\n data: [\n {\n type: 'max',\n name: 'max',\n symbolSize: 25,\n label: { position: 'top', formatter: a => `${a.name}: ${a.value.toFixed(2)}` },\n itemStyle: { color: 'green', opacity: 0.7 }\n },\n {\n type: 'min',\n name: 'min',\n symbolSize: 25,\n label: { position: 'top', formatter: a => `${a.name}: ${a.value.toFixed(2)}` },\n itemStyle: { color: 'red', opacity: 0.7 }\n }\n ]\n },\n markLine: {\n data: [\n {\n type: 'average',\n name: 'avg',\n symbol: 'none',\n label: { position: 'start', formatter: '{b}: {c}' },\n lineStyle: { color: 'black', opacity: 0.7 }\n }\n ]\n }\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"echarts = require(\"https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":581,"value":"ecStat = require(\"https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"import { rangeSlider } from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":784,"value":"import {Checkbox, Range} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}