html`
<h1 style="display: none">The Growth of CMIP</h1>
<style>
@font-face {
font-family: 'Plus Jakarta Sans';
src: url('https://wcrp-cmip.org/wp-content/themes/cmip/fonts/plus-jakarta-sans-v3-latin-regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.plot-axis path,
.plot-axis line {
stroke: #888888;
}
body {
font-family: 'Plus Jakarta Sans', sans-serif!important;
}
</style>
<style>
.streamplot {
margin: 10px ${width > 500 ? 30 : 10}px;
margin-top:-200px!important;
}
</style>
<div style="background:${frameColors.background}">
${header}
<div class="streamplot">${chart}</div>
</div>
`
axis = (svg) => {
// Add your D3 code here to create the plot
d3.selectAll(".plot-axis").remove();
// Create the x-axis
const xAxis = d3
.axisBottom(x)
.tickValues(d3.range(dataset.length))
.tickFormat((d, i) => dataset[i].mip);
const xAxisGroup = svg
.append("g")
.attr("class", "plot-axis x-axis")
.call(xAxis);
// // Create the y-axis
// const yAxis = d3.axisLeft(y);
// const yAxisGroup = svg
// .append("g")
// .attr("class", "plot-axis y-axis")
// .call(yAxis);
// Add a gray fill behind the plot
const plotGroup = svg.append("g").attr("class", "plot-group");
// plotGroup
// .append("rect")
// .attr("x", 0)
// .attr("y", 0)
// .attr("width", width) // Adjust the width to fit your plot
// .attr("height", height) // Adjust the height to fit your plot
// .attr("fill", "#f0f0f0")
// .attr("opacity", 0.1);
// Move the plot and axes to the desired position within the plot div
xAxisGroup.attr("transform", `translate(0, ${height - 50 + 5})`);
// yAxisGroup.attr("transform", `translate(0, 0)`);
}
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const path = svg
.selectAll("path")
.data(stack)
.join("path")
.attr("d", area)
.attr("fill", (e, i) => colors[i]); //z(Math.random()));
axis(svg);
return svg.node();
}
frameColors = ({
regular: "#302f2f",
light: "#787674",
background: "#fffbf7"
})
sizeScale = (original, lowerthreshold = null) => {
const resized = (original / 1152) * width;
if (resized < lowerthreshold) {
return lowerthreshold;
} else {
return resized;
}
}
dot = (color, text) => {
const dotSize = sizeScale(25, 15);
return html`
<div style="display:flex; flex-direction:column; align-items:center; flex-wrap:wrap; justify-content:center">
<span style="width:${dotSize}px; height:${dotSize}px; background:${color}; display:inline-block; border-radius:50%; opacity:.85"></span>
<span style="color:${frameColors.regular}; margin-top: ${sizeScale(
8
)}px; text-align:center; font-size:${sizeScale(12, 8)}px; width: ${sizeScale(
100,
50
)}px">${text}</span>
</div>
`;
}
header = html`
<div style="color: ${
frameColors.regular
}; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:${sizeScale(
35,
20
)}px 0px">
<div style="font-size:${sizeScale(45, 22)}px; border-bottom: 1px solid ${
frameColors.light
}">MIPs over time</div>
<div style="font-size:${sizeScale(15, 8)}px; margin-top:${sizeScale(
5
)}px; padding-top: ${sizeScale(10)}px"> The growth of coordinated MIPs </div>
</div>
<div style="display:flex; flex-direction:row; justify-content:center; padding:${sizeScale(
10
)}px 0px ${sizeScale(25, 15)}px 0px">
${keys.map((p, i) => {
return dot(colors[i], p);
})}
</div>
`
stackGen = d3
.stack()
.keys(keys)
// .offset(offset)
.order(d3.stackOrderNone)
colors = ["#000546", "#f2b30d", "#a40e4C", "#0e0f0f", "#22bfb7"]
stack = stackGen(dataset)
keys = ["models", "experiments", "institutions", "countries", "forcings"]
x = d3.scaleLinear([0, m - 1], [width * 0.05, width * 0.95])
y = d3.scaleLinear([0, 600], [height * 0.9, height * 0.1])
z = d3.interpolateCool
area = d3
.area()
.x((d, i) => x(i))
.y0((d) => y(d[0]))
.y1((d) => y(d[1]))
.curve(d3.curveMonotoneX)
// stack = d3.stack().keys(d3.range(n)).offset(offset).order(d3.stackOrderNone)
height = 500
len = (s) => s.length
n = len(stack) // number of layers
m = len(dataset) // number of samples per layer
k = 10 // number of bumps per layer
d3 = require("d3@6")
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.
