CODEWITHSUNDEEP
javascriptsvgd3.jsellipse
Edayan
Edayan

Reputation: 597

How to draw an ellipse from degree and coordinates

I am using D3 chart to draw an ellipse. I don't have Rx, Cx, Ry, Cy, but have cordinates (x0 and y0) at every interval of 8 degree.

θ (°)   x(θ)    y(θ)
0.00    0.00    3.09
8.00    0.48    3.37
16.00   0.94    3.59
24.00   1.39    3.74
32.00   1.81    3.81
40.00   2.20    3.81
48.00   2.54    3.74
56.00   2.83    3.59
64.00   3.07    3.37
72.00   3.25    3.09
80.00   3.36    2.75
88.00   3.41    2.35
96.00   3.40    1.91
104.00  3.31    1.43
112.00  3.17    0.92
120.00  2.96    0.40
128.00  2.69    -0.13
136.00  2.37    -0.66
144.00  2.01    -1.18
152.00  1.60    -1.67
160.00  1.17    -2.14
168.00  0.71    -2.56
176.00  0.24    -2.93
184.00  -0.24   -3.24
192.00  -0.71   -3.49
200.00  -1.17   -3.67
208.00  -1.60   -3.78
216.00  -2.01   -3.82
224.00  -2.37   -3.78
232.00  -2.69   -3.67
240.00  -2.96   -3.49
248.00  -3.17   -3.24
256.00  -3.31   -2.93
264.00  -3.40   -2.56
272.00  -3.41   -2.14
280.00  -3.36   -1.67
288.00  -3.25   -1.18
296.00  -3.07   -0.66
304.00  -2.83   -0.13
312.00  -2.54   0.40
320.00  -2.20   0.92
328.00  -1.81   1.43
336.00  -1.39   1.91
344.00  -0.94   2.35
352.00  -0.48   2.75
360.00  0.00    3.09

How can we drow an ellipse connecting all points? An example would be very much helpful.

Upvotes: 2

Views: 165

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102184

Because you have all the Cartesian coordinates the best choice here is using a <path> element instead of an <ellipse>. Also, because of the same reason you actually don't need neither D3 nor the degrees (your first column) for that. However, if you want to stick with D3, you just need a line generator, like this:

const lineGenerator = d3.line()
    .x(d => xScale(d.xPos))
    .y(d => yScale(d.yPos));

Here I'm renaming your x(θ) and y(θ) to xPos and yPos. Also, I'm using a scale (but pay attention to the range interval, they have to be the same).

And this is the result:

const csv = `deg,xPos,yPos
0.00,0.00,3.09
8.00,0.48,3.37
16.00,0.94,3.59
24.00,1.39,3.74
32.00,1.81,3.81
40.00,2.20,3.81
48.00,2.54,3.74
56.00,2.83,3.59
64.00,3.07,3.37
72.00,3.25,3.09
80.00,3.36,2.75
88.00,3.41,2.35
96.00,3.40,1.91
104.00,3.31,1.43
112.00,3.17,0.92
120.00,2.96,0.40
128.00,2.69,-0.13
136.00,2.37,-0.66
144.00,2.01,-1.18
152.00,1.60,-1.67
160.00,1.17,-2.14
168.00,0.71,-2.56
176.00,0.24,-2.93
184.00,-0.24,-3.24
192.00,-0.71,-3.49
200.00,-1.17,-3.67
208.00,-1.60,-3.78
216.00,-2.01,-3.82
224.00,-2.37,-3.78
232.00,-2.69,-3.67
240.00,-2.96,-3.49
248.00,-3.17,-3.24
256.00,-3.31,-2.93
264.00,-3.40,-2.56
272.00,-3.41,-2.14
280.00,-3.36,-1.67
288.00,-3.25,-1.18
296.00,-3.07,-0.66
304.00,-2.83,-0.13
312.00,-2.54,0.40
320.00,-2.20,0.92
328.00,-1.81,1.43
336.00,-1.39,1.91
344.00,-0.94,2.35
352.00,-0.48,2.75
360.00,0.00,3.09`;

const data = d3.csvParse(csv, d3.autoType);
const svg = d3.select("svg");
const xScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.xPos))
  .range([85, 215]);
const yScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.yPos))
  .range([10, 140]);
const lineGenerator = d3.line()
  .x(d => xScale(d.xPos))
  .y(d => yScale(d.yPos));
const ellipse = svg.append("path")
  .datum(data)
  .attr("d", lineGenerator);
path {
  fill: none;
  stroke-width: 3px;
  stroke: steelblue;
}
<script src="https://d3js.org/d3.v6.min.js"></script>
<svg></svg>

Since you have so many points the ellipse looks good, specially in a small SVG like that. But you can also improve its appearance by interpolating between points, for instance:

const lineGenerator = d3.line()
    .x(d => xScale(d.xPos))
    .y(d => yScale(d.yPos))
    .curve(d3.curveCatmullRom);

Here is the result in a big SVG, side by side (the interpolated path is the red one):

const csv = `deg,xPos,yPos
0.00,0.00,3.09
8.00,0.48,3.37
16.00,0.94,3.59
24.00,1.39,3.74
32.00,1.81,3.81
40.00,2.20,3.81
48.00,2.54,3.74
56.00,2.83,3.59
64.00,3.07,3.37
72.00,3.25,3.09
80.00,3.36,2.75
88.00,3.41,2.35
96.00,3.40,1.91
104.00,3.31,1.43
112.00,3.17,0.92
120.00,2.96,0.40
128.00,2.69,-0.13
136.00,2.37,-0.66
144.00,2.01,-1.18
152.00,1.60,-1.67
160.00,1.17,-2.14
168.00,0.71,-2.56
176.00,0.24,-2.93
184.00,-0.24,-3.24
192.00,-0.71,-3.49
200.00,-1.17,-3.67
208.00,-1.60,-3.78
216.00,-2.01,-3.82
224.00,-2.37,-3.78
232.00,-2.69,-3.67
240.00,-2.96,-3.49
248.00,-3.17,-3.24
256.00,-3.31,-2.93
264.00,-3.40,-2.56
272.00,-3.41,-2.14
280.00,-3.36,-1.67
288.00,-3.25,-1.18
296.00,-3.07,-0.66
304.00,-2.83,-0.13
312.00,-2.54,0.40
320.00,-2.20,0.92
328.00,-1.81,1.43
336.00,-1.39,1.91
344.00,-0.94,2.35
352.00,-0.48,2.75
360.00,0.00,3.09`;

const data = d3.csvParse(csv, d3.autoType);
const svg = d3.select("svg");
const xScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.xPos))
  .range([10, 490]);
const yScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.yPos))
  .range([10, 490]);
const lineGenerator = d3.line()
  .x(d => xScale(d.xPos))
  .y(d => yScale(d.yPos));
const ellipse = svg.append("path")
  .datum(data)
  .attr("d", lineGenerator);

const ellipse2 = svg.append("path")
  .attr("class", "path2")
  .attr("transform", "translate(500,0)")
  .datum(data)
  .attr("d", d => lineGenerator.curve(d3.curveCatmullRom)(d));
path {
  fill: none;
  stroke-width: 3px;
  stroke: steelblue;
}

.path2 {
  stroke: orangered;
}
<script src="https://d3js.org/d3.v6.min.js"></script>
<svg width="1000" height="500"></svg>

Upvotes: 1

Related Questions