function makeChart() { // sort by date ascending dataset.sort((a,b) => a.date - b.date); console.log(dataset); const numDaysSlider = html` `; const daysText = html` 7 `; const svg = d3.create('svg') .attr('width', w) .attr('height', h); let endDate = new Date(d3.max(dataset, d => d.date)); endDate.setDate(endDate.getDate() + 1); const xScale = d3.scaleTime() .domain([d3.min(dataset,d=>d.date), endDate]) .rangeRound([80, w - 80]); const yScale = d3.scaleLinear() .domain([12,0]) .rangeRound([20,h-20]); const colorScale = d3.scaleLinear() .domain([0,12]) .range(['#f90', '#f00']); const xAxis = d3.axisBottom(xScale); xAxis.ticks(7, "%a"); const yAxis = d3.axisLeft(yScale); const xAxisGroup = svg.append('g') .attr('class','axis') .attr('transform', `translate(0, ${h - 20})`) .call(xAxis); const yAxisGroup = svg.append('g') .attr('class', 'axis-left') .attr('transform', `translate(80,0)`) .call(yAxis); svg.selectAll("rect") .data(dataset, d=>d.date) .join(enter => enter.append('rect') .attr('x', d => xScale(d.date)) .attr('y', d=> h-yScale(d.hours_of_sleep)-20) .attr('width', (w-160)/7) .attr('height', d => yScale(d.hours_of_sleep)) .attr('fill', d => colorScale(d.hours_of_sleep))) function updateGraph() { const numDays = +numDaysSlider.value; daysText.innerText = numDays; const subSection = dataset.slice(7-numDays,7); const axScale = d3.scaleTime() .domain([d3.min(subSection,d=>d.date), endDate]) .rangeRound([80, w - 80]); const ayScale = d3.scaleLinear() .domain([12,0]) .rangeRound([20,h-20]); svg.selectAll('rect') .data(subSection, d => d.date) .join( enter => enter.append('rect') .attr('x', d => xScale(d.date) + 800) .attr('y', d=> h-yScale(d.hours_of_sleep)-20) .attr('width', (w-160)/(numDays)) .attr('height', d => yScale(d.hours_of_sleep)) .attr('fill', d => colorScale(d.hours_of_sleep)), update => update.transition() .attr('x', d => axScale(d.date)) .attr('width', (w-160)/(numDays)), exit => exit.transition() .attr('x', d=>xScale(d.date) - 800)); const axAxis = d3.axisBottom(axScale); axAxis.ticks(numDays, "%a"); const ayAxis = d3.axisLeft(ayScale); xAxisGroup.call(axAxis); yAxisGroup.call(ayAxis); } numDaysSlider.addEventListener('input', updateGraph); return html`

Sleep

Days to Show ${numDaysSlider} ${daysText}

${svg.node()}

`; }