2025-03-24
Am I the only one who finds the ease of programming in the post-LLM era a bit frustrating? Amazing, but frustrating still. I have always programmed to learn. Yes, the end product is important, but so too is your understanding of the program's operation.
With regard to visualization, I cut my teeth on Python's matplotlib module. Matplotlib allows for a significant amount of customization. This feature does not prevent one from getting started with matplotlib as plt.plot() and df.plot() make the library accessible. But if you want to exercise significant control over your visualization, whether using the pandas extension or just good old plt.subplots(), you must learn to access rudimentary plot elements. While I eventually did begin to develop using plotly, I long resisted the move.
Unlike matplotlib, D3, from the start, requires the user to build a plot from its rudimentary components. This means that a lot of work is required to generate even a simple plot. It also means that once a simple plot is created, just a little bit of development is required to increase functionality of the application. My task today is to present a map of a D3 application that can serve as a working mental model. It is terribly easy to build your desired D3 plot using an LLM. While this is great, one would be benefited by having at least a basic understanding of a D3 plot, in the least to help with the debugging process. Quite often, script provided by an LLM contains redundancies. To convey the process, I have generated a simple line plot following the steps outlined in the basic line plot example provided at the D3 website. I made the dimensions of the graph responsive to window size. Then, I added a dropdown menu. Both the new size and selection of a new variable require a function for updating the plot features. Since the function includes the infrastructure for plotting, we want to call this function even for the first variable that is selected by default.
I break down the script that generates this plot into various steps. This script automatically transforms a standard csv file into a D3 plot where the variable presented can be selected using a dropdown menu. We can divide the construction of the graph into two parts. First, we must create the minimum viable D3 plot. Steps 1-6 accomplish this. This will, in fact, plot no data at all. Instead, it will be a skeleton that will be updated.
I recommend using this function, or one like this, as a starting point for any query to an LLM. This way, you can be confident that you are beginning with quality architecture.