# Mean Value vs. Window - Plot

There are now 17,330 individual timeseries monitored by The Bubble Index; each with a full range of windows. The windows range from 52 to 35,500 days. Below is plotted the natural log of the mean value (y-axis) versus the window (x-axis). Each window’s mean value represents the mean calculated over the entire historical record for all 17,330 timeseries. The curve of best fit displayed above is: ln(y) = a + b * ln(x), where y represents the mean value outputted by The Bubble Index software and x represents the window. Read on →

# TNX Update

The Bubble Index 3D Contour: TNX continues to show a large pressure build up in the long dated windows near 9000 days. If correct, when this bubble collapses, the implications for 10yr rates are concerning…

# Three.js 3D Contour Plot - Part 2

Once the Three.js JSON loader fetches the 3D contour data from the server, the code thread enters the modelLoadedCallback function. This function scales the raw JSON data, colors it, and transforms it into a nice looking visual graphic. function modelLoadedCallback(geometry) { //coloring vertex code from https://stemkoski.github.io/Three.js/Graphulus-Function.html /////////////////////////////////////////////// // calculate vertex colors based on Z values // /////////////////////////////////////////////// geometry.computeBoundingBox(); var zMin = geometry.boundingBox.min.z; var zMax = geometry.boundingBox.max.z; var zRange = zMax - zMin; var color, point, face, numberOfSides, vertexIndex; // faces are indexed using characters var faceIndices = ['a', 'b', 'c', 'd']; // first, assign colors to vertices as desired for (var i = 0; i &lt; geometry.vertices.length; i++) { point = geometry.vertices[i]; color = new THREE.Color(0x0000ff); var zvalueRel = (zMax - point.z) / zRange; if (zvalueRel &gt; 0.97) { color.setHSL(1.0, 1.0, 0.6); } else { color.setHSL(0.7 * zvalueRel, 1.0, 0.6); } geometry.colors[i] = color; // use this array for convenience } // copy the colors as necessary to the face's vertexColors array. Read on →

# Three.js 3D Contour Plot - Part 1

Three.js is a powerful tool for visualizing a wide variety of objects including mathematical data. The JavaScript based API greatly simplifies the creation and manipulation of WebGL graphic objects. This post is the first in a series which describe the creation of The Bubble Index 3D Contours. The first step is to check if the user’s device supports WebGL. The Detector variable comes from AlteredQualia and Mr.Doob. If the device supports WebGL, it is time to initialize variables: if ( ! Read on →

# D3.js Multiple Line Plot - Part 6

Working version of the plot, download here. This final post describes the code which needs to be executed after any time-series has been added or removed. When a time-series has been added or removed via the legend button, it is possible that its unique range of y-values is not currently displayed in the plot. For instance, assume the “52 Days” and “104 Days” time-series are currently displayed and the y-range is: [0 - 123]. Read on →

# D3.js Multiple Line Plot - Part 5

Working version of the plot, download here. The D3 function, d3.mouse(), provides a convenient tool for tracking the movement of the mouse as the user interacts with the plot. The nearest time x-value is determined and used to display the corresponding y-values for each time-series displayed. The mousemove() function was initialized in part 1 as follows: function mousemove() { var x0 = x.invert(d3.mouse(d3.select(“#svgMain”).node())[0]); var i = bisectDate(origData, x0, 1); d3.selectAll(“.index”).data().forEach(function(d) { var d0 = d.values[i - 1], d1 = d.values[i], p = x0 - d0.date > d1.date - x0 ? Read on →

# D3.js Multiple Line Plot - Part 4

Working version of the plot, download here. This post discusses the code responsible for creating an interactive legend for a multiple line plot – as seen on the Plot page of The Bubble Index. The legend will be located below the plot. In order to create an area to contain room for the legend’s text, the plot display must not fill the entire height of the svg object. As seen in part 1, the plot has a bottom margin of size 100 and a top margin of size 20. Read on →

# D3.js Multiple Line Plot - Part 3

Working version of the plot, download here. The data is now imported and loaded into memory. The next step is to attach each time-series to the DOM as an element. Before doing that, draw the initial axes. Drawing the initial axes are easy with D3. Nothing too crazy, the y-axis has the text: “Relative Power.” However, note that the y-axis has been scaled (part 2) based on all the time-series. If a single time-series is removed, the y-axis should be re-scaled and re-drawn. Read on →

# D3.js Multiple Line Plot - Part 2

Working version of the plot, download here. As mentioned before, the following code is presented “as it is” in its current version. Some functions and variables are presented out of order. The SVG variable is created by a D3 selection. The “plotarea” <div> is selected as the element where the SVG plot will be created. A “g” element is appended to the plot. This will allow the time-series to be grouped together as a single object. Read on →

# D3.js Multiple Line Plot - Part 1

To help any one interested in creating “multi-line” or multiple line charts with D3.js, I will walk through the various steps required to create the D3 plots on The Bubble Index. There may be many places in my code which could be simplified and improved – I present the current version “as it is.” Working version of the plot, download here. The goal is to have the SVG plot fill the width of any screen which accesses the site. Read on →