chart = {
//setting up the svg
const margin = { top: 10, bottom: 50, right: 20, left: 40 };
const visHeight = 500 - margin.top - margin.bottom;
const visWidth = width - margin.left - margin.right; //width is basically max-width
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
let yExtent = d3.extent(dataset, d => d.Value)
//create Scales
const x = d3.scaleTime()
.domain([new Date(2012, 0, 1), new Date(2012, 11, 31)])
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain(yExtent).nice()
.range([visHeight, 0]);
const xAxis = d3.axisBottom(x)
.ticks(d3.timeMonth)
.tickSize(16, 0)
.tickFormat(d3.timeFormat("%B"));
const yAxis = d3.axisLeft(y);
g.append('g')
.attr('transform', `translate(0,${visHeight})`)
.call(xAxis);
g.append('g')
.call(yAxis)
.call(g => g.selectAll('.domain').remove());
// text label for the y axis
g.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -margin.left+10)
.attr("x", -y(20))
//.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("fill", "#222222")
.attr("font-size", "10px")
.attr("font-family", "Arial")
.text("Change in Mean Sea Level [mm]");
const line = d3.line()
//.curve(d3.curveBasis)
.x(d => x(new Date(2012, parseInt(d.Month)-1, 1)))
.y(d => y(d.Value));
g
.selectAll('path.line')
.data(dataByYear.map(d => d.counts))
.join('path')
.attr('class', "line")
.attr('fill', 'none')
.attr('stroke-width', 2)
.attr('d', line)
.transition()
.delay((d, i) => 2000 + i * 100)
.duration((d, i) => 40+2*i)
.attr('stroke', "#707372")
.transition()
.attr('stroke', (d, i) => (i == dataByYear.length-1) ? "#707372" : "#eee");
svg.append('text')
.attr('transform', `translate(${visWidth-margin.left+20},${y(dataByYear[0].counts[11].Value)+5})`)
.attr("dy", ".50em")
.attr("text-anchor", "start")
.attr("class", "year")
.style("fill", "#707372")
.attr("opacity", 0)
.text(dataByYear[0].year)
.transition()
.ease(d3.easeLinear)
.duration(2900)
.delay((d, i) => 2000)
.attr("opacity", 1)
.attr('transform', `translate(${visWidth-margin.left+20},${y(dataByYear[30].counts[11].Value)+5})`)
.textTween(() => {
const i = d3.interpolate(1993, 2023);
return function(t) { return i(t).toFixed(0); };
})
return svg.node()
}
html`<style>
.last {
stroke: '#707372';
}
.year {
font-family: 'Arial';
font-size: 36px;
font-style: bold;
}
</style>`
yExtent = d3.extent(dataset, d => d.Value)
dataByYear[27].counts[11].Value
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.
