Intro to d3 Tutorial Notes

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>

<body>
  <script>
    
    var data1 = [{x: '1', y:'1'},{x:2, y:1}, {x:2, y:2}];
    data1.forEach(function (d) {
      //console.log(d.x + d.y);
    })
    function type(d){
      d.x = +d.x; //parseFloat
      d.y = +d.y;
      //console.log(d.x + d.y)
      return d;
    }
   
    /* linear scale */
    var scale2 = d3.scaleLinear() // transform from data space to pixel space
    	.domain([0, 1]) // data space
    	.range([0, 100]); // pixel space
    //console.log(scale2(0.5))
    
    /* ordinal scale */
    var scale1 = d3.scaleOrdinal()
    	.domain(["A", "B", "C"])
    	.range(["Apple", "Banana", "Coconut"]);    
    //console.log(scale1("A"));
             
    /* construct DOM elm with d3 */
    var svg = d3.select("body").append("svg")
    	.attr("width", 250)
    	.attr("height", 250);
    
    /* */
    var data = [1, 2, 3, 4, 5];
    var scale = d3.scaleLinear() // transform from data space to pixel space
    	.domain([1, 5]) // data space
    	.range([0, 200]); // pixel space
    
    function render(data, color){
      var rects = svg.selectAll("rect")
        .data(data); // data binding
      
      //Enter
      rects.enter().append("rect")
        //.attr("x", function(d){ return scale(d); })
        .attr("y", 50)
        .attr("width", 20)
        .attr("height", 20);
      
      // update
      rects
      	.attr("x", scale)
      	.attr("fill", color);
      
      // Exit
      rects.exit().remove();
    }
    setTimeout(function(){render([1, 2, 3], "green")}, 1000);
    setTimeout(function() {render([1, 2, 3, 4, 5], "gold")}, 2000);
    setTimeout(function() {render([1, 2], "blue")}, 3000);
    
    // extent() -- get domain/min and max in the data 
    // colorScale = d3.scale.category10()
    // d3.scale.log() -- for large size 
    // rangeBand - use domain and range to determine how wide band should be for bar chart
    var margin = {left: 90, top: 30, right: 90, bottom: 30};
    
    var innerWidth = outerWidth - margin.left - margin.right;
    var innerHeight = outerHeight - margin.top - margin.bottom;
    
    var g = svg.append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var xAxisG = g.append("g")
    	.attr("transform", "translate(0,"+innerHeight+")");
    var yAxisG = g.append("g");
    // xAxisG
    
    
  </script>
</body>

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js