Public
Edited
Aug 16, 2023
makePlot = function(name){
const allNames = ["distance", "phase", "latitude", "longitude"];
return Plot.plot({
width: width,
height:200,
marginRight: 0.2*width,
x: {
domain: sliderDates,
label: null
},
y: {
domain: [ d3.min(data.map(d => d[name]) ), 5+d3.max( data.map(d => d[name]) ) ],
label: name
},
grid: true,
title: name,
marks: [
Plot.ruleX([sliderDates[0]]),
Plot.ruleY([0]),
Plot.lineY(data.filter( d => d.date >= sliderDates[0] && d.date <= sliderDates[1]),
{x: "date",
y: name,
stroke: d3.schemeTableau10[allNames.indexOf(name)]
})
]
})
}
formatDate = d3.timeFormat("%Y-%m-%d %H:%M:%S");
import {rangeSlider} from '@mootari/range-slider'
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.
