mwdchang/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<style>
body {
   font-family: Tahoma;
   font-size: 0.85rem;
   margin: 0;
}
</style>
</head>
<body>
<header>
<h2 style="height:2rem; font-size:2rem; background-color:#EFEFEA; margin:0 0; padding: 0.75rem">
   <img src="https://dcc.icgc.org/styles/images/icgc-logo.png" style="height:2.25rem; margin-bottom:-0.25rem"><img><span> ICGC Data Portal</span>
   <span style="float:right">
      <input type="text" size="30" placeholder="Search..." style="font-size:1.5rem; display:block"></input>
   </span>
</h2>
<header>
<div style="float:left; width:25%; margin:1rem">
<p>
The ICGC Data Portal provides tools for visualizing, querying and downloading the data released quarterly by the consortium's member projects.<br><br>

To access ICGC controlled tier data, please read these instructions.<br><br>

New features will be regularly added by the DCC development team. Feedback is welcome.<br><br>

Subscribe to our Twitter feed to get updates
</p>
</div>
<div style="margin-left:auto; margin-right:auto; width: 70%; float:right">
    <h3>Data Release 18 :: April 15th, 2015</h3>
    <div id="canvas"></div>
</div>
<div style="clear:both"></div>
</body>
<script>

var projects = [];
var topGenes = [];
var svg, chart;
var siteColours = d3.scale.category20c();
var barSize = 20;
var resultPending = false;

var scale = d3.scale.linear().domain([0, 1200]).range([0, 300]);
var scaleS = d3.scale.linear().domain([0, 2000]).range([0, 100]);

function mouseoverS(d, pos) {
  var offset = pos[0] > 0.5*1200? 100 : 400;

  var projs = _.pluck(_.filter(projects, function(p) { return p.primarySite === d; }), 'id');

  var info = chart.append('g').attr('transform', 'translate(' + offset + ', 30)').classed('info', true);
  info.append('text').attr('x', 10).attr('y', 30).text('Site: ' + d).style('opacity', 0.0).transition().duration(400).style('opacity', 1.0);
  info.append('text').attr('x', 10).attr('y', 50).text('Projects: ' + projs.join(', ')).style('opacity', 0.0).transition().duration(400).style('opacity', 1.0);

  info.append('rect').attr('x', 3).attr('y', 16).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(400).style('opacity', 0.75);
  info.append('rect').attr('x', 3).attr('y', 36).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(400).style('opacity', 0.75);

}

function mouseover(d, pos) {

  var offset = pos[0] > 0.5*1200? 100 : 400;


  var info = chart.append('g').attr('transform', 'translate(' + offset + ', 30)').classed('info', true);
  info.append('text').attr('x', 10).attr('y', 30).text('Id: ' + d.id).style('opacity', 0.0).transition().duration(400).style('opacity', 1.0);
  info.append('text').attr('x', 10).attr('y', 50).text('Name: ' + d.name).style('opacity', 0.0).transition().duration(600).style('opacity', 1.0);
  info.append('text').attr('x', 10).attr('y', 70).text('Primary Site: ' + d.primarySite).style('opacity', 0.0).transition().duration(900).style('opacity', 1.0);
  info.append('text').attr('x', 10).attr('y', 90).text('Donors: ' + d.totalDonorCount).style('opacity', 0.0).transition().duration(1200).style('opacity', 1.0);
  info.append('text').attr('x', 10).attr('y', 110).text('Data types: ' + d.availableDataTypes.join(', ')).style('opacity', 0.0).transition().duration(1500).style('opacity', 1.0);

  info.append('rect').attr('x', 3).attr('y', 16).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(400).style('opacity', 0.75);
  info.append('rect').attr('x', 3).attr('y', 36).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(600).style('opacity', 0.75);
  info.append('rect').attr('x', 3).attr('y', 56).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(900).style('opacity', 0.75);
  info.append('rect').attr('x', 3).attr('y', 76).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(1200).style('opacity', 0.75);
  info.append('rect').attr('x', 3).attr('y', 96).attr('width', 3).attr('height', 20)
    .style('fill', '#336699').style('opacity', 0.0).transition().duration(1500).style('opacity', 0.75);
}

function buildProjects(projects) {
  svg = d3.select("#canvas")
    .append('svg').attr('viewBox', '0 0 1600 800')
    .attr('preserveAspectRatio', 'xMidYMid');
  chart = svg.append('g').attr('transform', 'translate(5, 5)');

  var siteList = _.unique( _.pluck(projects, 'primarySite')).sort();


  console.log(siteList, siteList.length);

  var start = 1;
  siteList.forEach(function(site, siteIdx) {
    var projectList = _.filter(projects, function(p) {
      return site === p.primarySite;
    });

    var w = (barSize + 1) * projectList.length;

    projectList.forEach(function(proj, projIdx) {
      proj.secondaryCount = proj.secondaryCount || 0;

      chart.append('rect')
        .datum(proj)
        .classed('project', true)
        .classed(proj.id, true)
        .attr('x', start + projIdx*(barSize+1))
        .attr('y', 300 - scale(proj.totalDonorCount))
        .attr('width', barSize)
        .attr('height', scale(proj.totalDonorCount))
        .style({
          // fill: siteColours(siteIdx)
          fill: '#789',
          opacity: 1.0
        })
        .on('mouseover', function(d) {
          chart.selectAll('.site').transition().duration(200).style('opacity', 0.1);
          chart.selectAll('.project').transition().duration(200).style('opacity', function(d2) {
            if (d2.id === d.id) { return 1.0; }
            return 0.1;
          });
          mouseover(d, d3.mouse(this));
        })
        .on('mouseout', function() {
          chart.selectAll('.site').transition().duration(200).style('opacity', 1.0);
          chart.selectAll('.project').transition().duration(200).style('opacity',1.0);
          chart.selectAll('.info').remove();
        });

      chart.append('rect')
        .datum(proj)
        .classed('secondary', true)
        .classed('project', true)
        .classed(proj.id, true)
        .attr('x', start + projIdx*(barSize+1))
        .attr('y', 300 - scale(proj.secondaryCount))
        .attr('width', barSize)
        .attr('height', scale(proj.secondaryCount))
        .style({
          fill: '#F89',
          opacity: 0.8,
          'pointer-events': 'none'
        });


    });


    chart.append('rect')
      .datum(site)
      .attr('x', start)
      .attr('y', 301)
      .attr('height', function(d) {
        var count = _.pluck(_.filter(projects, function(p) { return p.primarySite === d}), 'totalDonorCount').reduce(function(prev, curr) {
          return prev + curr;
        });
        // return scaleS(count);
        return 8;
      })
      .attr('width', w)
      .classed('site', true)
      .style({
        // fill: siteColours(siteIdx)
        fill: '#289',
        opacity: 1.0
      })
      .on('mouseover', function(d) {
        chart.selectAll('.project').transition().duration(200).style('opacity', function(p) {
          if (p.primarySite === d) return 1.0;
          return 0.1;
        });

        chart.selectAll('.site').transition().duration(200).style('opacity', function(d2) {
          if (d === d2) { return 1.0; }
          return 0.1;
        });
        mouseoverS(d, d3.mouse(this));
      })
      .on('mouseout', function(d) {
        chart.selectAll('.project').transition().duration(200).style('opacity', 1.0);
        chart.selectAll('.site').transition().duration(200).style('opacity',1.0);
        chart.selectAll('.info').remove();
      });

    start += w;
    start += 1;
  });

  // Demo
  topGenes.forEach(function(gene, idx) {
    chart.append('text')
      .datum(gene)
      .classed('gene', true)
      .classed(gene.symbol, true)
      .attr('x', 1295)
      .attr('y', 33 + idx*22)
      .style('opacity', 1)
      .style('text-anchor', 'end')
      .text(gene.symbol);
    chart.append('rect')
      .datum(gene)
      .classed('gene', true)
      .classed(gene.symbol, true)
      .attr('x', 1300)
      .attr('y', 20 + idx*22)
      .attr('height', 15)
      .attr('width', gene.affectedDonorCountTotal*0.05)
      .style('opacity', 1)
      .style({
        'fill': '#6699BB'
      })
      .on('mouseover', function() {
        var genesFilter = {
          gene: {id: {is:[gene.id]}}
        };
        var filterStr = JSON.stringify(genesFilter);

        resultPending = true;
        d3.json('https://dcc.icgc.org/api/v1/donors?filters=' + filterStr + '&from=1&include=facets&size=0', function(high) {
          var iCount = high.facets.projectId.terms;
          iCount.forEach(function(term) {
            _.find(projects, function(proj) {
              return term.term === proj.id;
            }).iCount = term.count;
          });
          if (resultPending === false) return;

          d3.selectAll('.gene').filter(function(d) {
            return d.id !== gene.id;
          }).transition().duration(200).style('opacity', 0.2);

          update();
        });
      })
      .on('mouseout', function() {
        resultPending = false;
        d3.selectAll('.gene').transition().duration(200).style('opacity', 1.0);
        restore();
      });
  });
}

function update() {
  projects.forEach(function(proj, projIdx) {
    proj.iCount = proj.iCount || 0;
  });

  d3.selectAll('.secondary').transition().duration(200)
    .attr('y', function(d) {
      return 300 - scale(d.iCount);
    })
    .attr('height', function(d) {
      return scale(d.iCount);
    });

  //console.log('test', d3.selectAll('.secondary').datum());

}

function restore() {
  d3.selectAll('.secondary').transition().duration(200)
    .attr('y', function(d) {
       return 300 - scale(d.secondaryCount);
    })
    .attr('height', function(d) {
       return scale(d.secondaryCount);
    });
}


d3.json('https://dcc.icgc.org/api/v1/projects?size=100', function(result) {
  projects = result.hits.map(function(d) {
    return {
      id: d.id,
      name: d.name,
      primarySite: d.primarySite,
      totalDonorCount: d.totalDonorCount,
      availableDataTypes: d.availableDataTypes
    };
  });

  projects = _.sortBy(projects, function(p) { return p.name; });

  d3.json('https://dcc.icgc.org/api/v1/genes?field=id&field=affectedDonorCountTotal&field=symbol', function(geneResult) {
    topGenes = geneResult.hits;
    var genes = _.pluck(geneResult.hits, 'id');
    var genesFilter = {
      gene: {
         id: {
            is: genes
         }
      }
    }
    var filterStr = JSON.stringify(genesFilter);
    console.log('filterStr', filterStr);

    d3.json('https://dcc.icgc.org/api/v1/donors?filters=' + filterStr + '&from=1&include=facets&size=0', function(high) {
      var secondaryCount = high.facets.projectId.terms;
      secondaryCount.forEach(function(term) {
        _.find(projects, function(proj) {
          return term.term === proj.id;
        }).secondaryCount = term.count;
      });
      buildProjects(projects);
    });

  });


});


</script>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
	<style>
	body {
	font-family: Tahoma;
	font-size: 0.85rem;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<header>
	<h2 style="height:2rem; font-size:2rem; background-color:#EFEFEA; margin:0 0; padding: 0.75rem">
	<img src="https://dcc.icgc.org/styles/images/icgc-logo.png" style="height:2.25rem; margin-bottom:-0.25rem"><img><span> ICGC Data Portal</span>
	<span style="float:right">
	<input type="text" size="30" placeholder="Search..." style="font-size:1.5rem; display:block"></input>
	</span>
	</h2>
	<header>
	<div style="float:left; width:25%; margin:1rem">
	<p>
	The ICGC Data Portal provides tools for visualizing, querying and downloading the data released quarterly by the consortium's member projects.<br><br>

	To access ICGC controlled tier data, please read these instructions.<br><br>

	New features will be regularly added by the DCC development team. Feedback is welcome.<br><br>

	Subscribe to our Twitter feed to get updates
	</p>
	</div>
	<div style="margin-left:auto; margin-right:auto; width: 70%; float:right">
	<h3>Data Release 18 :: April 15th, 2015</h3>
	<div id="canvas"></div>
	</div>
	<div style="clear:both"></div>
	</body>
	<script>

	var projects = [];
	var topGenes = [];
	var svg, chart;
	var siteColours = d3.scale.category20c();
	var barSize = 20;
	var resultPending = false;

	var scale = d3.scale.linear().domain([0, 1200]).range([0, 300]);
	var scaleS = d3.scale.linear().domain([0, 2000]).range([0, 100]);

	function mouseoverS(d, pos) {
	var offset = pos[0] > 0.5*1200? 100 : 400;

	var projs = _.pluck(_.filter(projects, function(p) { return p.primarySite === d; }), 'id');

	var info = chart.append('g').attr('transform', 'translate(' + offset + ', 30)').classed('info', true);
	info.append('text').attr('x', 10).attr('y', 30).text('Site: ' + d).style('opacity', 0.0).transition().duration(400).style('opacity', 1.0);
	info.append('text').attr('x', 10).attr('y', 50).text('Projects: ' + projs.join(', ')).style('opacity', 0.0).transition().duration(400).style('opacity', 1.0);

	info.append('rect').attr('x', 3).attr('y', 16).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(400).style('opacity', 0.75);
	info.append('rect').attr('x', 3).attr('y', 36).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(400).style('opacity', 0.75);

	}

	function mouseover(d, pos) {

	var offset = pos[0] > 0.5*1200? 100 : 400;


	var info = chart.append('g').attr('transform', 'translate(' + offset + ', 30)').classed('info', true);
	info.append('text').attr('x', 10).attr('y', 30).text('Id: ' + d.id).style('opacity', 0.0).transition().duration(400).style('opacity', 1.0);
	info.append('text').attr('x', 10).attr('y', 50).text('Name: ' + d.name).style('opacity', 0.0).transition().duration(600).style('opacity', 1.0);
	info.append('text').attr('x', 10).attr('y', 70).text('Primary Site: ' + d.primarySite).style('opacity', 0.0).transition().duration(900).style('opacity', 1.0);
	info.append('text').attr('x', 10).attr('y', 90).text('Donors: ' + d.totalDonorCount).style('opacity', 0.0).transition().duration(1200).style('opacity', 1.0);
	info.append('text').attr('x', 10).attr('y', 110).text('Data types: ' + d.availableDataTypes.join(', ')).style('opacity', 0.0).transition().duration(1500).style('opacity', 1.0);

	info.append('rect').attr('x', 3).attr('y', 16).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(400).style('opacity', 0.75);
	info.append('rect').attr('x', 3).attr('y', 36).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(600).style('opacity', 0.75);
	info.append('rect').attr('x', 3).attr('y', 56).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(900).style('opacity', 0.75);
	info.append('rect').attr('x', 3).attr('y', 76).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(1200).style('opacity', 0.75);
	info.append('rect').attr('x', 3).attr('y', 96).attr('width', 3).attr('height', 20)
	.style('fill', '#336699').style('opacity', 0.0).transition().duration(1500).style('opacity', 0.75);
	}

	function buildProjects(projects) {
	svg = d3.select("#canvas")
	.append('svg').attr('viewBox', '0 0 1600 800')
	.attr('preserveAspectRatio', 'xMidYMid');
	chart = svg.append('g').attr('transform', 'translate(5, 5)');

	var siteList = _.unique( _.pluck(projects, 'primarySite')).sort();


	console.log(siteList, siteList.length);

	var start = 1;
	siteList.forEach(function(site, siteIdx) {
	var projectList = _.filter(projects, function(p) {
	return site === p.primarySite;
	});

	var w = (barSize + 1) * projectList.length;

	projectList.forEach(function(proj, projIdx) {
	proj.secondaryCount = proj.secondaryCount \|\| 0;

	chart.append('rect')
	.datum(proj)
	.classed('project', true)
	.classed(proj.id, true)
	.attr('x', start + projIdx*(barSize+1))
	.attr('y', 300 - scale(proj.totalDonorCount))
	.attr('width', barSize)
	.attr('height', scale(proj.totalDonorCount))
	.style({
	// fill: siteColours(siteIdx)
	fill: '#789',
	opacity: 1.0
	})
	.on('mouseover', function(d) {
	chart.selectAll('.site').transition().duration(200).style('opacity', 0.1);
	chart.selectAll('.project').transition().duration(200).style('opacity', function(d2) {
	if (d2.id === d.id) { return 1.0; }
	return 0.1;
	});
	mouseover(d, d3.mouse(this));
	})
	.on('mouseout', function() {
	chart.selectAll('.site').transition().duration(200).style('opacity', 1.0);
	chart.selectAll('.project').transition().duration(200).style('opacity',1.0);
	chart.selectAll('.info').remove();
	});

	chart.append('rect')
	.datum(proj)
	.classed('secondary', true)
	.classed('project', true)
	.classed(proj.id, true)
	.attr('x', start + projIdx*(barSize+1))
	.attr('y', 300 - scale(proj.secondaryCount))
	.attr('width', barSize)
	.attr('height', scale(proj.secondaryCount))
	.style({
	fill: '#F89',
	opacity: 0.8,
	'pointer-events': 'none'
	});


	});


	chart.append('rect')
	.datum(site)
	.attr('x', start)
	.attr('y', 301)
	.attr('height', function(d) {
	var count = _.pluck(_.filter(projects, function(p) { return p.primarySite === d}), 'totalDonorCount').reduce(function(prev, curr) {
	return prev + curr;
	});
	// return scaleS(count);
	return 8;
	})
	.attr('width', w)
	.classed('site', true)
	.style({
	// fill: siteColours(siteIdx)
	fill: '#289',
	opacity: 1.0
	})
	.on('mouseover', function(d) {
	chart.selectAll('.project').transition().duration(200).style('opacity', function(p) {
	if (p.primarySite === d) return 1.0;
	return 0.1;
	});

	chart.selectAll('.site').transition().duration(200).style('opacity', function(d2) {
	if (d === d2) { return 1.0; }
	return 0.1;
	});
	mouseoverS(d, d3.mouse(this));
	})
	.on('mouseout', function(d) {
	chart.selectAll('.project').transition().duration(200).style('opacity', 1.0);
	chart.selectAll('.site').transition().duration(200).style('opacity',1.0);
	chart.selectAll('.info').remove();
	});

	start += w;
	start += 1;
	});

	// Demo
	topGenes.forEach(function(gene, idx) {
	chart.append('text')
	.datum(gene)
	.classed('gene', true)
	.classed(gene.symbol, true)
	.attr('x', 1295)
	.attr('y', 33 + idx*22)
	.style('opacity', 1)
	.style('text-anchor', 'end')
	.text(gene.symbol);
	chart.append('rect')
	.datum(gene)
	.classed('gene', true)
	.classed(gene.symbol, true)
	.attr('x', 1300)
	.attr('y', 20 + idx*22)
	.attr('height', 15)
	.attr('width', gene.affectedDonorCountTotal*0.05)
	.style('opacity', 1)
	.style({
	'fill': '#6699BB'
	})
	.on('mouseover', function() {
	var genesFilter = {
	gene: {id: {is:[gene.id]}}
	};
	var filterStr = JSON.stringify(genesFilter);

	resultPending = true;
	d3.json('https://dcc.icgc.org/api/v1/donors?filters=' + filterStr + '&from=1&include=facets&size=0', function(high) {
	var iCount = high.facets.projectId.terms;
	iCount.forEach(function(term) {
	_.find(projects, function(proj) {
	return term.term === proj.id;
	}).iCount = term.count;
	});
	if (resultPending === false) return;

	d3.selectAll('.gene').filter(function(d) {
	return d.id !== gene.id;
	}).transition().duration(200).style('opacity', 0.2);

	update();
	});
	})
	.on('mouseout', function() {
	resultPending = false;
	d3.selectAll('.gene').transition().duration(200).style('opacity', 1.0);
	restore();
	});
	});
	}

	function update() {
	projects.forEach(function(proj, projIdx) {
	proj.iCount = proj.iCount \|\| 0;
	});

	d3.selectAll('.secondary').transition().duration(200)
	.attr('y', function(d) {
	return 300 - scale(d.iCount);
	})
	.attr('height', function(d) {
	return scale(d.iCount);
	});

	//console.log('test', d3.selectAll('.secondary').datum());

	}

	function restore() {
	d3.selectAll('.secondary').transition().duration(200)
	.attr('y', function(d) {
	return 300 - scale(d.secondaryCount);
	})
	.attr('height', function(d) {
	return scale(d.secondaryCount);
	});
	}



	d3.json('https://dcc.icgc.org/api/v1/projects?size=100', function(result) {
	projects = result.hits.map(function(d) {
	return {
	id: d.id,
	name: d.name,
	primarySite: d.primarySite,
	totalDonorCount: d.totalDonorCount,
	availableDataTypes: d.availableDataTypes
	};
	});

	projects = _.sortBy(projects, function(p) { return p.name; });

	d3.json('https://dcc.icgc.org/api/v1/genes?field=id&field=affectedDonorCountTotal&field=symbol', function(geneResult) {
	topGenes = geneResult.hits;
	var genes = _.pluck(geneResult.hits, 'id');
	var genesFilter = {
	gene: {
	id: {
	is: genes
	}
	}
	}
	var filterStr = JSON.stringify(genesFilter);
	console.log('filterStr', filterStr);

	d3.json('https://dcc.icgc.org/api/v1/donors?filters=' + filterStr + '&from=1&include=facets&size=0', function(high) {
	var secondaryCount = high.facets.projectId.terms;
	secondaryCount.forEach(function(term) {
	_.find(projects, function(proj) {
	return term.term === proj.id;
	}).secondaryCount = term.count;
	});
	buildProjects(projects);
	});

	});


	});




	</script>
	</html>