The below paragraphs explain how the dashboard seen here can be made using d3.js. This means you don’t always need to buy some expensive BI solution to help you visualise your data. Of course, the likes of Tableau and Qlikview are a lot easier to use if you want to quickly build a dashboard though.
There will be many ways that this same dashboard can be built using d3.js so the below is simply showing how I’ve made it in this instance. Feel free to leave comments on how it could have been done better.
The final d3.js dashboard
But before we begin, why would you want to make a d3.js dashboard anyway? My main reasons are around data security. Once this dashboard is built we can hide the page behind some password protected part of the site (in theory). Another good reason to use d3.js when designing a dashboard is that you can make it look very unique or bespoke. You can embed YouTube videos around your charts (provided they’re applicable and needed), use custom fonts etc etc. You have free reign to make what you like.
The below dashboard is a template that can be used to visualise a client’s social presence online vs its competitors. The data isn’t held in external CSVs but is instead hard coded with the JavaScript. Holding data in CSVs may make it easier to update though in the long term.
For anyone who’s tried learning d3 you’ll recognise the pattern needed to make a chart. You first select something you want to build (like a “twitter chart”) then you bind some data to it. Once the data enters the scene the objects used to build the twitter chart are created. We can see this with the below code:
svg.selectAll(“tfoll”) .data([[24279,2],[18101,1],[457676,5],[8482,1],[0,1],[1228777,10]]) .enter() [...]
