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":"94b948061b24a337831e0faac7913856548b03264fdf67121dc6fe3652fad7a39dfc7847f3cb060f8c7996596a1a6bcab41c312113cb48108cfcddfffabcd193","href":"https://static.observableusercontent.com/files/94b948061b24a337831e0faac7913856548b03264fdf67121dc6fe3652fad7a39dfc7847f3cb060f8c7996596a1a6bcab41c312113cb48108cfcddfffabcd193","name":"BTC-USD@3.csv","type":"text/csv","lastModified":1724806169605.315,"size":302150},{"id":"2e68523cf9f8aa575a761ecfcc70e2ee39dae10e1df4be148095f60bb8fc9e00660d95a9b1ce08080caac996080f8b1ce54c7f45cd0ee7f69f5fe6ab535e1759","href":"https://static.observableusercontent.com/files/2e68523cf9f8aa575a761ecfcc70e2ee39dae10e1df4be148095f60bb8fc9e00660d95a9b1ce08080caac996080f8b1ce54c7f45cd0ee7f69f5fe6ab535e1759","name":"ETH-USD@2.csv","type":"text/csv","lastModified":1724806415510.451,"size":256222},{"id":"d4d6736e1b2cc162ce299fdc7494e012eeba955bf9712ebae1eecee962ce2cd6ff4a48f15ff3954924570664cf6903473b0cd57f2edc40cef282be94766ab494","href":"https://static.observableusercontent.com/files/d4d6736e1b2cc162ce299fdc7494e012eeba955bf9712ebae1eecee962ce2cd6ff4a48f15ff3954924570664cf6903473b0cd57f2edc40cef282be94766ab494","name":"BTC.csv","type":"text/csv","lastModified":1620943183314.058,"size":196194},{"id":"f391b3853bc5c569ba75952fcc1426fda704fb1bc8e91991345505f30d5cc843c316729f7ec5d46c07f54d122b735903597a5eabf7b6c111ddcb468568d299b9","href":"https://static.observableusercontent.com/files/f391b3853bc5c569ba75952fcc1426fda704fb1bc8e91991345505f30d5cc843c316729f7ec5d46c07f54d122b735903597a5eabf7b6c111ddcb468568d299b9","name":"ETH.csv","type":"text/csv","lastModified":1620943180028.982,"size":156687}] 2f:{"title":"Bitcon/Ethereum Price Analysis","cells":[{"id":0,"value":"md`# Bitcon/Ethereum Price Analysis\n\nPlaying around and analysing an [export of daily ${currency} price data](${data[currency].source}) with [ECharts](https://github.com/apache/echarts). Nothing here is financial advice.`","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: 500, label: 'Set chart height'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"viewof currency = Inputs.select(['Bitcoin', 'Ethereum'], {value: \"BTC\", label: \"Select currency\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"viewof slider = rangeSlider({\n title: 'Filter year range',\n min: 2014,\n max: 2024,\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":12,"value":"{\n const container = html`

`;\n echarts.registerTransform(ecStat.transform.regression);\n echarts.init(container).setOption({\n ...timeChartOption,\n title: { text: `Daily ${currency} Price` },\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@3.csv\").csv(),\n source: 'https://finance.yahoo.com/quote/BTC-USD/history?p=BTC-USD'\n },\n Ethereum: {\n data: await FileAttachment(\"ETH-USD@2.csv\").csv(),\n source: 'https://finance.yahoo.com/quote/ETH-USD/history?p=ETH-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"}