A guided tour on implementing visualization modules with dynamic datasets

Photo by Chris Liverani on Unsplash

It is common to remove the existing Scalable Vector Graphics (SVG) element by calling d3.select('#chart').remove(), before rendering a new chart.

However, there may be scenarios when you have to produce dynamic visualizations from sources such as external APIs. This article will show you how to do this using D3.js.

D3.js handles dynamic data by adopting the general update pattern. This is commonly described as a data-join, followed by operations on the enter, update and exit selections. Mastering these selection methods will enable you to produce seamless transitions between states, allowing you to tell meaningful stories with data.

Getting Started

We will be…

A step by step approach towards visualizing financial datasets

Photo by Kevin Ku from Pexels

It is a challenge to communicate data and display these visualizations on multiple devices and platforms.

“Data is just like crude. It’s valuable, but if unrefined it cannot really be used.” - Michael Palmer

D3 (Data-Driven Documents) solves this age-old dilemma. It provides developers and analysts the ability to build customized visualizations for the Web with complete freedom. D3.js allows us to bind data to the DOM (Document Object Model). Then apply data-driven transformations to create refined visualizations of data.

In this tutorial, we will understand how we can make the D3.js library work for us.

We will be building…

Chan Wen Tjun

Software Engineer. JavaScript, Web Development, Design. NUS | KTH.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store