The Unicycle Diaries Part 2: Nice Charts, Strong Opinions

By pierce | Titor Technologies | 7 Mar 2020


If you're reading this blog post right now, you're very likely human. As a species we humans have, for better or worse, evolved an affinity towards the visual medium. This mans that from time to time in the course of our lives, to communicate effectively, you need to make a pretty website. We got a lot of really awesome data from The Graph in our previous post (go read that now if you haven't!). Unfortunately, command line tooling isn't an especially accessible medium, so in this post I'm going to work to present the data we get from The Graph in a way that the maximum number of people can access it.

The Hosting

Those of you who have known me for a while know that I post most of my silly internet doo-dads on GitHub. Astude observers of my previous post will also notice that the python code I released was hosted in a github repo called "unicycle.finance". That's no accident. I've also got the domain :-D  If you're looking for some major spoilers, you can head over to https://unicycle.finance/ to check it out, but I haven't made it yet, so I have no idea what it looks like. Does it look nice?

To activate the Github Pages feature, you go into your repo's settings, and scroll down to the "Github Pages", and activate it like so:

github pages for unicycle.finance

The Site

First thing's first. What kind of web site will this be? Well I'd like to start off right away declaring my religious opposition to websites that are compiled. If a user can't Ctrl+U and read the code, what can we expect from future generations? Viewing source is the way I learned how the web worked, and it seems like a moral hazard to break that functionality now. This means that if I want a modern web framework with fancy features like two way data binding, I'm going to need something like AngularJS. Not "angular", which is some weird Typescript thing, AngularJS, made with real live JavaScript, as the metal lord intended.

For development, lets open this up in vscode, and run python -m SimpleHTTPServer in the directory to serve a copy of it locally. Okay, now I visit the site in my browser at 127.0.0.1:8000, and away we go. The dev environment is live.

keep Portland weird

The Chart

Okay, I think this website should have a chart on it. Let's do a quick Google for "AngularJS chart" and see what we get. The first site that comes up is https://jtblin.github.io/angular-chart.js/ On this site is quite a few interesting looking examples. Remember we're looking to display profitability metrics over time against a number of Uniswap assets. This line chart right here looks perfect.

line chart screenshot

Just pasting in the <canvas> in the Markup tab to my site didn't do much, so I ended up doing the whole right click, inspect element thing, and ripping out that entire Line Chart element, then stripping out anything that seemed like it didn't need to be there. Some other parts I chopped out of the last project I worked on that was using this charting API, my ill fated big ideas project,  When I was done, it looked like this:

this is fine 

Looks great, ship it!  git commit -a; git push

https://github.com/pierce403/unicycle.finance/commit/52ac3f67021e74b6903a11d5be2db865c95bff2e

The Data

Awesome, we have a chart, we're pretty much done! Now we just need to put in some real data, and we're golden. So, last time we pulled our data with python. Now we have the exciting task of figuring out how to pull the data with javascript. It shouldn't be too hard right, since GraphQL is web-centric to begin with.

I skimmed quickly through this: https://graphql.org/graphql-js/graphql-clients/ and it seems like I'm pretty much in the right place.

Pulling from one of the code samples, and dropping in my simple query from last time, I came up with

first graphql javascript

I pop open the JavaScript console and hit "refresh" on my dev environment, and see this:

woah

Wow, that is actually exactly what I was hoping for. Lets see if we can wire it to the graph. First I switch over to that USDC query from yesterday, and console.log() it to make sure the data is getting formatted correctly. Then I do some horrific AngularJS scope butchery, and we get:

awesome

Ha, neat, it's looking good. I mean, it's just doing volume rather than profitability, the days are backwards, and the numbers are all broken, but that graph is actually my Uniswap data that I'm pulling from The Graph, so that's a damn good start. SHIP IT.

https://github.com/pierce403/unicycle.finance/commit/d93c0f26abf2cb11d5e8f416675b903f1560986c

Okay, I made some cosmetic tweaks, and got it all wired up to real data, and I think it's looking pretty good now.

looks nice

https://github.com/pierce403/unicycle.finance/commit/58b175e563d15cc45e67097c08872df09a6c3f21

That's nice. It doesn't tell you which crypto is which, but it's a good start. Maybe I'll publish now and add to this post later as I fix it up a bit more.

How do you rate this article?


0

0


Titor Technologies
Titor Technologies

Productive Futurology, explorations in beautiful tech.

Send a $0.01 microtip in crypto to the author, and earn yourself as you read!

20% to author / 80% to me.
We pay the tips from our rewards pool.