Goal

Apply finishing touches to UL bar graph, start writing blog post about it.

Notes

I was on a call with Andrew today when I pointed him to the interactive graphic I made for the About App. When he tried to load it wouldn't work. I troubleshooted this with him on the phone and found out it was due to a few reasons:

1) D3 needs to be loaded at the top of the page 1) Fixed this by adding it to the headers of base.html 2) I needed to update CORS Permissions to allow Andrew to access the CSV that included data about my ultralearning project 3) The script was then being executed twice because it was being loaded in both in the about page as well as the base.html template. I removed the {extra_js} blocks from the base.html template to prevent it from executing twice

Additionally, Andrew had mentioned that his mobile app was on HTTP and not HTTPS. This meant that my backend wasn't redirecting to the SSL version of the site. I found the issue pretty quickly, my Environment Variables were missing the DEBUG setting (which defaulted to False thankfully). All I had to do was manually set it to allow the backend to handle SSL redirects.

Andrew also recommended a "click-and-stick" method where the user can click on a bar to fix its tooltip and position as "on" which I liked and decided to implement.

It was a little bit tricky to implement it because I had to store the state of the bar the user currently clicked, then work around when to keep and when to leave the tooltip but I eventually figured it out. It was made a little more difficult because when D3 does a selection it creates a new object. So I thought it was selecting the same bar but it wasn't. That's why comparisons weren't quite lining up. Either way I fixed up the logic around it and it looks good to go.

He had another good suggestion which was that the user should be able to de-select a bar by clicking anywhere on the screen, not just on the bar that is currently selected. That's more tough to implement though and I'll need more time for it. Either way there have been some pretty significant improvements here!

Results

• Updated the chart to be viewable for other users
• Implemented the stick-and-click method for the chart
• Added the DEBUG variable to the Heroku Environment Variables
  • Therefore allowing SSL redirects for my site on any and all browsers

Next Time

• Maybe implement the click anywhere de-select method for the ul chart
• Start writing a blog post about it lol