After browsing through a bunch of articles and videos I was able to create a D3 visualization of my own in SpotFire. So, to make things easier for you all and to save the extra effort, I am creating this step by step guide on how to create the an Area chart in SpotFire using D3 in JSVIZ.

Assumption: JsViz is already installed as I am not going to go into the details of installation. You can find it here JSViz.

Area Chart using D3 Visualization on SpotFire

Getting Started

The final dxp file is attached below and can be used for reference. Also the data used in this example can be found here  prices.txt

So I am going to 1st start with how to import data and select the relevant fields needed. Then we would load the relavant scripts required for creating the JSViz and then we would add our own code and css for creating the Area Chart.

Post that, we would look in to how to implement Marking in JSViz and the finally into adding Tooltips.

Importing Data

Step 1: Add the file as a data table to the Spotfire Dashoard. Make sure that the month column is treated as String while importing. (In this tutorial we'll parse the string as date using js itself)

Step 2: