Old school D3 from simpler times

All examples By author By category About

lelandjobson

Full window Github gist

Spotlight_UI

Built with blockbuilder.org

<!DOCTYPE html>

<head>
	<title>Spotlight_UI</title>
  
  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">  
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  
	<script src="https://d3js.org/d3.v3.js"></script>
  
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400i" 			rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>

<body style="background-color:#eaeaea">
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-6 col-md-4">
        <div class="uiPanel">
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="chartAreaMain">
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript">
    
    // Inputs
    
    var projTitle = "Irish Arts Center";
    
    
/*     __    __   ______   __    __   ______   ______   ______   ______    
      /\ "-./  \ /\  ___\ /\ "-./  \ /\  == \ /\  ___\ /\  == \ /\  ___\   
      \ \ \-./\ \\ \  __\ \ \ \-./\ \\ \  __< \ \  __\ \ \  __< \ \___  \  
       \ \_\ \ \_\\ \_____\\ \_\ \ \_\\ \_____\\ \_____\\ \_\ \_\\/\_____\ 
        \/_/  \/_/ \/_____/ \/_/  \/_/ \/_____/ \/_____/ \/_/ /_/ \/_____/
																																							*/    
    const svgStart = [30,30]
    const menuAnchor = [0,49]								/// Starting location of menu
    const panelHeight = 495;								/// Width of the UI Panel
    const panelWidth = 239;     						/// Width of the UI Panel
    const elementHeight = 25;  							/// UI Element Height
    const panelBg = "rgb(122,122,122)";  	  /// Panel Color
    const projectName = "Blah"; 						/// Name of the Project
    const defaultInset = 2;									/// Default inset of elements
    const clear = "rgba(0,0,0)";						/// Speaks for itself
    const textOffset = 9;										/// Text dist from edge
    const buttonSpacing = 1;								/// Button to button gap
    const blockSpacing = 42;								/// Block to block gap
    const defaultGap = 13;									/// Default gap size
    const titleTextSize = 16;								/// Speaks for itself
    const buttonTextSize = 14;							/// Speaks for itself
    const btnHover = "rgb(53,53,53)"				/// Speaks for itself
    const lightGreen = "rgb(115,165,151)"		/// Speaks for itself
    var activeFunc = { id: "" }							/// Id of the active function
    
 /*    __    __   ______   __   __   __  __    
      /\ "-./  \ /\  ___\ /\ "-.\ \ /\ \/\ \   
      \ \ \-./\ \\ \  __\ \ \ \-.  \\ \ \_\ \  
       \ \_\ \ \_\\ \_____\\ \_\\"\_\\ \_____\ 
        \/_/  \/_/ \/_____/ \/_/ \/_/ \/_____/ 
                                                	*/    
    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
        }
      }
    }
    
/*     _____       ______  __  __   ______   ______   ______    
      /\  __-.    /\__  _\/\ \_\ \ /\  == \ /\  ___\ /\  ___\   
      \ \ \/\ \   \/_/\ \/\ \  __ \\ \  __< \ \  __\ \ \  __\   
       \ \____-      \ \_\ \ \_\ \_\\ \_\ \_\\ \_____\\ \_____\ 
        \/____/       \/_/  \/_/\/_/ \/_/ /_/ \/_____/ \/_____/ 
                                                                   */                        
    //var jason = 
    
    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)
      
/* 		 __    __   ______  ______  __  __   ______   _____    ______    
      /\ "-./  \ /\  ___\/\__  _\/\ \_\ \ /\  __ \ /\  __-. /\  ___\   
      \ \ \-./\ \\ \  __\\/_/\ \/\ \  __ \\ \ \/\ \\ \ \/\ \\ \___  \  
       \ \_\ \ \_\\ \_____\ \ \_\ \ \_\ \_\\ \_____\\ \____- \/\_____\ 
        \/_/  \/_/ \/_____/  \/_/  \/_/\/_/ \/_____/ \/____/  \/_____/ 
    																																	*/
    // Goals
    
    function showGoalStlTonnage(){
      console.log("Steel Tonnage Goal Enabled");
    }
    function showGoalEmbCarbon(){
      console.log("Embodied Carbon Goal Enabled");
    }
    
    // Explorers
    
    function showExplorerTonnage(){
      console.log("Tonnage Explorer Enabled");
    }
    
    // QMatrix
    
    function showQMatrix(){
      console.log("Quantity Matrix Enabled");
    }
                                                                 
    // Initialization
    
    main();
    
    function main(){
      // Set up controls
      var sp;
      sp = createFrameTitle([0,0],projTitle,"11/3/2017")
      sp = createBlock(menuAnchor,"Goals",[menuItems.goals.stl_tonnage,
                                      menuItems.goals.emb_carbon])
      sp = createBlock(sp,"Explorers",[menuItems.explorers.tonnage])
      sp = createBlock(sp,"Takedowns",[menuItems.takedowns.qMatrix])                     
		}
    
/*     __  __   ______  __   __       ______    
      /\ \/\ \ /\__  _\/\ \ /\ \     /\  ___\   
      \ \ \_\ \\/_/\ \/\ \ \\ \ \____\ \___  \  
       \ \_____\  \ \_\ \ \_\\ \_____\\/\_____\ 
        \/_____/   \/_/  \/_/ \/_____/ \/_____/
																									 */   
    
    function createFrameTitle(pt,name,date){
      var title = svg.append("rect")
                  .attr("x",pt[0])
                  .attr("y",pt[1])
                  .attr("height",elementHeight)
                  .attr("width",panelWidth)
                  //.attr("stroke","white")
                  //.attr("stroke-width",1)
                  .attr("fill","white")
      var titleText = svg.append("text")
                  .attr("x",pt[0]+textOffset)
                  .attr("y",pt[1]+elementHeight/2+buttonTextSize/3)
                  //.attr("text-anchor","end")
                  .text(name.toString())
                  .attr("font-family", "PT Sans")
                  .attr("font-size", +buttonTextSize)
                  .attr("fill","black")   
                  .attr("pointer-events","none")
      var updatedWhen = svg.append("text")
                  .attr("x",pt[0]+ panelWidth-textOffset)
                  .attr("y",pt[1]+elementHeight/2+buttonTextSize/3)
                  .attr("text-anchor","end")
                  .text(date.toString())
                  .attr("font-family", "PT Sans")
                  .attr("font-size", +buttonTextSize)
                  .attr("fill", "lightgrey")   
                  .attr("pointer-events","none")
      
      return (nextIncrement(pt,1));
    }
    
    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 createBlock(pt,blockName,funcs)
    {      
      // Draw Blockname
      drawBlockName(pt,blockName);
      
      // Add a gap between the blockname and the buttons
      pt = addGap(pt);
      
      var botPt = pt;
      for(var i = 0; i<funcs.length; i++)
      {
      	botPt = nextIncrement(pt,i)
        
        // Create a button
        createButton(botPt,funcs[i])
        
        // Create a graphic divider
        createDivider(botPt);
        createDivider(nextIncrement(pt,i+1));
      }
      // Return bottom of block for next block
      return nextBlock(pt,funcs.length);
    }
    
    function addGap(pt)
    {
      return [pt[0],pt[1]+defaultGap]
    }
    
    function drawBlockName(pt,name)
    {
      var text = svg.append("text")
      						.attr("x",pt[0]+panelWidth-textOffset)
      						.attr("y",pt[1])
      						.attr("text-anchor","end")
      						.text(name.toString())
                  .attr("font-family", "PT Sans")
                  .attr("font-size", "titleTextSize")
    						  .attr("font-style", "italic")
                  .attr("fill", "white");
    }
    
    function createDivider(pt)
    {
      var divr = svg.append("line")
                  .attr("x1",pt[0])
                  .attr("y1",pt[1])
                  .attr("x2",pt[0]+panelWidth)
                  .attr("y2",pt[1])
                  .attr("stroke-width",1)
      						.attr("stroke","#848484")
      						.style("shape-rendering","crispEdges")    						
    }
    
    function nextIncrement(pt,inc)
    {
      var spacing = 0;
      if(inc>0){ spacing = buttonSpacing }
      return [pt[0],pt[1]+(elementHeight*inc)+spacing];
    }
    
    function nextBlock(pt,inc)
    {
      return [pt[0],pt[1]+(elementHeight*inc)+blockSpacing];
    }
    
    function createButton(pt,func)
    {
        var repName = func.name.replace(/ /g,"_");
        var btn = svg.append("rect")
        						.attr("id",repName)
                    .attr("x",pt[0])
                    .attr("y",pt[1])
                    .attr("height",elementHeight)
                    .attr("width",panelWidth)
                    //.attr("stroke","white")
                    //.attr("stroke-width",1)
                    .attr("fill",panelBg)
                    .on("mouseover", handleMouseOver)
                    .on("mouseout", handleMouseOut)
                		.on("click", handleButtonClick)
                    .on("click", function(){
                      func.func();
                      handleButtonClick(repName);
                    });
        var btnTitle = svg.append("text")
       							.attr("id",repName + "_title")
                    .attr("x",pt[0]+textOffset)
                    .attr("y",pt[1]+elementHeight/2+buttonTextSize/3)
                    //.attr("text-anchor","end")
                    .text(func.name.toString())
                    .attr("font-family", "PT Sans")
                    .attr("font-size", +buttonTextSize)
                    .attr("fill", "white")   
                    .attr("pointer-events","none")
        var btnFlash = svg.append("circle")
        						.attr("id",repName + "_circle")
                    .attr("cx",panelWidth-textOffset*1.5)
                    .attr("cy",pt[1]+elementHeight/2)
                    .attr("r",5)
                    .style("fill","grey")
                    .attr("pointer-events","none")
    }
    
    function handleButtonClick(idRoot)
    {
      var circId = idRoot + "_circle";
      console.log(circId);
      var titleId = idRoot + "_title"
      var circ = d3.select("#"+circId)
      							.transition()
      							.style("fill","white")
      							.duration(400);
      var rect = d3.select("#"+idRoot)
      							.transition()
      							.style("fill",lightGreen)
      							.duration(400);
      var title = d3.select("#"+titleId)
      //              .transition()
      //              .style("fill","white")
      //              .duration(400);

registerActiveFuncId(idRoot)
    }
    
    function registerActiveFuncId(id)
    {
      if(activeFunc.id !== "")
      {
        console.log("inside");
        d3.select("#"+ activeFunc.id).transition()
          .style("fill",panelBg)
          .duration(400)
        d3.select("#"+ activeFunc.id + "_circle").transition()
          .style("fill","grey")
          .duration(1500)
      }
      activeFunc.id = id.toString();    
      console.log("active func id is" + activeFunc.id)
    }
    
    function handleMouseOver(d, i) 
    {
      if(this.id !== activeFunc.id){
         d3.select(this).transition()
          .style("fill",btnHover)
          .duration(200)
      }
    }
    
    function handleMouseOut(d, i) 
    {
      if(this.id !== activeFunc.id){
        d3.select(this).transition()
          .style("fill",panelBg)
          .duration(450)
      }
    }
    
    												 
</script>
  
</body>

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

https://code.jquery.com/jquery-3.2.1.slim.min.js

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

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