D3 Examples - try promises

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
  <script src="chartdraw.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    console.clear();
    
    let svg;
    
    //first time draw canvas (svg)
    let initCanvas = (id="body") => {
        return new Promise((resolve, reject)=>{
        
        (()=>{
          svg = d3.select(id).append("svg")
            .attr("width", 960)
            .attr("height", 500);
          console.log("start draw");
          return resolve("canvas created!");
        })(); //self init
        
      });
    }
    
    let aggregateData = (data, dimensionArr = 0, groupArr = 0)=>{
      //aggregate data with crossfilter
      let ndx = crossfilter(data);
      let dimension = ndx.dimension((d,i)=>{
        
        if(dimensionArr != 0)
          dimensionArr.forEach((dA,j)=>{
            return 
          });
      });
      let group = dimension.group().reduceCount();
      
      console.log(dimensionArr)
      
     
      return group.top(Infinity);
    }
    
    //draw canvas / draw chart function
    let drawCanvas = (data) => {
      return new Promise((resolve,reject)=>{
        console.log("draw start!");
        
        let ndx = crossfilter(data);
        let dimension = ndx.dimension((d)=>d["YR"]);
        let group = dimension.group().reduceCount();
        
        let aggregateData = group.top(Infinity);
        
        let draw = drawChart().width(100).height(100);
        
        d3.select('body').data(aggregateData).call(draw);
        /*
                svg
            .remove().exit()
            .data(aggregateData).enter()
          .append("text")
            .html((d)=>{return d["key"] + " - " + d["value"] + "<br>"})
          .attr("y", 200)
          .attr("x", 120)
          .attr("font-size", 36)
          .attr("font-family", "monospace")
        */
          
        //return resolve with timeout
        return setTimeout(() => resolve("draw done!"), 1000)
        
      });
      
    }
    
    const firstCsv = d3.csv("data1.csv");
    const secondCsv = d3.csv("data2.csv");
    const thirdCsv = d3.csv("data3.csv");
    
    //This is to run drawCanvas with combined data then return next csv
    //stuff is csv to be returned and data is to provide to the chart
    let runThis = (stuff, data)=>{
      return new Promise((resolve,reject)=>{
        //draw chart with data provided
        drawCanvas(data)
          .then((callback)=>{
            console.log(callback); //callback from draw Canvas, which is "draw done"
            if(typeof(stuff)=="object") //check stuff, if object (which is a csv) then it will return the object
                return resolve(stuff);
            else if(typeof(stuff)=="string") //else it will just be console log string
              return resolve(console.log(stuff));
            })
            .catch((err)=>{console.error(err)});
      });
    }
    
    //prepare a blank array for concanation data
    let fullDataset = [];
    
    //run svg for the first time
    initCanvas()
      .then((data)=>{
        //after svg done, return first csv to be run
        return firstCsv; 
        })
        .then((data)=>{
      
        //data returned from first csv will be concat into fulldataset
        fullDataset = fullDataset.concat(data);
      
        //after finish concanation, will do "runthis" with next object/string to be pass in and the full data to be provided to data
        return runThis(secondCsv, fullDataset);
        })
        .then((data)=>{
        fullDataset = fullDataset.concat(data);
        return runThis(thirdCsv, fullDataset);
        })
        .then((data)=>{
        fullDataset = fullDataset.concat(data);
        return runThis("end draw", fullDataset);
        })
        .catch((err)=>{
        console.error(err)
        });
    
    
  </script>
</body>
​
    