D3 Examples - Spotlight_UI

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <title>d3js workshop - data binding</title>
    <script src="https://d3js.org/d3.v3.js"></script> <!-- import D3 library -->
</head>
​
<body style="background-color:#eaeaea">
  
    <div class="uiPanel">
    </div>
    <script type="text/javascript">
​
​
 /*    __    __   ______   __   __   __  __    
      /\ "-./  \ /\  ___\ /\ "-.\ \ /\ \/\ \   
      \ \ \-./\ \\ \  __\ \ \ \-.  \\ \ \_\ \  
       \ \_\ \ \_\\ \_____\\ \_\\"\_\\ \_____\ 
        \/_/  \/_/ \/_____/ \/_/ \/_/ \/_____/ 
                                                    */    
    var menuItems = {
      goals: {
        stl_tonnage: {
          name: "Steel Tonnage",
          func: showGoalStlTonnage(),
        },
        emb_carbon: {
          name: "Embodied Carbon",
          func: showGoalEmbCarbon(),
        }
      },
      explorers: {
        tonnage: {
          name: "Tonnage Explorer",
          func: showExplorerTonnage(),
        }
      },
      takedowns: {
        qMatrix: {
          name: "Quantity Matrix",
          func: showQMatrix(),
        }
      }
    }
 
/*     __    __   ______   __    __   ______   ______   ______   ______    
      /\ "-./  \ /\  ___\ /\ "-./  \ /\  == \ /\  ___\ /\  == \ /\  ___\   
      \ \ \-./\ \\ \  __\ \ \ \-./\ \\ \  __< \ \  __\ \ \  __< \ \___  \  
       \ \_\ \ \_\\ \_____\\ \_\ \ \_\\ \_____\\ \_____\\ \_\ \_\\/\_____\ 
        \/_/  \/_/ \/_____/ \/_/  \/_/ \/_____/ \/_____/ \/_/ /_/ \/_____/ 
                                                                                                                                                    */
                                                                     
    
/*     __  __   ______  __   __       ______    
      /\ \/\ \ /\__  _\/\ \ /\ \     /\  ___\   
      \ \ \_\ \\/_/\ \/\ \ \\ \ \____\ \___  \  
       \ \_____\  \ \_\ \ \_\\ \_____\\/\_____\ 
        \/_____/   \/_/  \/_/ \/_____/ \/_____/
                                                                                                     */   
    function calculateInset(inset,pt,dims)
    {      
      // Helper function for calculating an inset
      var newPt = [(pt[0]+inset),(pt[1]+inset)];
      var newWidth = (dims[0]-(inset*2));
      var newHeight = (dims[1]-(inset*2));
      var rectHelper = 
          {
            x: newPt[0],
            y: newPt[1],
            width: newWidth,
            height: newHeight,
          };
      return rectHelper;
    }  
    
    function testFunctionA() {
      console.log("testFunctionA has been hit");
    }
    
    function testFunctionB() {
      console.log("testFunctionB has been hit");
    }
    
    function createBlock(startPt,blockName,funcs)
    {
      for(var i = 0; i<functions.keys.length; i++)
      {
        // Create a button
        createButton(nextIncrement(startPt,i),funcs[i])
      }
    }
    
    function nextIncrement(pt,inc)
    {
      return [pt[0]+(elementHeight*inc),pt[1]+(elementHeight*inc)];
    }
    
    function createButton(pt,func)
    {
      
    }
    
    function buttonHelper(spt,numberOfItems,height)
    {
            var rectHelpher = 
          {
            x: newPt[0],
            y: newPt[1],
            width: newWidth,
            height: newHeight,
          }
    }
    
/*     __    __   ______   __    __   ______   ______   ______   ______    
      /\ "-./  \ /\  ___\ /\ "-./  \ /\  == \ /\  ___\ /\  == \ /\  ___\   
      \ \ \-./\ \\ \  __\ \ \ \-./\ \\ \  __< \ \  __\ \ \  __< \ \___  \  
       \ \_\ \ \_\\ \_____\\ \_\ \ \_\\ \_____\\ \_____\\ \_\ \_\\/\_____\ 
        \/_/  \/_/ \/_____/ \/_/  \/_/ \/_____/ \/_____/ \/_/ /_/ \/_____/
                                                                                                                                                            */
    const panelHeight = 750;                                /// Width of the UI Panel
    const panelWidth = 450;                             /// Width of the UI Panel
    const elementHeight = 33;                           /// UI Element Height
    const panelBg = "rgba(0,0,38,0.16)";    /// Panel Color
    const projectName = "Blah";                         /// Name of the Project
    const defaultInset = 2;                                 /// Default inset of elements
    const clear = "rgba(0,0,0,0)";
    const textOffset = 5;
    
/*     _____       ______  __  __   ______   ______   ______    
      /\  __-.    /\__  _\/\ \_\ \ /\  == \ /\  ___\ /\  ___\   
      \ \ \/\ \   \/_/\ \/\ \  __ \\ \  __< \ \  __\ \ \  __\   
       \ \____-      \ \_\ \ \_\ \_\\ \_\ \_\\ \_____\\ \_____\ 
        \/____/       \/_/  \/_/\/_/ \/_/ /_/ \/_____/ \/_____/ 
                                                                   */                        
    var svg = d3.select("div.uiPanel").append("svg")
                                       .attr("height",panelHeight)
                                       .attr("width",panelWidth)
    var panel = svg.append("rect")
                  .attr("x",0)
                  .attr("y",0)
                  .attr("height",panelHeight)
                  .attr("width",panelWidth)
                                .attr("fill",panelBg)
    
    var insetHelper = calculateInset(defaultInset,[0,0],[panelWidth,panelHeight])
    var inset = svg.append("rect")
                  .attr("x",insetHelper.x)
                  .attr("y",insetHelper.y)
                  .attr("height",elementHeight)
                  .attr("width",insetHelper.width)
                                .attr("stroke","white")
                                .attr("stroke-width",1)
                                .attr("fill",clear)
                                                     
</script>
  
</body>
​
​
    