h2020_topics.html

<!DOCTYPE html>
<html>
<head></head>
<style type="text/css">

.projectDetails {
    font : 15px sans-serif;
    border: 2px solid white;
    vertical-align : top;
}

.projectDetailsHeaders {
    background: #aaf;
    font-weight : bold;
    text-align: right;
    vertical-align: top;
    padding: 5px;
    border: 2px solid white;
    width: 90px;
}

.projectDetailsData {
    vertical-align : top;
    border: 2px solid white;
    padding: 5px;
}

#tree {
  width: 960px;
  height: 520px;
  background: #ddd;
}

text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
}

.barchart rect {
    fill : steelblue;
}

.barchart text {
    fill : #555;
    font : 10px sans-serif;
    text-anchor: end;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

.grandparent rect {
  fill: orange;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
  fill-opacity: 0.5;
}

.children:hover rect.child {
  stroke: #aaa;
}

.ui-state-default {
    font-size : 11px;
}

</style>
<body>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="http://www.billdwhite.com/wordpress/wp-content/js/browserdetect/browserdetect.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/d3textwrap.v0.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="pourover.js"></script>
<!-- <script charset="utf-8" src="d3.js" type="text/javascript"></script> -->
<style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 100%; }
  #sortable li { margin: 3px 3px 3px 3px; padding: 1.0em; padding-left: 1.5em; font-size: 1.0em; height: 12px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<div style="background:#aaf">
<h2>H2020 Topic Mapping</h2><p>
    Horizon 2020 is Europe's recent framework for research and innovation, handling multiple grants across a wide variety of areas.  Unfortunately the publicly available data does not include metadata about topics, so it is difficult to assess what areas are receiving the most attention.  This represents an effort to use automatic topic classification (in this case using <a href="http://amaral-lab.org/resources/software/topic-mapping">Amaral Lab's "TopicMapping"</a>) to provide some structure..<p>
<h4>Click the orange bar to zoom out, any colored rectangle to zoom in; hover over a rectangle for more data</h4><p>
Leaf nodes will display full summaries of a grant.  In some cases the display may get "wedged" and look erroneous after changing filters or reordering the tree; either reload or zoom in/out once and that should sort things out.
<hr>
</div>
<div id="loadingdiv">
<h1>Loading data, please wait...</h1>
</div>
<div style="background:#eeeeff">
<table>
<tr>
<td style="vertical-align: top;">
<b>Topic:</b><p>
<div id="topicdiv"></div>
<select id="topic" multiple="multiple">
</select>
<p>
<b>Subtopic:</b><p>
<select id="subtopic" multiple="multiple">
</select><p>
<b>Substring Search</b>
<p>(summaries)<p>
<input type="text" id="search"></input>
<p>
</td>
<td >
<div id="tree">
</div>
</td>
<td>
<div id="bargraphDiv">
</div>
</td>
</tr>
</table>
</div>
<div id="projectdetailsdiv">
<h3>Last Selected Project Details</h3>
<table class="projectDetails" cellpadding="10">
<tr>
<td class="projectDetailsHeaders">
Project
</td>
<td id="projectDetailsProject">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Acronym
</td>
<td id="projectDetailsAcronym" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Participants
</td>
<td id="projectDetailsParticipants" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Call Details
</td>
<td id="projectDetailsCallDetails" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Country
</td>
<td id="projectDetailsCountry" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Funding
</td>
<td id="projectDetailsFunding" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Duration
</td>
<td id="projectDetailsDuration" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Category
</td>
<td id="projectDetailsCategory" class="projectDetailsData">
</td>
</tr>

<tr>
<td class="projectDetailsHeaders">
Abstract
</td>
<td id="projectDetailsAbstract" class="projectDetailsData">
</td>
</tr>

</table>
</div>

<script>
"use strict";

var arr = [
    { 'a' : 'a', 'b' : 1, 'c' : '5', 'size' : 2000, 'name' : 'adam' }, 
    { 'a' : 'b', 'b' : 2, 'c' : '6', 'size' : 4000, 'name' : 'bob' }, 
    { 'a' : 'a', 'b' : 2, 'c' : '6', 'size' : 6000, 'name' : 'charlie' }, 
    { 'a' : 'b', 'b' : 1, 'c' : '5', 'size' : 10000, 'name' : 'david' } 
];

var collection;
var topics;
var subtopics;
var topicFilter;
var subtopicFilter;
var summaryFilter;
var dataView;

var SubstringFilter = PourOver.Filter.extend({

    // cacheResults specifies how to take a set of items and assign them to possibilities
    // see nytimes.github.io/pourover/examples/examples_build/advanced_filters.html
    // looks like this actually filters the items, but it also sounds like
    // we can refuse to cache by setting these to false (PourOver.manualFilter)
    // this is inefficient and in time it may be worth adding a query and translating that into
    // a cacheable possibility
    cacheResults : function(items){
	var possibilities = this.possibilities,
        attribute = this.attr; 
	_(items).each(function(i){
            var value = i[attribute].toLowerCase();
            _(possibilities).each(function(p){
		var index = value.indexOf( p.value.toLowerCase() );
		if (( index > -1 ) || (p.value === "*") || (p.value === '')) {
		    p.matching_cids = PourOver.insert_sorted(p.matching_cids,i.cid)
		}
            });
	});
    },
    addCacheResults : function( items ) {
	this.cachResults.call( this, new_items );
    },
    // getFn specifies how to translate a query into some combination of possibility caches
    // so this requests a cache.  For this one-shot search filter, we have one cache (the query)
    // so this should not only match the single possibility but return it.
    // but we can have getFn just return a MatchSet by manually constructing one
    // starting point : PourOver.manualFilter (line 1480)
    getFn : function( query ) {
	var query_lc = query.toLowerCase();
	var matching_possibility = _(this.possibilities).find( function(p) {
	    var value_lc = p.value.toLowerCase();
	    return value_lc === query_lc;
	});
	// new PourOver.MatchSet seems to take ([cids], collection, [[filter, query]] )
	// this.makeQueryMatchSet takes cids,query and calls the above with this.getCollection()
	// so how to page through this.getCollection() and match cids? 
	// Collection has items()
	return this.makeQueryMatchSet( matching_possibility.matching_cids, query );
    },

    addPossibility : function( query ) {
	this.possibilities[query] = {
	    value : query,
	    matching_cids : []
	};
	this.cacheResults( this.getCollection().items );
    }
    
});

var makeSubstringFilter = function( name, values, attr ) {
    var values = _(values).map(function(i){return {value:i}}),
        opts = {associated_attrs: [attr], attr: attr},
    filter = new SubstringFilter(name,values,opts);
    return filter;
};

d3.json( "corpus-topics.json", function (d) { 
    arr = d; 
    collection = new PourOver.Collection( arr );
    topics = _.sortBy(_.uniq(_.pluck( arr, "topic" )));
    topicFilter = PourOver.makeExactFilter( "topic", topics );
    subtopics = _.sortBy(_.uniq(_.pluck( arr, "subtopic" ) ));
    subtopicFilter = PourOver.makeExactFilter( "subtopic", subtopics );
    summaryFilter = makeSubstringFilter("abstract", [], 'abstract');

    //populate the UI
    var populateMultiSelect = function( id, data, key ) {
	d3.select(id).selectAll("option")
	    .data( data ).enter()
	    .append( "option" )
	    .attr( "value", function(d) { return d } )
	    .attr("selected", "selected")
	    .text( function(d) { 
		if (key) {
		    return key[d] || d;
		} else {
		    return d;
		}
	    } )
    }

    populateMultiSelect( "select#topic", topics )
    populateMultiSelect( "select#subtopic", subtopics ) //possibly add third grant mapping words to english sentence { "wurd wurd wurd" : "Wordly Topic" }

    collection.addFilters([topicFilter, subtopicFilter, summaryFilter ]);

    var DataView = PourOver.View.extend({
	selectionFn : function() {
	    return collection.filters.topic.current_query
		.and( collection.filters.subtopic.current_query )
		.and( collection.filters.abstract.current_query );
	}
    });

    var queryAll = function( filter, arr ) {
	// make a union query of all the items in array
	if ( arr.length > 0 ) {
	    filter.query( arr[0] );
	    arr.slice(1,arr.length).forEach( function(a) {
		filter.unionQuery(a); 
	    });
	} else {
	    filter.query();
	}
    }
    

    //have to set all current queries first
    dataView = new DataView( "dataView", collection );
    queryAll( collection.filters.topic, topics )
    queryAll( collection.filters.subtopic, subtopics )

    setData( tree_from_array( dataView.getCurrentItems(), ['topic', 'subtopic']))

    var resetData = function() {
	var a = $("#sortable > li").map( function() { return $(this).attr("value") }).get();
	//trim everything after "stop"
	a = a.slice(0, a.indexOf("STOP"));

	setData( tree_from_array( dataView.getCurrentItems(), a ) );
    }

    var multiSelectOnChangeFunction = function( id, filter ) {
	var result = function( element, checked ) {
	    var a = []
	    $(id).each( function() { 
		if ((this.value !== "multiselect-all") && this.selected) { 
		    a.push( this.value ); 
		} } );
	    queryAll( filter, a );
	    resetData();
	}
	return result
    }

    $(function() {
	$( "#sortable" ).sortable( {
	    update : function( event, ui ) { 
		resetData();
	    }
	});
	$( "#sortable" ).disableSelection();

	$( "#topic" ).multiselect({
	    numberDisplayed : 0,
	    includeSelectAllOption : true,
	    onChange : multiSelectOnChangeFunction( "select#topic > option", collection.filters.topic )
	});
	$( "#subtopic" ).multiselect({
	    numberDisplayed : 0,
	    includeSelectAllOption : true,
	    onChange : multiSelectOnChangeFunction( "select#subtopic > option", collection.filters.subtopic )
	});
	$( "#search" ).change( function() {
	    var query = $(this).val();
	    if (! (collection.filters.abstract.possibilities[query]) ) {
		collection.filters.abstract.addPossibility( query );
	    }
	    collection.filters.abstract.query( query );
	    resetData();
	});
    });
    $("#loadingdiv").hide();
} );

function children_has_key( n, key ) {
    result = false;
    n.children.forEach( function(c) {
	if (c.name == key) {
	    result = true;
	}
    })
    return result;
}

function child_with_name( n, key ) {
    result = null;
    n.children.forEach( function(c) {
	if (c.name == key) {
	    result = c; 
	}
    })
    return result;
}

//test for tree from http://bl.ocks.org/mbostock/4063550

function tree1_from_array( a, keys ) {
    var id = 1;
    var result = { "name" : "All H2020", "children" : [] }
    a.forEach( function( i ) {
	var ks = keys.slice(0, keys.length)
	var n = result;
	while (ks.length > 0) {
	    var this_key_name = ks[0]
	    var this_key = i[ks[0]]
	    if (children_has_key(n, this_key)) {
		n = child_with_name( n, this_key );
	    } else {
		n.children.push( {
		    "id" : id,
		    "name" : this_key,
		    "children" : []
		})
		id = id +1;
		n = child_with_name(n, this_key)
	    }
	    ks = ks.slice(1, ks.length);
	}
	n.children.push( {
	    "id" : id,
	    "acronym" : i.acronym,
	    "topic" : i.topic,
	    "subtopic" : i.subtopic,
	    "size" : i['ec-contribution'], //size
	    "abstract" : i.abstract
	});
	id = id + 1;
    })
    return result
}


var children_from_array = function( arr, keys ) {

    var _children_from_array = function( carr, ckey ) {
	return { name : ckey, children : children_from_array( carr, keys.slice(1,keys.length) ) }
    };

    var result;

    if (keys.length === 0) {
	// if keys.length == 0, this is an array of children; assume the name attribute exists
	result = arr;
    } else {
	// otherwise, group by the first key, and children are the remaining keys
	result = _.map( _.groupBy( arr, keys[0] ), _children_from_array )
    }

    return result;
}

var paint_tree = function( node, starting_id ) {
    // walks a tree and paints its nodes with an ID and additional data
    node.id = starting_id
    starting_id = starting_id + 1

    if (node.hasOwnProperty( "children" )) {
	node.children.forEach( function(c) {
	    starting_id = paint_tree(c, starting_id)
	})
    } else { 
	node.name = node.acronym
	node.size = node['ec-contribution']
    }

    return starting_id
}

var tree_from_array = function( arr, keys ) {
    var result = { name : "All ERC", children : children_from_array( arr, keys ) }
    paint_tree( result, 0 );
    return result;
}

var margin = { top: 20, right:0, bottom:0, left:0 };
var formatNumber = d3.format(",d");
var svg_width = 960;
var svg_height = 500;
var svg_id = 0;
var transitioning = false;
var colorScale = d3.scale.category20();

var formatMoney = function( d ) {
    if ( d > 1000000000 ) {
	return "\u20AC" + (d/1000000000).toFixed(2) + "B";
    } else if ( d > 1000000 ) {
	return "\u20AC" + (d/1000000).toFixed(2) + "M";
    } else {
	return "\u20AC" + d.toFixed(2);
    }
}


var make_bargraph = function(d) {
    d._children.sort( function(a,b) { return a.name > b.name; } )
    var bargraphDelay = 250;
    var bargraphDuration = 750;
    var width = 300;
    var numChildren = d._children.length;
    var maxCostHeight = 25;
    var maxLabelHeight = 10;
    var barheight = svg_height / d._children.length;

    var costHeight = Math.min( Math.max(barheight-5, 1), maxCostHeight );
    var labelHeight = Math.min( Math.max( barheight-5, 1), maxLabelHeight );

    var dataMax = d3.max(_.pluck( d._children, "size" ))
    var barX = d3.scale.linear()
	.domain([0, dataMax])
	.range([0,width])

    var chart = d3.select("div#bargraphDiv").append("svg")
	.attr("class", "barchart")
	.attr("id", "bargraph")
	.attr("width", width )
	.attr("height", svg_height )

    var bar = chart.selectAll("g")
	.data(d._children)
	.enter().append("g")
	.attr("transform", function(d,i) { return "translate(0, " +i*barheight + ")"; })

    bar.append("rect")
	.attr("width", 0)
	.attr("height", barheight - 1)
	.style("fill", function(d) { return colorScale( d.name ); } )
	.transition()
	.delay( function(d,i) { return i/numChildren*bargraphDelay; } )
	.duration( bargraphDuration )
	.attr("width", function(d) { return barX(d.size); })
    
    bar.append("rect")
	.attr("width", 0)
	.attr("height", barheight - 1)
	.style("fill", function(d) { return colorScale( d.parent.name ); } )
	.style("fill-opacity", 0.5 )
	.transition()
	.delay( function(d,i) { return i/numChildren*bargraphDelay; } )
	.duration( bargraphDuration )
	.attr("width", function(d) { return barX(d.size); });

    bar.append("text")
	.attr("x", 3 )
	.attr("y", 10 )//(barheight + labelHeight)/2 )
	.style( "font-size", labelHeight )
	.style("text-anchor", "start")
	.text( function(d) { return d.name; });

    var textwidths = [];
    bar.select("text")
	.each( function() { textwidths.push( this.getBBox().width ); } );

    bar.append("text")
	.attr("x", 3) //function(d,i) { return Math.max( textwidths[i]+costHeight*5, barX(d.size) - 3 ); } )
	.attr("y", ( barheight + costHeight ) / 2 )
	.style( "font-size", costHeight + "px" )
	.style("text-anchor", function(d,i) { return "start" })
	.text( function(d) { return formatMoney(d.size); } );


}

function make_svg() {
    return d3.select("div#tree").append("svg")
	.attr("id", "treeMap"+svg_id)
	.attr("width", svg_width + margin.left + margin.right )
	.attr("height", svg_height + margin.top + margin.bottom)
	.style("margin.left", -margin.left + "px" )
	.style("margin.right", -margin.right + "px" )
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
	.style("shape-rendering", "crispEdges");
//	.attr("transform","translate(" + svg_width/2 + "," + svg_width/2 + ")" );
}

var svg;// = make_svg();

var grandparent;

var make_grandparent = function( svg ) {
    var result = svg.append("g")
	.attr("class", "grandparent" );

    result.append( "rect" )
	.attr("y", -margin.top )
	.attr("width", svg_width )
	.attr("height", margin.top )

    result.append( "text" )
	.attr("x", 6)
	.attr("y", 6-margin.top)
	.attr("dy", ".75em" )

    return result;
}

/*
var tree = d3.layout.tree()
    .size([360, svg_width / 2 - 120])
    .separation( function(a,b) { return (a.parent == b.parent ? 1 : 2 ) / a.depth; });
*/

var x = d3.scale.linear()
    .domain([0,svg_width])
    .range([0, svg_width]);

var y = d3.scale.linear()
    .domain([0, svg_height])
    .range([0, svg_height]);

function makeTreemap() {
    return d3.layout.treemap()
	.children( function( d, depth ) { return depth ? null : d._children; } )
	.sort( function(a,b) { return a.value - b.value; } )
	.ratio( svg_height / svg_width * 0.5 * (1 + Math.sqrt(5)))
	.round(false)
	.value( function(d) { return d.size; } );
}

var treemap = makeTreemap();

//borrowing heavily from bost.ocks.org/mike/treemap

function setData( data ) {
    var initialize = function( root ) {
	root.x = root.y = 0;
	root.dx = svg_width;
	root.dy = svg_height;
	root.depth = 0;
    }

    var accumulate = function(d)  {
	// aggregate values; "normally done by treemap layout but not here because of our
	// custom implementation"  -- not sure what this means
	return (d._children = d.children) ?
	    d.size = d.children.reduce( function(p, v) { return p + accumulate(v); }, 0 )
	: d.size
    }

    var layout = function( d ) {
	if (d._children) {
	    treemap.nodes( {_children : d._children} );
	    d._children.forEach( function(c) {
		c.x = d.x + c.x * d.dx;
		c.y = d.y + c.y * d.dy;
		c.dx *= d.dx;
		c.dy *= d.dy;
		c.parent = d;
		layout(c)
	    });
	}
    }

    var display = function( d ) {

	var transition = function( d) {
	    if ( transitioning || !d) return;
	    transitioning = true;

	    var g2 = display(d),
	    t1 = g1.transition().duration(750),
	    t2 = g2.transition().duration(750);

	    //update the domain only after entering new elements
	    x.domain([d.x, d.x + d.dx]);
	    y.domain([d.y, d.y + d.dy]);

	    //enable antialiasing during transition
	    svg.style("shape-rendering", null);

	    //draw child nodes atop parent nodes
	    svg.selectAll(".depth").sort( function(a,b) { return a.depth - b.depth; } );

	    // fade-in entering text
	    g2.selectAll("text").style("fill-opacity", 0)

	    //transitioning to new view
	    t1.selectAll("text").call(text).style("fill-opacity", 0);
	    t2.selectAll("text").call(text).style("fill-opacity", 1);
	    t1.selectAll("rect").call(rect);
	    t2.selectAll("rect").call(rect);

	    //remove old node when transition finished
	    t1.remove().each("end", function() {
		svg.style("shape-rendering", "crispEdges" );
		transitioning = false;
	    });
	}

	grandparent.datum( d.parent )
	    .on("click", transition)
	    .select("text")
	    .text( name(d) );

	var g1 = svg.insert("g", ".grandparent" )
	    .datum(d)
	    .attr("class", "depth" );

	var g = g1.selectAll("g")
	    .data(d._children)
	    .enter().append("g");

	g.filter( function(d) { return d._children; })
	    .classed("children", true)
	    .on("click", transition);

	g.filter( function(d) { return !(d._children); })
	    .classed("children", false )
	    .on("click", function(d2) {

		$("#projectDetailsAcronym").text(d2.acronym);
		$("#projectDetailsFunding").text(formatMoney(d2['ec-contribution']));
		$("#projectDetailsTopic").text(d2.topic);
		$("#projectDetailsSubtopic").text(d2.subtopic);
		$("#projectDetailsAbstract").text(d2.abstract);
	    });

	g.selectAll(".child")
	    .data( function(d) { return d._children || [d]; } )
	    .enter()
	    .append("rect")
	    .attr("class", "child" )
	    .call(rect);

	var thisrect = g.append("rect")
	    .attr("class", "parent")
	    .call(rect);

	console.log(thisrect)

	thisrect.append("title")
	    .text(function(d) { 
		if ( d._children ) {
		    return d.name + "\nSubprojects: " + d._children.length + "\n" + formatMoney(d.value); 
		} else {
		    return "\nAcronym: " + d.acronym 
			+ "\nFunding: " + formatMoney( d['ec-contribution'] ) + "\nDuration: " + d.duration 
			+ "\nCategory: " + d.category + "\n\nSummary: " + d.summary;
		} 
	    });

	g.append("text")
	    .attr("dy", ".75em")
	    .text( function(d) { return d.name; } )
	    .call(text)
	
	d3.select("#bargraph").remove();
	make_bargraph(d);
	return g;
    }

    var text = function( text ) {
	text.attr("x", function(d) { return x(d.x) + 6; } )
	    .attr("y", function(d) { return y(d.y) + 6; });
    }

    var bounds = function(d) { 
	return { "x" : x(d.x), 
	    "y" : y(d.y), 
	    "width" : x(d.x + d.dx) - x(d.x), 
	    "height" : y(d.y + d.dy) - y(d.y) 
	}
    }

    var rect = function( rect ) {
	rect.attr("x", function(d) { return x(d.x); } )
	    .attr("y", function(d) { return y(d.y); } )
	    .attr("width", function(d) { return x(d.x + d.dx ) - x(d.x); })
	    .attr("height", function(d) { return y(d.y + d.dy) - y(d.y); })
	    .style("fill", function(d) { return colorScale( d.parent.name ); } );
    }

    var name = function(d) {
	return d.parent ? name(d.parent) + "." + d.name : d.name
    }

    d3.select("#treeMap0").remove();
    treemap = makeTreemap();
    svg = make_svg();
    grandparent = make_grandparent(svg);

    initialize( data );
    accumulate( data );
    layout( data );
    display( data );
}

</script>

</body>
</html>