From 364c4de72f4a97c6914e06570bab14dc1854b20a Mon Sep 17 00:00:00 2001 From: Fieran Mason Date: Mon, 26 Oct 2015 23:24:28 +0000 Subject: [PATCH] removed some printouts --- added funtionality to differentiate between simulated and realtime executions --- assets/js/Vizualizer.js | 2 +- assets/js/navbar.js | 2 +- assets/js/vizCommon.js | 6 +- views/visualization.hbs | 4 +- visualizations/ratioViz.html | 158 ++++++++++++++++++++++------------- 5 files changed, 106 insertions(+), 66 deletions(-) diff --git a/assets/js/Vizualizer.js b/assets/js/Vizualizer.js index 387dd18..109fad3 100644 --- a/assets/js/Vizualizer.js +++ b/assets/js/Vizualizer.js @@ -106,7 +106,7 @@ function Visualizer() { // chart.bindto = '#chart-' + index; // charts.push(c3.generate(chart)); // }); - console.log(data); + //console.log(data); displayArea.append('div').attr('id', 'chart'); data.bindto = '#chart'; c3.generate(data); diff --git a/assets/js/navbar.js b/assets/js/navbar.js index e7d7f0d..1709b6b 100644 --- a/assets/js/navbar.js +++ b/assets/js/navbar.js @@ -15,7 +15,7 @@ */ function setNavbarColor(field) { - console.log("setNavbarColor("+field+")"); + //console.log("setNavbarColor("+field+")"); //reset old navbar colors. $("#navbar-attachment").css("background-color", "white"); diff --git a/assets/js/vizCommon.js b/assets/js/vizCommon.js index e3f2683..3b7b376 100644 --- a/assets/js/vizCommon.js +++ b/assets/js/vizCommon.js @@ -4,7 +4,8 @@ var colors = { blue : ['#1C2D3E', '#335579', '#4D83BD', '#65B0FF', '#A6D3FF', '#D0E7FF'], - yellow : ['#2A1F0E', '#71521F', '#926927', '#D99B37', '#FDB53F', "#FECE7A"] + simulatedBlue : ['#', '#', '#', '#', '#', '#'], + yellow : ['#2A1F0E', '#71521F', '#926927', '#D99B37', '#FDB53F', "#FECE7A"], }; var graphOffsets = {top: 20}; @@ -16,7 +17,8 @@ var fonts = {axisTickSize: 12, axisTitleSize: 14, legendSize: 14, pieMiddle:24}; // // ratio color palette -var colorMap = {clinician: colors.yellow[4], group: colors.blue[2], network: colors.blue[0]}; +var colorMap = { clinician: colors.yellow[4], group: colors.blue[2], network: colors.blue[0]} +var simulatedColorMap = { clinician: '#EEEEEE', group: '#AAAAAA', network:'#555555' }; var colorMap2 = {clinician: colors.yellow[5], group: colors.blue[3], network: colors.blue[1]}; var fontColorMap = {clinician : "#000000", group : "#000000", network : "#ffffff", male:'#ffffff', female : '#000000', undifferentiated : '#000000', undefined : '#000000' }; var inverseColorMap = {clinician: colors.blue[5], group: colors.blue[5], network:colors.blue[5]}; diff --git a/views/visualization.hbs b/views/visualization.hbs index 17da05e..1b196dc 100644 --- a/views/visualization.hbs +++ b/views/visualization.hbs @@ -73,7 +73,7 @@ var diff = (new Date()).getTime() - vizStartTime.getTime(); - console.log("viz diff for "+lastVizName+" : " + diff); + //console.log("viz diff for "+lastVizName+" : " + diff); _gaq.push(['_trackEvent', 'visualization', lastVizName, 'time', diff]); @@ -267,7 +267,7 @@ var data = {{{json visualization}}}; - console.log(data); + //console.log(data); if (data["display_name"]) { diff --git a/visualizations/ratioViz.html b/visualizations/ratioViz.html index 11983cd..a6bb6b7 100644 --- a/visualizations/ratioViz.html +++ b/visualizations/ratioViz.html @@ -55,7 +55,6 @@ //only report actions over 0.75 seconds. if (diff > 750) { - console.log("tooltip: " + parent.replace("#", "") + " for: " + diff + " ms"); _gaq.push(['_trackEvent', 'tooltip', parent.replace("#", ""), 'time', diff]); } @@ -357,10 +356,48 @@ //data needs to be valid JSON in standard HUB API line graph format function lineVis(data, parent) { - data.processed_result.clinician = data.processed_result.clinician.sort(sortExes); - data.processed_result.group = data.processed_result.group.sort(sortExes); + data.processed_result.clinician = data.processed_result.clinician.sort(sortExes); + data.processed_result.clinicianSimulated = data.processed_result.clinician.filter( + function(x) + { + return filterOnSimulated(true, x); + }); + data.processed_result.clinicianRealTime = data.processed_result.clinician.filter( + function(x) + { + return filterOnSimulated(false, x); + }); + + data.processed_result.group = data.processed_result.group.sort(sortExes); + data.processed_result.groupSimulated = data.processed_result.group.filter( + function(x) + { + return filterOnSimulated(true, x); + }); + data.processed_result.groupRealTime = data.processed_result.group.filter( + function(x) + { + return filterOnSimulated(false, x); + }); + data.processed_result.network = data.processed_result.network.sort(sortExes); + data.processed_result.networkSimulated = data.processed_result.network.filter( + function(x) + { + return filterOnSimulated(true, x); + }); + data.processed_result.networkRealTime = data.processed_result.network.filter( + function(x) + { + return filterOnSimulated(false, x); + }); + + function filterOnSimulated(simulated, x) + { + return simulated ? x.simulated : !x.simulated; + } + parent = parent || "#chart"; var div = d3.select("#tooltip-holder").append("div") @@ -542,44 +579,32 @@ .attr("transform", "rotate(45)"); //create and append paths using line data - if (data.processed_result.clinician.length > 1) { - var clinicianPath = canvas.append("g") - .attr("class", "line") - .selectAll("path") - .data([data.processed_result.clinician]) - .enter().append("path") - .attr("d", line) - .attr("fill", "none") - .attr("stroke", colorMap['clinician']) - .attr("stroke-width", 5) - .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")"); - } - - if (data.processed_result.group.length > 1) { - var clinicPath = canvas.append("g") - .attr("class", "line") - .selectAll("path") - .data([data.processed_result.group]) - .enter().append("path") - .attr("d", line) - .attr("fill", "none") - .attr("stroke", colorMap["group"]) - .attr("stroke-width", 2) - .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")"); - } - - if (data.processed_result.clinician.length > 1) { - var networkPath = canvas.append("g") - .attr("class", "line") - .selectAll("path") - .data([data.processed_result.network]) - .enter().append("path") - .attr("d", line) - .attr("fill", "none") - .attr("stroke", colorMap["network"]) - .attr("stroke-width", 1) - .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")"); - } + + appendPath(data.processed_result.clinicianRealTime, 5, colorMap['clinician']); + appendPath(data.processed_result.clinicianSimulated, 5, simulatedColorMap['clinician']); + + appendPath(data.processed_result.groupRealTime, 3, colorMap['group']); + appendPath(data.processed_result.groupSimulated, 3, simulatedColorMap['group']); + + appendPath(data.processed_result.networkRealTime, 1, colorMap['network']); + appendPath(data.processed_result.networkSimulated, 1, simulatedColorMap['network']); + + function appendPath(data, lineWidth, lineColor) + { + if(data.length>1) + { + path = canvas.append("g") + .attr("class", "line") + .selectAll("path") + .data([data]) + .enter().append("path") + .attr("d", line) + .attr("fill", "none") + .attr("stroke", lineColor) + .attr("stroke-width", lineWidth) + .attr("transform", "translate(60," + (margin.top/2 + 20) + ")"); + } + } function getDelta(d) { if (d.aggregate_result.denominator === 0) { @@ -596,23 +621,27 @@ .selectAll("circle") .data(data.processed_result.clinician) .enter().append("circle") - .attr("onmouseover", "evt.target.setAttribute('r', '10');") - .attr("onmouseout", "evt.target.setAttribute('r', '7');") - .attr("cx", function (d) { - return xScale(d.time); - }) - .attr("cy", function (d) { - return getDelta(d); - }) - .attr("fill", colorMap["clinician"]) - .attr("r", 7) - .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")") - .on("mouseover", function (d) { - toolTipMouseOver(d, 'clinician', data.processed_result['clinician'][0].display_name, div, parent); - }) - .on("mouseout", function (d) { - toolTipMouseOut(d, div, parent); - }); + .attr("onmouseover", "evt.target.setAttribute('r', '10');") + .attr("onmouseout", "evt.target.setAttribute('r', '7');") + .attr("cx", function (d) { + return xScale(d.time); + }) + .attr("cy", function (d) { + return getDelta(d); + }) + .attr("fill", + function(d) + { + return d.simulated ? simulatedColorMap["clinician"] : colorMap["clinician"]; + }) + .attr("r", 7) + .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")") + .on("mouseover", function (d) { + toolTipMouseOver(d, 'clinician', data.processed_result['clinician'][0].display_name, div, parent); + }) + .on("mouseout", function (d) { + toolTipMouseOut(d, div, parent); + }); var clinicPoints = canvas.append("g") .attr("class", "points") @@ -627,7 +656,11 @@ .attr("cy", function (d) { return getDelta(d); }) - .attr("fill", colorMap["group"]) + .attr("fill", + function(d) + { + return d.simulated ? simulatedColorMap["group"] : colorMap["group"]; + }) .attr("r", 4) .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")") .on("mouseover", function (d) { @@ -650,7 +683,12 @@ .attr("cy", function (d) { return getDelta(d); }) - .attr("fill", colorMap["network"]) + .attr("fill", + function(d) + { + return d.simulated ? simulatedColorMap["network"] : colorMap["network"]; + } + ) .attr("r", 2) .attr("transform", "translate(60," + (margin.top / 2 + 20) + ")") .on("mouseover", function (d) {