Skip to content

Commit

Permalink
Logos added, title functionality changed in bubbleChart
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maartenvm
Maartenvm committed Nov 20, 2015
2 parents 64236a5 + a3994bf commit 82f8b2b
Show file tree
Hide file tree
Showing 9 changed files with 15,663 additions and 207 deletions.
2,664 changes: 2,664 additions & 0 deletions app/data/contextual.timeline18-11-eso.json
View file

Large diffs are not rendered by default.

6,128 changes: 6,128 additions & 0 deletions app/data/contextual.timeline18-11-fn.json
View file

Large diffs are not rendered by default.

6,767 changes: 6,767 additions & 0 deletions app/data/contextual.timeline18-11-pb.json
View file

Large diffs are not rendered by default.

Binary file modified app/images/Thumbs.db
View file
Binary file not shown.
18 changes: 9 additions & 9 deletions app/scripts/punchcard/dc.customBubbleChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,15 @@ dc.customBubbleChart = function (parent, chartGroup) {

function updateNodes (bubbleG) {
dc.transition(bubbleG, _chart.transitionDuration())
.attr('transform', bubbleLocator)
.selectAll('circle.' + _chart.BUBBLE_CLASS)
.attr('fill', _chart.getColor)
.attr('r', function (d) {
return _chart.bubbleR(d);
})
.attr('opacity', function (d) {
return (_chart.bubbleR(d) > 0) ? 1 : 0;
});
.attr('transform', bubbleLocator)
.selectAll('circle.' + _chart.BUBBLE_CLASS)
.attr('fill', _chart.getColor)
.attr('r', function (d) {
return _chart.bubbleR(d);
})
.attr('opacity', function (d) {
return (_chart.bubbleR(d) > 0) ? 1 : 0;
});

_chart.doUpdateLabels(bubbleG);
_chart.doUpdateTitles(bubbleG);
Expand Down
9 changes: 5 additions & 4 deletions app/scripts/punchcard/dc.customBubbleMixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,11 @@ dc.customBubbleMixin = function (_chart) {

if (label.empty()) {
label = bubbleGEnter.append('text')
.attr('transform', 'translate(' + 0 + ',' + -offset*0.5 + ')')
.attr('text-anchor', 'middle')
.attr('dy', '.3em')
.on('click', _chart.onClick);
.attr('transform', 'rotate(-45) translate(' + 5 + ',' + 0 + ') ')
// .attr('transform', ')
.attr('text-anchor', 'left')
.attr('dy', '.3em')
.on('click', _chart.onClick);
}

label
Expand Down
229 changes: 43 additions & 186 deletions app/scripts/punchcard/punchcard.controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,16 @@
'use strict';

function PunchcardController(d3, dc, crossfilter, colorbrewer) {
//Helper function to get unique elements of an array
var arrayUnique = function(a) {
return a.reduce(function(p, c) {
if (p.indexOf(c) < 0) {
p.push(c);
}
return p;
}, []);
};

//A renderlet that makes the text in the rowCharts to which it is applied more
//readable by changing the text color based on the background color.
var textRenderlet = function(_chart) {
Expand Down Expand Up @@ -281,36 +291,18 @@
//Climax score summed for all events with the same time(day) and group(number).
p.climax = p.climax + v.climax;

//To get the 'main' actor, we cheat and currently only get the first
//propbank A0 actor listed. We then assign this group's climax score
//to it and sum that over all events matching this time and group.
//TODO: fix this
//1. Get the propbank A0 actors for this event.
var actor0 = v.actors['pb/A0'];
var actor0Name;
if (actor0 === undefined || actor0 === '') {
//2a. Clean data (fill missing values with 'unknown')
actor0Name = 'unknown';
} else {
//2b. Split the string and get only the last part of it, the rest we
//consider 'fluff'
var parts = actor0[0].split('/');
actor0Name = parts[parts.length-1];
}
//3. Sum actor values over all events fitting this time and group.
if (p.actors[actor0Name] === undefined) {
p.actors[actor0Name] = v.climax;
} else {
p.actors[actor0Name] = p.actors[actor0Name] + v.climax;
}
var keys = Object.keys(v.actors);
keys.forEach(function (key) {
var keysActors = v.actors[key];
keysActors.forEach(function(keysActor) {
var actorLabel = key + ' : ' + keysActor;
p.actors[actorLabel] = (p.actors[actorLabel] || 0) + v.climax;
});
});

//Sum label values over all events fitting this time and group.
v.labels.forEach(function(l) {
if (p.labels[l] === undefined) {
p.labels[l] = v.climax;
} else {
p.labels[l] = p.labels[l] + v.climax;
}
p.labels[l] = (p.labels[l] || 0) + v.climax;
});

return p;
Expand All @@ -320,24 +312,17 @@
function(p, v) {
p.climax = p.climax - v.climax;

var actor0 = v.actors['pb/A0'];
if (actor0 === undefined || actor0 === '') {
actor0 = 'unknown';
}
var parts = actor0[0].split('/');
var actor0Name = parts[parts.length-1];
if (p.actors[actor0Name] === undefined) {
p.actors[actor0Name] = -v.climax;
} else {
p.actors[actor0Name] = p.actors[actor0Name] - v.climax;
}
var keys = Object.keys(v.actors);
keys.forEach(function (key) {
var keysActors = v.actors[key];
keysActors.forEach(function(keysActor) {
var actorLabel = key + ' : ' + keysActor;
p.actors[actorLabel] = (p.actors[actorLabel] || 0) - v.climax;
});
});

v.labels.forEach(function(l) {
if (p.labels[l] === undefined) {
p.labels[l] = -v.climax;
} else {
p.labels[l] = p.labels[l] - v.climax;
}
p.labels[l] = (p.labels[l] || 0) - v.climax;
});

return p;
Expand Down Expand Up @@ -459,15 +444,13 @@
//Information on hover
.renderTitle(true)
.title(function(p) {
//Get the most important actor (highest climax score)
var mostImportantActor = '';
var climaxScoreOfMostImportantActor = -1;
var formattedTime = p.key[1].getDay() + '/' + p.key[1].getMonth() + '/' + p.key[1].getFullYear();

//Get the actors
var actors = Object.keys(p.value.actors);
var actorString = '';
actors.forEach(function(a) {
if (p.value.actors[a] > climaxScoreOfMostImportantActor) {
mostImportantActor = a;
climaxScoreOfMostImportantActor = p.value.actors[a];
}
actorString += p.value.actors[a] + ' : ' + a.toString() + '\n';
});

//List all individual labels and their climax scores
Expand All @@ -476,7 +459,15 @@
labels.forEach(function(l) {
labelString += p.value.labels[l] + ' : ' + l.toString() + '\n';
});
return p.key[1] + '\n' + 'Group:'+ p.key[0] + '\n' + labelString + mostImportantActor + '\n' + 'Climax: ' + p.value.climax;

var titleString = formattedTime +
'\n-----Group------\n' +
'Group:'+ p.key[0] +
'\n-----Actors-----\n' +
actorString +
'\n-----Labels-----\n' +
labelString;
return titleString;
});

//A hack to make the customBubbleChart filter out 0-value bubbles while determining the x-axis range
Expand Down Expand Up @@ -510,16 +501,6 @@
//A rowChart that shows us the importance of the all actors
var allActorChart = dc.rowChart('#rowchart_allActors');

//Helper function to get unique elements of an array
var arrayUnique = function(a) {
return a.reduce(function(p, c) {
if (p.indexOf(c) < 0) {
p.push(c);
}
return p;
}, []);
};

//Dimension of the list of unique actors present in each event.
var allActorsDimension = ndx.dimension(function(d) {
var concatenatedActors = [];
Expand Down Expand Up @@ -610,130 +591,6 @@
allActorChart.render();




//A rowChart that shows us the importance of the propbank A0 actors
var actorA0rowChart = dc.rowChart('#rowchart_firstAction');

var actorA0Dimension = ndx.dimension(function(d) {
//1. Get the propbank A0 actors for this event.
var actor0 = d.actors['pb/A0'];
var actor0Names = [];
if (actor0 === undefined || actor0 === '') {
//2a. Clean data (fill missing values with 'unknown')
actor0Names = ['unknown'];
} else {
actor0.forEach(function(a) {
//2b. Split the string and get only the last part of it, the rest we
//consider 'fluff'
var parts = a.split('/');
actor0Names.push(parts[parts.length-1]);
});
}
return actor0Names;
});

var climaxSumPerActorA0 = actorA0Dimension.group().reduceSum(function(d) {
return +d.climax;
});

// var fakeClimaxSumPerActorA0 = {
// all: function() {
// var hash = climaxSumPerActorA0.value();
// var result = [];
// for (var kv in hash) {
// result.push({
// key: kv,
// value: hash[kv]
// });
// }
// return result;
// }
// };

//Set up the
actorA0rowChart
//Size in pixels
.width(parseInt(d3.select('#rowchart_firstAction').style('width'), 10))
.height(480)

//Bind data
.dimension(actorA0Dimension)
.group(climaxSumPerActorA0)

//The x Axis
.x(d3.scale.linear())
.elasticX(true)

//We use this custom data and ordering functions to sort the data and
//limit to the top 20 (in climax scores)
.data(function(d) {
return d.order(function(d) {
return d;
}).top(20);
})
.ordering(function(d) {
return -d;
});

// actorA0rowChart.on('renderlet', textRenderlet);
// actorA0rowChart.render();


//A rowChart that shows us the importance of the propbank A1 actors
var actorA1rowChart = dc.rowChart('#rowchart_secondAction');

//In defining this dimension, we cheat a little by only pulling the
//first A1 actor. TODO: fix this
var actorA1Dimension = ndx.dimension(function(d) {
//1. Get the propbank A0 actors for this event.
var actor1 = d.actors['pb/A1'];
var actor1Name;
if (actor1 === undefined || actor1 === '') {
//2a. Clean data (fill missing values with 'unknown')
actor1Name = 'unknown';
} else {
//2b. Split the string and get only the last part of it, the rest we
//consider 'fluff'
var parts = actor1[0].split('/');
actor1Name = parts[parts.length-1];
}
return actor1Name;
});

//Reduce (bin) over the dimension and sum the climax scores
var climaxSumPerActorA1 = actorA1Dimension.group().reduceSum(function(d) {
return +d.climax;
});
// var countPerActorA1 = actorA1Dimension.group();

actorA1rowChart
//Size in pixels
.width(parseInt(d3.select('#rowchart_secondAction').style('width'), 10))
.height(480)

//Bind data
.dimension(actorA1Dimension)
.group(climaxSumPerActorA1)

//The x Axis
.x(d3.scale.linear())
.elasticX(true)

//We use this custom data and ordering functions to sort the data and
//limit to the top 20 (in climax scores)
.data(function(d) {
return d.order(function(d) {
return d;
}).top(20);
})
.ordering(function(d) {
return -d;
});

// actorA1rowChart.on('renderlet', textRenderlet);
// actorA1rowChart.render();

//Now, build a table with the filtered results
var dataTable = dc.dataTable('#dataTable');

Expand Down Expand Up @@ -824,7 +681,7 @@
);
}

readData('data/contextual.timeline18-11-2.json');
readData('data/contextual.timeline18-11-eso.json');
}

angular.module('uncertApp.punchcard').controller('PunchcardController', PunchcardController);
Expand Down
32 changes: 24 additions & 8 deletions app/scripts/punchcard/punchcard.directive.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,34 @@
</div>
-->

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col"><div id="rowchart_groups"></div></div>
<div class="mdl-cell mdl-cell--10-col"><div id="laneChart"></div></div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<div class="logo-nwr"></div>
</div>
<div class="mdl-cell mdl-cell--6-col">
<div class="logo-nlesc"></div>
</div>
</div>

<div class="content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col"><div id="timeline"></div></div>
<div class="mdl-cell mdl-cell--12-col myChart">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col"><div id="rowchart_groups"></div></div>
<div class="mdl-cell mdl-cell--10-col"><div id="laneChart"></div></div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col"><div id="timeline"></div></div>
</div>
</div>
</div>

<div class="mdl-grid">
<div class="mdl-cell mdl-cell--12-col"><div id="rowchart_allActors"></div></div>
<div class="mdl-cell mdl-cell--12-col myChart"><div id="rowchart_allActors"></div></div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col"><div id="rowchart_firstAction"></div></div>
<div class="mdl-cell mdl-cell--6-col"><div id="rowchart_secondAction"></div></div>
<div class="mdl-cell mdl-cell--12-col"><div id="dataTable"></div></div>
<!-- <div class="mdl-cell mdl-cell--6-col"><div id="rowchart_firstAction"></div></div>
<div class="mdl-cell mdl-cell--6-col"><div id="rowchart_secondAction"></div></div> -->
<div class="mdl-cell mdl-cell--12-col myChart"><div id="dataTable"></div></div>
</div>
</div>
Loading

0 comments on commit 82f8b2b

Please sign in to comment.