Goal

Wanted to start developing an interactive chart for the DIMMiN App to show off the data in my ultralearning project. Specifically, I want to use D3 to provide an interactive portion to the About App where the user can see an animated header instead of a static image.

Notes

I wanted to make sure that this visual could automatically scale and adjust to the users' browser. I found this stack overflow post which should help with that later down the line. Of course the first thing I needed to do was to download d3 from the website.

I had to re-download the data from my google calendar via GTTime Report to get the excel file. I created a quick data_processing.ipynb script that helped me process the data and removed any PII.

Then I began to establish the SVG to hold the chart elements and populated them with rectangles representing the different amount of hours worked. I also added a tooltip which displayed the notes I took in the calendar which was fun.

I uploaded the cleaned data to the S3 bucket and updated the CORS Permissions so that I could access it via my dev environment which allowed me to fetch the data with a GET instead of trying to access it locally.

I was able to transition from my scratch HTML file to the DIMMiN app pretty seamlessly. It was up in the About page in no time!

I ended up being able to scale / resize the image much more easily than I thought I would be able to so that was helpful.

Results

• Built out an interactive visual in D3 that shows off my data science ultralearning project, including my notes I included in the calendar descriptions.
• Added this visual to my About App
• Served files to the D3 chart from an S3 bucket by altering the CORS Permissions
• Checked out a new branch in my DIMMiN project and commited changes there.

Next Time

• Add lights to the visual that turn on and off at different intervals.
  • Maybe based on the user's current time? That could be neat.