diff options
3 files changed, 161 insertions, 71 deletions
diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css index 5aa9b9bf..a2ebb252 100644 --- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css +++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css @@ -7,7 +7,7 @@ .nvd3 .nv-axis.nv-y text { font-size: 16px; font-weight: normal; - fill:black; + fill: black; } .nv-x .nv-axis g path.domain { @@ -29,7 +29,8 @@ } line.nv-regLine { - stroke: red !important; + stroke: red; + stroke-width: 1; } .nv-axisMin-x, diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js index 96763aca..1fb17bf0 100644 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js @@ -1,13 +1,14 @@ var chart; -nv.addGraph(function() { +function drawg () { // chart = nv.models.scatterChart(); // chart.showLegend(false); chart.duration(300); chart.color(d3.scale.category10().range()); - chart.pointRange([200,0]); + chart.pointRange([0, 400]); + chart.pointDomain([0, 10]); // chart.xAxis.axisLabel(js_data.trait_1); chart.xAxis.axisLabelDistance(11); @@ -26,15 +27,12 @@ nv.addGraph(function() { chart.yAxis.tickFormat(d3.format(checkformat(yrange))); // chart.tooltip.contentGenerator(function (obj) { - return '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>'; + // return '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>'; + return '<b style="font-size: 18px">(' + obj.point.name + ')</b>'; }); - // - d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart); - nv.utils.windowResize(chart.update); - return chart; -}); +} -function getdata () { +function getdata(size, shape) { var data = []; data.push({ values: [], @@ -45,14 +43,15 @@ function getdata () { data[0].values.push({ x: js_data.data[0][j], y: js_data.data[1][j], - size: 10, - shape: 'circle' + name: js_data.indIDs[j], + size: size, + shape: shape }); } return data; } -function checkformat (range) { +function checkformat(range) { cell = range / 10.0; if (cell >= 1) { return ",r"; @@ -62,3 +61,73 @@ function checkformat (range) { return ",.0" + n + "f"; } } + +function chartupdate() { + // + var axisxcolor = $("#axisxcolor").val(); + $(".nvd3 .nv-axis.nv-x text").css("fill", axisxcolor); + // + var axisycolor = $("#axisycolor").val(); + $(".nvd3 .nv-axis.nv-y text").css("fill", axisycolor); + // + var axisxfont = $("#axisxfont").val(); + $(".nvd3 .nv-axis.nv-x text").css("font-size", axisxfont); + // + var axisyfont = $("#axisyfont").val(); + $(".nvd3 .nv-axis.nv-y text").css("font-size", axisyfont); + // + var domainxcolor = $("#domainxcolor").val(); + $(".nv-x .nv-axis g path.domain").css("stroke", domainxcolor); + // + var domainycolor = $("#domainycolor").val(); + $(".nv-y .nv-axis g path.domain").css("stroke", domainycolor); + // + var domainxwidth = $("#domainxwidth").val(); + $(".nv-x .nv-axis g path.domain").css("stroke-width", domainxwidth); + // + var domainywidth = $("#domainywidth").val(); + $(".nv-y .nv-axis g path.domain").css("stroke-width", domainywidth); + // + var clinecolor = $("#clinecolor").val(); + $("line.nv-regLine").css("stroke", clinecolor); + // + var clinewidth = $("#clinewidth").val(); + $("line.nv-regLine").css("stroke-width", clinewidth); +} + +function chartupdatewh() { + // + var width = $("#width").val(); + $("#scatterplot2 svg").css("width", width); + // + var height = $("#height").val(); + $("#scatterplot2 svg").css("height", height); + // + window.dispatchEvent(new Event('resize')); +} + +function chartupdatedata() { + // + var size = $("#marksize").val(); + var shape = $("#markshape").val(); + // + d3.select('#scatterplot2 svg').datum(nv.log(getdata(size, shape))).call(chart); + nv.utils.windowResize(chart.update); +} + +drawg(); +chartupdate(); +chartupdatewh(); +chartupdatedata(); + +$(".chartupdate").change(function () { + chartupdate(); +}); + +$(".chartupdatewh").change(function () { + chartupdatewh(); +}); + +$(".chartupdatedata").change(function () { + chartupdatedata(); +}); diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index 605f557c..d25a361d 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -12,67 +12,84 @@ {% endblock %} {% block content %} -<!--<form action="" method="get"> -<input type="hidden" name="dataset_1" value="{{data_set_1.name}}"> -<input type="hidden" name="dataset_2" value="{{data_set_2.name}}"> -<input type="hidden" name="trait_1" value="{{trait_1.name}}"> -<input type="hidden" name="trait_2" value="{{trait_2.name}}"> -<table class="table" style="width: auto;"> - <tr> - <td>Canvas Width</td> - <td>Canvas Height</td> - <td>Circle Color</td> - <td>Circle Radius</td> - <td>Line Color</td> - <td>Line Width</td> - <td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td> - </tr> - <tr> - <td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td> - <td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td> - <td> - <select name="circle_color" style="width: 100px;"> - <option value="red">Red</option> - <option value="green">Green</option> - <option value="blue">Blue</option> - </select> - </td> - <td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td> - <td> - <select name="line_color" style="width: 100px;"> - <option value="red">Red</option> - <option value="green">Green</option> - <option value="blue">Blue</option> - </select> - </td> - <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td> - </tr> -</table> -</form>--> + <div class="container-fluid"> <h2>Correlation Scatterplot</h2> -<!-- <table class="table"> <tr> - <td>Correlation Line Width</td> - <td><input type="text" name="lastname" value="2" style="width: 44px;"> px</td> - </tr> - <tr> - <td>Correlation Line Color</td> - <td><input type="color" name="favcolor" value="#000000"></td> - </tr> - <tr> - <td>Dot Stroke</td> - <td><input type="text" name="lastname" value="5" style="width: 44px;"> px</td> + + <td>Width</td> + <td><input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px;"> px</td> + + <td>Axis X Color</td> + <td><input class="chartupdate" id="axisxcolor" type="color" value="#000000"></td> + + <td>Axis X Font</td> + <td><input class="chartupdate" id="axisxfont" type="text" value="16" style="width: 44px;"> px</td> + + <td>Domain X Color</td> + <td><input class="chartupdate" id="domainxcolor" type="color" value="#000000"></td> + + <td>Domain X Width</td> + <td><input class="chartupdate" id="domainxwidth" type="text" value="2" style="width: 44px;"> px</td> + + <td>Correlation Line Color</td> + <td><input class="chartupdate" id="clinecolor" type="color" value="#000000"></td> + + <td>Mark Size</td> + <td> + <select class="chartupdatedata" id="marksize" style="width: 100px;"> + <option value="0">0</option> + <option value="1">1</option> + <option value="2">2</option> + <option value="3">3</option> + <option value="4">4</option> + <option value="5" selected>5</option> + <option value="6">6</option> + <option value="7">7</option> + <option value="8">8</option> + <option value="9">9</option> + <option value="10">10</option> + </select> + </td> + </tr> <tr> - <td>Dot Color</td> - <td><input type="color" name="favcolor" value="#ff0000"></td> + + <td>Height</td> + <td><input class="chartupdatewh" id="height" type="text" value="800" style="width: 44px;"> px</td> + + <td>Axis Y Color</td> + <td><input class="chartupdate" id="axisycolor" type="color" value="#000000"></td> + + <td>Axis Y Font</td> + <td><input class="chartupdate" id="axisyfont" type="text" value="16" style="width: 44px;"> px</td> + + <td>Domain Y Color</td> + <td><input class="chartupdate" id="domainycolor" type="color" value="#000000"></td> + + <td>Domain Y Width</td> + <td><input class="chartupdate" id="domainywidth" type="text" value="2" style="width: 44px;"> px</td> + + <td>Correlation Line Width</td> + <td><input class="chartupdate" id="clinewidth" type="text" value="1" style="width: 44px;"> px</td> + + <td>Mark Shape</td> + <td> + <select class="chartupdatedata" id="markshape" style="width: 100px;"> + <option value="circle" selected>Circle</option> + <option value="cross">Cross</option> + <option value="triangle-up">Triangle-up</option> + <option value="triangle-down">Triangle-down</option> + <option value="diamond">Diamond</option> + <option value="square">Square</option> + </select> + </td> + </tr> </table> ---> <div id="scatterplot2"> <svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg> @@ -175,13 +192,16 @@ <br> -<table class="table table-hover table-striped table-bordered" style="width: 250px; margin-left: 80px;"> +<table class="table table-hover table-striped table-bordered" style="width: 200px; margin-left: 80px;"> + <thead> + <tr><th>Statistic</th><th>Value</th></tr> + </thead> <tbody> - <tr><th>Number</th> <td>{{jsdata.num_overlap}}</td></tr> - <tr><th>Slope</th> <td>{{'%0.3f' % jsdata.slope}}</td></tr> - <tr><th>Intercept</th> <td>{{'%0.3f' % jsdata.intercept}}</td></tr> - <tr><th>R value</th> <td>{{'%0.3f' % jsdata.r_value}}</td></tr> - <tr><th>P value</th> <td>{{'%0.3e' % jsdata.p_value}}</td></tr> + <tr><td>Number</td> <td>{{jsdata.num_overlap}}</td></tr> + <tr><td>Slope</td> <td>{{'%0.3f' % jsdata.slope}}</td></tr> + <tr><td>Intercept</td> <td>{{'%0.3f' % jsdata.intercept}}</td></tr> + <tr><td>R value</td> <td>{{'%0.3f' % jsdata.r_value}}</td></tr> + <tr><td>P value</td> <td>{{'%0.3e' % jsdata.p_value}}</td></tr> </tbody> </table> |