News and graphics at @ClimateLab, a project of @PostGraphics.
regression = d3.regressionPoly()
.order(4)
.x(d => d.date)
.y(d => d.value);
regressionOutput = regression(data);
html`
<style>
.tick line {
stroke: #eee;
}
.domain {
stroke: #eee;
}
</style>
`
margin = ({left: 26, right: 3, top: 3, bottom: 17});
innerWidth = width - margin.left - margin.right;
height = Math.max(350, width * 9 / 16);
innerHeight = height - margin.top - margin.bottom;
xAxis = d3.axisBottom(x)
.tickSize(innerHeight + 6);
yAxis = d3.axisLeft(y)
.tickSize(innerWidth + 6)
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, innerWidth]);
y = d3.scaleLinear()
.domain([310, 400])
.range([innerHeight, 0]);
data = {
const data = await FileAttachment("regression_test.csv").csv();
// Convert types
data.forEach(d => {
d.value = +d.value;
const [date, time] = d.date.split(" ");
const [hh, mn, ss] = time.split(":").map(d => +d);
const [yyyy, mo, dd] = date.split("-").map(d => +d);
d.date = new Date(yyyy, mo - 1, dd, hh, mn, ss);
return d;
});
return data;
}
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.
