Science journalist / data enthusiast. @NikoMcCarty on twitter.
Published
Edited
Feb 13, 2021
10 forks
5 stars
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width + 50, height]);
const yLabel = svg.append("g").call(yTitle);
const xgridlines = svg.append("g").call(xGrid);
const ygridlines = svg.append("g").call(yGrid);
svg
.selectAll('path')
.data(data)
.join('path')
.attr('class', 'stock-lines')
.attr('d', line)
.style('stroke', (d, i) => colors(d[i].name))
.style('stroke-width', 2)
.style('fill', 'transparent');
svg
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
svg
.append('g')
.attr('class', 'y-axis')
.attr('transform', `translate(${margin.left},0)`)
.call(yAxis)
.selectAll('.domain')
.remove();
svg
.selectAll('text.label')
.data(data)
.join('text')
.attr('class', 'label')
.attr('x', width - margin.right + 5)
// The BABA stock name sits right on top of another; let's move it up 12 pixels.
.attr(
'y',
d => yScale(d[d.length - 1].value) + (d[0].name === 'BABA' ? -12 : 0)
)
.attr('dy', '0.35em')
.style('fill', d => colors(d[0].name))
.style('font-family', 'sans-serif')
.style('font-size', 12)
.text(d => d[0].name);
return svg.node();
}
dateParser = d3.timeParse("%m/%d/%Y")
data = {
const allData = d3
.csvParse(await FileAttachment("stock_data_d3.csv").text(), d3.autoType)
.map(({ date, variable, value }) => ({
date: dateParser(date),
name: variable,
value: +value
}));
return [
allData.filter(({ name }) => name === 'AMZN'),
allData.filter(({ name }) => name === 'GOOG'),
allData.filter(({ name }) => name === 'FB'),
allData.filter(({ name }) => name === 'BABA'),
allData.filter(({ name }) => name === 'JD')
];
}
data[1][0].name
data[0][0].date
width
height = 500
margin = ({ top: 20, right: 20, bottom: 30, left: 40 })
xScale = {
const startDate = data[0][0].date,
endDate = data[0][data[0].length - 1].date;
return d3.scaleTime(
// domain
[startDate, endDate],
// range
[margin.left, width - margin.right]
);
}
yScale = {
// flatten the data into a single array
const prices = data.flat().map(d => d.value),
// and find the max value from that array
yMax = d3.max([...prices, 8]);
return d3.scaleLinear([1, yMax], [height - margin.bottom, margin.top]);
}
colors = d3.scaleOrdinal(d3.schemeCategory10)
xAxis = d3.axisBottom(xScale)
yAxis = d3.axisLeft(yScale)
line = d3
.line()
.x(d => xScale(d.date))
.y(d => yScale(d.value))
.curve(d3.curveNatural)
xGrid = g =>
g
.selectAll('line')
.data(xScale.ticks())
.join('line')
.attr('x1', d => xScale(d))
.attr('x2', d => xScale(d))
.attr('y1', margin.top)
.attr('y2', height - margin.bottom)
.style("stroke-width", 0.2)
.style("stroke", "black")
yGrid = g =>
g
.attr('class', 'grid-lines')
.selectAll('line')
.data(yScale.ticks())
.join('line')
.attr('x1', margin.left)
.attr('x2', width - margin.right)
.attr('y1', d => yScale(d))
.attr('y2', d => yScale(d))
.style("stroke-width", 0.2)
.style("stroke", "black")
yTitle = g =>
g
.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("y", 10)
.html("Stock Price (USD)")
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.
