By looking at this picture above, it should be very clear what Data Visualization is, a gist i guess. As you can see on the picture, data is visualized for perfect viewing instead of having data all juggled up and not in a better presentable form.
In Simple Terms
Think of it as this way. A user has data(from any data source), it is in a juggled up form, meaning in a spreadsheet, json format, etc and taking that data, analyizing it then representing it into graphs and charts for better viewing, reporting and understanding. This is helpful in cases of presenting to your managers, supervisors, team, etc.
Let's get technical now
Since now you understand what Data Visualization is, let's look at libraries that help with this concept.
I have used Data Visualization JavaScript libraries and they have helped a lot in taking data into visuals. Here are some cool VD JavaScript libraries I have used:
- ChartJS
- D3
ChartJS
This is an awesome and powerful library, yet very small but it does wonders. It has predefined charts and graphs that you will need in representing your data. Here are some graphs supported:
- Bar Graph
- Double Bar Graph
- Pie Chart
- Scatter Plot
- Line Graph
- Radar Chart
- Doughnut
They have animations and filtering options when creating an instance of a chart/graph. It has many options for customization so that visuals suit your needs.
Example
Let's say we have a dataset of the number of apples chosen by kids from a busket.
Remember to import ChartJS library into your application either via NPM or CDN.
Now we will create a Bar graph using this following code below:
Here we made an array with all the data(number of apples per kid taken from a busket). We cans see that it is very simple. We put an HTML canvas tag on our HTML page with an id of myChart (Choose a better name than myChart please for better coding standards), we reference the canvas using its id attribute, create a 2D context then create our Chart, specify the type of the chart we want(Bar Graph), specify labels to be shown at the X axis of the graph(Name of kids), load our data(our array of apples per kid), beautify our bars with some background colors then BAAM! We have our Bar graph
It is as simple as that. Obviously, It can get quite complex but you get the gist. We can also combine charts, for example, a Bar Graph inside a Line Graph.
Check out ChartJS here for more information
D3
This is one of the powerful and advanced ways of creating visuals and manipulating documents using based on Data, because it supports SVG, CSS and HTML, has a lot of JavaScript customizations. Its full name is Data Driven Documents.
Check out D3 here for more information
Conclusion
So Data visualization is taking raw data into understandable visuals through Charts and Graphs. We touched on ChartJS and D3 so go check them out and if you have another cool Data Visualization tool you discovered, contact me and let's have a look at it. Sharp!