Public
Edited
Feb 28, 2024
dataset = d3.csvParse(await FileAttachment("data.csv").text(), rowConverter);
rowConverter = (row) => {
// Modify code here for row conversion
return {
};
}
w = 600
h = 500
makeChart()
function makeChart() {
// sort by date ascending
dataset.sort((a,b) => a.date - b.date);
console.log(dataset);
const numDaysSlider = html`
<input id="numDaysSlider" type="range" min="1" max="7" value="7"></input>
`;
const daysText = html`
<span id="daysText">7</span>
`;
const svg = d3.create('svg')
.attr('width', w)
.attr('height', h);
function updateGraph() {
const numDays = +numDaysSlider.value;
daysText.innerText = numDays;
}
numDaysSlider.addEventListener('input', updateGraph);
return html`
<h1>Sleep</h1>
<label>Days to Show</label>
${numDaysSlider}
${daysText}
<!-- add any necessary HTML here, either directly or using the pattern
set by numDaysSlider & daysText
-->
`;
}
d3 = require("d3@7")
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.
