karchie/xnat-graph.html

## xnat-graph.html
<!DOCTYPE html>
<html>
  <head>
    <title>xnat dynamic graph</title>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <script type="text/javascript">
      var xnat_data, plotsvg
      var base_url = 'https://central.xnat.org'
      var stored_search = 'ALL_OASIS_MR_DATA_1_1_1'
      var url = base_url + '/REST/search/saved/' + stored_search +
              '/results?format=csv'
      var svgw = 600, svgh = 600, svgpad = 60
      var data_loaded = 0, page_ready = 0
      var xselect, yselect, xfield = 'label', yfield = 'label'

      function create_selectors() {
        xselect = document.createElement('select')
        xselect.setAttribute('name', 'xselect')
        xselect.setAttribute('id', 'xselect')
        xselect.onchange = function() {
          xfield = xselect.options[xselect.selectedIndex].value
        }
        xslabel = document.createElement('span')
        xslabel.innerHTML = 'X: '

        yselect = document.createElement('select')
        yselect.setAttribute('name', 'xselect')
        yselect.setAttribute('id', 'xselect')
        yselect.onchange = function() {
          yfield = yselect.options[yselect.selectedIndex].value
        }
        yslabel = document.createElement('span')
        yslabel.innerHTML = 'Y: '

        for (key in xnat_data[0]) {
          var xopt = document.createElement('option')
          xopt.setAttribute('value', key)
          xopt.innerHTML = key
          xselect.appendChild(xopt)

          var yopt = document.createElement('option')
          yopt.setAttribute('value', key)
          yopt.innerHTML = key
          yselect.appendChild(yopt)
        }

        var gobutton = document.createElement('button')
        gobutton.setAttribute('name', 'plot-button')
        gobutton.setAttribute('id', 'plot-button')
        gobutton.innerHTML = 'Plot'
        gobutton.onclick = function() { make_plot() }

        var pcd = document.getElementById('plot-controls')
        pcd.appendChild(xslabel)
        pcd.appendChild(xselect)
        pcd.appendChild(yslabel)
        pcd.appendChild(yselect)
        pcd.appendChild(gobutton)
      }

      window.onload = function() {
        page_ready = 1;
        if (data_loaded) {
          create_selectors();
        }
      }

      d3.text(url, '*/*', function(text) {
        xnat_data = text && d3.csv.parse(text)
        data_loaded = 1
        if (page_ready) {
          create_selectors();
        }
      })

      function make_scale(data, field, range) {
        var ds = data.map(function(d){return d[field]})
        if (ds.every(function(d) {
              return "" === d || (!isNaN(parseFloat(d)) && isFinite(d))
            })) {
          return d3.scale.linear().domain(d3.extent(ds)).range(range)
        }else{
          return d3.scale.ordinal().domain(ds.sort()).range(range)
        }
      }

      function make_plot() {
        plotsvg && plotsvg.remove()
        plotsvg = d3.select('body')
                    .append('svg')
                    .attr('width',svgw)
                    .attr('height',svgh)

        var xscale = make_scale(xnat_data, xfield, [svgpad,svgw-svgpad])
        var yscale = make_scale(xnat_data, yfield, [svgh-svgpad,svgpad])

        var point = plotsvg.selectAll('g.node')
        var point = plotsvg.selectAll('circle').data(xnat_data).enter()
                           .append('svg:g').attr('class', 'point')
        point.append('circle')
             .attr('cx', function(d) { return xscale(d[xfield]) })
             .attr('cy', function(d) { return yscale(d[yfield]) })
             .attr('r', 3)
             .attr('fill', function(d) {
               return 'R' === d.xnat_subjectdata_handedness_text
                 ? 'red' : 'blue'
             })
        point.append('text')
             .attr('class','pointtext')
             .attr('dx', 12)
             .attr('dy', 20)  // '.35em'
             .text(function(d) { return d.label })

        var xaxis = d3.svg.axis().scale(xscale).orient('bottom')
        plotsvg.append('g').attr('class','axis')
                       .attr('transform', 'translate(0,' + (svgh-svgpad) + ')')
                       .call(xaxis)
        plotsvg.append('text').attr('class','x label')
                          .attr('text-anchor','middle')
                          .attr('transform','translate('+(svgw/2)+','+(svgh-10)+')')
                          .text(xfield)
        var yaxis = d3.svg.axis().scale(yscale).orient('left')
        plotsvg.append('g').attr('class','axis')
                       .attr('transform', 'translate(' + svgpad + ',0)')
                       .call(yaxis)
        plotsvg.append('text').attr('class','y label')
                          .attr('text-anchor','middle')
                          .attr('transform','translate(10,'+(svgh/2)+'),rotate(-90)')
                          .text(yfield)
    }

    </script>
    <style type="text/css">
      .select {
        width: 300px
      }
      .point:not(:hover) .pointtext {
        display: none;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
      }
      .axis text {
        font-family: sans-serif;
        font-size: 11px;
      }
    </style>
  </head>
  <body>
    <div id='plot-controls'></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>xnat dynamic graph</title>
	<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
	<script type="text/javascript">
	var xnat_data, plotsvg
	var base_url = 'https://central.xnat.org'
	var stored_search = 'ALL_OASIS_MR_DATA_1_1_1'
	var url = base_url + '/REST/search/saved/' + stored_search +
	'/results?format=csv'
	var svgw = 600, svgh = 600, svgpad = 60
	var data_loaded = 0, page_ready = 0
	var xselect, yselect, xfield = 'label', yfield = 'label'

	function create_selectors() {
	xselect = document.createElement('select')
	xselect.setAttribute('name', 'xselect')
	xselect.setAttribute('id', 'xselect')
	xselect.onchange = function() {
	xfield = xselect.options[xselect.selectedIndex].value
	}
	xslabel = document.createElement('span')
	xslabel.innerHTML = 'X: '

	yselect = document.createElement('select')
	yselect.setAttribute('name', 'xselect')
	yselect.setAttribute('id', 'xselect')
	yselect.onchange = function() {
	yfield = yselect.options[yselect.selectedIndex].value
	}
	yslabel = document.createElement('span')
	yslabel.innerHTML = 'Y: '

	for (key in xnat_data[0]) {
	var xopt = document.createElement('option')
	xopt.setAttribute('value', key)
	xopt.innerHTML = key
	xselect.appendChild(xopt)

	var yopt = document.createElement('option')
	yopt.setAttribute('value', key)
	yopt.innerHTML = key
	yselect.appendChild(yopt)
	}

	var gobutton = document.createElement('button')
	gobutton.setAttribute('name', 'plot-button')
	gobutton.setAttribute('id', 'plot-button')
	gobutton.innerHTML = 'Plot'
	gobutton.onclick = function() { make_plot() }

	var pcd = document.getElementById('plot-controls')
	pcd.appendChild(xslabel)
	pcd.appendChild(xselect)
	pcd.appendChild(yslabel)
	pcd.appendChild(yselect)
	pcd.appendChild(gobutton)
	}

	window.onload = function() {
	page_ready = 1;
	if (data_loaded) {
	create_selectors();
	}
	}

	d3.text(url, '/', function(text) {
	xnat_data = text && d3.csv.parse(text)
	data_loaded = 1
	if (page_ready) {
	create_selectors();
	}
	})

	function make_scale(data, field, range) {
	var ds = data.map(function(d){return d[field]})
	if (ds.every(function(d) {
	return "" === d \|\| (!isNaN(parseFloat(d)) && isFinite(d))
	})) {
	return d3.scale.linear().domain(d3.extent(ds)).range(range)
	}else{
	return d3.scale.ordinal().domain(ds.sort()).range(range)
	}
	}

	function make_plot() {
	plotsvg && plotsvg.remove()
	plotsvg = d3.select('body')
	.append('svg')
	.attr('width',svgw)
	.attr('height',svgh)

	var xscale = make_scale(xnat_data, xfield, [svgpad,svgw-svgpad])
	var yscale = make_scale(xnat_data, yfield, [svgh-svgpad,svgpad])

	var point = plotsvg.selectAll('g.node')
	var point = plotsvg.selectAll('circle').data(xnat_data).enter()
	.append('svg:g').attr('class', 'point')
	point.append('circle')
	.attr('cx', function(d) { return xscale(d[xfield]) })
	.attr('cy', function(d) { return yscale(d[yfield]) })
	.attr('r', 3)
	.attr('fill', function(d) {
	return 'R' === d.xnat_subjectdata_handedness_text
	? 'red' : 'blue'
	})
	point.append('text')
	.attr('class','pointtext')
	.attr('dx', 12)
	.attr('dy', 20) // '.35em'
	.text(function(d) { return d.label })

	var xaxis = d3.svg.axis().scale(xscale).orient('bottom')
	plotsvg.append('g').attr('class','axis')
	.attr('transform', 'translate(0,' + (svgh-svgpad) + ')')
	.call(xaxis)
	plotsvg.append('text').attr('class','x label')
	.attr('text-anchor','middle')
	.attr('transform','translate('+(svgw/2)+','+(svgh-10)+')')
	.text(xfield)
	var yaxis = d3.svg.axis().scale(yscale).orient('left')
	plotsvg.append('g').attr('class','axis')
	.attr('transform', 'translate(' + svgpad + ',0)')
	.call(yaxis)
	plotsvg.append('text').attr('class','y label')
	.attr('text-anchor','middle')
	.attr('transform','translate(10,'+(svgh/2)+'),rotate(-90)')
	.text(yfield)
	}

	</script>
	<style type="text/css">
	.select {
	width: 300px
	}
	.point:not(:hover) .pointtext {
	display: none;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	</head>
	<body>
	<div id='plot-controls'></div>
	</body>
	</html>