D3 and Next are the perfect combination for seamlessly creating reusable, extensible and component-driven interactive dashboards that can be used in literally any industry you can imagine. With Next JS we can weild the high speed and performance powers to make the UI/UX even more pleasing due to prefetching of all the data that the dashboard is populated with. To learn more about Next JS, refer to my blog here :
What is D3 ?
Show the comparison between two or more time-series data
Draw the data in real time as it happens (for e.g. data generated by various sensors or internet traffic)
Generate cool dynamic art on webpages. It just depends on user's imagination
“D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.” ~d3js.org
But how does D3 work ?
Well, charts are based on information coming from third-party resources which requires dynamic visualization during render time. SVG is a very powerful tool which fits well to this application case.
What is SVG ?
SVG stands for Scalable Vector Graphics which is technically an XML based markup language.
It is commonly used to draw vector graphics, specify lines and shapes or modify existing images. You can find the list of available elements here.
Supported in all major browsers;
It has DOM interface, requires no third-party lib;
Scalable, it can maintain high resolution;
Reduced size compared to other image formats.
Enough talk, let's get this party started....
Here, we are going to build a very simple data visualization using D3 and Next JS that shows the population of the 10 most populous countries in the form of a simple horizontal bar chart
The code for this app has been properly committed and document by me in this GitHub repo for your perusal
Start by initializing the Next JS project and adding the D3 js NPM package
npx create-next-app population-chart
npm i d3
The data for all this visualization has been easily made accessible by me on this GitHub Gist, feel free to explore and tweak it; else just use the URL below in your project
I have abstracted all the logic for data prefetching in - src/helpers/fetchData.js. Here, we have used the d3.csv() function to parse the data as per my liking and just extracted 2020's population for the top 10 most populous nations
Creating the Chart from the Data
For this part, I have simply used the component development tech to create separate components for the data marks and both the axes and just integrated it all, along with the data fetching logic in my landing page file Next JS
Logic for the X-Axis (showing population count) marks
Logic for the Y-Axis (showing population country) marks
Location of the actual plot points on the graph
File that integrates all these above components into 1 single chart
In the main file, I have used the scaleBand, scaleLinear and max functions from d3 to setup the scale and the axis of the overall rendered SVG chart.
Also, I have written the getStaticProps( ) function to prefetch all the data (as defined in the code in the fetchData.js file) in advance for a performance boost.
Apart from that, this is just pretty basic React JS logic on rendering components using the array of data fetched
Thus, the final rendered chart looks like this !
This is just the sliver of the beginning of we can craft powerful and completely customized data visualization by the wielding the holy trifecta - D3, Next and SVG
There are no limitations to what you can create now. Maybe the next big stockbroking platform or the next Google Trends will be yours. Who knows ?
If you liked this article then be sure to check out these crazy amazing links containing tutorials as well as brilliantly designed data visualizations