SVET PROGRAMIRANJA

Python → Processing → Interaktivni grafikon


Interaktivni grafikon u Python Processing-u


Lekcija 12 od 14

U prethodnoj lekciji napravili smo jednostavan stubičasti grafikon. Sada ćemo ga unaprediti tako da reaguje na kretanje miša.

Kada korisnik pređe mišem preko stubića, grafikon će prikazati tačnu vrednost tog podatka.

Interaktivni grafikoni se često koriste u modernim web aplikacijama, dashboard sistemima i analizi podataka.

Primer podataka

Podatke ćemo i dalje čuvati u Python listi. 


podaci = [12, 25, 18, 30, 22, 15]

Svaka vrednost predstavlja visinu jednog stubića na grafikonu.


Kompletan program


podaci = [12, 25, 18, 30, 22, 15]

def setup():
    size(600, 400)

def draw():
    background(240)
    
    bar_width = width / len(podaci)
    
    for i in range(len(podaci)):
        
        x = i * bar_width
        h = podaci[i] * 8
        y = height - h
        
        # provera da li je miš iznad stubića
        if mouseX > x and mouseX < x + bar_width and mouseY > y:
            fill(255, 100, 100)
            
            fill(0)
            textAlign(CENTER)
            text(podaci[i], x + bar_width/2, y - 10)
        else:
            fill(100, 180, 255)
        
        rect(x, y, bar_width - 5, h)

Kako radi ovaj program?

  • lista podaci čuva vrednosti
  • svaka vrednost postaje jedan stub na grafikonu
  • program proverava da li je miš iznad određenog stubića
  • ako jeste, stub menja boju i prikazuje vrednost
Provera pozicije miša omogućava da napravimo interaktivne grafičke elemente.

Mini projekat: označavanje najveće vrednosti

Možemo dodatno unaprediti grafikon tako da najveći stub ima posebnu boju. 


max_value = max(podaci)

for i in range(len(podaci)):

    if podaci[i] == max_value:
        fill(255,150,0)
    else:
        fill(100,180,255)

    rect(i*bar_width, height - podaci[i]*8,
         bar_width - 5, podaci[i]*8)

Šta radi ovaj kod?

  • funkcija max() pronalazi najveću vrednost
  • taj stub se crta drugačijom bojom
  • grafikon tako postaje informativniji

Gde se koriste interaktivni grafikoni?

  • analiza finansijskih podataka
  • vizualizacija anketa
  • sportska statistika
  • dashboard aplikacije
  • naučna istraživanja

Povezane lekcije


Često postavljana pitanja

Šta je interaktivni grafikon?

Interaktivni grafikon je grafikon koji reaguje na akcije korisnika, kao što su pomeranje miša ili klik.

Zašto su interaktivni grafikoni korisni?

Oni omogućavaju korisnicima da lakše istražuju podatke i dobiju dodatne informacije o vrednostima na grafikonu.

Kako Processing prepoznaje poziciju miša?

Processing koristi promenljive mouseX i mouseY koje predstavljaju trenutnu poziciju kursora.

Da li možemo praviti složenije grafikone?

Da. Kombinovanjem lista, animacije i interakcije možemo praviti veoma napredne vizualizacije podataka.


SVET PROGRAMIRANJA