dataviz + interactive analytics
// 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}));
}
render_linechart = function(data, xAxis, yAxis, lineFunction, debug) {
/* Return a DOM node with containing a line chart.
Arguments:
data: a list of data objects (dictionaries or iterables)
xAxis: a d3.axis
yAxis: a d3.axis
lineFunction: a function used to extract values from each datapoint and render line segments.
debug: variable that forces the chart to redraw every time this step reruns
*/
const svg = d3.select(DOM.svg(width, height));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#3172bc") // Enigma Blue
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", lineFunction)
return svg.node();
}
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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.