index.js
import * as Plot from '@observablehq/plot';
import { data } from '@curran/gistemp';
import './styles.css';
export const main = (container) => {
// Measure the container dimensions
const width = container.clientWidth;
const height = container.clientHeight;
const plotDOM = Plot.plot({
width,
height: height - 54,
grid: true,
y: {
grid: true,
tickFormat: '+f',
label: '↑ Surface temperature anomaly (°F)',
},
color: {
scheme: 'BuRd',
legend: true,
marginTop: 20,
marginLeft: 10,
height: 54,
},
marks: [
Plot.ruleY([0]),
Plot.dot(data, {
x: 'Date',
y: 'Anomaly',
stroke: 'Anomaly',
}),
],
});
// Support hot reloading by replacing the DOM on each run.
This was ported from Observable: Diverging color scatterplot, with a few modifications mainly to set up the margins.
MIT Licensed