fogonthedowns · April 29, 2016 22:48
diff --git a/April 29th b/April 29th
 <!DOCTYPE html>
 <html>
 <meta charset="utf-8">


 <link href="slider.css" rel="stylesheet">

 <!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
 <!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->

 <style>
 body {
  font: 11px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .dot {
  stroke: #000;
 }

 .tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
 }

  #xaxis .domain {
    fill:none;
    stroke:#000;
  }
  #xaxis text, #yaxis text {
    font-size: 12px;
  }

 /*start chart 2*/
 .axis path,
 .axis line {
 fill: none;
 stroke: #eee;
 shape-rendering: crispEdges;
 }
 .axis text {
 font-size: 11px;
 }
 .bar {
 fill: steelblue;
 }
 /* end chart 2*/

 </style>

    <!-- Bootstrap core CSS -->
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>

 <div class="container">
  <div class="row">
    <div id="first_graph" class="col-md-6">
    </div>
    <div id="wrapper" class="col-md-6">
    </div>
  </div>
  <div class="=row">
    <div id="graph" class="col-lg-6">
    </div>
    <div class="col-lg-6">
      <h3>Purity Cutoff</h3>
      <input type="text" class="span2" value="" data-slider-min="0" data-slider-max="1" data-slider-step=".1" data-slider-value="0.1" data-slider-orientation="horizontal" data-slider-selection="after"data-slider-tooltip="show">
      <h3>Yield Cutoff</h3>
      <input type="text" class="span3" value="" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="1" data-slider-orientation="horizontal" data-slider-selection="after"data-slider-tooltip="show">
    </div> <!-- /.col-lg-6 -->
  </div>
 </div>


  <script type="text/javascript">
  // Third Chart 
  var canvas
  function updateHorizontalHistogram(path) {
    var bin = []
    var amount = []
    d3.json(path, function (data) {

      data = d3.keys(data).map(function (key) {
          return {bucket: Number(key),
                  N: data[key]};
      });

        var k = Object.keys(data)
        var list = function(object) {
          for(var key in object) {
           bin.push(object[key]["bucket"])
           amount.push(object[key]["N"])
          }
        }

        list(data)

          var max = Math.max.apply(Math,amount);
          var min = Math.min.apply(Math,amount);
          var grid_size = max/9

      var colors = ['steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue'];

      var grid = d3.range(10).map(function(i){
        
        return {'x1':0,'y1':0,'x2':0,'y2':480};
      });

      var tickVals = grid.map(function(d,i){
        if(i>0){ return i*grid_size; }
        else if(i===0){ return "0";}
      });
      console.log(tickVals)

      var xscale = d3.scale.linear()
              .domain([min,max])
              .range([0,500]);
    
      var yscale = d3.scale.linear()
              .domain([bin.length,0])
              .range([0,480]);


      var colorScale = d3.scale.quantize()
              .domain([0,bin.length])
              .range(colors);

      if (typeof(canvas) == 'undefined') {
      canvas = d3.select('#wrapper')
              .append('svg')
              .attr({'width':700,'height':550});
      }

      var grids = canvas.append('g')
                .attr('id','grid')
                .attr('transform','translate(150,10)')
                .selectAll('line')
                .data(grid)
                .enter()
                .append('line')
                .attr({'x1':function(d,i){ return i*30; },
                   'y1':function(d){ return d.y1; },
                   'x2':function(d,i){ return i*30; },
                   'y2':function(d){ return d.y2; },
                })
              

      var xxAxis = d3.svg.axis();
        xxAxis
          .orient('bottom')
          .scale(xscale)
          .tickValues(tickVals);

      var yyAxis = d3.svg.axis();
        yyAxis
          .orient('left')
          .scale(yscale)
          .tickSize(2)
          .tickFormat(function(d,i){ return bin[i]; })
          .tickValues(d3.range(17));

      canvas.select("g#yaxis").remove()
      canvas.select("g#xaxis").remove()

      var y_xis = canvas.append('g')
                .attr("transform", "translate(150,0)")
                .attr('id','yaxis')
                .call(yyAxis);

      var x_xis = canvas.append('g')
                .attr("transform", "translate(150,480)")
                .attr('id','xaxis')
                .call(xxAxis);

      var bar = d3.select("#bars");         
      bar.remove();

      var chartx = canvas.append('g')
                .attr("transform", "translate(150,0)")
                .attr('id','bars')
                .selectAll('rect')
                .data(amount)
                .enter()
                .append('rect')
                .attr('height',19)
                .attr({'x':0,'y':function(d,i){ return yscale(i)-25; }})
                .style('fill',function(d,i){ return colorScale(i); })
                .attr('width',function(d){ return 0; });


      var transit = d3.select("#wrapper").selectAll("rect")
                  .data(amount)
                  .transition()
                  .duration(1000) 
                  .attr("width", function(d) {return xscale(d); });

 

      var transitext = d3.select('#bars')
                .selectAll('text')
                .data(amount)
                .enter()
                .append('text')
                .attr({'x':function(d) {return xscale(d)-60; },'y':function(d,i){ return yscale(i)-12; }})
                .text(function(d){ return d; }).style({'fill':'#fff','font-size':'14px'});

    })
  }; // updateHorizontalHistogram() 
 updateHorizontalHistogram('http://localhost:3000/v2/api/meng3?bins=10');

 // End 3rd Chart

 // Begin 2nd Chart
    
  var widthh = 600,
      heightt = 300,
      pad = 20, 
      left_pad = 60;

  var x = d3.scale.ordinal().rangeRoundBands([left_pad, widthh-pad], 0.1);
  var y = d3.scale.linear().range([heightt-pad, pad]);

  var xAxis2 = d3.svg.axis().scale(x).orient("bottom");
  var yAxis2 = d3.svg.axis().scale(y).orient("left");

  var svg2 = d3.select("#graph")
          .append("svg")
          .attr("width", widthh)
          .attr("height", heightt);

 function updateHistogram(path) {
  d3.json(path, function (data) {

      data = d3.keys(data).map(function (key) {
          return {bucket: Number(key).toFixed(2),
                  N: data[key]};
      });

      x.domain(data.map(function (d) { return d.bucket; }));
      y.domain([0, d3.max(data, function (d) { return d.N; })]);
      
      svg2.select("g.axis").remove()
      svg2.select("g.axis").remove()

      svg2.append("g")
          .attr("class", "axis")
          .attr("transform", "translate(0, "+(heightt-pad)+")")
          .call(xAxis2);

      svg2.append("g")
          .attr("class", "axis")
          .attr("transform", "translate("+(left_pad-pad)+", 0)")
          .call(yAxis2);

      // remove old bar chart
      var bar = svg2.selectAll(".bar")
        .data(data, function(d) { return d.name; });         
      bar.exit().remove();

      svg2.selectAll('rect')
          .data(data)
          .enter()
          .append('rect')
          .attr('class', 'bar')
          .attr('x', function (d) { return x(d.bucket); })
          .attr('width', x.rangeBand())
          .attr('y', heightt-pad)
          .transition()
          .delay(function (d) { return d.bucket*20; })
          .duration(800)
          .attr('y', function (d) { return y(d.N); })
          .attr('height', function (d) { return heightt-pad - y(d.N); });

  });
 };

 updateHistogram('http://localhost:3000/v2/api/meng2?bins=10');

 // End 2nd Chart 

 // Begin 1st Chart

  var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 560 - margin.left - margin.right,
      height = 510 - margin.top - margin.bottom;

  /* 
   * value accessor - returns the value to encode for a given data object.
   * scale - maps value to a visual display encoding, such as a pixel position.
   * map function - maps from data value to display value
   * axis - sets up axis
   */ 

  // setup x 
  var xValue = function(d) { return d.isolate;}, // data -> value
      xScale = d3.scale.linear().range([0, width]), // value -> display
      xMap = function(d) { return xScale(xValue(d));}, // data -> display
      xAxis = d3.svg.axis().scale(xScale).orient("bottom");

  // setup y

  var yValue = function(d) { return d["purity"];}, // data -> value
      yScale = d3.scale.linear().range([height, 0]), // value -> display
      yMap = function(d) { return yScale(yValue(d));}, // data -> display
      yAxis = d3.svg.axis().scale(yScale).orient("left");

  // setup fill color
  var cValue = function(d) { return d.material;},
      color = d3.scale.category10();

  // add the graph canvas to the body of the webpage
  var svg = d3.select("#first_graph").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // add the tooltip area to the webpage
  var tooltip = d3.select("#first_graph").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

  // load data
  function updateScatterPlot(path) {
  d3.json(path, function(error, data) {

    // change string (from CSV) into number format
    data.forEach(function(d) {
      d.purity = +d.purity;
      d["purity"] = +d["purity"];
    });

    // don't want dots overlapping axis, so add in buffer to data domain
    xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
    yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]);
    
    svg.select("g").remove()
    svg.select("g").remove()
    // x-axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .text("Isolate concentration (mg/mL)");

    // y-axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("purity score");

    // draw dots
    svg.selectAll(".dot").remove()

    svg.selectAll(".dot")
        .data(data)
      .enter()
        .append("a")
        .attr("xlink:href", function(d) { console.log(d);return "http://localhost:5000/inventory/"+d["sample.id"];} )
        .append("circle")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", xMap)
        .attr("cy", yMap)
        .style("fill", function(d) { console.log(d);return color(cValue(d));})
        .on("mouseover", function(d) {
            tooltip.transition()
                 .duration(200)
                 .style("opacity", .9);
            tooltip.html(d["sample.id"] + "<br/> (" + xValue(d) 
  	        + ", " + yValue(d) + ")")
                 .style("left", (d3.event.pageX  -  ($('#first_graph').offset().left - 10)) + "px")
                 .style("top", (d3.event.pageY - 20) + "px");
        })
        .on("mouseout", function(d) {
            tooltip.transition()
                 .duration(500)
                 .style("opacity", 0);
        });

    // draw legend
    svg.selectAll(".legend").remove()
    var legend = svg.selectAll(".legend")
        .data(color.domain())
      .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    // draw legend colored rectangles
    legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

    // draw legend text
    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d;})
  });
  }; // updateScatterPlot()
  updateScatterPlot("http://localhost:3000/v2/api/meng?purity=0.1")
 // End First chart
  </script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="bootstrap-slider.js"></script>
    <script type="text/javascript">

      var purity;
      var yieldValue;
      var ChangePurity = function() {
        purity = puritySlider.getValue()
        yieldValue = yieldSlider.getValue()
        updateHistogram("http://localhost:3000/v2/api/meng2?purity="+purity+"&yield="+yieldValue);
        updateHorizontalHistogram("http://localhost:3000/v2/api/meng3?purity="+purity+"&yield="+yieldValue);
        updateScatterPlot("http://localhost:3000/v2/api/meng?purity="+purity+"&yield="+yieldValue)
      };
      var puritySlider = $('.span2').slider()
        .on('slideStop', ChangePurity)
        .data('slider');
      var yieldSlider = $('.span3').slider()
        .on('slideStop', ChangePurity)
        .data('slider');
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">


	<link href="slider.css" rel="stylesheet">

	<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
	<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->

	<style>
	body {
	font: 11px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot {
	stroke: #000;
	}

	.tooltip {
	position: absolute;
	width: 200px;
	height: 28px;
	pointer-events: none;
	}

	#xaxis .domain {
	fill:none;
	stroke:#000;
	}
	#xaxis text, #yaxis text {
	font-size: 12px;
	}

	/start chart 2/
	.axis path,
	.axis line {
	fill: none;
	stroke: #eee;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-size: 11px;
	}
	.bar {
	fill: steelblue;
	}
	/* end chart 2*/

	</style>

	<!-- Bootstrap core CSS -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<div class="container">
	<div class="row">
	<div id="first_graph" class="col-md-6">
	</div>
	<div id="wrapper" class="col-md-6">
	</div>
	</div>
	<div class="=row">
	<div id="graph" class="col-lg-6">
	</div>
	<div class="col-lg-6">
	<h3>Purity Cutoff</h3>
	<input type="text" class="span2" value="" data-slider-min="0" data-slider-max="1" data-slider-step=".1" data-slider-value="0.1" data-slider-orientation="horizontal" data-slider-selection="after"data-slider-tooltip="show">
	<h3>Yield Cutoff</h3>
	<input type="text" class="span3" value="" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="1" data-slider-orientation="horizontal" data-slider-selection="after"data-slider-tooltip="show">
	</div> <!-- /.col-lg-6 -->
	</div>
	</div>


	<script type="text/javascript">
	// Third Chart
	var canvas
	function updateHorizontalHistogram(path) {
	var bin = []
	var amount = []
	d3.json(path, function (data) {

	data = d3.keys(data).map(function (key) {
	return {bucket: Number(key),
	N: data[key]};
	});

	var k = Object.keys(data)
	var list = function(object) {
	for(var key in object) {
	bin.push(object[key]["bucket"])
	amount.push(object[key]["N"])
	}
	}

	list(data)

	var max = Math.max.apply(Math,amount);
	var min = Math.min.apply(Math,amount);
	var grid_size = max/9

	var colors = ['steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue','steelblue'];

	var grid = d3.range(10).map(function(i){

	return {'x1':0,'y1':0,'x2':0,'y2':480};
	});

	var tickVals = grid.map(function(d,i){
	if(i>0){ return i*grid_size; }
	else if(i===0){ return "0";}
	});
	console.log(tickVals)

	var xscale = d3.scale.linear()
	.domain([min,max])
	.range([0,500]);

	var yscale = d3.scale.linear()
	.domain([bin.length,0])
	.range([0,480]);


	var colorScale = d3.scale.quantize()
	.domain([0,bin.length])
	.range(colors);

	if (typeof(canvas) == 'undefined') {
	canvas = d3.select('#wrapper')
	.append('svg')
	.attr({'width':700,'height':550});
	}

	var grids = canvas.append('g')
	.attr('id','grid')
	.attr('transform','translate(150,10)')
	.selectAll('line')
	.data(grid)
	.enter()
	.append('line')
	.attr({'x1':function(d,i){ return i*30; },
	'y1':function(d){ return d.y1; },
	'x2':function(d,i){ return i*30; },
	'y2':function(d){ return d.y2; },
	})


	var xxAxis = d3.svg.axis();
	xxAxis
	.orient('bottom')
	.scale(xscale)
	.tickValues(tickVals);

	var yyAxis = d3.svg.axis();
	yyAxis
	.orient('left')
	.scale(yscale)
	.tickSize(2)
	.tickFormat(function(d,i){ return bin[i]; })
	.tickValues(d3.range(17));

	canvas.select("g#yaxis").remove()
	canvas.select("g#xaxis").remove()

	var y_xis = canvas.append('g')
	.attr("transform", "translate(150,0)")
	.attr('id','yaxis')
	.call(yyAxis);

	var x_xis = canvas.append('g')
	.attr("transform", "translate(150,480)")
	.attr('id','xaxis')
	.call(xxAxis);

	var bar = d3.select("#bars");
	bar.remove();

	var chartx = canvas.append('g')
	.attr("transform", "translate(150,0)")
	.attr('id','bars')
	.selectAll('rect')
	.data(amount)
	.enter()
	.append('rect')
	.attr('height',19)
	.attr({'x':0,'y':function(d,i){ return yscale(i)-25; }})
	.style('fill',function(d,i){ return colorScale(i); })
	.attr('width',function(d){ return 0; });


	var transit = d3.select("#wrapper").selectAll("rect")
	.data(amount)
	.transition()
	.duration(1000)
	.attr("width", function(d) {return xscale(d); });



	var transitext = d3.select('#bars')
	.selectAll('text')
	.data(amount)
	.enter()
	.append('text')
	.attr({'x':function(d) {return xscale(d)-60; },'y':function(d,i){ return yscale(i)-12; }})
	.text(function(d){ return d; }).style({'fill':'#fff','font-size':'14px'});

	})
	}; // updateHorizontalHistogram()
	updateHorizontalHistogram('http://localhost:3000/v2/api/meng3?bins=10');

	// End 3rd Chart

	// Begin 2nd Chart

	var widthh = 600,
	heightt = 300,
	pad = 20,
	left_pad = 60;

	var x = d3.scale.ordinal().rangeRoundBands([left_pad, widthh-pad], 0.1);
	var y = d3.scale.linear().range([heightt-pad, pad]);

	var xAxis2 = d3.svg.axis().scale(x).orient("bottom");
	var yAxis2 = d3.svg.axis().scale(y).orient("left");

	var svg2 = d3.select("#graph")
	.append("svg")
	.attr("width", widthh)
	.attr("height", heightt);

	function updateHistogram(path) {
	d3.json(path, function (data) {

	data = d3.keys(data).map(function (key) {
	return {bucket: Number(key).toFixed(2),
	N: data[key]};
	});

	x.domain(data.map(function (d) { return d.bucket; }));
	y.domain([0, d3.max(data, function (d) { return d.N; })]);

	svg2.select("g.axis").remove()
	svg2.select("g.axis").remove()

	svg2.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0, "+(heightt-pad)+")")
	.call(xAxis2);

	svg2.append("g")
	.attr("class", "axis")
	.attr("transform", "translate("+(left_pad-pad)+", 0)")
	.call(yAxis2);

	// remove old bar chart
	var bar = svg2.selectAll(".bar")
	.data(data, function(d) { return d.name; });
	bar.exit().remove();

	svg2.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	.attr('class', 'bar')
	.attr('x', function (d) { return x(d.bucket); })
	.attr('width', x.rangeBand())
	.attr('y', heightt-pad)
	.transition()
	.delay(function (d) { return d.bucket*20; })
	.duration(800)
	.attr('y', function (d) { return y(d.N); })
	.attr('height', function (d) { return heightt-pad - y(d.N); });

	});
	};

	updateHistogram('http://localhost:3000/v2/api/meng2?bins=10');

	// End 2nd Chart

	// Begin 1st Chart

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 560 - margin.left - margin.right,
	height = 510 - margin.top - margin.bottom;

	/*
	* value accessor - returns the value to encode for a given data object.
	* scale - maps value to a visual display encoding, such as a pixel position.
	* map function - maps from data value to display value
	* axis - sets up axis
	*/

	// setup x
	var xValue = function(d) { return d.isolate;}, // data -> value
	xScale = d3.scale.linear().range([0, width]), // value -> display
	xMap = function(d) { return xScale(xValue(d));}, // data -> display
	xAxis = d3.svg.axis().scale(xScale).orient("bottom");

	// setup y

	var yValue = function(d) { return d["purity"];}, // data -> value
	yScale = d3.scale.linear().range([height, 0]), // value -> display
	yMap = function(d) { return yScale(yValue(d));}, // data -> display
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	// setup fill color
	var cValue = function(d) { return d.material;},
	color = d3.scale.category10();

	// add the graph canvas to the body of the webpage
	var svg = d3.select("#first_graph").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// add the tooltip area to the webpage
	var tooltip = d3.select("#first_graph").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	// load data
	function updateScatterPlot(path) {
	d3.json(path, function(error, data) {

	// change string (from CSV) into number format
	data.forEach(function(d) {
	d.purity = +d.purity;
	d["purity"] = +d["purity"];
	});

	// don't want dots overlapping axis, so add in buffer to data domain
	xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
	yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]);

	svg.select("g").remove()
	svg.select("g").remove()
	// x-axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Isolate concentration (mg/mL)");

	// y-axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("purity score");

	// draw dots
	svg.selectAll(".dot").remove()

	svg.selectAll(".dot")
	.data(data)
	.enter()
	.append("a")
	.attr("xlink:href", function(d) { console.log(d);return "http://localhost:5000/inventory/"+d["sample.id"];} )
	.append("circle")
	.attr("class", "dot")
	.attr("r", 3.5)
	.attr("cx", xMap)
	.attr("cy", yMap)
	.style("fill", function(d) { console.log(d);return color(cValue(d));})
	.on("mouseover", function(d) {
	tooltip.transition()
	.duration(200)
	.style("opacity", .9);
	tooltip.html(d["sample.id"] + "<br/> (" + xValue(d)
	+ ", " + yValue(d) + ")")
	.style("left", (d3.event.pageX - ($('#first_graph').offset().left - 10)) + "px")
	.style("top", (d3.event.pageY - 20) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.transition()
	.duration(500)
	.style("opacity", 0);
	});

	// draw legend
	svg.selectAll(".legend").remove()
	var legend = svg.selectAll(".legend")
	.data(color.domain())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	// draw legend colored rectangles
	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	// draw legend text
	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d;})
	});
	}; // updateScatterPlot()
	updateScatterPlot("http://localhost:3000/v2/api/meng?purity=0.1")
	// End First chart
	</script>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="bootstrap-slider.js"></script>
	<script type="text/javascript">

	var purity;
	var yieldValue;
	var ChangePurity = function() {
	purity = puritySlider.getValue()
	yieldValue = yieldSlider.getValue()
	updateHistogram("http://localhost:3000/v2/api/meng2?purity="+purity+"&yield="+yieldValue);
	updateHorizontalHistogram("http://localhost:3000/v2/api/meng3?purity="+purity+"&yield="+yieldValue);
	updateScatterPlot("http://localhost:3000/v2/api/meng?purity="+purity+"&yield="+yieldValue)
	};
	var puritySlider = $('.span2').slider()
	.on('slideStop', ChangePurity)
	.data('slider');
	var yieldSlider = $('.span3').slider()
	.on('slideStop', ChangePurity)
	.data('slider');
	</script>
	</body>
	</html>
No results found