JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

JavaScript

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500);
    
    	   
    	   
    var inputs = [
    {  "x1": 100,  "x2": 500,  "y1": 50,    "y2": 50},
    {  "x1": 100,  "x2": 500,  "y1": 90,    "y2": 90},
    {  "x1": 100,  "x2": 500,  "y1": 130,  "y2": 130},
    {  "x1": 100,  "x2": 500,  "y1": 170,  "y2": 170},
    {  "x1": 100,  "x2": 500,  "y1": 210,  "y2": 210},
    {  "x1": 100,  "x2": 500,  "y1": 250,  "y2": 250},
    {  "x1": 100,  "x2": 500,  "y1": 290,  "y2": 290},
    {  "x1": 100,  "x2": 500,  "y1": 330,  "y2": 330},
    {  "x1": 100,  "x2": 500,  "y1": 370,  "y2": 370},
    {  "x1": 100,  "x2": 500,  "y1": 400,  "y2": 400},
    
    
    
    //columns
     {  "x1": 100,  "x2": 100,  "y1": 50,  "y2": 400},
     {  "x1": 200,  "x2": 200,  "y1": 50,  "y2": 400},
     {  "x1": 300,  "x2": 300,  "y1": 50,  "y2": 400}, 
     {  "x1": 400,  "x2": 400,  "y1": 50,  "y2": 400},  
     {  "x1": 500,  "x2": 500,  "y1": 50,  "y2": 400}, 
    ]
    
             svg.selectAll("line").data(inputs).enter().append("line")
             
             .attr("x1", function(d) {
               return d.x1;
             })
             .attr("x2", function(d) {
               return d.x2;
             })
             .attr("y1", function(d) {
               return d.y1;
             })
             .attr("y2", function(d) {
               return d.y2;
             })
             .attr("stroke", "red");
             
 var rows = inputs.slice(0,10);
 var cols = inputs.slice(10);
 
 console.log(rows,cols);
 for(var i=0; i<rows.length;i++){
 	for(var j=0; j<cols.length;j++){
  console.log(i,j);	    
  var pt = calculateIntersectionPoint(rows[i].x1,rows[i].y1,rows[i].x2,rows[i].y2,cols[j].x1,cols[j].y1,cols[j].x2,cols[j].y2);
  svg.append("circle").attr("cx",pt.x).attr("cy",pt.y).attr("r",10);
  }
 }
             
             
function calculateIntersectionPoint(line1StartX, line1StartY, line1EndX, line1EndY, line2StartX, line2StartY, line2EndX,...