Visualization of Data on Web using D3.js

· Harshil Jani

Alright ! Everybody, Hope you people have good days in life, Our central topic of discussion for Today is Importance of Visualization and Introduction to D3.js which is JavaScript Framework that helps making elegant data visuals on the Web.

But, Like every game play, We would be facing some constructive critics asking us “Why I can’t use Canva or Excel Sheets to do the same ?” So, Being an arrogant developer who always defends his points no matter what cooks up under the hoods, I would like to answer them that : “In Canva or Equivalent Designing Software you just cannot make interactives based on your data files. If data changes, We don’t have so much of time to go and edit every part of it. Nextly, When we talk about Excel Sheets, It will allow dynamic data handling, But if you choose more customizations in it, Excel is not your yard. In Web using D3.js you can literally do it in the way you choose to do it. No holds barred. Any more crictics wanting to make me intolerate may please comment below their constructive questions.

Enough of talks, Let’s fall for D3.js . The Full-form of D3 is Data Driven Documents JavaScript. It is special javascript module which allows appealing visuals on web using SVGs (Standard Vector Graphics) and HTML. We can have charts, icons, graphs, diagrams and much much more in D3.js.

We can make the visuals more interactive using D3.js . But, Let’s discuss some required concepts in brief. You must be familiar with the difference between Raster Image and Vector Image. If you are tiresome student who struggles remembering things then let me drop down some copy pasted words below to refresh your cerebral flashback.

Vector graphics consist of anchored dots and connected by lines and curves, similar to the connect-the-dot activities you may have done as a kid. Because these graphics are not based on pixels, they are known as resolution independent, which makes them infinitely scalable.Raster images are made of pixels, or tiny dots that use color and tone to produce the image. Pixels appear like little squares on graph paper when the image is zoomed in or enlarged.

Aight, Now you know the difference. So, We will be dealing with Vector Graphics which will be made using SVGs and corresponding support from HTML5. You know now what are we talking about , thats D3.js. But, Why do we even care visualizing Data ? What is need of doing this ? Does colours seems appealing and charts are fancy ? Is that the reason ? Let me answer. A huge big font-size' : 1000% No. The reason why visualizing data is more appealing is that, you will be knowing things in a catagorized manner and you can look up at the plot and ask questions that are not even on your mind. It makes your brain more curious about data. Let me explain you the same with some activity.

Activity - 1 #

Population By Country

I swear, This is just data of 5 Countries Population but you really woudn’t have paid attention to sort the numbers whether it is in any particular Order or not. Just guess, You felt it cumbersome for just 5 numbers but the world is filled with infinity. You would miss on many details in some scenarios. But what if instead of this, I show you some visual.

image

Bar Graph for World Population made by D3.JS (Harshil Jani)

Alright, You can now clearly see the chart and make things clear. Now, If I ask you one Question- “ Which is 4th Highest Asian Country By Population ?” You can just simply answer by looking into the graph which otherwise would be your ignorance if you had just data value. Even though you may argue, Why I cannot Sort the data. But, Thing is that, What we are talking is ground level. When you are holding some large government data or huge database, Things are not in your hand to customize them. Let’s do another activity,

Activity - 2 #

Go and Watch the video on Data Visualization from TED Talks https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization?language=en

Obviously like, I cannot jot down details for you to read to lenthify my write-ups. So, You are given link to video. Trust me, It will be something that you will adore to know why data visualization in important in almost any domains.

https://www.brendangregg.com/FlameGraphs/cpu-mysql-updated.svg

The above link re-directs you to flame graphs example. So, This is something daunting for your Excel sheets add ons.

Everything in Data Visualization works on Vector Graphics because if you want to look up at very minute detail in the mega picture then it should not tear down the graphics. So, We work with SVGs in HTML5. Using these SVGs we can select them using d3 selector function const svg = d3.select('svg') then you can append the coressponding shapes such as

1const circle = svg.append('circle')

Now, You must be aware about document object model for the Web works. It will make your job easier to execute and work on d3.js Now, I cannot really explain whole thing in a blog. So, I would recommend you to go through Official documentation to get more insights and on github I do have my own repository where I keep practicing the data visualization projects.

I hope, I am the link of awareness about javascript and data visualization for someone who was never exposed to this thing as I was few time back, I must have added some value to your exploration. Thankyou for clinging till end.

#computers #data-visualization #d3.js