Getting started with D3.js

D3 Framework

D3.js is a JavaScript library for manipulating documents based on data. 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. https://d3js.org/

Creating the SVG:

·    Inking the d3.js file, this can be done in 2 ways. The first way is to directly download the zip file from d3js.org or add a script to link the d3.js file.

·    To starts creating the graph in HTML we have to define the SVG.

       -      D3.select: it selects the first element that matches the specified selector string. If no                 elements match the selector returns an empty selection

-      .append: we have to append the SVG over the body of the HTML, with attributes (.attr) as width, height, margins, etc.

·     To get the values from the CSV the file we use this function:

-       D3.cvs() is a function which allows us to link the CSV file, the first parameter is the path of the file or name of the file along with functions.

-       Csv_data.foreach() goes through every line in loop and acceleration_x is the heading of the first column of data. Data.acceleration_x retries the data and is pushed into an array. The name of the heading is very important if any typo occurs then the data won’t be recognized from the CSV.

-       When the data is pushed into the array, the values are in the string, this is why parse function was created in the d3.csv() function. The parse function is designed such that all the data is parsed into float values and then these values are pushed into the array.

·     Now after having all the values into the array, these values need to put into another array (data) which sets a time value. For the time value, the Date() function and. getTime() function is used to get the current value. The time is then assigned to the values to each value for the CSV file and set into the data array.

-       now time contains the values of the current time. For loops are used to access the data inside each acc. The data array has two components, date and value. The data takes the current time and the values are the values from the acc array. Each time it loops, the time is changed accordingly.

-       BEAT_TIME is a variable I created in such a way that, the value’s occurrence can be controlled. BEAT_TIME is set to 500 milliseconds, so if we want the of the value to occur in each second, change the value to 1000 milliseconds i.e. 1 second.

Scaling the Axis

·     The axis has to be drawn into the SVG to plot the graph:

-       Two variables are created, xScale and yScale. xScale is scaled with a function scaleTime because we are using x scale as a time type and the y-axis is a Linear scale, hence scaleLinear. Both these scales need domain and range.

-       fromDate is a variable which contains a time which is 5 seconds current the current time. So if the current time is 1:25, then the fromDate is 1:20.

·     After the scaling is finished, the scales are not positioned in the right place, so we use another function axisBottom for the x scale and axisLeft for their scale.

-       xScale has tick format to get the seconds displayed right. It is possible to edit any of the scales by giving it. attr() function.

Creating the line

·     After all the scales are positioned in the right place, the line can be created:

-       We can create the line using the d3.line() function. X sets the x value of the line; the function returns the value inside the data array. We call this function(d) in the later parts of the codes. d.date returns the values of the date in the data array and d.value gives the corresponding values to the time.

-       Curve is version 4 of d3 to make the line curved.

·     Now we need to give the value for the line, so that function(d) gets the data to get the values.

-       A variable path is declared and we select SVG i.e. the SVG we created with the width and height. Append a line and call it “path” so we can later reference it. And as an attribute, call the line with the type class, these lines have all the values of each data

·     To make the line appear on the SVG, we need to call the axis:

-       The call(xAxis) calls the x-axis to the screen, it is classed under the x-axis. The transform attribute will allow us to move the x-scale or y-scale to the desired location within the SVG. Fonts can also be used to edit the x-axis or y-axis

The functions which assign the values into the data and calling the CSV is kept inside a function called beat(). This is done so that in future we can assign values in real-time if the CSV file gets updated with new values.

Transition

·     Now, after creating the line, we have to move the x domain to the new value so it would appear to be moving. First, we create a variable to reference all the values in the path:

-       This function is inside a setInterval function as it creates a new value for the x domain and keeps on calling the x-scale making it appear to be moving towards the left.

-       First, a new time data is created and changes the fromDate, then the domain of the x scale is changed and depending on the time we can change the speed of the line appearing faster or slower, by subtracting few milliseconds.

-       We make a translate variable setting the x scale.

·      After setting the new time for the domain, the the line has to be redrawn into the new time:

-       First, the lines have to be selected from the SVG and the transform attribute is added along with few styles to identify each line.

-       The last thing to do is to call(xAxis), if it’s not called then the x scale will remain the same.

·     Finally, we call the beat function in an interval, since we are calling the file as a whole at the moment, we end the loop after 2 loops.

Problems Faced

One of the main problems faced is the setInterval function, the loop for the beat sometimes won’t work because some of the other loops will be slower to execute. When this occurs, the CSV file reads the data but it doesn’t get pushed to the data array. So I have to show some of the setInterval function with a duration to make the file work within 2 loops.