How to Create Cool Real-time Data Visualizations in Minutes not Months
Eli is a free platform for the layman to do what data visualization experts do, but faster.
Introduction
Hi. My name is Martin Ahindura. I work with Sopherapps. Eli visualization platform is an innovation by SopherApps. As of this writing, it is in its active beta testing stage.
I am so grateful to you for considering testing the Eli app for us. God bless you according to His gracious mercy.
This guide is to, well, guide you on how to test the Eli app. However, you might need to know what the Eli app is all about, or maybe you have a few questions about the name. This guide might be able to answer some of those.
Do keep in mind that some questions may actually be new even to us, the team behind Eli, so we may not have ready answers for those. But let’s try our best and see what happens.
The guide will cover the following topics
- Purpose of Eli app
- Some History that led to Eli
- Requirements for One to use Eli
- Quick Start Using Eli
- How to Give us Feedback
Purpose of Eli App
Eli app allows any human being who can type into a keyboard to generate cool dashboards containing real-time graphs, tables, lists and texts.
Some History (As If We Didn’t Have Enough of That in School)
I, just like any bootcamp-taught developer Joe, was trained on shopping lists, bucket lists and todo lists. However, in my last four years of active software engineering, I have found that all businesses that have hired me are looking for one thing: visualization of their business status.
Of course, they have always required me to manipulate their data in some way so as to provide meaningful information but the end product they always want is some screen with graphs here, tables there, blah blah blah.
So they want these things. It is just that it is costly to build these systems.
It is costly to businesses because they need to have a developer team close at hand to create for them a custom chart or a custom that. If you are a tech manager or have had some sort of experience managing developers, you know the cost is not just in their salaries. Let’s just say they are a special breed that requires gentle handling.
For the developers, it is also costly to them. Having to be called up when you are in the zone on your next project, just to change some color or size of this chart is just annoying! It is annoying!
So why not develop something that the business analysts can tinker with here and there, and only reach out to the ninja developers for the real big boy/big girl projects.
The analysts could even design their prototypes of the next big dashboard on this thing so that these things of requirements that change every microsecond can be reduced. I know they won’t go away but their frequency really needs to reduce, so that we can go out with friends in the evening. Or, as is usually the case, just shack up in our homes and create the next Google.
That is how Eli, and her sisters were conceived. (Yeah, I know Eli is a masculine name but let’s just go with it, shall we?)
Are you sold? Cool. Next topic.
Requirements
In order for you to run Eli and any of her sister accessories, you will need the following:
- You, a human being (most important)
- A Windows/Mac/Linux PC that can connect to the internet.
That’s it.
Quick Start
Open your favourite web browser. I would recommend a new version of Google Chrome.
Go to the eli github README and follow the instructions to set up eli on your local development PC. You will also need to set up PubSubQ as shown by the ‘Quick Start’ instructions on the same README.
When it is up and running, open http://localhost:3000.
Click the gear (⚙) icon on the top right of your screen.
The Control Panel will open. This is where any new tabs are created. You can have as many dashboards as you like. Each dashboard will be in its own tab. Now let us create a tab called “Elexon Dashboard”.
Click the plus (+) icon on the right of the header.
In the card that appears, select the “New Tab” heading and hit “delete” on your keyboard.
Type in the words “Elexon Dashboard”. (For those interested in what Elexon is, it provides real-time data for UK electricity traders to use. More details on this SopherApps blog post)
Next, Click the pencil (✎) icon in the now “Elexon Dashboard” card.
You will be redirected to a screen for editing the “Elexon Dashboard” tab. We are now going to add visualizations to our dashboard.
Bar Chart
Click the plus (+) icon on the right of the header
Select the “New Visualization” heading in the card that appears and hit “delete” on your keyboard.
Type in the phrase “Bar Chart”.
Now fill the form in the card with the following values:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Click the “Elexon Dashboard” tab at the bottom left of the screen.
Wait for the data to come. Your “Elexon Dashboard” should now be looking something like the picture shown below (with different values of course).
We are going to add more visualizations.
Click the pencil (✎) icon on the right of the header.
Doughnut Chart
Just like before, add a new visualization by clicking the plus (+) icon in the header.
Scroll to the bottom. There should be a new card with a heading “New Visualization”. Select that heading like we did for the bar chart and hit “delete” on your keyboard.
Type in “Doughnut Chart” in that card’s header. Then fill the rest of the form as shown in the table below:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
* There is a button “set color” which you can click to set the colors of the possible values that will be in the doughnut chart. For this very data source, there can be 48 or so separate “settlementPeriod”s so in case you have time, have a go at it.
Just like before, click the “Elexon Dashboard” tab button in the bottom left corner of the screen so as to go back to the dashboard.
Wait for new data to come in. The dashboard should now look like:
Just like that we have added two visualizations.
In order not to bore you with the same steps all over again, I am going to list ten (10) more visualizations you are going to create. I will share the heading you can put on the card for each. I will also share the table showing what inputs to put. Then I will also share a screenshot of the filled form (or at least a portion of it), and a portion of the dashboard after the visualization has loaded. Sound good? Cool.
Line Chart
Heading: Line Chart
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Updated Dashboard:
Pie Chart
Heading: Pie Chart
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
* There is a button “set color” which you can click to set the colors of the possible values that will be in the doughnut chart. For this very data source, there can be 48 or so separate “settlementPeriod”s so in case you have time, have a go at it.
Updated Dashboard:
Scatter Chart
Heading: Scatter Chart
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Updated Dashboard:
Multiple Line Chart
Heading: Multiple Line Chart
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Note: To be able to add more lines to the visualization, you will have to click the “add dataset” button, and then new inputs will be added to the form for that new dataset.
Before Clicking “add dataset” button.
After clicking it once:
After clicking the “add dataset” button again:
and so on…
The table will show four datasets but if you have the websocket browser extension, you can inspect the message and see other datasets to add.
Take note also that the URL has actually changed to ‘…/receive/actual_aggregated_generation_output_per_type…’
Also the values should be exact. Biomass is not the same as “Biomass”.
Updated Dashboard:
Multiple Bar Chart
Heading: Multiple Bar Chart
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Note: To be able to add more bars to the visualization, you will have to click the “add dataset” button, and then new inputs will be added to the form for that new dataset.
Before Clicking “add dataset” button.
After clicking it once:
After clicking the “add dataset” button again:
and so on…
The table will show four datasets but if you have the websocket browser extension, you can inspect the message and see other datasets to add.
Take note also that the URL has actually changed to ‘…/receive/actual_aggregated_generation_output_per_type…’
Also the values should be exact. Biomass is not the same as “Biomass”.
Updated Dashboard:
Mixed Chart
Heading: Mixed Chart
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Note: To be able to add more bars to the visualization, you will have to click the “add bar dataset” button, and then new inputs will be added to the form for that new bar dataset.
In a similar way, to add more lines to the visualization, you will have to click the “add line dataset” button and then new inputs will be added to the form for the new line dataset
Before Clicking “add bar dataset” button.
After clicking “add bar dataset” button once:
After clicking the “add bar dataset” button again:
and so on…
After clicking “add line dataset” button once:
After clicking the “add line dataset” button again:
and so on…
The table will show four bar datasets and four line datasets but if you have the websocket browser extension, you can inspect the message and see other datasets to add.
Take note also that the URL has actually changed to ‘…/receive/actual_aggregated_generation_output_per_type…’
Also the values should be exact. Biomass is not the same as “Biomass”.
Updated Dashboard:
Text
Heading: Text
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Updated Dashboard:
Ordered List
Heading: Ordered List
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Updated Dashboard:
Unordered List
Heading: Unordered List
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Updated Dashboard:
Table
Heading: Table
Form:
Note: The “Data Source URL*” input requires you come up with a unique random string as a subscriberId and put it in place of random_id_of_your_choice. It should not be reused anywhere else again, not even in other visualizations created on this or another dashboard or else you may miss some data.
Updated Dashboard:
Feedback
You now have all the possible visualizations Eli can show as of now:
- Bar chart
- Doughnut chart
- Line chart
- Pie chart
- Scatter diagram
- Multiple bar chart
- Multiple line chart
- Mixed chart (bar and line)
- Text
- Numbered (ordered) list
- Unnumbered (unordered) list
- Table
Your changes are automatically saved on your PC. We treasure your privacy so we don’t have a clue what data you are visualizing. No login, no nothing. It is all running on your own PC.
You can close the website and next time you open it, your dashboard will be as you left it except that it might receive new data from its data sources.
You are able to change the configurations of the visualizations we created in the ‘Quick Start” and see what new things you can come up with.
You can also change the order of the visualizations using the Upward or Downward arrows in each visualization’s card in the edit screen of the given tab.
You can change the names of the visualizations
You can change the name of the tab
You can add more tabs
You can delete some visualizations using the close (x) icon on each card.
In a similar way you can delete tabs.
You can create as many tabs as possible and be able to scroll through them at the bottom of your screen.
When you are ready to create your own “data source url” for your own say REST API or something, you will need to look into using a very easily configurable REST API adapter called restie, and a special pub-sub instance called PubSubQ.
Don’t worry, the instructions for restie are very easy to follow. They include how to connect to PubSubQ.
When you are done playing with Eli, (and possibly restie and PubSubQ) or even when you notice something as you are playing with Eli or have a quick suggestion, just fill this quick form.
Well, that is it for now. Do watch out for any new business data application SopherApps might come up with in our App Store.
May the LORD’s goodness shine upon you.
