4-Create-Data-Viz-Dashboard.md

Table of Contents

1. You have data, now what?
2. Discussion component
3. Heatmap component
4. Next step

You have data, now what?

Discussion

In Step 3 you fetched discussion data from the /getDiscussions endpoint and set the discussion variable from within Discussion.

We've written the following useEffect from within Discussion:

useEffect(() => {
  if (discussion.length > 0) {
    const discussionTimestamps = discussion
      .map(discussion => discussion.timestamp)

    setTimestamps(discussionTimestamps)
  }
}, [discussion])

It checks to see if discussion data has been set - if so, it extracts the timestamp property and sets the timestamps variable. Why do this instead of just sending the data as is to Heatmap? Well, we designed Heatmap to only rely on timestamps, and it's better practice to send child components just the data it requires instead of the entire kitchen sink.

Then this data is send it to Heatmap, which will finally render the heatmap, in the following line:

return (
  <Heatmap timestamps={timestamps} />
)

Heatmap component

We destructure the timestamps prop here:

function Heatmap ({ timestamps }) {

We then convert the timestamp data into a count of how many fall within the same hour and day of week, and use D3.js to create the heatmap.

So there you have it. A working web application. But we're not done just yet!

Next step

Now you're ready to go to Step 5: Create a dropdown to switch between classes.