Plotting

This is an attempt to create a plot in a markdown page. While we succeed inserting math equation to post, we need to insert plot so we can explain things much clearer

Basic Plotting

Plain basic plotting X and Y value

---

Basic plotting with two line each have their own respective X and Y value. Add title for the plot

---

Basic plot with responsive layout

---

Basic scatter plot

---

Scatter plot with data label on plot

---

Bubble chart

Bubble coloring should be computer generated instead of inputed manually

---

Bar Chart

Standard Bar Chart

Stylized Bar Chart

Modified Bar Chart

---

Statistical Chart

Error Bar

Bar Chart with Error Bar

Asymetetric Error Bar

Continuous Error Bar

Boxplot

Horizontal Box Plot

Update Button

How to write a slider animation plot

We use slider to animate plot. Basically we assign a plot to a frame and for each frame, we associate it with a point in a slider. In this example, we want to move a point in an xy plane. The starting point is (1, 1) and with the slider, we can move the point to another location – in this example is (0.5, 0.5) and (0, 0).

To initiate a slider, we need to insert key sliders to layout key. Sliders is an array and ecah member is describe the properties of the slider. In each memeber of sliders, we need to define another array called steps, which dictate the argument of each frame. So the number of steps should be the same as number of frames. We associate steps and frames with args where the first argument is name of the frame. In this example frames are called red, green and blue so in steps we fill args first argument with each name of the frame – you can see the detail in the source code using Ctrl + Shift + i. We create the variable frames. In each frame, we define what data we want to show. In each frame, we need to give it at least a name and a set of data.

Under key steps, in each member, we have args key which is an array with two members. the first member is an array which contain frame’s name and the second member is the properties. The first member, when there are more than one member, will have animation executed based on member position, the first member get shown and the next and so on.

Quick question, how do we keep prefered javascript in offline mode instead of fetching from CDN. it seems nice feature to have when testing a feature so we don’t need to depend on a internet connection.

You can upload an csv data to repository and access it as raw githubusercontent