Figure Friday 2025-w22

Marvel films, verhouding tussen wereldwijde inkomsten en budget, een AI Claude-experiment.

De dataset van Figure Friday bestaat uit met name financiële gegevens voor alle Marvel films. Na het bekijken van de gegevens en het omzetten van een aantal kolommen van een string value (b.v. 38%) naar een getal, besloot ik een paar dingen in combinatie uit te proberen:

  • Vibe Coding met Claude via OpenRouter.ai
  • Een Dash Mantine app in plaats van een Dash Bootstrap app
  • Gebruik van een UI/UX/Mantine stijlgids zoals gemaakt door iemand van de Plotly community (zie video voor uitleg en download).

De Prompt

De app moest simpel worden: dark/light mode, een filter op category (Marvel films maken vaak deel uit van een serie) en een scatterplot waarbij duidelijk te zien was hoe wereldwijde verdiensten zich verhouden tot het budget van de film.

Na een enigszins mislukt experiment, de versie van de verschillende python libraries op mijn computer waren niet op elkaar afgestemd, besloot ik deze prompt te gebruiken, de guidelines plakte ik na de prompt:

#the data loaded is information about marvel movies. 

#assignment:
#create a dash app, use only dash mantine components.
#create the app based on the uploaded best practices for UI/UX/Mantine.
#add a light/dark mode switch with callback, make dark mode default
#create a filter dropdown for category, add "all categories" and make "all categories" default
#on appload, load the plots for "all categories"

#create a scatterplot
# x = year, y="% budget recovered"
# colors for traces: red if y < 200, blue if y > 250 else purple
# create a custom hover with film, category, worldwidegross and budget
# create a callback which makes it possible to filter on category

Resultaat

Het resultaat werkte niet direct, er zat een fout in de component structuur en voor de hoverdata waren een paar gegevenskolommen gebruikt, die niet bestonden.

Wat ik erger vond was een horizontale lijn in de visual op 100% met als text erbij “Break Even”. Dat hoeft namelijk helemaal niet waar te zijn, ik wilde juist dat de datapunten een andere kleur kregen afhankelijk van het percentage. In films is het budget meestal niet terugverdiend als er evenveel geld aan tickets is verdiend, meestal is dat pas het geval als de verdienste 2.5 a 3 x het budget is. Sommigen zeggen ook 2 a 3 keer, in ieder geval is het niet zo dat als ticketsales = budget, dat je er dan bent.
In de uiteindelijke visual zie je dit terug als oranje dots, als de 200%, niet wordt gehaald, grijs in het tussengebied, en groen als de ticketsales 3 of meer keer het budget is.

Hoewel de app een dark/light mode switch heeft, worden tekstkleuren in de visual niet aangepast als je naar Dark Mode overgaat. Dus krijg je tekst die niet te lezen is. Daarnaast verdwijnt de legenda als je een categorie kiest. Dat zijn details die oplosbaar zijn, door AI of door mij (ik heb het niet gedaan en AI niet gevraagd). Ik stoorde me daar aan.

Modellen en kosten

Het genereren van wat ik vroeg in de prompt en 1x een kleine tweak door Claude zelf, het kostte $1.82. We hebben het hier over een eenvoudige opdracht. Als je dat vergelijkt met modellen die als “minder” te boek staan, een hoog bedrag. Dan mag je ook iets verwachten. Volgende keer eerst proberen met een “minder” model. Die $1.82 was het restant van 10 dollar credits die ik 2 maanden geleden kocht. Ik ben geen intensief betalend AI gebruiker, maar ik heb wel een paar dingen via OpenRouter gedaan die in mijn optiek complexer waren en waarbij veel meer interactie was. En toen dacht ik elke keer “kost ook niets” :-). Iets geleerd dus.

De prompt nog een keer

Bij Figure Friday posten mensen de link naar hun oplossing en wat uitleg over het hoe/waarom van hun app of grafiek. Ik kreeg als reactie op mijn bijdrage de opmerking “het ligt ook aan je prompt” :-). Deze persoon had de data free format met een korte toelichting richting Claude gestuurd. Het antwoord een technisch prachtige app met kpi cards, nog meer kpi cards, veel filters en wat andere soorten grafieken.

Los van resultaat, een compleet verschillende insteek. Mijn insteek “ik heb deze gegevens/data en wil dat op deze manier communiceren”. Zijn insteek “ga je gang, maak er wat moois van”. Functioneel versus meer technisch. Het is niet zo dat de ene methode per definitie goed is, de andere fout. En dat geldt ook voor het resultaat. Mijn voorlopige conclusie is wel dat ik op dit moment ook prima toe kan met gratis of goedkopere AI opties omdat ik die over het algemeen hetzelfde zouden opleveren als Claud via OpenRouter.

Demo

Py.cafe: demo en code

Community link: link

Voorbeeld bevat

  • Interactie tussen categorie selectie en plot
  • DMC basis
  • Dark/Light mode
  • Scatterplot

Figure Friday is een initiatief van de Dash/Plotly community waarbij je elke vrijdag een dataset krijgt en mensen een visual of kleine app maken, waarbij ze inzichten uit de dataset proberen te krijgen. De vrijdag daarop om 18:00, is er een zoomsessie waarbij sommigen uitleggen waarom ze gemaakt hebben wat ze tonen. In de thread op de communitysite wordt ook de code gedeeld, om van elkaar te leren en als het kan een demo.