Skip to content

Instantly share code, notes, and snippets.

@zpydee

zpydee/data.json

Created May 3, 2014 15:33
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/65597faa27ec43fc7c75 to your computer and use it in GitHub Desktop.
Save zpydee/65597faa27ec43fc7c75 to your computer and use it in GitHub Desktop.
Download ZIP
Experience Equation in d3
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": "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
exEq.js
if (!d3.chart) d3.chart = {};
d3.chart.exEqun = function() {
var data;
function chart(container) {
var svgWidth = 800,
xCircleRadius = 50,
xCircleCy = 0,
fontSize = 14;
var svg = container.append('svg');
var xDiagram = svg.append('g').attr({
transform: 'translate(0,100)'
});
// 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,
ry: 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
});
}
}
// set chart.data as externally available property
// with setter and getter functionality
chart.data = function(value) {
if (!arguments.length) return data;
data = value;
return chart;
}
return chart;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script data-require="d3@3.4.6" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
<script src="exEq.js"></script>
</head>
<body>
<div id="d3Canvas"></div>
<svg></svg>
<script>
d3.json('data.json', function(err, data) {
var data = data;
var d3Canvas = d3.select('#d3Canvas');
var exEqDiv = d3Canvas.append("div").classed('exEq', true);
var exEqun = d3.chart.exEqun();
exEqun.data(data);
exEqun(exEqDiv);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment