D3 Examples - D3 to PPT Mock Up

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
<!-- Bundle: Easiest to use, supports all browsers -->
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@2.5.0/dist/pptxgen.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs/dist/pptxgen.shapes.js">
</script>
<body>
  <script>   
    
     var dates = [{"Date":"1/1/2019","Label":"New Years","Category":"Holiday"}
                ,{"Date":"2/15/2019","Label":"Event 1","Category":"Event"}
                ,{"Date":"3/1/2019","Label":"Long description of the event where overlapping might occur.","Category":"Event"}
                ,{"Date":"3/2/2019","Label":"Something else","Category":"Event"}
                ,{"Date":"5/5/2019","Label":"Cinco De Mayo","Category":"Holiday"}
                ,{"Date":"12/25/2019","Label":"Christmas Holiday","Category":"Holiday"}
                ]
​
    //date parser (require typical MM/DD/YYYY Format)
    var dateparse = d3.timeParse("%m/%d/%Y")
    
    dates.forEach(function(d){
            d.date = dateparse(d.Date)      
    })
    
    var colorScale =  d3.scaleOrdinal()             .range(["A05DA5","2B92D0","84A743","5A514C","F24F26","#8B827D","#EFAC41","#008465"])
​
    var width = 80;
    var height = 80;
    var padwidth = 10;
    
    var xScale = d3.scaleTime()
        .range([padwidth,padwidth+width])
        .domain(d3.extent(dates,function(d){return d.date}))
    
    var pptx = new PptxGenJS();
    
    var slide = pptx.addNewSlide();
 //   slide.addText('Hello World!', { x:1.5, y:1.5, fontSize:18, color:'363636' });
  //  slide.addShape(pptx.shapes.OVAL, { x:0.50, y:0.75, w:5, h:3});
    
    slide.addShape(pptx.shapes.LINE,{x:"10%", y:"50%", w:"80%", h:"0", fill:{type:'solid', color:'0088CC', alpha:25 }});
 
    
    dates.forEach(function(d,i){
      slide.addShape(pptx.shapes.OVAL,{x:xScale(d.date)+"%", y:"49%", w:".1", h:".1", fill:{ type:'solid', color:colorScale(d.Category), alpha:0 }});
      
      var yoffset 
      
      if(i% 2){
        yoffset = "40%"
      }
      else{
        yoffset = "60%"
      }
      
      slide.addText(d.Label,  { x:xScale(d.date)+"%", y:yoffset, w:3, color:colorScale(d.Category), fontSize:12 });
      
      
    })
    
    
    
    
    pptx.save('Sample Presentation');
     
  </script>
</body>
​
    