A guided tour on implementing visualization modules with dynamic datasets

Image for post
Image for post
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

Requirements

We will be building a graph that illustrates the movement of a few Exchange-Traded Funds (ETFs) over the second half of 2018. The graph consists of the following…


A step by step approach towards visualizing financial datasets

Image for post
Image for post
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.

Getting started

We will be building a chart that illustrates the movement of a financial instrument over a period of time. This visualization resembles the price charts provided by Yahoo Finance. We will break down the various components required to render an interactive price chart that tracks a particular stock. …

About

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