Data Visualization Specialist | Previously
@WashingtonPost @WallStreetJournal @MITSenseableCity
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
// Axis
svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.attr("class", "x-axis")
.call(xAxis);
svg
.append("g")
.attr("class", "y-axis")
.attr("transform", `translate(${margin.left}, 0)`)
.call(yAxis);
// Line
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#8868cb")
.attr("stroke-width", 1.8)
.attr("d", line);
const lastValue = data[data.length - 1];
svg
.append("circle")
.attr("cx", width - margin.right)
.attr("cy", yScale(lastValue.price))
.attr("r", 5.8)
.attr("fill", "#8868cb")
.attr("stroke", "#fff")
.attr("stroke-width", 1);
// Div text
d3.select("#price").text(`${format(lastValue.price)}`);
d3.select("#date").text(`${d3.timeFormat("%b %d, %Y")(lastValue.timestamp)}`);
return svg.node();
}
// thousand + no decimal point
format = d3.format(",.2f") //(".1f")
line = d3
.line()
.curve(d3.curveCardinal)
.x((d) => xScale(d.timestamp))
.y((d) => yScale(d.price))
yAxis = d3
.axisLeft(yScale)
.ticks(5)
.tickSize(-width + margin.right + margin.left)
xAxis = d3
.axisBottom(xScale)
.tickFormat((d) => formatXAxis(d))
.ticks(5)
.tickSizeOuter(0)
formatXAxis = d3.timeFormat("%b %Y")
yScale = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.price))
.range([height - margin.bottom, margin.top])
xScale = d3
.scaleUtc()
.domain(d3.extent(data, (d) => d.timestamp))
.range([margin.left, width - margin.right])
margin = ({ top: 2, right: 30, bottom: 40, left: 60 })
data[data.length - 1]
data = raw_data.map((d) => {
d.timestamp = new Date(d.timestamp);
return d;
})
raw_data = d3.json(await url)
url = `https://api.coinpaprika.com/v1/tickers/btc-bitcoin/historical?start=${start}&interval=1d`
end = formatDate(date)
start = formatDate(d3.timeDay.offset(date, -365 + 2))
date = new Date()
formatDate = d3.timeFormat("%Y-%m-%d")
html`
<style>
.tick {
font-size: 14px;
color: #777;
}
.y-axis .domain {
display: none;
}
.y-axis .tick line {
stroke: #dfdfdf;
}
#price {
font-family: arial;
font-size: 38px;
font-weight: 600;
text-anchor: end;
letter-spacing: -.3px;
}
.unit {
font-family: arial;
font-size: 16px;
font-weight: 600;
text-anchor: end;
color: #999;
margin-left: 3px;
}
#date {
font-family: arial;
color: #999;
margin-top: 0px;
font-size: 16px;
padding: 3px 8px;
}
</style>
`
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.
