11-17: Office Hour Follow Up

[sandywij]

Grouped Bar Chart Error

Reading and comparing the code to the one on observable, it turns out to be this line:

https://github.com/yukichong1998/CAPP30239_FA22/blob/106f1a421793df73ea0daf1d70225110c9e39c50/final_project/uptake-race.js#L21

This is happening because you passed in a scale function, while x-domain is looking for an array of x-values. By replacing it to just data.map((d) => d.race) fixed it.

[sandywij]

Spacing out category labels

https://github.com/yukichong1998/CAPP30239_FA22/blob/106f1a421793df73ea0daf1d70225110c9e39c50/final_project/uptake-age.js#L61

Subbing this line out to for (const [index, age] of [...ages].entries()) allowed me to get to the index.

I'll see I'll be able to write a code snippet to do this in the next week or so since this really just aesthetic, and not really a blocker

[sandywij]

Quarter Labeling

Replace this:

https://github.com/yukichong1998/CAPP30239_FA22/blob/106f1a421793df73ea0daf1d70225110c9e39c50/final_project/telehealth-growth.js#L31-L33

With:

svg
    .append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(
      d3
        .axisBottom(x)
        .tickSizeOuter(0)
        .tickFormat(timeFormat)
        .tickValues(d3.timeMonth.range(x.domain()[0], x.domain()[1], 3))
    );

D3's default is to mark the beginning of the quarter on the axes. There wasn't anything to switch it to the end of the quarter (March, June, Sep, Dec). I used a d3 function that iterates a date value every x time period and passed it into axes.tickValues where we are able to customize the exact tickValues we want shown

https://github.com/d3/d3-axis#axis_tickValues