D3 SVG Coordinate Space Before we start D3 SVG Coordinate Space refer D3 Part 1 - SVG Shapes D3 Part 2 - D3 + Angular 7 Integration D3 Part 3 - D3 Data Bound to DOM Elements D3 Part 4 - D3 Creating SVG Elements Based on Data D3 SVG Coordinate Space Like graph we can define the SVG elements coordinates.Using D3.js to add SVG elements to specific coordinates in a graph based on data. Coordinates Data-set // Data set Created for circle elements radious let coordinatesDS= [50, 100, 150,200,250,300,350]; SVG Circle Element Coordinate Space without using D3 refer W3schools Basic Coordinate Attributes are cx: x-axis coordinate of the center of the circle. cy: y-axis coordinate of the center of the circle. without d3 , how actually cx and cy works with svg let's see the below example // example code <div id="circleelement" > <svg height="200" width="200"> <circle cx="50" cy="50"