Draw special line with js framework - javascript

I want to draw a line with x and y axis like this .
I searched Google and have found an example based d3. It can draw spline chart, but i can not find the kind of chat.
Can d3 or c3 or any others framework draw line like this? What function should I use?

This is a simple Line chart, Given that you provide the correct data points. You can easily draw that. We cannot help you since you have not shared your work.
Check this link for more info.

Related

Is it solvable to get line's values in chart.js?

I am relatively new at data visualization. I have a line chart, however I know only few points on chart, and these points are linked with Cubic interpolation. I have built a similar chart like that: https://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html. My question is that, is it solvable to find the line's values, for example when x is 4.5? I haven't really found any information about my issue, so I thought maybe somebody dealt with similar task.
I am open for any other solutions and for any other Javascipt libraries.
Thank you very much!

Can Flot (or any other JQuery chart library) draw equations?

I like to display data (x,y scatter) and a calculated curve (F(x) = D+(A-D)/(1+(x/C)^B)) in the same graph.
I have tried jqplot and flot, but I could'n find a decent way to draw curves directly based on a equation.
Do I have to calculate a data set on my own, or is there a library able to draw directly from equations?
I didn't find any library doing this - so my solution was to write a short function returning a proper dataset. See my solution as an answer to an other question.

line chart inside arc

Hi I am new to D3 and i'm working on the visualization of time series.I would like to develop visualization prototype . It will be helpful if somebody has an advanced example of curved line chart inside arc like this.
http://www.cs.toronto.edu/~jianzhao/papers/kronominer.pdf
Thanks
You can use d3.svg.line.radial function for this,
d3.svg.line.radial().radius(function(d){}).angle(function(d){});
Refer this Q&A and fiddle for more help. Radar charts are also implemented using this function to draw curved line graphs.

D3.js (Wilkinson type) Dot Plot Example

I've searched, but been unable to find an example of a dot plot in D3. Is anyone aware of this type of plot having been implemented in any of the charting libraries built on D3, or an example in base D3?
Just to be clear, a dot plot is similar to a histogram except that points are stacked on top of one another in place of a histogram's bars. In R this can be created using the ggplot package.
qplot(x=rnorm(200),geom="dotplot")
Edit:
So as Lars pointed out, the answer to this question solves the problem when the data has been aggregated into an array with the number of points in a column. In my case, I want to display interactive information about each of the points (e.g. a tool tip with the actual underlying data value), so I can't aggregate in this way. Here is some example data that I'd like to plot.
data = [0.4897,0.7685,-0.7367,-0.7483,-0.5149,0.0448,-1.7294,1.8667,1.0116,0.3896,-0.4267,-0.1161,-1.4618,-1.3198,-1.999,1.2883,1.7123,-1.5902,-0.7937,1.0359,-0.485,-0.2391,0.4136,-0.2506,0.7333,1.1902,0.7132,-0.3096,0.4793,-0.7779,-0.19,-0.0855,1.4498,1.0196,0.537,0.5341,0.5363,0.2664,-0.8586,-0.5667,1.2263,1.508,-0.139,-0.3015,-0.3679,0.483,0.9381,-0.1298,-0.1024,1.3079,-0.9554,1.167,0.3245,1.0424,-0.3589,1.3943,2.2537,-1.3225,0.8814,-0.2723,0.3782,0.8982,0.4167,0.1614,0.5659,-0.4672,-0.7634,-0.8591,-1.0887,0.4374,0.3618,-0.7074,-0.9812,-0.6216,1.0774,0.9979,-0.799,1.186,0.5704,1.8626,1.4321,0.3179,1.6356,0.1646,2.1265,-0.2409,0.0043,1.1503,-1.615,-0.677,-0.5573,1.9954,0.8123,-0.8011,0.2088,0.5007,0.9113,-0.8742,-0.5857,0.409,-1.0702,-0.016,0.6822,1.0133,-1.2022,0.0561,0.8704,-1.5982,1.6676,-0.0344,-1.739,-2.0362,-1.1955,0.7838,0.5037,-0.2123,0.2951,1.0192,0.97,0.2384,-0.2223,-0.1448,0.9924,1.5586,1.4238,-2.4781,-0.2456,-1.8822,-0.4424,-0.5941,-0.9948,1.8733,-0.2242,-1.5359,-0.103,0.7378,0.7691,0.069,0.3952,-0.4267,-0.2077,-0.4327,-1.1705,0.0399,-0.6586,0.1043,2.9475,-0.4968,-0.5432,0.4924,1.2173,0.177,0.2861,-0.709,1.4922,-1.1633,-0.084,-1.2275,0.5193,0.2404,-1.4495,-0.3346,0.3153,-0.573,0.4139,-0.9114,1.4844,0.1166,0.8734,2.182,-0.3765,2.0888,1.1178,0.2684,-0.5803,0.893,0.2127,-0.107,0.0569,1.0699,0.2975,1.3017,0.4541,1.8337,0.7915,1.705,-0.2708,-0.9626,1.1994,-1.6666,1.2642,0.5244,-1.1757,0.9278,0.882,-0.8993,1.2435,0.3841,0.6815,-0.1459]
You could use the d3.histogram function to bin your data and then use a nested structure to draw your circles.
See this bl.ocks for the code and a live demo of a self updating dot plot, with interactive information displayed (tooltip) when you .mouseover a dot.
The dot plot has nothing to do with a histogram or binning. The method involving d3.histogram would not produce a dot plot. Plase read the reprint of my article at https://www.cs.uic.edu/~wilkinson/Publications/dotplots.pdf. The proper algorithm is given there.

trend line using Dots chart in Raphael.js

I have to use g.raphaeljs library to create a scatterplot graph. Not only that but i am trying to get a trend line as well, and am wondering how I should go about this.
I was thinking of calculating the mean of the x axis and the y axis and drawing a straight line based on slope.... but am still stuck.
Any help is appreciated.
Also the data used to plot the points on the dot chart is provided by a user.

Categories

Resources