title: Basics about d3.js?
body: <p>I have a few questions about the following d3.js code. I referred to their Github and some tutorials, but I am too much of a bozo to understand their language.</p>
  
  <p>Please, if there is someone who understands the very basics of d3js, give me a simple elaboration on my questions below.</p>
  
  <p><strong>Please don't suggest me a link!!!</strong></p>
  
  <p>The code basically creates this following table:</p>
  
  <p><img src="https://i.stack.imgur.com/YNiCE.png" alt="This is the output"></p>
  
  <pre><code>var dataset = [],
  tmpDataset = [],
  i, j;
  
  for (i = 0; i &lt; 5; i++) {
      for (j = 0, tmpDataset = []; j &lt; 3; j++) {
          tmpDataset.push("Row:"+i+",Col:"+j);
      }
      dataset.push(tmpDataset);
  }
  
  d3.select("#viz")
      .append("table")
      .style("border-collapse", "collapse")
      .style("border", "2px black solid")
  
      .selectAll("tr")
      .data(dataset)
      .enter().append("tr")
  
      .selectAll("td")
      .data(function(d){return d;})
      .enter().append("td")
      .style("border", "1px black solid")
      .style("padding", "10px")
      .on("mouseover", function(){d3.select(this).style("background-color", "aliceblue")}) 
      .on("mouseout", function(){d3.select(this).style("background-color", "white")}) 
      .text(function(d){return d;})
      .style("font-size", "12px");
  </code></pre>
  
  <h3>Questions:</h3>
  
  <ol>
  <li><p>Why are we doing <code>selectall("tr")</code> when there is no tr in our HTML? What'ss the point in selecting 'tr' which is not even there.</p></li>
  <li><p>What is <code>data(dataset)</code> doing for tr?</p></li>
  <li><p>What is <code>data(function(d){return d;})</code> for td? And what is the difference between 2 and 3?</p></li>
  </ol>