// Adjust the dates in the URL based on your time area of interest. Format is YYYY-MM-DD.
data = {
const startDate = '2017-07-01' // Adjust these dates based on your area of interest.
const endDate = '2018-03-07'
const query = `start=${startDate}&end=${endDate}`
const {bpi} = await (await fetch(`https://api.coindesk.com/v1/bpi/historical/close.json?${query}`)).json();
return Object.entries(bpi).map(([key, value]) => ({date: new Date(key), value}));
}
labelAnnotations = {
return [
{
id: "bitcoin-cash-fork",
// If you don't provide a custom "type" attribute in your options dictionary, ,
// the default type in the getAnnotations function will be used.
note: {
label: "Bitcoin splits into Bitcoins and Bitcoin Cash",
title: "08-01-2017"
},
data: get_date_data("2017-08-01T00:00", data),
dx: -15,
dy: -57,
}
,{
id: "china-shutdown-exchanges",
note: {
label: "China shuts down all crypto exchanges",
title: "09-15-2017",
},
data: get_date_data("2017-09-15T00:00", data),
dx: -18,
dy: -50,
},{
id: "segwit-2x-delayed",
type: d3.annotationCallout, // this type of annotation draws a line under your label.
note: {
label: "Segwit2X delayed",
title: "11-08-2017"
},
data: get_date_data("2017-11-08T00:00", data),
dx: -2,
dy: 104,
},{
id: "cross-ten-thousand",
type: d3.annotationCalloutCurve, // this type of annotation lets you used a curved connector.
note: {
label: "First time over $10k",
title: "11-28-2017"
},
connector : { // pass the connector an array of points to define your curve.
points: [
[-9, -24],
[-30, -44.6]
]
},
data: get_date_data("2017-11-28T00:00", data),
dx: -53,
dy: -47,
},{
id: "all-time-high",
note: {
label: "First time over $20k",
title: "12-16-2017"
},
data: get_date_data("2017-12-16T00:00", data),
dx: -102,
dy: 2,
},{
id: "segwit-2x-hard-fork",
note: {
label: "Segwit2X hard fork",
title: "12-29-2017"
},
data: get_date_data("2017-12-29T00:00", data),
dx: -4,
dy: 89,
},
{
id: "valley-of-uncertainty",
note: {
label: "What caused this rapid drop + rebound?",
title: "Jan - Feb '18"
},
color: "#ef4837", // Brighter color to make this annotation stand out
x: 803,
y: 336,
dx: -5,
dy: 115,
subject: {
radius: 52,
radiusPadding: 5
},
type: d3.annotationCalloutCircle // This annotation refers to an area rather than a point
},
]
}
// I used 4 of the 8 annotation types, be sure to see the other 4 options when building your own!
// http://d3-annotation.susielu.com/#types
parseTime = d3.isoParse
formatTime = d3.isoFormat
margin = ({top: 20, right: 30, bottom: 30, left: 40})
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.attr("class", "x-axis")
.call(d3.axisBottom(x)
.ticks(width / 80)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.attr("class", "y-axis")
.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))
// Helper function for creating a line in D3 v4
line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.date))
.y(d => y(d.value))
d3_base = require("https://d3js.org/d3.v4.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
