Visualize your data from database tables into Bubble pack layout using d3js

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on email

Previously we saw how to build D3js Analog clock on the dashboard

In the same note, we dig deeper and now take our data from database tables and visualize into pretty bubbles.

Here is how the tabular data looks like

Brazil 5,197.89
Argentina 702.69
France 1,025,156.84
Germany 2,604,893.08
Saudi Arabia 628.89
Denmark 598,323.01
Singapore 909,996.22


And this is what we get the final result as


You can check the complete dashboard visualization here


Here are the steps to produce this kind of visualizations. In D3js it is called the bubble pack layout. Leaving the technicals of d3js aside we will follow the simple steps to get the beautiful bubbles.

If you hover your mouse you can see details of the numbers associated with each bubble.

Data Source: We used the following Excel file as our data source. sales_data_excel_file

1. We upload the data to our personal cloud warehouse using this method

2. We use the below SQL to get summary data

select country_name,sum(amount_sold) total_amount
from sales_data
group by country_name

3. We drag the custom draw widget


4. In the data source we select personal cloud and add the following SQL


5. In the javascript section we copy paste the following javascript file.

Bubble pack javascript with new tool tips (version 3)

Bubble pack javascript d3js code



6. Click OK and you will see the bubbles. That is it!


1. Just make sure whatever data you want to visualize, the first column is the category or the dimension value.

2. The second column should be the numeric or the metrics.

3. You can have more columns in your SQL but only the first two columns will be considered.

Final Dashboard :

Custom Reports and Dashboards

We will build you a set of custom reports and dashboards
Best Offer

The Core Tools

Create dashboard for any Database

Data Visualizer and Dashboard Application
This is the best dashboard software for its price. One good thing we did was to hire their consulting services to build few dashboard prototypes and provide some quick dashboard training.
- Terry Seal, IL
We evaluated Xcelsius and Qlikview and the cost for organization to implement dashboards was quoted over 10,000 USD. For fraction of the above quoted price, we were able to buy the licenses for the web based dashboard software and get some free training. This is truly a dashboard software for small businesses like us.
IT Manager of a Trucking company, OH