An experiment to see how well the current LLM models do with creating D3 visualizations. Note, this is 10/2024. In a year it will already be outdated!
The goal is to attempt to write as LITTLE code as possible. If something needs fixing, work it in the prompt.
Im using a combination of Claude (3.5), and ChatGPT O1-mini/o-preview. Im paying for GPT, but figured I would run out my allotment of Sonnet prompts first just to see how well that goes.
I will be needing some Widgets in a bit and we have crafted our own before. I think the requirements call for just a pie chart. I think we can do better. I have never tried a radar chart, which is NOT where we need to be going...but hey, its an experiment right?
At first I thought I would consult with o1-preview for an outline.
Ok...wow...5 weeks! 5 Weeks cant be right. Im hoping 2 hours or so.
Lets ask for a preview
Create me a preliminary visualization
Oh dear. That is not what I expect from D3 at all. I think I will start fresh with a small set of requirements.
So I did a little research to get the tactics for Mitre. Mostly to get the 11 or so tactics to start with. This was a basic create a radar graph prompt.
Ok...decent start. Looks wonky. Lets fix the obvious labels.
Divider lines are a bit much
Manual asks for improvements
Lets make better divider lines
A very simple ask to improve without anything in mind
Lets add data. 24 hours, 1 week, 1 month
Normalize the data a bit
Lets add data. 24 hours, 1 week, 1 month
So at this point, my free claude promts ran out. Lets move on to o1-preview. Overkill.
One thing I noticed is that when just using the whole thing as its given, features disapper. Its kinda like a regular ChatGPT thing where you ask for one little change and it rewrites the whole thing.
Im told canvas might do this better, but really....what I should be doing is looking at the code more. Im just looking at the working graph and saying..."wow, works! Next!"
Gimme a toggle and bar chart
Transitions are broke again
Add some labels and final polish. But...this is kinda a hot mess. I should have stuck to one graph
Transitions are broke again
and thats a wrap.
Well. What did we learn
you can effective create D3 graphs with zero code writing. i never micro edited a single line
you really should understand whats going on so you can ask focused questions. Otherwise a new feature rewrites things. This might blast previous things.
This took about 90 mins. Althought i took a lot of notes and capturing that was just as long!!