A question about coding (bar chart race)

Processing Coding Questions
1

So I’m new to Processing 3, and would love to know how to make a bar chart race similar to this one: https://www.youtube.com/watch?v=ZkcaANwCrMQ

2

hey, welcome to this forum !

that is a bit of an all-encompassing question… do you have experience with writing code ?

the most basic thing to do imho is to draw a rect() and use a variable to change its width.
next step would be to use a FloatList or IntList, if you have a timeline where that value changes and use that.

pseudo:

float barLength;
//in draw()
recht(0,0,barLength,15);

FloatList lengthValue= new FloatList (0,2.2,13,24.7,32,56.1,66);
int count = 0;
//in draw()
recht(0,0, lengthValue.get(count),15);
count++;

that’s a bit oversimplified, you need to make sure that you don’t exceed the numbers of items in the list when count gets too big.

but that is just a really most basic pattern to show what I mean.

if you have one bar, then you can - of course - draw more, either working with arrays or lists. finally it would be probably worth having a class :slight_smile:

3

I used the code, but it says “The local variable barLength may not have been initialized”

4

haha yes, you need to do it more “processing” style :slight_smile:

int x; “declares” a variable -> it tells processing: “hey, I exist”
x = 0; initializes it - at. some point you need to tell what’s inside x
then you can access that value in your code.

if you’re lazy you can do the first two steps at once:
int x = 0; // outside of setup() or draw()

5

You need data foremost

Like a list of days and for every day who got how many votes or whatever

So the graph can change over time

Do you have a csv file like this?

Then please post it. It’s more about reading and showing the file content

6

Screenshot_51
Screenshot_51679×591 26.2 KB
This is my code.

7

Look at the hello mouse section here

See https://processing.org/tutorials/overview/

8

it says “count cannot be resolved to variable”

9

int count = 0; must be before setup() to make count a global variable, known everywhere

Please understand what setup() and draw() are

10

It still doesn’t work.

11

Yes. Please post your entire code.

And also tell us what exactly doesn’t work

By the way that’s not as easy as you think.

Do you have data that you want to show in the animation?

12

int count = 0;
setup();
rect(30, 20, 55, 55, 7);
float barLength;
rect(0,0,barLength,15);
FloatList lengthValue= new FloatList (0,2.2,13,24.7,32,56.1,66);
rect(0,0, lengthValue.get(count),15);
count++;

There’s no data I want to show.

13

The code is not correct.

You are attempting something difficult too early.

Please go back to the tutorial I mentioned above (with the Hello mouse section) and check out the examples for the mouse there.

Then go to the examples section on the website and check out the examples in the section “Motion”.

Then come back here and get more help.

Thank you!

Warmest Regards,

Chrisir

P.S.

You must be able to work with setup() and draw() and {…}

Can you please explain what you want to achieve in your animation?

The bars changing length or also move up and down?

1 Like
15

There is a learning curve to all of this.

A short list of resources to peruse:

Resources < Click here to expand !

Explore the resources available here:

:)

16

See also How to do this video?

17

I would like to make them change length.

18

I talked about that you should look at the examples in the mouse section.

Can you please show your attempt now?