title: D3js - Getting a line chart drawn, from "JSON data" input using d3.json
body: <p>I recently started studying D3.js and came across some issues..
  Here's what i have tried out so far :</p>
  
  <p><strong>Here's my JS</strong> :</p>
  
  <pre><code>    d3.json("../js/sample2.json", function(data) {
      var canvas = d3.select("body").append("svg")
              .attr("width", 500)
              .attr("height", 500)
              .attr("border", "black")
  
      var group = canvas.append("g")
              .attr("transform", "translate(100,10)")
  
      var line = d3.svg.line()
              .x(function(d, i) {
                  return data[0].position[i];
              })
              .y(function(d, i) {
                  return data[1].position[i];
              });
  
      var line1 = d3.svg.line()
              .x(function(d, i) {
                  return data[2].position[i];
              })
              .y(function(d, i) {
                  return data[3].position[i];
              });
  
      var j = 0;
      group.selectAll("path")
              .data(data).enter()
              .append("path")
  //    Have to provide where exaclty the line array is ! (line(array)) 
              .attr("d", line(data[j].position))
              .attr("fill", "none")
              .attr("stroke", "green")
              .attr("stroke-width", 3);
  
      var group2 = group.append("g")
              .attr("transform", "translate(100,10)")
      group2.selectAll("path")
              .data(data).enter()
              .append("path")
  //    Have to provide where exaclty the line array is ! (line(array)) 
              .attr("d", line1(data[j].position))
              .attr("fill", "none")
              .attr("stroke", "red")
              .attr("stroke-width", 3);
  });
  </code></pre>
  
  <p><strong>Here's my JSON file:</strong> </p>
  
  <pre><code>   [ {"name": "x1", 
        "position":[40,60,80,100,200]
       },
  
       {"name": "y1", 
        "position":[70,190,220,160,240]},
  
       {"name": "x2", 
        "position":[40,60,80,100,200]
       },
  
       {"name": "y2", 
        "position":[20,90,20,60,40]}
  ]
  </code></pre>
  
  <p>I want the line to be displayed from the data that is retrieved from the <strong>JSON file.</strong>
  I actually got the output,
  This is my current output that am receiving:
  <img src="https://i.stack.imgur.com/xrIWc.jpg" alt="enter image description here"> </p>
  
  <p>But the problem is ,<strong>i want this to be more dynamic</strong>.
  Like for example if <strong>there is more data</strong> within the JSON.</p>
  
  <p>The JSON could go from 
  x1,y1 to xn,yn...(Similar to the format in the JSON above)</p>
  
  <pre><code>[ {"name": "x1", 
        "position":[40,60,80,100,200]
       },
   {"name": "y1", 
    "position":[70,190,220,160,240]
    },
  
   {"name": "x2", 
    "position":[40,60,80,100,200]
   },
  
   {"name": "y2", 
    "position":[20,90,20,60,40]}
  .
  .
  .
  .    
  
  
  {"name": "xn", 
    "position":[40,60,80,100,200]
   },
  
   {"name": "yn", 
    "position":[20,90,20,60,40]}]
  </code></pre>
  
  <p>So my issues related to this are :</p>
  
  <ol>
  <li>How can this be made <strong>dynamic</strong>(ie: Irrespective of the amount of data within the JSON,it should reflect on the chart with the required graphs)</li>
  <li>Is the <strong>data format of the JSON</strong> that is inputted to the D3js using <strong>D3.json</strong> gonna be a problem? (Or what exactly is the format required for the D3.json and is it strict?)</li>
  </ol>