2c:null 2d:["$","title",null,{"children":"The Seasons of Bitcoin | jimbo the consensualist 🃏 | Observable"}] 32:Tfff,{ const height = 400; const margin = {top: 0, right: 60, bottom: 40, left: 20}; const svg = d3.select(DOM.svg(width, height)); const data = priceData; const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.0f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 190) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, All Time'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peak'); svg.append("g") .call(yAxis); const tops = new Set([ '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", 'gray') .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }33:T1082,{ const height = 400; const margin = {top: 0, right: 60, bottom: 20, left: 20}; const svg = d3.select(DOM.svg(width, height)); const end = new Date(2014, 0); const data = priceData.filter(({date}) => date < end); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.0f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 210) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, 2010 - 2014'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peak'); svg.append("g") .call(yAxis); const tops = new Set([ //'2011-06-08', //'2013-04-09', '2013-12-04', //'2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }34:T109b,{ const height = 400; const margin = {top: 0, right: 60, bottom: 20, left: 20}; const svg = d3.select(DOM.svg(width, height)); const end = new Date(2013, 4); const data = priceData.filter(({date}) => date < end); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.0f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 250) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, 2010 - May, 2013'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peak'); svg.append("g") .call(yAxis); const tops = new Set([ //'2010-11-06', //'2011-06-08', '2013-04-09', //'2013-12-04', //'2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }35:T10a3,{ const height = 400; const margin = {top: 0, right: 60, bottom: 20, left: 20}; const svg = d3.select(DOM.svg(width, height)); const end = new Date(2011, 5, 20); const data = priceData.filter(({date}) => date < end); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.0f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 280) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, 2010 - June 20, 2011'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peak'); const tops = new Set([ //'2010-11-06', '2011-06-08', //'2013-04-09', //'2013-12-04', //'2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }36:T10b6,{ const height = 400; const margin = {top: 0, right: 60, bottom: 20, left: 20}; const svg = d3.select(DOM.svg(width, height)); const end = new Date(2011, 1, 20); const data = priceData.filter(({date}) => date < end); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.2f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 270) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, 2010 - Feb 20, 2011'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peak'); const tops = new Set([ //'2010-11-06', '2011-02-09', //'2011-06-08', //'2013-04-09', //'2013-12-04', //'2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }37:T10c0,{ const height = 400; const margin = {top: 0, right: 60, bottom: 20, left: 20}; const svg = d3.select(DOM.svg(width, height)); const end = new Date(2010, 10, 10); const data = priceData.filter(({date}) => date < end); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.2f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 330) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, July 17, 2010 - Nov 10, 2010'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peak'); const tops = new Set([ '2010-11-06', //'2011-02-09', //'2011-06-08', //'2013-04-09', //'2013-12-04', //'2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }38:T105e,{ const height = 400; const margin = {top: 0, right: 60, bottom: 20, left: 20}; const svg = d3.select(DOM.svg(width, height)); const data = priceData; const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${width - margin.right},0)`) .call(d3.axisRight(y).ticks(10, '$,.0f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${margin.left + 20},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 190) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, All Time'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); const tops = new Set([ '2010-11-06', '2011-02-09', '2011-06-08', '2013-04-09', '2013-12-04', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }39:T107d,{ const height = 400; const margin = {top: 10, right: 20, bottom: 20, left: 80}; const svg = d3.select(DOM.svg(width, height)); const data = priceData; const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLog() .domain([min / 1.5, max * 1.5]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .ticks(5) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, '$,.2f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 210},${height - margin.bottom - 120})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 190) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Bitcoin Price, Log Scale'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); const tops = new Set([ '2010-11-06', '2011-02-09', '2011-06-08', '2013-04-09', '2013-12-04', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }3a:T1100,{ const height = 400; const margin = {top: 0, right: 20, bottom: 20, left: 80}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple; const [min, max] = d3.extent(priceData, d => d.value); const y = d3.scaleLog() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(priceData, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .ticks(4) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(3, '$,.2f')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 240},${height - margin.top - 130})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 220) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text(`Bitcoin Price, ${mayerMulitpleWindow}-day SMA`); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 16'); legend.append('text') .attr('x', 42) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Price in USD'); legend.append('path') .attr("fill", "none") .attr("stroke", 'orange') .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,71 h 8'); legend.append('path') .attr("fill", "none") .attr("stroke", 'steelblue') .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 26,71 h 6'); legend.append('text') .attr('x', 42) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text(`${mayerMulitpleWindow}-day SMA`); const sma = mayerMultiple.slice(1).map((_, i) => { const [a, b] = mayerMultiple.slice(i, i+2); const color = a.value > 1 ? b.value > 1 ? 'orange' : defaultFill : b.value > 1 ? defaultFill : 'steelblue'; return {a, b, color}; }); svg.selectAll('sma') .data(sma) .enter() .append('line') .classed('.sma', true) .attr('fill', 'none') .attr('x1', ({a}) => x(a.date)) .attr('y1', ({a}) => y(a.sma)) .attr('x2', ({b}) => x(b.date)) .attr('y2', ({b}) => y(b.sma)) .attr('stroke', ({color}) => color) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round"); svg.append("path") .datum(priceData) .attr("fill", "none") .attr("stroke", defaultFill) .attr('stroke-opacity', 0.5) .attr("stroke-width", 1.5) .attr("d", d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)) ); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr('fill-opacity', 0) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.price)) .append('title') .text(label); return svg.node(); }3b:T1033,{ const height = 480; const margin = {top: 20, right: 20, bottom: 20, left: 40}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple; const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLinear() .domain([min / 1.2, max * 1.2]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.2) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat("")) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 240},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 230) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Mayer Multiple, Linear Scale'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Bitcoin Mayer Multiple'); legend.append('g') .attr('transform', `translate(23,72) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); const tops = new Set([ '2011-06-08', '2013-04-09', '2013-11-29', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }3c:T14ad,{ const height = 560; const margin = {top: 0, right: 20, bottom: 20, left: 40}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple; const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLog() .domain([min / 1.5, max * 1.5]) .range([height - margin.bottom, margin.top]); const x = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.1) .call(d3.axisLeft(y) .ticks(3) .tickSize(-width + margin.right + margin.left) .tickFormat('')) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, ',.3')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 330},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 320) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Mayer Multiple, Log Scale'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', defaultFill); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Mayer Multiple'); legend.append('g') .attr('transform', `translate(155,48) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 170) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); legend.append('g') .attr('transform', `translate(155,72) scale(.6)`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z'); legend.append('text') .attr('x', 170) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Bottoms'); const tops = new Set([ '2011-06-08', '2013-04-09', '2013-11-29', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const bottoms = new Set([ '2011-11-18', '2015-01-14', //'2018-04-06', ]); svg.selectAll('.bottom') .data(data.filter(({date}) => bottoms.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z') .append('title') .text(label); const line = d3.line() .defined(d => !isNaN(d.value)) .x(d => x(d.date)) .y(d => y(d.value)); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "gray") .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", defaultFill) .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }3d:T1988,{ const height = 560; const margin = {top: 0, right: 20, bottom: 20, left: 40}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple; const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLog() .domain([min / 1.5, max * 1.5]) .range([height - margin.bottom, margin.top]); const [start, end] = d3.extent(data, d => d.date); const x = d3.scaleTime() .domain([start, new Date(end.getFullYear(), end.getMonth() + 6)]) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.1) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat('')) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, ',.3')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const epochs = [data[395], data[1706]]; svg.selectAll('.epoch') .data(epochs) .enter() .append('line') .classed('epoch', true) .attr('x1', d => x(d.date)) .attr('y1', margin.top) .attr('x2', d => x(d.date)) .attr('y2', height - margin.top) .style('stroke', 'gray') .style('stroke-opacity', 0.3) .style('stroke-width', 1.5); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 340},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 330) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Mayer Multiple, Color Coded by Season'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', 'orange'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('MM > 1 (Summer)'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,73 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 73) .attr('r', 2) .attr('fill', 'steelblue'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('MM < 1 (Winter)'); legend.append('g') .attr('transform', `translate(175,48) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 190) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); legend.append('g') .attr('transform', `translate(175,72) scale(.6)`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z'); legend.append('text') .attr('x', 190) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Bottoms'); const tops = new Set([ '2011-06-08', '2013-04-09', '2013-11-29', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const bottoms = new Set([ '2011-11-18', '2015-01-14', //'2018-04-06', ]); svg.selectAll('.bottom') .data(data.filter(({date}) => bottoms.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z') .append('title') .text(label); const segments = data.slice(1).map((_, i) => { const [a, b] = [data[i], data[i+1]]; const color = a.value >= 1 ? b.value >= 1 ? 'orange' : defaultFill : b.value >= 1 ? defaultFill : 'steelblue'; return { a, b, color }; }); svg.selectAll('.segment') .data(segments) .enter() .append('line') .classed('segment', true) .attr('x1', ({a}) => x(a.date)) .attr('y1', ({a}) => y(a.value)) .attr('x2', ({b}) => x(b.date)) .attr('y2', ({b}) => y(b.value)) .style('stroke', ({color}) => color); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", ({value}) => value >= 1 ? 'darkorange' : 'steelblue') .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }3e:T1988,{ const height = 560; const margin = {top: 0, right: 20, bottom: 20, left: 40}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple.slice(0, 396); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLog() .domain([min / 1.5, max * 1.5]) .range([height - margin.bottom, margin.top]); const [start, end] = d3.extent(data, d => d.date); const x = d3.scaleTime() .domain([new Date(start.getFullYear(), start.getMonth() - 1), end]) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.1) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat('')) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, ',.3')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const epochs = [data[213]]; svg.selectAll('.epoch') .data(epochs) .enter() .append('line') .classed('epoch', true) .attr('x1', d => x(d.date)) .attr('y1', margin.top) .attr('x2', d => x(d.date)) .attr('y2', height - margin.top) .style('stroke', 'gray') .style('stroke-opacity', 0.3) .style('stroke-width', 1.5); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 340},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 330) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Mayer Multiple Epoch One: 2011-2012'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', 'orange'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('MM > 1 (Summer)'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,73 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 73) .attr('r', 2) .attr('fill', 'steelblue'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('MM < 1 (Winter)'); legend.append('g') .attr('transform', `translate(175,48) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 190) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); legend.append('g') .attr('transform', `translate(175,72) scale(.6)`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z'); legend.append('text') .attr('x', 190) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Bottoms'); const tops = new Set([ '2011-06-08', '2013-04-09', '2013-11-29', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const bottoms = new Set([ '2011-11-18', '2015-01-14', '2018-04-05', ]); svg.selectAll('.bottom') .data(data.filter(({date}) => bottoms.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z') .append('title') .text(label); const segments = data.slice(1).map((_, i) => { const [a, b] = [data[i], data[i+1]]; const color = a.value >= 1 ? b.value >= 1 ? 'orange' : defaultFill : b.value >= 1 ? defaultFill : 'steelblue'; return { a, b, color }; }); svg.selectAll('.segment') .data(segments) .enter() .append('line') .classed('segment', true) .attr('x1', ({a}) => x(a.date)) .attr('y1', ({a}) => y(a.value)) .attr('x2', ({b}) => x(b.date)) .attr('y2', ({b}) => y(b.value)) .style('stroke', ({color}) => color); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", ({value}) => value >= 1 ? 'darkorange' : 'steelblue') .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }3f:T195d,{ const height = 560; const margin = {top: 0, right: 20, bottom: 20, left: 40}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple.slice(396, 1706); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLog() .domain([min / 1.5, max * 1.5]) .range([height - margin.bottom, margin.top]); const [start, end] = d3.extent(data, d => d.date); const x = d3.scaleTime() .domain([start, end]) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.1) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat('')) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, ',.3')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const epochs = [data[751]]; svg.selectAll('.epoch') .data(epochs) .enter() .append('line') .classed('epoch', true) .attr('x1', d => x(d.date)) .attr('y1', margin.top) .attr('x2', d => x(d.date)) .attr('y2', height - margin.top) .style('stroke', 'gray') .style('stroke-opacity', 0.3) .style('stroke-width', 1.5); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 340},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 330) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Mayer Multiple Epoch Two: 2012-2015'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', 'orange'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('MM > 1 (Summer)'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,73 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 73) .attr('r', 2) .attr('fill', 'steelblue'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('MM < 1 (Winter)'); legend.append('g') .attr('transform', `translate(175,48) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 190) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); legend.append('g') .attr('transform', `translate(175,72) scale(.6)`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z'); legend.append('text') .attr('x', 190) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Bottoms'); const tops = new Set([ '2011-06-08', '2013-04-09', '2013-11-29', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const bottoms = new Set([ '2011-11-18', '2015-01-14', '2018-04-05', ]); svg.selectAll('.bottom') .data(data.filter(({date}) => bottoms.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z') .append('title') .text(label); const segments = data.slice(1).map((_, i) => { const [a, b] = [data[i], data[i+1]]; const color = a.value >= 1 ? b.value >= 1 ? 'orange' : defaultFill : b.value >= 1 ? defaultFill : 'steelblue'; return { a, b, color }; }); svg.selectAll('.segment') .data(segments) .enter() .append('line') .classed('segment', true) .attr('x1', ({a}) => x(a.date)) .attr('y1', ({a}) => y(a.value)) .attr('x2', ({b}) => x(b.date)) .attr('y2', ({b}) => y(b.value)) .style('stroke', ({color}) => color); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", ({value}) => value >= 1 ? 'darkorange' : 'steelblue') .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }40:T1969,{ const height = 560; const margin = {top: 0, right: 20, bottom: 20, left: 40}; const svg = d3.select(DOM.svg(width, height)); const data = mayerMultiple.slice(1709); const [min, max] = d3.extent(data, d => d.value); const y = d3.scaleLog() .domain([min / 1.5, max * 1.5]) .range([height - margin.bottom, margin.top]); const [start, end] = d3.extent(data, d => d.date); const x = d3.scaleTime() .domain([start, new Date(2020, 0)]) .range([margin.left, width - margin.right]); // y-axis grid lines. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .style('opacity', 0.1) .call(d3.axisLeft(y) .tickSize(-width + margin.right + margin.left) .tickFormat('')) .selectAll('path') .style('stroke-width', 0); // x-axis. svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .ticks(width / 80) .tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(5, ',.3')) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .text(data.y)); svg.append("g") .call(yAxis); const epochs = [data[886]]; svg.selectAll('.epoch') .data(epochs) .enter() .append('line') .classed('epoch', true) .attr('x1', d => x(d.date)) .attr('y1', margin.top) .attr('x2', d => x(d.date)) .attr('y2', height - margin.top) .style('stroke', 'gray') .style('stroke-opacity', 0.3) .style('stroke-width', 1.5); const legend = svg.append('g') .attr('transform', `translate(${width - margin.right - 340},${margin.top + 40})`); legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('stroke', '#a0a0a0') .attr('fill', 'white') .attr('width', 330) .attr('height', 95); legend.append('text') .attr('x', 8) .attr('y', 24) .attr('fill', '#444') .style('font-family', '"Roboto Condensed", sans-serif') .style('font-size', '18px') .text('Mayer Multiple Epoch Three: 2015-???'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,48 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 48) .attr('r', 2) .attr('fill', 'orange'); legend.append('text') .attr('x', 38) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('MM > 1 (Summer)'); legend.append('path') .attr("fill", "none") .attr("stroke", defaultFill) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", 'M 16,73 h 12'); legend.append('circle') .attr('cx', 28) .attr('cy', 73) .attr('r', 2) .attr('fill', 'steelblue'); legend.append('text') .attr('x', 38) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('MM < 1 (Winter)'); legend.append('g') .attr('transform', `translate(175,48) scale(.6)`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z'); legend.append('text') .attr('x', 190) .attr('y', 52) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Peaks'); legend.append('g') .attr('transform', `translate(175,72) scale(.6)`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z'); legend.append('text') .attr('x', 190) .attr('y', 77) .attr('fill', '#444') .style('font-size', '14px') .text('Noteworthy Bottoms'); const tops = new Set([ '2011-06-08', '2013-04-09', '2013-11-29', '2017-12-16', ]); svg.selectAll('.top') .data(data.filter(({date}) => tops.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', '#ea0') .attr('fill-opacity', 0.1) .attr('stroke', '#ea0') .attr('stroke-opacity', 0.9) .attr('stroke-width', '2px') .attr('d', 'M 0,-12 l 11,21 h -22 z') .append('title') .text(label); const bottoms = new Set([ '2011-11-18', '2015-01-14', //'2018-04-06', ]); svg.selectAll('.bottom') .data(data.filter(({date}) => bottoms.has(date.toISOString().split('T')[0]))) .enter() .append('g') .classed('top', true) .attr('transform', d => `translate(${x(d.date)},${y(d.value)})`) .append('path') .attr('fill', 'steelblue') .attr('fill-opacity', 0.1) .attr('stroke', 'steelblue') .attr('stroke-opacity', 0.8) .attr('stroke-width', '2px') .attr('d', 'M 10,10 h -20 v -20 h 20 z') .append('title') .text(label); const segments = data.slice(1).map((_, i) => { const [a, b] = [data[i], data[i+1]]; const color = a.value >= 1 ? b.value >= 1 ? 'orange' : defaultFill : b.value >= 1 ? defaultFill : 'steelblue'; return { a, b, color }; }); svg.selectAll('.segment') .data(segments) .enter() .append('line') .classed('segment', true) .attr('x1', ({a}) => x(a.date)) .attr('y1', ({a}) => y(a.value)) .attr('x2', ({b}) => x(b.date)) .attr('y2', ({b}) => y(b.value)) .style('stroke', ({color}) => color); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("fill", ({value}) => value >= 1 ? 'darkorange' : 'steelblue') .attr("r", "2px") .attr("cx", d => x(d.date)) .attr("cy", d => y(d.value)) .append('title') .text(label); return svg.node(); }41:T7ee,md`## When Summer? Disclaimer: History never repeats. It just looks that way because of [patternicity](https://en.wikipedia.org/wiki/Apophenia), [confirmation bias](https://en.wikipedia.org/wiki/Confirmation_bias) and the [availability heuristic](https://en.wikipedia.org/wiki/Availability_heuristic). Having identified a pattern of seasonality in the Bitcoin Mayer Multiple, we can now ask what this Winter might look like if it trends like the Winters of epochs one and two. With regards to length, the Winters of epoch one and two each lasted for a slightly shorter time than their Summers. If that ratio holds for this Winter, slightly less than two and a half years from the onset would be around the beginning of 2020. What about the price? Let's look at each epoch's Winter to make a guess. | Winter | Price at Start | Price at MM Bottom | Price at End | | --- | ---: | ---: | ---: | | one | $7.61 | $2.05 (${(100*2.05/7.61).toFixed(0)}%) | $4.82 (${(100*4.82/7.61).toFixed(0)}%) | | two | $502.44 | $177.28 (${(100*177.28/502.44).toFixed(0)}%) | $240.59 (${(100*240.59/502.44).toFixed(0)}%) | | three | $8,196.90 | $?,???.?? (??%) | $?,???.?? (??%) |
Using Winters one and two as guides, we might estimate that the price of Bitcoin at the Mayer Multiple bottom would be around a third of its price at the start, or just below $3,000 per Bitcoin. Using the same guide for the end of Winter, we'd look for a price between a half and two thirds of the start price, something in the $4,000 to $5,000 range. But remember, it was clear from the Mayer Multiple charts that the swings were becomming less exagerated over time. For this reason, applying the same ratios from Winters one and two is proably too pessimistic. It could also be that what appears right now to be Winter could be just a momentary blip before continuing a long Summer that started in 2015 and hasn't yet come to an end. The Summer of epoch two had two such blips mid-season, though they only lasted a day each. Anything is possible. `42:[] 30:{"id":"f21272641ebb2707","slug":"the-seasons-of-bitcoin","title":"The Seasons of Bitcoin","thumbnail":"0735eee54675a0cfef6cdb6a10973a96c0c36f1e0d5697768ed83a72e82e3078","access_level":"public","create_time":"$D2018-05-22T11:53:24.266Z","update_time":"$D2018-05-22T11:53:24.266Z","view_time":null,"first_public_time":"$D2018-05-22T11:53:37.426Z","has_unpublished_edits":null,"fork":true,"stars":11,"starred":false,"owner":{"type":"team","id":"c59693e81648bf90","login":"jimbojw","name":"jimbo the consensualist 🃏","avatar_url":"https://avatars-next.observableusercontent.com/1f7a1307af61a3499fb9a9b09b672de153ed76d32c0e8c961b7981fe1057d50c","tier":"starter_2024","bio":""},"version":1346,"publish_version":1346,"role":null,"authored":false,"authors":[{"type":"individual","id":"7b1a8c8bb2eb846c","login":"jimbojw","name":"jimbo the consensualist 🃏","avatar_url":"https://avatars-next.observableusercontent.com/1f7a1307af61a3499fb9a9b09b672de153ed76d32c0e8c961b7981fe1057d50c","tier":null,"bio":""}],"members":[{"type":"individual","id":"7b1a8c8bb2eb846c","login":"jimbojw","name":"jimbo the consensualist 🃏","avatar_url":"https://avatars-next.observableusercontent.com/1f7a1307af61a3499fb9a9b09b672de153ed76d32c0e8c961b7981fe1057d50c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The Seasons of Bitcoin","cells":[{"id":0,"value":"md`# The Seasons of Bitcoin\n## Seeing Beyond Volatility with the Mayer Multiple

\n\nIn this article, we'll explore the Mayer Multiple for Bitcoin over the 8 years of data available from [CoinDesk](https://www.coindesk.com/api/).\nAlthough Bitcoin price swings are increasingly large in dollar terms, the Mayer Multiple shows that price volatility has been winding down compared to Bitcoin's own past.\nYou'll learn how to use the Mayer Multiple to divide the history of Bitcoin price into epochs characterized by Summer and Winter seasons.\n\nNamed after its inventor, [Trace Mayer](https://twitter.com/TraceMayer), the Mayer Mulitple is the ratio between the current price of Bitcoin and its average price over the last 200 days.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1164,"value":"tex.block`\n\\begin{aligned}\nMayerMultiple = \\frac{CurrentPrice}{SimpleMovingAverage_{200}}\n\\end{aligned}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"md`\n[Preston Pysh](https://twitter.com/PrestonPysh) of The Investors Podcast has championed the Mayer Multiple and put together a detailed page devoted to it at [mayermultiple.com](http://mayermultiple.com).\nHis article describes how the multiple could be used to gauge expectations for first-time buyers.\nIt includes a number of useful visualizations, tables and analyses.\n\nSince the Mayer Mulitple is entirely derived from the exchange rate of Bitcoin for another currency—that is to say, the price of Bitcoin—it makes sense to begin with a historical review of the price before digging into the Mayer Multiple.\nLet's get to it!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md`## Start With the Price\n\nTo start, let's look at Bitcoin's price over all the years of data we have from CoinDesk.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"priceData = {\n const {bpi} = await (await fetch(`https://api.coindesk.com/v1/bpi/historical/close.json?start=2010-07-18&end=${(new Date()).toISOString().slice(0, 10)}`)).json();\n return Object.entries(bpi).map(([key, value]) => ({date: new Date(key), value}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"priceToday = priceData[priceData.length - 1].value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"md`\n_NOTE: This data is live but the article text is static. Over time the two will diverge._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1292,"value":"md`\nIf you plot the price data on a linear scale, it looks like nothing much happened until 2017 when it took off, peaking in December and subsequently crashing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"md`\nYou can hover over points on the chart for more info.\nThe orange triangle denotes the peak price in December, 2017, slightly above $19,000.\n\nWhile it's true that the price swings in 2017 and 2018 were much larger than everything that came before in dollar terms, that's not the whole story.\nIn the middle of the chart, around the end of 2013, you'll notice a small bump.\nLet's zoom in on that.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`\nLike the previous chart, this chart shows Bitcoin price data starting at the beginning of CoinDesk's records, but only up to 2014.\nThe orange triangle highlights the price peak in December, 2013, just shy of $1,200.\n\nAt this scale, you can now see another blip in April of 2013.\nBy truncating the date range again, let's continue our stroll back through time.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"md`\nHere we've traveled back further in the Bitcoin price history, stopping at May, 2013.\nThe orange triangle points out the peak price of $230 in mid-April.\n\nFrom this vantage point, we can now pick out yet another peak in the middle of 2011.\nLet's go there.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"md`\nNow we've traveled back in time all the way to the middle of June, 2011.\nThe orange triangle shows the peak that nearly reached $30 per Bitcoin.\n\nIt may appear at first blush that we've exhausted how far back we can go looking for peaks.\nBut if you squint, you'll notice a bulge that begins in Februrary of 2011.\nLet's take a peek.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`\nHere we see the price chart through mid-Februrary, 2011 when the price for a Bitcoin peaked at $1.09.\n\nFrom here, we can see one last noteworthy peak in November of 2010.\nLet's investigate before we move on.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"md`\nThis is our last stop, as far back as we can go.\nThis chart goes only up to mid-November, 2010 when the price topped out just short of $0.40 per Bitcoin.\n\nNow that we've finished our backwards journey, let's return to the present.\nHere's the original price chart showing the full history, but with markers for all the peaks we visited along the way.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"md`\nAs you can see, each time the price goes though one of these runups, it seems incredibly significant, until the next runup which dwarfs everything that came before in dollar terms.\n\nFortunately, it's possible to plot the entire history of Bitcoin price in a way that allows us to see all of these peaks at once.\nThe trick is to put the price on a [logarithmic scale](https://en.wikipedia.org/wiki/Logarithmic_scale).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"md`\nIn log scale, proportional movements have the same height in pixels.\nFor instance, the distance from $10 to $100 vertically (a 10x price move) is the same as the distance as between $1,000 and $10,000.\n\nYou can now see that the recent run-up in 2017, while still noteworthy, was less dramatic proportionally than earlier runs like those in 2011 and 2013.\nThe upward price move of almost 10x over the course of 2017 took longer than previous pumps of the same magnitude.\n\nNow that we've looked at the history of how Bitcoin has performed relative to the dollar, let's use the Mayer Multiple to dig into how Bitcoin has performed relative to its own past.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`## Mayer Multiple Over Time\n\nUsing CoinDesk's data feed, we can compute the 200-day [simple moving average](https://en.wikipedia.org/wiki/Moving_average#Simple_moving_average) and thus the Mayer Multiple over time.\nThe timespan will be shorter by 200 days to account for the earliest period during which there was not yet a 200-day moving average to divide by.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1254,"value":"// This overanalysis is highly dependent on this particular value.\n// Modify at your own risk!\nmayerMulitpleWindow = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"mayerMultiple = simpleMovingAverage(priceData, mayerMulitpleWindow)\n .map(({date, value}, i) => ({\n date,\n value: priceData[i + mayerMulitpleWindow].value / value,\n price: priceData[i + mayerMulitpleWindow].value,\n sma: value,\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`\nWe'll begin by plotting the same log-scale Bitcoin price chart, but adding in the 200-day SMA since these are the two quantities that make up the Mayer Multiple.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":644,"value":"md`\nIn this chart, you can see the familiar Bitcoin price in subdued gray, and the 200-day moving average as a thick, orange and blue line.\nThe color of the line indicates whether the price was above (orange) or below (blue) the 200-day moving average.\n\nSince the 200-day moving average represents past values, it's a lagging indicator.\nIt looks somewhat like a smoothed, rightward-shifted copy of the price chart.\n\nNow let's plot the Mayer Multiple, the ratio between the price and the 200-day average.\nAs with price, we'll start with a linear scale, highlighting the peaks.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"md`\nWe can already pick out a few interesting features from this graph. Most notably, the Mayer Multiple is spiky, and spikier further in the past than the present.\nOver the almost 8 year history, we see roughly four spikes of decreasing size that align with the 2011, 2013 and 2017 price peaks.\n\nIf you look closely, you may notice one additional spike from February 2011 that goes higher, in fact, than the 2017 spike.\nHowever, this one did not lead to a trend reversal, which becomes more clear when we look a the same chart on a log scale.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`\nLooking at the Mayer Multiple on a log scale provides a useful view because it gives us insight into not just the spiky tops, but also shows us the spiky bottoms, which looked like smooth valleys on the linear chart.\nThere are two noteworthy bottoms (marked with blue squares): one in late 2011 and one in early 2015.\n\nA Mayer Multiple of 1.0x means that the price of Bitcoin is trading at precicely the same value as the 200-period moving average.\nThis makes it an important threshold value.\nLet's look at the same graph, but with values above and below 1.0x more clearly distinguishable.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"md`\nIn this log-scale, color coded chart of the Mayer Multiple, we can now see the seasons of Bitcoin.\nMayer Multiple values above 1.0x are in orange (Summer) while values below 1.0x are in blue (Winter).\n\nTracking the changes in seasons, we find that there have been three epochs, each with a Summer followed by a Winter season.\nLet's take a look at each of these three epochs, starting with the earliest.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"md`\nThe first epoch of the Bitcoin Mayer Multiple lasted a little over a year, from early 2011 to early 2012.\nSummer and Winter each took up roughly half of that time (a bit over six months).\n\nSince the Mayer Mulitple requires a 200-day moving average to divide by, the earliest period of increasing Bitcoin price is cut off.\nWere it not, this Bitcoin Summer would have been somewhat longer.\n\nComing out of Winter, there were a few false starts where the Mayer Multiple jumped above 1.0x but then dipped back below, before the epoch finally came to an end.\nNow let's look at the second epoch, which starts right where the first leaves off.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"md`\nThe second Mayer Multiple epoch started in early 2012 and lasted through late 2015, a span of about three and a half years (37 months).\nThe Summer season lasted almost precisely two years of that time, a little more than half.\n\nAs in the first epoch, this Bitcoin Winter had a couple of false starts before breaking into the third epoch.\nIt would seem that a Mayer Multiple of 1.0x is a [Schelling Point](https://en.wikipedia.org/wiki/Schelling_point), creating natural resistance to an early breakout.\n\nLastly, let's turn our attention to the third epoch, currently unfolding.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1161,"value":"md`\nEpoch three began with a Summer that lasted from late 2015 through early 2018, for a total of about two and a half years.\nWinter only just began in mid-March, 2018, and we don't know how long it's going to last.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1214,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`## Libraries and Config Settings\n\n_Ignore everything below this line, it's just bringing in libraries and configuring the charts and graphs above._\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"defaultFill = 'gray'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"function label(d, i) {\n const lines = [d.date.toDateString()];\n if ('price' in d) {\n lines.push(`MM: ${d3.format('.3r')(d.value)}`);\n lines.push(`price: ${d3.format('$,.2f')(d.price)}`);\n } else {\n lines.push(`price: ${d3.format('$,.2f')(d.value)}`);\n }\n //lines.push(`index: ${i}`); \n return lines.join('\\n');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"function simpleMovingAverage(data, size) {\n const sums = [];\n data.forEach(({value}, i) => sums[i] = value + (i ? sums[i-1] : 0)); \n return data.slice(size).map(({date}, i) => {\n return {\n date,\n value: (sums[i + size] - sums[i]) / size,\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W42","stdlib":"1"}} 31:"$30:body"