Goal

Complete and deploy the D3 visual to the About App.

Notes

Thankfully ChatGPT was able to help me correct the Tooltip issue by providing the following code to adjust its position relative to the chart's SVG:

var containerPos = d3.select('#ultralearning-chart').node().getBoundingClientRect();
var tooltipX = event.pageX - containerPos.left; // Adjust X position
var tooltipY = event.pageY - containerPos.top; // Adjust Y position

This fixed the tooltip issue pretty much immediately. Nice! I was worried that was going to take a while.

The final component of this visual would be to add the lights to the bars to complete the city-scape look. I was thinking about how computationally expensive it would be to add all the lights to each building so I think I will change my approach to add a max number of lights any given building can have. This will also be proportional to the size of the building and the size of a given light a building can have. I'm thinking like some kind of random integer between 0 and the maxNumLights.

I was able to finally add the lights by adjusting the y-scale by a random number times the maximum number of lights a bar could have. This essentially gave an integer number of a random index that a light would fit into and created the overall look I was going for.

data.forEach(function(d, i) {
            var maxLightsPerBar = Math.floor(scaleY(d["Hours"]) / lightHeight);
            var numLights = Math.min(maxLightsPerBar, maxNumLights);
            d.lights = Array.from({length: numLights}, (_, j) => ({
                x: scaleX(d["Date"]),
                y: scaleY(d["Hours"]) + (Math.floor(Math.random()*maxLightsPerBar)*lightHeight),
                width: barWidth,
                height: lightHeight,
                isOn: true
            }));
        });

I'm going to save the light flickering for another time. For now I'm happy with this visual (and the speed with which I was able to generate it) so I'll go ahead and push it to Production via Git.

git add .
git commit -m "askjldhalskjdh"
git push origin about-page-ul-chart

To do this I first merged the branch I created yesterday then merged it with the master branch on GitHub. Then I crossed my fingers and deployed to Heroku. I really should start looking into Heroku Pipelines, but I think I'll learn more about that via my HitHub App project.

git push heroku master

Results

• Deployed a new banner to the About page of the DIMMiN App's About App using D3.

Next Time

• Back to HitHub App huehuehue