Published
Edited
Oct 4, 2021
unformattedData = FileAttachment("MA-stories.csv").csv();
xFromRawData = d3.scaleTime()
// domain accepts the minimum and the maximum values from the data
.domain([d3.min(unformattedData, d => d.date), d3.max(unformattedData, d => d.date)])
// range is the total width available
.range([50, width - 50])
.nice();
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', 50);
svg.append('g')
.attr('transform', `translate(0, 25)`)
.call(d3.axisBottom(xFromRawData));
return svg.node()
}
formattedData = unformattedData.map((element) => ({
...element, // spread syntax will tell Javascript to leave everything else unchanged
date: new Date(element.date.substring(0,10)),
}))
xFromFormattedData = d3.scaleTime()
.domain([d3.min(formattedData, d => d.date), d3.max(formattedData, d => d.date)])
.range([50, width - 50])
.nice();
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', 50);
svg.append('g')
.attr('transform', `translate(0, 25)`)
.call(d3.axisBottom(xFromFormattedData));
return svg.node()
}
{
const svg = d3.create('svg')
.attr('width', width)
.attr('height', 50);
// custom function that formats the date like yyyy-MM-DD
const formatDate = (d) => {
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, 0);
const day = String(d.getDate()).padStart(2,0);
return `${year}-${month}-${day}`;
}
svg.append('g')
.attr('transform', `translate(0, 25)`)
.call(d3.axisBottom(xFromFormattedData)
.tickFormat(formatDate));
return svg.node()
}
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.
