Steemit Pond – A Real-time Visualization of Steemit Activity, with a Twist

in steemit •  8 years ago 

Inspired by @roelandp and his Steem Stream project, Steemit Pond gives you a real-time visualization of Steemit activity with a unique presentation. Whales and minnows are a common topic of discussion here on Steemit, so I thought I would apply this aquatic theme to the visualization. I am biased, but the results are pretty mesmerizing. Steemit Pond is already my favorite way to find and browse new posts as they are being submitted. Another unexpected aspect of the visualization is that it really allows you to see when there are surges and/or lulls in Steemit activity.

Please take a look at the demo.

I would also love to get some feedback, both positive and negative. If you would like to contribute feel free to get started – the source code is available here.

A Bit More About Steemit Pond

Different transaction types are represented by different objects in the pond. When a transaction is added to the blockchain its corresponding object comes into view and slowly drifts across the screen.

The initial version of Steemit Pond only includes new post, comment, upvote, and downvote transactions; however, if there is interest amongst the community I may add additional transaction types and some other features such as being able to control the visualization speed.

Thanks

Again, thanks to @roelandp for the inspiration and @pharesim for the steemjs library used for interfacing with the steemd database.

Hope you enjoy!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

This is the best...very entertaining and easy to follow.

Glad you like. Hope I can make some improvements on it sometime soon.

@mynameisbrian good job

My kid loves this ^^^

And bit mesmerising too.

I love how the downvotes are trash. Awesome work!

I appreciate it. And thanks again for the steemjs lib. This would have required a lot more time without it.

Developers DEVELOPERS DEVELOPERS!!!

COMMUNITY COMMUNITY COMMUNITY COMMUNITY COMMUNITY!!!!!

Great it really works!

haha they are ! I think I need glasses I stared at those like 20 sec to figure out what are they.

Even in the legend you couldn't tell??!
If so you do need to setup an appointment with the optometrist.

I don't think that's really fair to all of the down votes. Sure there are some people who will down vote to troll, but there are also a lot of down votes that are marking the content as trash.

I suppose that makes sense.

  ·  8 years ago (edited)

I downvote a lot of spam myself - I see it more as an analogy. Upvotes bubble the post up, downvotes trash it down.

Down votes had to be something - I chose trash. But I do think they are a good tool for combating spam bots and garbage posts.

This is great man

This is truly fabulous - and kind of hypnotic at the same time!

Beats any fish tank I've ever owned

I would like to set it for screensaver

can it be a livetime screensaver?

That would be fun.

There is probably some kind of external tool you could use to embed a website as a screensaver. Not sure.

Edit: A quick Google search yielded this:
http://lifehacker.com/webviewscreensaver-turns-any-web-site-into-a-screen-sav-1780794577
Not promoting it - just saying there are tools out there.

I found watching the pond very soothing. It was like being under water. Furthermore, it is a clever way to surf Steemit. I want more.

Thanks. I'll add some whale sounds so soothing they'll put you right to sleep :)

Yes definitely add some underwater sounds, bubbles, whale calls, fish sounds (whatever those are) and perhaps a "kerplunk" on a downvote. It would really round out this excellent idea! :)

This is Awesome!!! It's like watching Steemit come to life. Thanks @mynameisbrian for creating this pond.

Thanks! I really enjoyed coding it, so the community support is all just a great big plus.

@mynameisbrian yeah it looks cool, look very interesting and I liked it, deserves to be appreciated, cheers
Upvote done

cheers to you mate

Awesome I would definitely use it as a screensaver. Is it possible?

A quick Google search yielded this:
http://lifehacker.com/webviewscreensaver-turns-any-web-site-into-a-screen-sav-1780794577
Not promoting it - just saying there are tools out there.

wow... just. i dunno. you guys are evil geniuses. amazing :O

I love it that the fishes and upvotes are clickable!!! Open source rocks!

It sure does! I'm curious to see what developers do with steemit's source code now that it is available to them. Fun stuff!

It is a great work and I upvoted, obviously.
I have a question: it seems to me that "new top level posts" are not always so much "top level".

It would be fine to have different whale sizes, depending on how big the new post is, don't you think so?

Another suggestion: when the "big fish" appears from the left of the pond, you have to wait some seconds before you can read the post title, while would be really useful to being able to read it very quick :)

Congrats, you app RULES!

Hi @andrew0

Great suggestions! I'm sure you know this, but by top level I just mean it is not a response to any other posts and/or comments. I think I'll look into the whale size idea though. I need to check what data is returned when the get_block call is made because if the post body is not available that would mean additional calls which might impact performance.

Anyway, I really appreciate the input!

You're welcome! I didn't know you meant that by top-level.
The whale image there made me think you meant whale post so it may be a little bit confusing using the "top level" expression, associated with a whale image, don't you think so?
Thank you for your feedback and for the great job!

@remlaps Thanks! Looks like the post never took hold but it's still frustrating!!!

watching the pond is fun

I JUST WATCHED MY FISH SWIM BY... he looked glorious :)

What color was it? :)

I think it was red or orange and white striped?
Does that mean I'm gonna be a whale soon??

I hear sharks like to eat the red and orange ones :)
Watch out!

wow, simply amazing . great twist on Steem Stream , and very cool to watch ! keep it up @mynameisbrian !

Thanks. I intend to keep going with the project in my spare time.
The positive feedback received here is great motivation.

Very cool, im running out of monitors to track all these neat creations :)

Easy fix - more monitors. There is always room.

Awesome site! Very nice visulization - looking forward to all the new features and possible customization features that you'll be adding :)

Thanks @applecrisp. Any suggestions?

Good job Brian, go on and continue with development and keep us updated!

Thanks @okay. I will, when real-life decides to give me a bit of free time again.

  ·  8 years ago (edited)

This is so cool! Would make a great screen saver! I could watch this all day.

You’re right, it would! It’s not the most practical thing, but fun to look at nonetheless.

Woaw ! This is really really cool ! We need more devs like you around. This is a 10K post you got there !

Thanks for the complement. I don't know about 10K, not sure anything is worth that much here. At least nothing I've seen yet. Anyway I'm stoked with the 58 its at now.

Seriously... Good looking out for a fellow steemer.
Wish there was an easy way to keep this sketchy behavior out of steemit, but there is no good solution really. I dropped a soda can on him and watched it fall in the pond.
People gonna be d&*ks

OMG SO BAD ASS DUDE I AM TOTALLY WATCHING THIS ....PROBABLY A LITTLE TOO MUCH... I HATE CAPS BUT YEAH THIS IS AWESOME!!!

I love it!

But wait...what about my bros? Jellyfishes matter. Shame! ;)

My bad. Jelly lives matter.
I'll put them in the next update.

They really do, thanks!

throw in a depth charge for a flag and you got something

lol. Drop it on the fish associated with the post and blow that thing to @#$%

LOL!

What's so funny? :)

Now i'm throwing away my aquarium !

Thanks at @mynameisbrian
Simple easy effective
To see read and understand
Good Job 👍👍👍👍👍 keep up the good work
You have been followed
Thanks from @bullionstackers

Thanks @bullionstackers
Now I need to think of new ways to enhance the site.

awsome visualization :D I like the most the Up- and Downvotes, great idea!

This is brilliant! I totally love it haha. Such fun graphics and a novel idea.
How about another version where you display the activity of whales, dolphins and minnows as they post and comment? Not sure if there's a consensus on what classifies each category... but that would be cool - to see a whales swimming through because they're being active somewhere.

Hey @oliverb Thanks!
Good suggestion btw. I was actually considering something along those lines, but opted to start here since it was a little easier to code. :) Hopefully I'll find some more free time soon to continue work on it. Tough with 2 young kids.

Great work either way mate.

2 words. UH. MAZING! ;) Truly great work, I love the feel of it!

Thanks @kainmarx I appreciate the kind words.
It really turned out much more pleasing to look at than the version I had in my head.

Nice one. i realy love fischtanks. upvoted. oehaa

I can't wait to see this with full activity!

Me too. I just wish I had some minions to code it.

Taking it to a whole new level ! That's fun to watch !

Someday this will be playing on giant screens on trading floors, it's the 21st century stock ticker!

Looked interesting, but crashed my browser(MacBook pro, chrome 52) 😞

@azurejasper Sorry to hear that.
I didn't really do any cross browser compatibility testing, but runs well for me on my iMac, MBPro, iPhone and Nexus 5x.
Site is creating a lot of elements and animating them, so it's pretty memory hungry.
Any other info you can provide about the crash? Immediate? After long period of time? Thx.

It crashed after hovering over two whales, and happened quickly - within 30seconds or so of it loading. I'll have another look when I have some time.

Cool. If you don't mind any info you can provide will help me out. Hopefully you can't reproduce it though.

Excellent job. Well done @mynameisbrian !
I gave a look at your code. Very clean, well documented, referencing your source. I wish all coders do it like you. I learned a lot from reading it. Thanks
I also noticed you were plagiarized several times. Downvoted them all!
YOU deserve the return from your good work.
Congrats

Thanks for your support and help with the plagiarizing posts. I personally appreciate it of course but it is also good for the community that users (like you) help to prevent negative activity. Good karma!

Regarding the code I try to keep things as neat as possible. It makes it much easier to work with after a long break.

I wonder if its possible to make this my desktop background

I found a link for a tool to use it as a screensaver and there are probably many others. Not sure I would want it as a desktop background though. Too much of a distraction and an unnecessary RAM hog.

Voted! love it! Wish it was a little bigger, my screen res is very high.

Also I would love to know what code to use to embed a live site onto a post, does anyone know?

Didn't seem to work on safari , but its up and running on Firefox.

Super! Like I said in other posts I did very little cross browser compatibility testing with this project. You just identified a big problem, but one that is probably easily fixed when I can find a spare moment. It also explains why the site didn't render on my old gen 2 iPad. Nice work! Thanks.

Now this is so beautifull done, kudos Brian!
And awesome that you've shared the sourcecode.

Tried to click on a upvote link bubble, almost a game there... :-)

I'm glad you enjoy it! If you want to get that bubble you need to anticipate where the bubble will be, not where it is.

If I am able to update the project and add speed controls it should make it much easier to click those small and fast moving links.

That should do the trick. :-)

Speed control would be a cool addition. And those relaxing whale and water sounds. But allready think it is the most awesome Steem inspired App, so far!

Thanks again for the support. I've gotten a lot of good ideas from these comments about how I can improve the app.

does this shows cheetah bot, too? Would it show the bots being robot fish or throwing a harpoon at copied stuff?

If it is a post, comment, upvote or downvote it shows it - bots included

It would be interesting to compile a listing of known bots and have them displayed differently than other elements so you can visualize how much traffic is real. Nice idea!

Anybody have such a bot listing?

very cool this is the first steemit related 3rd party website I like so far.

Thanks @cryptorune. I'm pumped that people are enjoying it.

All for catching a whale $)

All it took was a serious coding session :)

Great post!

Artist Reference: @artist1989

Thanks! What is a minnow anyway?
Someone needs to make a nice table that outlines your aquatic creature status.

  ·  8 years ago (edited)

A "minnow" is someone on the site who does not have a lot of Steem Power. All the "little guys" in comparison to the "whales" that have millions of SP/voting power :)

There are "dolphins" too, which are somewhere in-between. I totally agree that someone should put this all together into a table! I wouldn't be surprised if there were several posts about it already :)

I was just curious when you are no longer considered a minnow. For instance, does the payout from this posting change my status? Am I like a goldfish now? An infographic with this as a joke would be cool. I'll see if someone has posted one already.

  ·  8 years ago (edited)

Hehe, goldfish. I like it :)

I don't think there are any defined cutoffs. It's somewhat subjective :)

Can I make it my screensaver? :)

Sure. If you figure out how make a post on it :)

Congratulations, It's just me I tried to click on rsrsrsrs whales.

This would make a great screensaver!

Amazing! Easily observe what is happening in steemit.

Wow. Great job :)

Thanks

I like this post so much, how to collect it?

I'm not sure what you mean by collect it?

creative! so many trash in the pond? 0o

Wow this is very very cool!

Haha. I like it.

Very cool your post ... Congratulations!

muito obrigado

Doesn't seem to work on iPhone yet.

What iPhone do you have and what browser?
It works on my iPhone 5C, but with a small bug. As the fish exit the screen they expand the viewport width. I need to fix that. I also have an old iPad (Gen 2 I think) and it doesn't work on that. The pond just appears and nothing enters. I suspect the div elements are being created off screen but are never animated into the viewable area. Like I said it's an older iPad and with this type of highly animated web app cross browser support can be a nightmare.

Edit: @blueorgy pointed out safari issues. I'm guessing you are using safari on your iphone? I'll try to fix that when I get a moment.

I love it! Very unique!

great website

  ·  8 years ago (edited)

when did the whale thing started? xDDD

It's a crypto thing I guess?

Nice post.. i like it..

Good explanation.

likje it .

Fun visuals, great idea! Thanks for sharing

thanks @bjones

👍nice idea... Great job

absolutely awesome! I think your my new favorite person to follow

Very cool looking. Steem mirrors society in that 1% of the population are whales and the remaining 99% are pilot fish. Similar to the concentration of its payout. Wall Street vs. Steem St.

Nice post!

Thanks so much. You sticking around the steemit community despite recent troubles with #steemabuse ? I hope so

Wow, I love it

Thanks

It's an amazing tool, can I translate your article to Chinese?

Great post! It motivates me to create some other type of tool to monitor the Steemit stream. I'll give it some thought. Thanks for the inspiration.

WOW!!

Hey I noticed you are using the max amount of tags for this article... but did you know that you can easily spoof the system to allow for an additional tag?

https://steemit.com/steemit/@bayareacoins/so-you-think-you-are-limited-to-5-tags-for-your-post-now-wrong-click-here-to-learn-how-to-get-your-article-listed-with-6-tags

LOL! Interesting.

&&steemit-pond-a-al-time-visualization-of-steemit-activity-with-a-twist

This is awesome! I love realtime blockchain apps :)

  ·  8 years ago (edited)

Totally awesome!

  ·  8 years ago Reveal Comment