xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> var dataArray = [5,11,18] // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", "100%") .attr("height", "100%") svg.selectAll("rect") .data(dataArray) .enter().append("rect") .attr("height",(d,i) => d*15) .attr("width","60") .attr("x", (d,i) => i * 80) .attr("y", (d,i) => 300 - d*15 ) .attr("fill", "pink") var newX = 300 svg.selectAll("circle.first") .data(dataArray) .enter().append("circle") .attr("class", "first") .attr("cx", (d,i) => { newX += (d*3) + (i*20); return newX }) .attr("cy","100") .attr("r", (d) => d*3) var newX = 600 svg.selectAll("ellipse") .data(dataArray) .enter().append("ellipse") .attr("class", "second") .attr("cx", (d,i) => { newX += (d*3) + (i*20); return newX }) .attr("cy","100") .attr("rx", (d) => d*3) .attr("ry", "30") var newX = 900 svg.selectAll("line") .data(dataArray) .enter().append("line") .attr("stroke", "blue") .attr("stroke-width", "2") .attr("x1", "20") .attr("y1", (d,i) => 80 + (i*20) ) .attr("x2", d => 30 + d*15 ) .attr("y2", (d,i) => 100 + (i*20) ) </script></body> https://d3js.org/d3.v4.min.js