Grab with Graph

2 min read

Read at Medium!

website that contain lot of information in it tends to not have an outstanding design to prevent reader attention attracted to other places BUT it’s very important to have a great design for your graph to give a summary of what they will read in the next minutes.

At early of June I had the chance to go to WEBCONF.ASIA at Hong Kong from my current company (check them out!). And now I want to talk about topics that served by one of the speakers — Jane Pong — , she work as data visualization at Financial Times.

She tells her experience working as data visualization and about what do we need to do in order to serve a good data to our target readers. But there’s some part of her presentation that I want to take a note.


Nothing we can do to make boring data interesting. — Jane Pong

This quote really makes me froze for a second and make me laugh at the next seconds. My current work resolve around data and how I, as the front-end engineer present it at the website. That quote really makes me think back when I was skip reading data article just simply because it’s boring. She gave us several steps to prevent our data to be boring enough.

7 step for data visualization (source)

For me there’s two step that need to be carefully done to make sure our data is nice and good. The first one is get data. To make a good data visualization it’s not enough to only get the data but also to clean and format the data that we get. Data that comes to us usually already mixed up with other unrelated topics that can bring our information not precise and accurate. A good clean data will help send our information correctly. The second one is the design and production. A good design of data visualization is a critical part to readers. A boring data visualization will only makes your reader close your tab right away, so give a great treat to your reader is an important things.


I strive for two things in design: simplicity and clarity. Great design is born of those two things. — Lindon Leader

This talk about design lead us to the second thing that I want to talk about in this read. Designing your graph for multi-platform. As a front-end engineer the thought of do multi-platform website always comes in mind and bring graph and data is also included. Many times we have a good looking fabulous graph with a fancy design but it’s only suitable for desktop view which have more space than mobile view. When reader open it at mobile view the graph is become bigger than the screen can show and makes reader to drag around to view every part of our graph. This sometimes can be frustrating and give a bad experience to your reader.

Producing responsive graphics

If you’re the same as me now close your jaws and continue reading. This part really makes me realize about responsive graph where it doesn’t need to push your graph to mobile view just because the graph at desktop view is magnificent. The one that need to state in mind that we need to be as flexible as we can to give a good data. We don’t need to make our mobile reader to see a huge graph, we just need to serve them a readable simple graph that can makes them understand what we want to tell them.


This way of thinking also applied at responsive table design.

Responsive Table (source)

We don’t need to make our table horizontally scroll able and make our reader to scroll it but just make it into a certain cards that also have the same impact as the original table.

I know that makes two graph that will shown according to the view size is not an easy task, but we need to think about how human really easy to get bored and when we give a not-good-looking graph they will go away instantly. Make a good graph is a difficult things but keep your reader to stay and enjoy your graph is more difficult.

How Kubernetes can make life easier for Bukalapak’s …

Currently, Bukalapak is transitioning from an monolithic architecture into a microservice-based architecture for its entire software system. This is a massive undertaking that encompass splitting...
Geeas Prisila
1 min read

How I Design My Code

P.S: This post is also available at Medium Programming is becoming mainstream nowadays. I saw people code and build some applications. As a programmer,...
Indra Saputra
1 min read

Leave a Reply

Your email address will not be published. Required fields are marked *