{
replay;
const div = html`<div style="position:relative;">`;
const context = DOM.context2d(width, height);
const canvas = div.appendChild(context.canvas);
const svg = d3.select(div.appendChild(DOM.svg(width, height)));
svg.style("position", "relative");
canvas.style.position = "absolute";
let currLayout = 0;
let timer;
const duration = 3500;
const ease = d3.easeCubic;
const pointWidth = 4;
// replay;
// context.clearRect(0, 0, width, width);
// context.fillStyle = 'none';
let x = d3
.scaleTime()
.domain(d3.extent(dataforplot, d => new Date(d.day)))
.range([margin.left, width - margin.right]);
const y = d3
.scaleLinear()
.domain([0, d3.max(dataforplot, d => Number(d.binH))])
.range([margin.top, height - margin.bottom]);
const z = d3
.scaleSequential(d3.interpolateRdBu)
.domain([
d3.max(dataforplot, d => Math.abs(d.value)),
d3.min(dataforplot, d => Math.abs(d.value))
]);
let g = svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(5))
.call(g => g.select(".domain").remove())
.attr("opacity", 1);
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove());
function xTime(points) {
x = d3
.scaleTime()
.domain(d3.extent(dataforplot, d => new Date(d.day)))
.range([margin.left, width - margin.right]);
points.forEach(point => {
(point.x = x(new Date(point.day))), (point.y = y(Number(point.binH)));
});
return points;
}
function xTemp(points) {
x = d3
.scaleTime()
.domain(d3.extent(points, d => d.value))
.range([margin.left, width - margin.right]);
points.forEach(point => {
(point.x = x(point.value)), (point.y = y(Number(point.binH)));
});
return points;
}
const layouts = [xTemp, xTime];
let points = xTime(dataforplot);
function draw() {
context.clearRect(0, 0, width, height);
for (var i = 0; i < points.length; i++) {
let point = points[i];
context.fillStyle = z(point.value);
context.fillRect(point.x, point.y, pointWidth, pointWidth);
context.fill();
context.stroke();
}
}
function animate(layout) {
// get source position
points.forEach(point => {
point.sx = point.x;
point.sy = point.y;
});
// get destination points
points = layout(points);
//store destination position
points.forEach(point => {
point.tx = point.x;
point.ty = point.y;
});
// remove current x axis
g.transition()
.duration(3500)
.attr("opacity", 0)
.remove();
if (currLayout === 0) {
x = d3
.scaleLinear()
.domain(d3.extent(points, d => d.value))
.range([margin.left, width - margin.right]);
} else {
x = d3
.scaleTime()
.domain(d3.extent(points, d => new Date(d.day)))
.range([margin.left, width - margin.right]);
}
timer = d3.timer(elapsed => {
// compute how far we are through the animation
const t = Math.min(1, ease(elapsed / duration));
// update point positions (interpolate)
points.forEach(point => {
point.x = point.sx * (1 - t) + point.tx * t;
point.y = point.sy * (1 - t) + point.ty * t;
});
//update on the screen
draw();
//if animation is over
if (t === 1) {
timer.stop();
// start animation for next layout
currLayout = currLayout + 1;
console.log(currLayout);
if (currLayout < 2) animate(layouts[currLayout]);
}
});
g = svg
.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.attr("opacity", 0)
.call(d3.axisBottom(x).ticks(5))
.call(g => g.select(".domain").remove());
g.transition()
.duration(3500)
.attr("opacity", 1);
}
// animation settings
await draw();
// console.log(animate);
Promises.delay(1000).then(() => {
animate(layouts[currLayout]);
});
// }
// lastElapsed = elapsed;
// });
// }
// let t = d3.timer(draw);
// return totalDuration / 1000;
yield visibility(div);
}
scaleAnomaly = d3
.scaleDiverging(t => d3.interpolateRdBu(1 - t))
.domain([
d3.min(summaryData, d => d['0-10 dbar']),
0,
d3.max(summaryData, d => d['0-10 dbar'])
])
d3.mean(summaryData, d => d['0-10 dbar'])
// function chart(scale) {
// const canvas = DOM.canvas(summaryData.length, 1);
// const context = canvas.getContext("2d");
// canvas.style.margin = "0 -14px";
// canvas.style.width = "calc(100% + 28px)";
// canvas.style.height = "200px";
// canvas.style.imageRendering = "pixelated";
// var i = 0;
// for (const d of summaryData) {
// context.fillStyle = scale(d['0-10 dbar']);
// context.fillRect(i++, 0, 1, 1);
// }
// return canvas;
// }
// new Promise(resolve => {
// setTimeout(() => resolve(new Date()), 1000);
// }).then(function(value) {
// console.log(value, z);
// })
d3.extent(dataforplot, d => new Date(d.day))
d3.min(dataforplot, d => Math.abs(d.value))
binned_by_10.filter(d => {
return d.day === new Date(uniqueDays[0]);
})
uniqueDays
new Date(binned_by_10[0].day)
new Date(uniqueDays[0])
// ctx = {
// // replay;
// const ctx = DOM.context2d(
// width + margin.left + margin.right,
// height + margin.bottom + margin.top
// );
// const canvas = ctx.canvas;
// // const canvas = DOM.canvas(width * ratio, height * ratio);
// // canvas.style.width = `${width}px`
// // canvas.style.height = `${height}px`
// // let ctx = canvas.getContext('2d')
// // ctx.scale(ratio, ratio)
// return ctx;
// }
// masterSchools = await d3.json('https://gist.githubusercontent.com/jmuyskens/9d003af53fd26f421b24503b01d3d4f4/raw/4b915216003950510f08c67c4a7016fbdb2befce/masterSchools.json')
// schools = d3.range(50).map(i => {
// let school = {}
// school.exposed = Math.round(d3.randomUniform(1,490)())
// school.date = d3.randomUniform(0, width)()
// school.nodes = masterSchools.slice(0, school.exposed)
// school.enclose = d3.packEnclose(school.nodes)
// return school
// })
// schools[0].enclose
// timelineSimulation = d3.forceSimulation(schools)
// .force('x', d3.forceX(d => d.date).strength(5))
// .force('y', d3.forceY(d => 0).strength(0.5))
// .force('collision', d3.forceCollide(d => d.enclose.r + 1).iterations(5).strength(1))
// .stop()
// timelineSimulation.nodes()
margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
dataforplot = binned_by_10.filter(d => d.day !== "1995-04-17")
binned_by_10 = d3.csv(
'https://gist.githubusercontent.com/Mbrownshoes/7f08c0aa283d79e096091b849dd5c03d/raw/097b5ec793446a9385f63cd16c5bc6a9610a805e/binned.csv',
d => {
(d.depth = Number(d.depth)), (d.value = Number(d.value));
return d;
}
)
uniqueDays = d3.map(dataforplot, d => d.day).keys()
import { barz } from '9cbb8a62d721922e'
monthly = d3.csvParse(monthlyFile, d3.autoType)
monthlyFile = FileAttachment(
"P26_monthlytemperatureData_updated20191010.csv"
).text()
summaryData = d3.csvParse(
`Year,0-10 dbar,10-50 dbar,100-150 dbar,800-1200 dbar,2000 dbar - bottom
1956,8.0669,6.9816,4.2177,2.849,NaN
1957,9.0546,8.5956,4.9171,2.8102,NaN
1958,8.9594,8.0657,5.5262,2.8738,NaN
1959,8.6873,8.2175,5.0475,2.882,NaN
1960,8.1413,7.6697,5.4172,2.9187,1.6356
1961,8.3815,7.5716,4.4401,2.8356,1.6274
1962,8.7539,8.0746,4.5364,2.8902,1.638
1963,8.9314,8.0461,4.4075,2.8747,1.6397
1964,7.9071,7.2245,4.2279,2.8488,1.6341
1965,8.4092,7.8823,4.6953,2.8715,1.6297
1966,7.8217,7.4647,4.7486,2.8901,1.6402
1967,8.2313,7.2828,4.7558,2.9105,1.6374
1968,8.0526,7.2364,4.3972,2.8398,1.6227
1969,7.8333,7.2364,4.1156,2.843,1.6194
1970,7.5576,7.4493,4.5871,2.8142,1.6342
1971,7.4191,6.8509,4.3714,2.8281,1.6341
1972,8.5628,7.5577,4.6124,2.8772,1.6489
1973,7.9667,7.6182,4.9131,2.8769,1.6407
1974,8.1809,7.4673,5.1453,2.8971,1.6416
1975,7.7902,7.3049,4.8561,2.8923,1.643
1976,7.679,7.0625,4.8355,2.8725,1.6421
1977,8.0058,7.2206,4.6138,2.8426,1.6364
1978,8.419,7.7036,4.804,2.8916,1.6392
1979,9.1161,8.4562,5.1009,2.9124,1.638
1980,8.8085,8.1701,5.3011,2.9173,1.6389
1981,9.3065,8.6299,5.1577,2.9281,1.6373
1982,7.8306,7.3166,4.3329,2.8508,1.6326
1983,9.3121,8.2344,4.5157,2.8592,1.6266
1984,8.671,8.1933,4.8944,2.8699,1.6244
1985,8.2409,7.7465,5.3514,2.9393,1.6303
1986,9.5416,8.9932,5.3865,2.9111,1.6214
1987,7.7257,7.6926,5.243,2.911,1.6139
1988,6.5459,6.4881,4.7722,2.8932,1.6125
1989,8.8205,7.9986,4.649,2.9091,1.6164
1990,9.5465,8.468,4.9052,2.9376,1.6201
1991,9.2869,8.8778,5.259,2.9404,1.6295
1992,9.4156,8.6525,5.1739,2.9353,1.6235
1993,8.9694,8.4926,5.6544,2.9718,NaN
1994,9.3882,9.2284,6.3194,2.9709,1.6315
1995,9.136,8.189,5.8419,2.9599,1.6496
1996,9.2566,8.196,5.3484,2.9036,1.6115
1997,9.7321,8.6229,5.1924,2.8896,1.6135
1998,8.823,8.1133,4.7715,2.8583,1.6128
1999,8.3107,7.7016,5.2251,2.939,1.616
2000,8.5813,8.0138,4.4764,2.8799,1.6189
2001,7.7769,7.3678,4.6128,2.8728,1.6125
2002,9.1065,7.8476,4.446,2.8857,1.6276
2003,8.706,8.3791,4.3358,2.882,1.6119
2004,8.9802,8.2159,4.6131,2.8973,1.6246
2005,10.479,9.2389,5.5073,2.9754,1.625
2006,9.015,8.6012,5.4905,2.9772,1.6285
2007,8.0841,7.5294,5.5949,2.9476,1.621
2008,7.5089,6.8161,4.4622,2.8807,1.6185
2009,9.0656,8.3214,5.1747,2.9412,1.6276
2010,9.0293,7.9225,5.2126,2.8965,1.6165
2011,8.3814,7.958,4.6558,2.8793,1.6075
2012,7.9745,7.3525,4.6459,2.911,1.6216
2013,9.3631,8.2486,4.4914,2.8688,1.6179
2014,10.774,9.9855,5.1785,2.9535,1.6315
2015,10.56,9.422,5.2628,2.9119,1.6218
2016,10.551,9.1985,5.585,2.9473,1.6309
2017,9.145,8.0844,5.7882,3.0102,1.6294
2018,9.664,8.8953,5.0641,2.9648,1.6211
2019,10.224,9.1857,4.764,2.9399,1.6236
`,
d3.autoType
)
ss = require('simple-statistics')
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.
