roadmap test

_.md

[ Launch: circle chart ] 14dd6ae6125764499762 by jasonkolb
[ Launch: pie chart ] 6674060 by jasonkolb
[ Launch: playing with arcs ] 6329263 by jasonkolb
[ Launch: playing with paths ] 6328943 by jasonkolb

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"roadmap test","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"test.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/QXJE1Ys.gif","ajax-caching":true}

inlet.js

var svg = d3.select("svg")


var defs = svg.append("defs");

  var filter = defs.append("filter")
      .attr("id", "dropshadow")

  filter.append("feGaussianBlur")
      .attr("in", "SourceAlpha")
      .attr("stdDeviation", 4)
      .attr("result", "blur");
  filter.append("feOffset")
      .attr("in", "blur")
      .attr("dx", 3)
      .attr("dy", 3)
      .attr("result", "offsetBlur");

  var feMerge = filter.append("feMerge");

  feMerge.append("feMergeNode")
      .attr("in", "offsetBlur")
  feMerge.append("feMergeNode")
      .attr("in", "SourceGraphic");


var p1x = 153;
var p1y = 360;

var controlx = 192;
var controly = 80;

var x = 289;
var y = 376;


var w = 1055,
    h = 500

var median = 34;
var pieMax = 100;
var groupTop = 100;
var tickWidth = 59;

var color = d3.scale.category20c();

var lineData = [ { "myname":"ismyname", "x": 1,   "y": 5},  {"myname":"ismyname", "x": 20,  "y": 20},
                  {"myname":"ismyname", "x": 40,  "y": 10}, {"myname":"ismyname", "x": 60,  "y": 40},
                  {"myname":"ismyname", "x": 80,  "y": 5},  { "myname":"ismyname","x": 100, "y": 60}];

var pies = lineData.map( function(d){
    return d3.layout.pie()
        .sort(null)
        .value(function(d) {
          return d; })( [d.x, (pieMax - d.x)] );
});


// create an "average" chart which is really only used to get the centroid of the average group
// calculate values for which median will be in the mid-point of the first group
var otherSlice = pieMax - median;
var medianSliceData = [median,otherSlice];  
var medianSlices = d3.layout.pie().sort(null)(medianSliceData);   
medianAngleAdjustment = 2*Math.PI/4;
var medianAngle = 2*Math.PI - medianAngleAdjustment + medianSlices[0].endAngle;

var xDomain = lineData.map(function(d){return d.x;});                           

var xScale = d3.scale.ordinal().domain(xDomain).rangeBands([100,w]);

var pieDataGenerator = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      return d.x; });

var donutOverlay = svg.selectAll(".pieGroup")
	.data(pies);

var dataGroup = svg.selectAll("dataGroup").data(lineData);
dataGroup.enter().append("g").classed("backdropGroup", true);
dataGroup.enter().append("g").classed("dataGroup", true);
donutOverlay.enter().append("g").classed("pieGroup", true);

var avgIndicatorLine = dataGroup.selectAll("avgIndicatorLine").data(lineData);
avgIndicatorLine.enter().append("path").classed("avgIndicatorLine", true).attr("id", function(d){ return "avg" + d.x; });


dataGroup.attr("transform", 
               function(d){
                 return "translate(" + xScale( d.x ) + ", " + groupTop + ")";
               });

var fullRadius = 57;
var activeCircles = [];

function toggleCircle( bitId ){
  if( activeCircles[bitId] != null ){
    dataGroup.select(".slice" + bitId).transition().attr("filter", "");    
    donutOverlay.select(".slice" + bitId).transition().attr("filter", "");
    activeCircles[bitId] = null;
  }
  else{
    dataGroup.select(".slice" + bitId).transition().attr("filter", "url(#dropshadow)");
    donutOverlay.select(".slice" + bitId).transition().attr("filter", "url(#dropshadow)");
    activeCircles[bitId] = bitId;
  }
}

var sliceWidth = 12;
var donutSliceFunction = d3.svg.arc()
	.innerRadius(fullRadius - sliceWidth / 2)
	.outerRadius(fullRadius + sliceWidth / 2);

dataGroup.append("circle")
	.attr("fill", function(d, i){ return color(d.x); })
	.attr("cx", fullRadius / 2 )
	.attr("cy", fullRadius / 2 )
	.attr("r", fullRadius)
	.attr("class", function(d,i){ return "slice" + d.x; })
	.classed("borderCircle", true)
	.on("click", function(d){
      toggleCircle( d.x );
	});

// Move the overlay donut into place
donutOverlay.attr("transform", 
               function(d){
                 return "translate(" + (xScale( d[0].data )+ fullRadius / 2) + ", " 
                 	+ (groupTop + fullRadius / 2) + ")";
               });

var individualDonut = donutOverlay.selectAll(".individualDonut").data(
  function(d){
    return d;
  })

individualDonut.enter().append("path")
	.classed("individualDonut", true)
	.attr("class", function(d,i){ return "individualDonut slice" + d.data; })
	.attr("fill", function(d, i){ return color(d.data); })
	.attr("opacity", function(d,i){ return i % 2 ? 0 : 1; } )
	.on("click", function(d){
      toggleCircle( d.data );
	});

individualDonut.transition().duration(1000).attr("d", function(d){
  		return donutSliceFunction(d);
	});

avgIndicatorLine
.attr("d", function(d){
  	var tickWidth = 59;
  
	var x0 = (fullRadius/2);// + (fullRadius) * Math.cos(medianAngle);
	var y0 = (fullRadius/2);// + (fullRadius) * Math.sin(medianAngle);

	var x1 = (fullRadius/2) + (fullRadius + tickWidth/2) * Math.cos(medianAngle);
	var y1 = (fullRadius/2) + (fullRadius + tickWidth/2) * Math.sin(medianAngle);
  
	var points = [[x0,y0],
                  [x1,y1]];
  return( d3.svg.line()(points) );
});

var x1 = (fullRadius/2) + (fullRadius + 16) * Math.cos(medianAngle);
var y1 = (fullRadius/2) + (fullRadius) * Math.sin(medianAngle);

var avgText = dataGroup.append("text")
	.classed("avgText", true)
	.attr("x",x1)
	.attr("y",y1)
.attr("text-anchor", function(d){
	if( median < pieMax / 2 )
      	return "start";
  	else 
      	return "end";
})
	.attr("transform", 
          function(d){
            console.log(pieMax)
            if( median < pieMax / 2 ){          
          		return "rotate(" + (medianAngle*180/Math.PI) + " " + x1 + " " + y1 + ")";
            }
            
            var medianAngle2 = Math.PI - medianAngleAdjustment + medianSlices[0].endAngle;
            return "rotate(" + (medianAngle2*180/Math.PI) + " " + x1 + " " + y1 + ")";  
          })
    .text("Avg");

dataGroup.append("text")
	.text( function(d){
	  	return d.x + ".1K";
	})
	.attr("text-anchor", "middle")
	.attr("x", 
          function(d){
            return fullRadius / 2
          })
	.attr("y", 
          function(d){
            return fullRadius / 2;// + this.getBBox().width / 2;
          })
	.classed("innerValue", true)
	.on("click", function(d){
      toggleCircle( d.x );
	});

dataGroup.append("text")
	.text( function(d){
	  	return d.myname;
	})
	.attr("text-anchor", "middle")
	.attr("x", 
          function(d){
            return fullRadius / 2
          })
	.attr("y", 
          function(d){
            return fullRadius / 2 + 20;// + this.getBBox().width / 2;
          })
	.classed("innerText", true)
	.on("click", function(d){
      toggleCircle( d.x );
	});

test.css

.borderCircle{
  stroke: #ADADAD;
  fill-opacity: 0.64;
  cursor: pointer;
}
.individualDonut {
  cursor: pointer;
  stroke: #747474;
}

.innerValue{
  fill: black;
  font-weight: bold;
  font-size: 24pt;
  cursor: pointer;
}

.innerText{
  font-weight: lighter;
  font-size: 10pt;
  cursor: pointer;
}

.avgIndicatorLine{
  stroke: #ADADAD;
}

.selected path {
  stroke-width: 5;
}

.avgText{
  fill: #666;
  font-size: 8pt;
}