Spotlight_UI_Sketches

Built with blockbuilder.org

forked from mostaphaRoudsari's block: 01_workshop_select and append

forked from lelandjobson's block: Button_Test

forked from anonymous's block: Button_Test

<!DOCTYPE html>

<head>
	<title>d3js workshop - data binding</title>
	<script src="https://d3js.org/d3.v3.js"></script> 
</head>

/*    __    __   ______   __   __   __  __    
      /\ "-./  \ /\  ___\ /\ "-.\ \ /\ \/\ \   
      \ \ \-./\ \\ \  __\ \ \ \-.  \\ \ \_\ \  
       \ \_\ \ \_\\ \_____\\ \_\\"\_\\ \_____\ 
        \/_/  \/_/ \/_____/ \/_/ \/_/ \/_____/ 
                                                	*/    
    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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js