Skip to content

Instantly share code, notes, and snippets.

@zpydee

zpydee/_.md

Created May 2, 2014 11:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zpydee/11472578 to your computer and use it in GitHub Desktop.
Save zpydee/11472578 to your computer and use it in GitHub Desktop.
Download ZIP
Experience Equation 2
Raw
_.md
Raw
config.json
{"description":"Experience Equation 2","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/hnSdF4k.gif"}
Raw
data.json
[
{
"_id": "53452b8dd4f52c51319410a4",
"name": "emotive outcome",
"weight": 60,
"dboardConfig": "534524802c992cbd25d780d1",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.278Z",
"created": "2014-05-02T10:33:24.116Z",
"pillars": [
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "convenience",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "commitment",
"weight": 45,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
}
]
},
{
"_id": "53452b8dd4f52c51319410a4",
"name": "emotive outcome",
"weight": 60,
"dboardConfig": "534524802c992cbd25d780d1",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.278Z",
"created": "2014-05-02T10:33:24.116Z",
"pillars": [
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "convenience",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "commitment",
"weight": 45,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
}
]
},
{
"_id": "53452b8dd4f52c51319410a4",
"name": "emotive outcome",
"weight": 60,
"dboardConfig": "534524802c992cbd25d780d1",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.278Z",
"created": "2014-05-02T10:33:24.116Z",
"pillars": [
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "convenience",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "commitment",
"weight": 45,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
}
]
},
{
"_id": "53452b8dd4f52c51319410a4",
"name": "emotive outcome",
"weight": 60,
"dboardConfig": "534524802c992cbd25d780d1",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.278Z",
"created": "2014-05-02T10:33:24.116Z",
"pillars": [
{
"_id": "53452c9e3808cfe43233f1cf",
"name": "reliability",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.311Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "convenience",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
},
{
"_id": "53452c9e3808cfe43233f1ce",
"name": "commitment",
"weight": 45,
"leaf": "53452b8dd4f52c51319410a4",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.310Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": []
}
]
},
{
"_id": "53452b8dd4f52c51319410a5",
"name": "service experience",
"weight": 40,
"dboardConfig": "534524802c992cbd25d780d1",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.279Z",
"created": "2014-05-02T10:33:24.116Z",
"pillars": [
{
"_id": "53452c9e3808cfe43233f1d1",
"name": "competence",
"weight": 25,
"leaf": "53452b8dd4f52c51319410a5",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.312Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": [
"53452db1d1774ba8345ae382",
"53452db1d1774ba8345ae383",
"53452db1d1774ba8345ae384"
]
},
{
"_id": "53452c9e3808cfe43233f1d1",
"name": "speed",
"weight": 35,
"leaf": "53452b8dd4f52c51319410a5",
"__v": 0,
"isDeleted": false,
"modified": "2014-05-02T10:33:24.312Z",
"created": "2014-05-02T10:33:24.123Z",
"metrics": [
"53452db1d1774ba8345ae382",
"53452db1d1774ba8345ae383",
"53452db1d1774ba8345ae384"
]
}
]
}
]
Raw
inlet.js
var data = tributary.data;
var svgWidth = 750,
xCircleRadius=50,
xCircleCy = 0,
fontSize = 14;
var svg = d3.select('svg');
var xDiagram = svg.append('g').attr({transform:'translate(0,66)'});
// Ordinal distribution of leaves
var lScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangePoints([0,svgWidth],1);
// Leaf and pilllar lines
for(l=0;l<data.length;l++) {
var lineFunc = d3.svg.line()
.x(function(d){return d.x;})
.y(function(d){return d.y;})
.interpolate('linear');
var leafLineData = [{x:svgWidth/2,y:xCircleCy},
{x:lScale(l),y:xCircleCy + xCircleRadius*2}];
var leafLine = xDiagram.append('path').attr({
d: lineFunc(leafLineData),stroke:'red',fill:'none'
});
for(p=0;p<data[l].pillars.length;p++){
var pillarLineData = [{x:lScale(l) - 50,y:xCircleCy+(xCircleRadius*2)+22},
{x:lScale(l) - 50,y:xCircleCy+(xCircleRadius*2)+ 44 + 30*(p)},
{x:lScale(l)-40,y:xCircleCy+(xCircleRadius*2)+ 44 + 30*(p)}];
var pillarLine = xDiagram.append('path').attr({
d: lineFunc(pillarLineData),stroke:'blue',fill:'none'
});
}
}
// Experience Circle
var xShape = xDiagram.append('circle').attr({
cx:svgWidth/2, cy:xCircleCy, r:xCircleRadius, stroke:'blue', 'stroke-width':3, fill:'white'});
var xLabel = xDiagram.append('text').text('Experience').attr({
x:svgWidth/2, y:xCircleCy + fontSize/4, stroke:'blue', 'font-size':fontSize, 'text-anchor':'middle'});
// Leaf shapes and labels
var lShapes = xDiagram.selectAll('rect.lShape').data(data).enter();
lShapes.append('rect').classed('lShape',true).attr({
x:function(d,i){return lScale(i)-60},
y:xCircleCy+(xCircleRadius*2)-20,
width:120,
height:40,
rx:5,
stroke:'red',
'stroke-width':3,fill:'#f1f3b4'});
var lLabels = xDiagram.selectAll('text.lLabel').data(data).enter();
lLabels.append('text').text(function(d){return d.name}).attr({
x:function(d,i){return lScale(i)}, y:xCircleCy+(xCircleRadius*2) + fontSize/4, stroke:'#666666', 'font-size':fontSize-2, 'text-anchor':'middle'});
// Pillar shapes and labels
for(l=0;l<data.length;l++) {
var pWidth = svgWidth / data.length
var leafPillars = xDiagram.selectAll('rect.pillars'+l).data(data[l].pillars).enter();
leafPillars.append('rect').classed('pillars'+l,true).attr({
x:lScale(l) - 40,
y:function(d,i){return xCircleCy+(xCircleRadius*2 +30) + 30*i;},
width:120,
height:24,
stroke:'red',
fill:'white'})
.on('mouseover', function(d){
xDiagram.append('rect')
.attr({x:parseFloat(d3.select(this).attr('x')) + 115,
y:parseFloat(d3.select(this).attr('y')) + 20,
width:200,height:50,
stroke:'#666666',
fill:'white',
id:'tooltip'});
})
.on('mouseout', function(d){
xDiagram.select('#tooltip').remove();
});
var pillarLabels = xDiagram.selectAll('text.pillars'+l).data(data[l].pillars).enter();
pillarLabels.append('text').classed('pillars'+l,true)
.text(function(d){return d.name;})
.attr({
x:lScale(l) - 35,
y:function(d,i){return xCircleCy+(xCircleRadius*2 +46) + 30*i;},
width:100,
height:24,
fill:'blue',
'font-size':12});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment