How I Made a Winning Data Story using AI Coding Tools

This is the story about how I became a top 5 finalist in Maven Analytics' recent data visualization challenge using AI coding tools - lovable, chatgpt, replit, bolt, and claude. A couple weeks ago one of the mentors in our Tech-Moms Data & AI course dropped a LinkedIn post about the March Maven Analytics Data Challenge into our class slack channel. The challenge was: "Use data visualization and storytelling to showcase the legacy of Disney Pixar films over time." I've always want to create "scroll story" like you see in the New York Times. (s/o to Mike Bostock). Not to mention, Creativity, Inc by Pixar co-founder Ed Catmull is one of my favorite business books of all time. And as a mom with 2 Pixar obsessed kids, I was stoked to dig into the data and see if I could come up with a unique take. It was only a few weeks ago that I attended an AI hackathon where I was introduced to new-to-me AI coding tools: Lovable Bolt.new Replit At this hackathon, I made & demo'd an app, "Story Magic", that allows users to upload a hand-drawn picture & using the OpenAI API creates a story from that image. I also incorporated ElevenLabs voice API to allow users (my kids) to pick a voice actor to read the story to them. IN TWO HOURS. As someone who got their start at GitHub as an accountant and hacked my way into a data analyst/scientist/engineer role, I've done my fair share of coding for work and side projects. But to be able to make a functional app that incorporates 2 APIs in two hours truly blew me away.

Since that evening, I haven't been able to sleep... So when I saw the challenge to create a data visualization to tell a story about Pixar data, I knew I wanted to test out these AI tools.

Very simply here is what I did: Step 1: Open AI tool website: lovable.dev Step 2: Typed in the prompt: "Act as if you are a data journalist & make a "scroll story" telling the history of Pixar from the time it was purchased from LucasFilm by Steve jobs to when Ed Catmull was the Co-founder and CEO. Tell the story based on the book Creativity, inc. Use the attached csv. Make it magical and impactful." Step 3: ✨ Watch the magic unfold - the AI tool began to code a fully interactive and animated website built with:

• TypeScript

• React

• shadcn-ui

• Tailwind CSS

• Vite

(Frameworks I have never used before!)

Now just like in "real coding", it wasn't initially perfect and the v1 had a bunch of bugs. But that's OK because if there was anything I wanted to change, I could just type, "change this chart to a 100% area chart" and boom the stacked bar chart transformed into a 100% area chart before my eyes.

Sometimes things would just break. In this case, I would type In, "Fix the broken bar chart". This would sometimes work! or I would have to ask it to "fix it" multiple times until it worked.

Sometimes everything broke! The app won't render at all. In these instances I could "roll back" to a previous working version and try something else. (Side note: pressing a button to "roll back" instead of having to do this in git is 10/10 excellent.) When I wanted to change some text, instead of asking in the chat, "change this text to xyz", in lovable I could sync the project with GitHub and open a GitHub codespaces editor in the browser. (No cloning needed!) Remember, I made my first React app a couple week ago so I'm not super familiar with the folder structure. But I was able to search and click around the folders to find the correct file to edit the text. Then commit and push and it synced with the AI coding tool. (Insert tears of joy for how easy this is!)

Now you might be asking yourself: I want to make a data story using AI coding tools - which one should I use? ALL OF THEM! Here's my pro-tip: Test the same prompt in each tool and stick with the one whose output you prefer. Alternatively, you can select your favorite elements from each.

While Lovable was processing the updates I instructed using natural language, I was also creating apps in Replit, Bolt, Claude, and even ChatGPT at the same time. Each AI tool is like your own coding intern and each has it's own logic and ideas for how to fulfill the prompt. Based on using the same prompt in each, I liked the foundational UI that Lovable provided so ultimately decided to use it for the project.

HOWEVER some really cool ideas for ways to visualize the data came from Bolt, Replit, and Claude. Using my powers of critical thinking and data discernment, I cherry-picked the ideas I liked the best and ask Lovable to implement them. For example: Claude came up with this viz - a donut chart showing the distribution of G vs PG movies with a insight that "Pixar film ratings evolved from primarily G-rated to more PG-rated content".

I thought - "Hey, that's a cool insight". So I asked Lovable - "Create an area chart that shows the percentage of movie ratings over the decades." And it came up with this:

Pretty fun stuff, right?! One caveat: the numbers the tools calculated weren't always correct! I also created pivots tables and functions in google sheets to validate the data then prompted the tool to fix the data or sometimes just went into the code and typed in the correct amounts. In total it took about 6 hours of tweaking - adding in graphs, removing components, validating data, fighting with bugs, editing in Codespaces, commit, push, sync, rinse, repeat. The last and most important step of any project is to SHIP IT! Here is the final project: https://pixar-scroll-tale.lovable.app/ I posted on LinkedIn and crossed my fingers. A couple days later I found out I made the top five finalists and then on 4/15 they announced I was one of the 3 final winners! YAAY! I love winning! But seriously, this win means a lot. Most entries (including the impressive winning one!) were made using traditional dashboarding tools. Having worked in data for a decade at GitHub, I've spent over 10,000 hours crafting dashboards with tools like Tableau, PowerBI, and Looker. However, one thing I emphasize in my Data & AI class is that while dashboards are good for showcasing descriptive & diagnostic data, vertical reports can convey a more comprehensive story and align with how we typically read online. Additionally, using AI tools makes creating cool JavaScript animations easy, and the entire process was just plain fun.

Here is my challenge for you: pick an AI coding tool, type in a prompt, and see what happens. Then iterate, edit, ship & let me know what you make!

P.S. it was really cool to see my project judged by 5 Maven Analytics data pros in this YouTube video. Response video with my updates coming soon! :)