Strategic Dilemmas

This example leverages a few interesting techniques with D3.js to illustrate the "dilemma" component of a strategic planning framework:

A pure d3 slider thanks to Bjorn Sandvik
Christophe Viau's work on shape types as a D3 plugin based on superformulas
Jason Davies' work on bullet charts

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="superformula.js"></script>
<script type="text/javascript" src="bulletQ.js"></script>
<script type="text/javascript" src="dilemma_config.js"></script>
<script type="text/javascript" src="d3sliderQ.js"></script>
    <title>Strategic Dilemmas</title>
    <link type="text/css" rel="stylesheet" href="dilemmas.css"/>
  <link type="text/css" rel="stylesheet" href="d3slider.css"/>
</head>
<body> 
<div id="header">A Strategic Dilemma
<span id="sub-header"></span></div> 
<div id="dilemma-A-text">Doing A with the intent of<br>achieving X goal</div>
<div id="versus"><b>vs.</b></div>
<div id="dilemma-B-text">Doing B with the intent of<br>achieving Y goal</div>
<div id="actions-header">... <span class="emphasized-header">Actions</span> that reflect the choice</div>
<div id="implications-header">And the <span class="emphasized-header">implications</span> that ensue ...</div>
<div id="dilemma"></div>
<div id="chart"></div>
<div id="implications"></div>
<script type="text/javascript">
// slider background
var format = d3.format(".4n"),
    scale = d3.scale.linear().domain([-10, 20, 1000]).range([0, 800, 1000]);
 
var svg = d3.select("body").append("svg")
    .attr("width", 300)
    .attr("height", 100)
    .attr("class", "sliderPath");
 
var shape = d3.superformula()
    .type("quigleySlider")
    .size(45000)
    .segments(4000);
 
var path = svg.append("path")
    .attr("class", "diamond")
    .attr("transform", "translate(150,50)")
    .attr("d", shape);;
 
 svg.append("radialGradient")
   .attr("id", "radial-gradient")
 	.attr("gradientUnits", "userSpaceOnUse")
 	.attr("cx", 0)
 	.attr("cy", 0)
 	.attr("r", 250)
 	.selectAll("stop")
      .data([
        {offset: "10%", color: "rgb(116, 169, 207)"}, // same as the action measures
        {offset: "95%", color: "rgb(240, 240, 240)"}
      ])
    .enter().append("stop")
      .attr("offset", function(d) { return d.offset; })
      .attr("stop-color", function(d) { return d.color; });

// slider
var geoDilemma = [    
					{
						"id": "genericSlider",
						"defaultValue": 2,
						"dilemmaA": "Choice A",
						"dilemmaB": "Choice B"
					}
    			];

//dilemma B on the right of the horizontal slider
  dilemma.append("span")  	
      .attr("class", "dilemmaB-label")
	  .text(function(d) { return d.dilemmaB; });
	  
	// shadow for position 2
  svg.append("svg:rect")
	  .attr("class", "dilemma-defaultValue")
	  .attr("width", 16)
	  .attr("height", 24)
	  .attr("rx", 8)
	  .attr("ry", 8)
	  .attr("x", 181)
	  .attr("y",  39);

// set the initial dilemma positions

// levers -------- actions

var actionChart = bulletChart()
    .width(w - m[1] - m[3])
    .height(h - m[0] - m[2]);

d3.json("levers.json", function(data) {

var vis = d3.select("#chart").selectAll("svg")
      .data(data[geoDilemma[0].defaultValue].bullets)
    .enter().append("svg")
      .attr("class", "lever")
      .attr("id", function(d) {return d.id ;})
      .attr("width", w)
      .attr("height", h)
    .append("g")	
      .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
      .on("change", function() { dispatch.statechange(this.value); })
      .call(actionChart);

var title = vis.append("g")
      .attr("text-anchor", "end")
      .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");

title.append("text")
      .attr("class", "title")
      .text(function(d) { return d.title; });

title.append("text")
      .attr("class", "subtitle")
      .attr("dy", "1.25em")
      .text(function(d) { return d.subtitle; });
	
  actionChart.duration(1000);
  
});

// implications

var outcomeChart = bulletChart()
    .width(wO - mO[1] - mO[3])
    .height(hO - mO[0] - mO[2]);

d3.json("implications.json", function(data) {

var vis = d3.select("#implications").selectAll("svg")
		  .data(data[geoDilemma[0].defaultValue].bullets)
		.enter().append("svg")
		  .attr("class", "implication")
		  .attr("id", function(d) {return d.id ;})
		  .attr("width", wO)
		  .attr("height", hO)
		.append("g")
		  .attr("class", "bulletGroup")
		  .attr("transform", "translate(" + mO[3] + "," + mO[0] + ")")
		  .call(outcomeChart);

var title = vis.append("g")
		  .attr("text-anchor", "end")
		  .attr("transform", "translate(-6," + (hO - mO[0] - mO[2]) / 2 + ")");

title.append("text")
		  .attr("class", "title")
		  .text(function(d) { return d.title; });

title.append("text")
		  .attr("class", "subtitle")
		  .attr("dy", "1.25em")
		  .text(function(d) { return d.subtitle; });
	
		outcomeChart.duration(1000);

});

function update(dilemmaPosition) {

// update the lever / action taken
  d3.json("levers.json", function(data) {
  
  var actions = d3.selectAll(".lever")
    .data(data[dilemmaPosition].bullets) 
      .transition()
      .ease("cubic-in-out")
      .delay(500)
      .duration(4000) 
      .call(actionChart);     
  });   
    
   // update implications

d3.json("implications.json", function(data) {

var outcomes = d3.selectAll(".bulletGroup")
    .data(data[dilemmaPosition].bullets)  
      .transition()
      .ease("cubic-in-out")
      .delay(3000)
      .duration(3500) 
      .attr("transform", "translate(" + mO[3] + "," + mO[0] + ")")
      .call(outcomeChart);    
  });
}

</script>
</body>
</html>

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

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