Draw a curve like sinewave using plotly.js - javascript

I'm trying to plot a curve across discrete point with given (x, y) value. The red line is what I can plot at the moment. Actually, the blue line is what I want to plot. How can I plot a curve instead of the straight line across given points?
I've tried to change the mode of the trace but it is useless.

Related

Draw multiple polygon inside rectangle based on line intersection point

I have created below SVG using svg.js 2.7
Now I want to draw all possible polygons made based on lines intersection with other line and outer rectangle.
I have got all intersection points for lines and lines intersection with the outer rectangle using svg.js plugin svg-intersections-js
My requirement is, I want to display a hover effect for every possible polygon.
Edit 1: Line position and alignment are dynamic.
Is it possible?

How to avoid overlaps in d3js scatter plot

I have some random data points[{label, count},....] and simply want to plot them on a 2D Scatter plot. But I am not sure if there is a way to avoid overlapping of any two bubbles.
Lets say I have a plane of 600x600. So all I want to do is just scatter the points anywhere on the chart with only condition that no two bubbles(i.e. data points) should overlap or hide each other on the plane.

Find tangent of path in d3.js

I'd like to position svg elements (say, ellipses) along a path, for instance a curve generated with a d3.js line generator with B-spline interpolation. While finding the coordinates of points along the path is easy using path.getPointAtLength(), I can't figure out how to find the tangent of any point on the line. If I could get the tangent (or the derivative), I would be able to rotate the elements accordingly to make them look as if they are positioned along the line.
Call path.getPointAtLength() at two points close together. Calculus tells us the difference is the slope/tangent at that point.

flot chart- difference in starting point of x axis

I am trying to draw more than one chart inside a single page, each charts aligned to the center of the page, one below the other. I have given fixed with for graph canvas. Since tick values have different ranges, for example, one graph has y axis range [0-10], another has [0 - 10000], the width of y axis ticks are different for each graph. That somehow brings a bad user experience, as the starting point of x axis of each graph differs.
Is it possible to provide x axis width separately in flot chart, or is there any other solution to get all the graphs aligned, starting from same point.
I am attaching a sample sketch for better understanding of the issue.
From the flot API:
"labelWidth" and "labelHeight" specifies a fixed size of the tick
labels in pixels. They're useful in case you need to align several
plots. "reserveSpace" means that even if an axis isn't shown, Flot
should reserve space for it - it is useful in combination with
labelWidth and labelHeight for aligning multi-axis charts.

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