Day 30: Dashboard with Click Interaction

Today I combined two of my previous charts and made a dashboard with interactions. When you click on the donut chart, it will highlight the days in the heatmap. This is achieved by binding the d.icon with both the donut chart and the heatmap.

Here are the steps:

• In donut.js, return the path so that we can find the d.icon
• In heatmap.js, add the applyHeatmapHighlight function, in which we will add a different style to the “rect”.
• In the main.js.
  • Draw the donut chart and heatmap by calling the exported functions
  • Configure click event and highlight & de-highlight the heatmap

The complete codes can be found here.

The Last Day

Today marks the conclusion of my “Learning D3 for 30 Days” journey. Over this period, I’ve delved into many chart types and also got a basic understanding of CSS, HTML, and JavaScript.

Some days I have to stay up late to finish what I want to do, some days I was traveling and need to get up extra early to do something before heading out. But I am really happy that I didn’t miss a day (well, except sometimes it passed midnight :P). I find it very helpful to have this kind of commitment. Otherwise, I will procrastinate and never get started.

There is still more to learn. I will plan something else after my summer holidays. 🔅