md`# D3 Line Chart`
data = {
const allData = (d3.csvParse(await FileAttachment("big-mac-raw-index.csv").text(), d3.autoType))
.map(({ date, name, dollar_price, iso_a3 }) => ({ name, iso: iso_a3, date: new Date(date), price: dollar_price }))
return [
allData.filter(({ iso }) => iso === 'USA'),
allData.filter(({ iso }) => iso === 'CAN'),
allData.filter(({ iso }) => iso === 'CHN'),
allData.filter(({ iso }) => iso === 'EUZ'),
allData.filter(({ iso }) => iso === 'JPN')
]
}
width = 900
height = 500
colors = {
const countryNames = data.map(d => d[0].name)
return d3.scaleOrdinal(
countryNames,
d3.schemeCategory10
)
}
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.price),
// and find the max value from that array
yMax = d3.max( prices )
return d3.scaleLinear(
[ 0, yMax ],
[ height - margin.bottom, margin.top ]
)
}
yAxis = {
const formatter = d3.format('$.2f')
return d3.axisLeft(yScale)
.tickFormat(d => formatter(d))
}
line = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.price))
.curve(d3.curveNatural)
xAxis = d3.axisBottom(xScale)
d3 = require('d3@5')
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.
