Weekly Patient Volume

<!doctype html>
<html>

</head>

<body>

<div class="container-fluid">
		
			<nav class="navbar navbar-inverse navbar-fixed-top">
				<div class="container">
					<div class="navbar-header">
						<span class="navbar-brand">Patient Viewer</span>
					</div>
					<div id="navbar" class="collapse navbar-collapse">
					</div>
				</div>
			</nav>
		</div>
			
		<div class="container-fluid">
				<div class="tab-content">
				
					<div class="tab-pane active" id="tab_newGraphic">
						<h2 style="align: center">Weekly Patient Volume</h2>
						<div class="row">
							<div class="dotPlot"></div>
						</div>
						<div class="row">
								<div class="selButtons selCancer well">
									<h4>Cancer Type</h4>
								</div>
								<div class="selButtons selTreatment well">
									<h4>Treatment Modality</h4>
								</div>
						</div>
					</div>
					
					<div class="tab-pane" id="tab_oldGraphic">
						<h2>The Original Data Viz</h2>
									<img src="https://oncoramedical.com/assets/images/screenshots/donut_hist.gif" alt="Original Viz">
					</div>
					
					<div class="tab-pane" id="tab_whatChanged">
						Nothing Here Either
					</div>
					
				</div>
		</div>
	
		<script>
		
		// --- Define Functions ----------------------------------------------
				
		// Data Filtering -- filters for button click
		
		function filterOnClick(data, passThis){	
			
			//Helper function for getting data from D3 selection
			function getSelDataFromObj(selClass){
				var selDataObj = d3.selectAll(".selected").filter(selClass)["0"];
				var selDataArray = [];
				
				for(var property in selDataObj){
					if (selDataObj.hasOwnProperty(property) && property !== "parentNode") {
						selDataArray.push(selDataObj[property].__data__);
					}
				}
				return selDataArray;
			};
			
			var pressedResetButton = d3.select(passThis).classed("resetButton");
			var pressedClearButton = d3.select(passThis).classed("clearButton");
			var pressedCancerButton = d3.select(passThis).classed("cancerButton");
			var pressedTreatButton = d3.select(passThis).classed("treatmentButton");	
			
			// If reset button is pressed, turn all selections on
			if( pressedResetButton && pressedCancerButton ){
					d3.selectAll(".cancerButton").classed("selected", true);
					d3.select(passThis).classed("selected", false);
			}else if( pressedResetButton && pressedTreatButton ) {
					d3.selectAll(".treatmentButton").classed("selected", true);
					d3.select(passThis).classed("selected", false);
			}else 
			
			// If clear button is pressed, turn all selections off
			if( pressedClearButton && pressedCancerButton ){
					d3.selectAll(".cancerButton").classed("selected", false);
					d3.select(passThis).classed("selected", false);
			}else if( pressedClearButton && pressedTreatButton ) {
					d3.selectAll(".treatmentButton").classed("selected", false);
					d3.select(passThis).classed("selected", false);
			}else{
			
			// If not reset button... 
					var allCancersSelected = d3.selectAll(".cancerButton").filter(".selected").size() === cancerTypes.length
					var allTreatsSelected = d3.selectAll(".treatmentButton").filter(".selected").size() === treatmentTypes.length
					
					// If it's the first button selected in a group, leave it on and turn everything else off; otherwise, toggle the button
					if(	allCancersSelected && pressedCancerButton ){
							d3.selectAll(".cancerButton").classed("selected", false);
							d3.select(passThis).classed("selected", true);
					}else if( allTreatsSelected && pressedTreatButton ){
							d3.selectAll(".treatmentButton").classed("selected", false);
							d3.select(passThis).classed("selected", true);
					}else if( d3.select(passThis).classed("selected") ){
							d3.select(passThis).classed("selected", false);
					}else{
							d3.select(passThis).classed("selected", true);
			}}
			
			// Main Function
			var selCancerArray = getSelDataFromObj(".cancerButton");
			var selTreatArray = getSelDataFromObj(".treatmentButton");
			
			data = data.filter(
				function(obj){
					return 	($.inArray(obj.cancerType, selCancerArray) > -1) &&
									($.inArray(obj.treatmentModality, selTreatArray) > -1);
				}
			);
			return data;
			
		};
		
		// Drawer function
		function redraw(data){
		
			var colorBy = d3.selectAll(".recolorButton").filter(".selected").data();
			
			if(colorBy[0] === "Cancer Type"){
				sortBy = "cancerType";
				data = data.sort(sortByCancerFreqThenWeek);
			}else if(colorBy[0] === "Treatment Modality"){
				sortBy = "treatmentModality";
				data = data.sort(sortByTreatmentFreqThenWeek);
			}
			
			data = accumWeeks(data);	
						
			// Join Data
			var dots = dotGraphic.selectAll("circle")
					.data(data, function(d) {return d.visitId})
			
			console.log(dots)
			
			// UPDATE
			dots
				.transition()
					//.delay(function(d,i){ return Math.random()*8*dots.enter().size();})
					.attr("cy", function(d){ return yScale_dot(d.accWeek);})
					.attr("fill", function(d){ return colorScale_active(d[sortBy])});
			
			// ENTER
			dots.enter()
				.append("circle")
					.attr("cx", function(d) { return xScale_dot(d.week)})
					.attr("cy", -100)
					.attr("fill", function(d) {return colorScale_active(d[sortBy])})
					.attr("r",5)
				.transition()
					.delay(function(d,i){ 
						return Math.random()*8*dots.enter().size();})
					.attr("cy", function(d){ return yScale_dot(d.accWeek);});
			
			// EXIT
			dots.exit()
				.transition(1250)
					.attr("fill-opacity", 1e-6)
					.remove()
		}
		
		// Recolor function
		function recolor(data){
			
			var iColor = $.inArray(data, colorOptions);
			
			// Update selection
			d3.selectAll(".recolorButton").classed("selected", false);
			d3.selectAll(".recolorButton")
				.filter(function(d,i){return i===iColor;}).classed("selected", true);
				
			if(iColor===0){
				colorScale_active = colorScale_cancer;
				
				cancerButtons.attr("fill", "#000000");
				cancerButton_shapes
					.attr("fill", function(d,i){return colorScale_active(d);});
				
				treatmentButtons.attr("fill", "#000000");
				treatmentButton_shapes
					.attr("fill", function(d,i){return colorScale_inactive(d);});
					
			}else if(iColor===1){
				colorScale_active = colorScale_treatment;
				
				cancerButtons.attr("fill", "#000000");
				cancerButton_shapes
					.attr("fill", function(d,i){return colorScale_inactive(d);});
				
				treatmentButtons.attr("fill", "#000000");
				treatmentButton_shapes
					.attr("fill", function(d,i){return colorScale_active(d);})
			}else if(iColor===2){
				colorScale_active = colorScale_oneColor
				
				cancerButtons.attr("fill", "#eeeeee");
				cancerButton_shapes
					.attr("fill", function(d,i){return colorScale_active(d);});
				
				treatmentButtons.attr("fill", "#eeeeee");
				treatmentButton_shapes
					.attr("fill", function(d,i){return colorScale_active(d);});
			}
			
			redraw(visitData)
		
		}
		
		// Sorting Functions
		function sortByCancerFreqThenWeek(a,b){
			var typeLen_a = visitsByCancer[a.cancerType].length;
			var typeLen_b = visitsByCancer[b.cancerType].length;
			if(a.week === b.week){
				if(typeLen_b === typeLen_a){
					return a.visitId - b.visitId;
				}
				return typeLen_b - typeLen_a;
			}
			return a.week - b.week;
		};
		
		function sortByTreatmentFreqThenWeek(a,b){
			var treatLen_a = visitsByTreatment[a.treatmentModality].length;
			var treatLen_b = visitsByTreatment[b.treatmentModality].length;
			if(a.week === b.week){
				if(treatLen_b === treatLen_a){
					return a.visitId - b.visitId;
				}
				return treatLen_b - treatLen_a;
			}
			return a.week - b.week;
		};
		
		function sortByLength(anObject) {
			return function(a,b) {
				return anObject[b].length - anObject[a].length;
				};
		};
		
		// Ennumerate visit count per week (after sorting) -- used as y pos value
		function accumWeeks(sortedVisitData){
			if(sortedVisitData.length === 0){return sortedVisitData};
			
			sortedVisitData[0].accWeek = 1;
			for(i = 1; i < sortedVisitData.length; i++){
				if(sortedVisitData[i].week === sortedVisitData[i-1].week){
					sortedVisitData[i].accWeek = sortedVisitData[i-1].accWeek + 1;
				}else{
					sortedVisitData[i].accWeek = 1;
				}
			}
			return sortedVisitData
		};
		
		// Path creator to make rounded rectangle
		function createPillButton(x, y, width, height, radius) {
			var x = typeof x !== 'undefined' ?  x : 0;
			var y = typeof y !== 'undefined' ?  y : 0;
			var width = typeof width !== 'undefined' ?  width : 120;
			var height = typeof height !== 'undefined' ?  height : 40;
			var radius = typeof radius !== 'undefined' ?  radius : 10;		
			
			return "M" + x + "," + y
				 + "h" + (width - radius)
				 + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
				 + "v" + (height - 2 * radius)
				 + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
				 + "h" + (radius - width)
				 + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + -radius
				 + "v" + (2 * radius - height)
				 + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius
				 + "z";
		}
		//---------------------------------------------------------------------
		
		
		//--- Data & Data Manipulation ----------------------------------------
		// Hardcode data (for convenience) generated by separate R script
		var visitData_full = [{"visitId":1,"week":9,"cancerType":"Leukaemia","treatmentModality":"Proton"},{"visitId":2,"week":46,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":3,"week":23,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":4,"week":46,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"Proton"},{"visitId":5,"week":13,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":6,"week":12,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":7,"week":5,"cancerType":"Lung","treatmentModality":"3D CRT"},{"visitId":8,"week":9,"cancerType":"Lung","treatmentModality":"3D CRT"},{"visitId":9,"week":16,"cancerType":"Lung","treatmentModality":"3D CRT"},{"visitId":10,"week":33,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":11,"week":2,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":12,"week":6,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":13,"week":13,"cancerType":"Bladder","treatmentModality":"IMRT"},{"visitId":14,"week":16,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":15,"week":31,"cancerType":"Malignant Melanoma","treatmentModality":"IMRT"},{"visitId":16,"week":20,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":17,"week":26,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"3D CRT"},{"visitId":18,"week":15,"cancerType":"Malignant Melanoma","treatmentModality":"3D CRT"},{"visitId":19,"week":13,"cancerType":"Bladder","treatmentModality":"IMRT"},{"visitId":20,"week":33,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":21,"week":3,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":22,"week":2,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":23,"week":2,"cancerType":"Lung","treatmentModality":"IMRT"},{"visitId":24,"week":19,"cancerType":"Bladder","treatmentModality":"IMRT"},{"visitId":25,"week":40,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":26,"week":38,"cancerType":"Malignant Melanoma","treatmentModality":"Proton"},{"visitId":27,"week":3,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":28,"week":13,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"3D CRT"},{"visitId":29,"week":50,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":30,"week":15,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":31,"week":14,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":32,"week":31,"cancerType":"Brain","treatmentModality":"IMRT"},{"visitId":33,"week":2,"cancerType":"Uterus","treatmentModality":"IMRT"},{"visitId":34,"week":31,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"Proton"},{"visitId":35,"week":26,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":36,"week":21,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":37,"week":8,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":38,"week":35,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":39,"week":46,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":40,"week":1,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":41,"week":42,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":42,"week":24,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":43,"week":17,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":44,"week":33,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":45,"week":4,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":46,"week":21,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":47,"week":48,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"IMRT"},{"visitId":48,"week":5,"cancerType":"Malignant Melanoma","treatmentModality":"Proton"},{"visitId":49,"week":14,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":50,"week":50,"cancerType":"Malignant Melanoma","treatmentModality":"3D CRT"},{"visitId":51,"week":18,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"3D CRT"},{"visitId":52,"week":17,"cancerType":"Malignant Melanoma","treatmentModality":"Proton"},{"visitId":53,"week":4,"cancerType":"Bladder","treatmentModality":"Proton"},{"visitId":54,"week":47,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":55,"week":52,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":56,"week":20,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":57,"week":35,"cancerType":"Malignant Melanoma","treatmentModality":"Proton"},{"visitId":58,"week":39,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":59,"week":7,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":60,"week":25,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"Proton"},{"visitId":61,"week":34,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":62,"week":1,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":63,"week":35,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":64,"week":9,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":65,"week":10,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":66,"week":6,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":67,"week":47,"cancerType":"Malignant Melanoma","treatmentModality":"Proton"},{"visitId":68,"week":8,"cancerType":"Malignant Melanoma","treatmentModality":"SBRT"},{"visitId":69,"week":18,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":70,"week":50,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":71,"week":19,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":72,"week":14,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":73,"week":22,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"IMRT"},{"visitId":74,"week":16,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":75,"week":5,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":76,"week":23,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":77,"week":48,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":78,"week":36,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":79,"week":10,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":80,"week":9,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":81,"week":40,"cancerType":"Lung","treatmentModality":"3D CRT"},{"visitId":82,"week":47,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":83,"week":12,"cancerType":"Malignant Melanoma","treatmentModality":"SBRT"},{"visitId":84,"week":22,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":85,"week":40,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":86,"week":5,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"SBRT"},{"visitId":87,"week":18,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":88,"week":17,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":89,"week":35,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"IMRT"},{"visitId":90,"week":29,"cancerType":"Lung","treatmentModality":"3D CRT"},{"visitId":91,"week":16,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":92,"week":47,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":93,"week":19,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":94,"week":36,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":95,"week":20,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":96,"week":19,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":97,"week":4,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":98,"week":19,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":99,"week":45,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":100,"week":51,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":101,"week":19,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":102,"week":19,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":103,"week":40,"cancerType":"Malignant Melanoma","treatmentModality":"Proton"},{"visitId":104,"week":40,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":105,"week":24,"cancerType":"Malignant Melanoma","treatmentModality":"IMRT"},{"visitId":106,"week":11,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":107,"week":23,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":108,"week":24,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":109,"week":21,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":110,"week":8,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":111,"week":29,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":112,"week":51,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":113,"week":47,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":114,"week":31,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":115,"week":25,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":116,"week":21,"cancerType":"Lung","treatmentModality":"IMRT"},{"visitId":117,"week":46,"cancerType":"Malignant Melanoma","treatmentModality":"3D CRT"},{"visitId":118,"week":42,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":119,"week":38,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":120,"week":39,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":121,"week":1,"cancerType":"Lung","treatmentModality":"IMRT"},{"visitId":122,"week":38,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":123,"week":26,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":124,"week":49,"cancerType":"Lung","treatmentModality":"SBRT"},{"visitId":125,"week":40,"cancerType":"Lung","treatmentModality":"IMRT"},{"visitId":126,"week":24,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":127,"week":36,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":128,"week":37,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":129,"week":11,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":130,"week":29,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":131,"week":33,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":132,"week":15,"cancerType":"Malignant Melanoma","treatmentModality":"3D CRT"},{"visitId":133,"week":7,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":134,"week":30,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":135,"week":6,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":136,"week":32,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":137,"week":45,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":138,"week":36,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":139,"week":26,"cancerType":"Malignant Melanoma","treatmentModality":"SBRT"},{"visitId":140,"week":8,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":141,"week":40,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":142,"week":27,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":143,"week":44,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":144,"week":25,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":145,"week":48,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":146,"week":28,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":147,"week":21,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":148,"week":25,"cancerType":"Lung","treatmentModality":"3D CRT"},{"visitId":149,"week":23,"cancerType":"Malignant Melanoma","treatmentModality":"IMRT"},{"visitId":150,"week":33,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":151,"week":7,"cancerType":"Bladder","treatmentModality":"Proton"},{"visitId":152,"week":49,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":153,"week":16,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":154,"week":37,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":155,"week":40,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":156,"week":34,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":157,"week":39,"cancerType":"Malignant Melanoma","treatmentModality":"IMRT"},{"visitId":158,"week":45,"cancerType":"Malignant Melanoma","treatmentModality":"IMRT"},{"visitId":159,"week":23,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":160,"week":32,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"IMRT"},{"visitId":161,"week":39,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":162,"week":17,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":163,"week":31,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":164,"week":44,"cancerType":"Breast","treatmentModality":"Proton"},{"visitId":165,"week":21,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":166,"week":47,"cancerType":"Kidney","treatmentModality":"3D CRT"},{"visitId":167,"week":5,"cancerType":"Lung","treatmentModality":"SBRT"},{"visitId":168,"week":14,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":169,"week":46,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":170,"week":36,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":171,"week":14,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":172,"week":1,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":173,"week":15,"cancerType":"Malignant Melanoma","treatmentModality":"SBRT"},{"visitId":174,"week":51,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":175,"week":16,"cancerType":"Lung","treatmentModality":"SBRT"},{"visitId":176,"week":20,"cancerType":"Prostate","treatmentModality":"SBRT"},{"visitId":177,"week":22,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":178,"week":29,"cancerType":"Non-Hodgkin Lympoma","treatmentModality":"IMRT"},{"visitId":179,"week":5,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":180,"week":17,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":181,"week":44,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":182,"week":13,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":183,"week":48,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":184,"week":38,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":185,"week":11,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":186,"week":3,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":187,"week":15,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":188,"week":26,"cancerType":"Breast","treatmentModality":"SBRT"},{"visitId":189,"week":50,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":190,"week":9,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":191,"week":19,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":192,"week":23,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":193,"week":15,"cancerType":"Prostate","treatmentModality":"IMRT"},{"visitId":194,"week":10,"cancerType":"Lung","treatmentModality":"Proton"},{"visitId":195,"week":42,"cancerType":"Pancreas","treatmentModality":"IMRT"},{"visitId":196,"week":13,"cancerType":"Prostate","treatmentModality":"Proton"},{"visitId":197,"week":46,"cancerType":"Prostate","treatmentModality":"3D CRT"},{"visitId":198,"week":3,"cancerType":"Breast","treatmentModality":"IMRT"},{"visitId":199,"week":9,"cancerType":"Breast","treatmentModality":"3D CRT"},{"visitId":200,"week":16,"cancerType":"Brain","treatmentModality":"IMRT"}];
		
		// Visit data chunked by cancer types
		var visitsByCancer = d3.nest()
				.key(function(d) {return d.cancerType;})
				.map(visitData_full);
		
		// Visit data chunked by treament types
		var visitsByTreatment = d3.nest()
				.key(function(d) {return d.treatmentModality;})
				.map(visitData_full);
		
		// Sort data before setting color scale to map the scale correctly
		visitData = visitData_full
								.sort(sortByCancerFreqThenWeek);
								
		visitData = accumWeeks(visitData);
		
		
		// Create list of cancer types sorted by most common
		var cancerTypes = Object.keys(visitsByCancer).sort(sortByLength(visitsByCancer));
		
		// Create list of treatment modalities sorted by most common
		var treatmentTypes = Object.keys(visitsByTreatment).sort(sortByLength(visitsByTreatment));
		//---------------------------------------------------------------------
		
		
		// --- Set height, width, margins -------------------------------------
		var margin 			= {top: 50, right: 200, bottom: 75, left: 50},
				outerWidth 	= 1100,
				outerHeight = 325,
				width 			= outerWidth - margin.left - margin.right,
				height 			= outerHeight - margin.top - margin.bottom;
				
		var height_dotGraphic = height,
				width_dotGraphic 	= width;
				
		var horizSplitPadding = 50,
				vertSplitPadding = 50;
				
		var height_selCancer 	= 300,
				width_selCancer 	= 11*width/12;
		
		var height_selTreatment		= 300,
				width_selTreatment 		= 5*width/12;
		//----------------------------------------------------------------------
	
	
		// --- Create SVG and main groups --------------------------------------
		var dotGraphic_svg = d3.select(".dotPlot").append("svg")
				.attr("class", "dotPlot")
				.attr("width", outerWidth)
				.attr("height", outerHeight);
				
		var selCancerGraphic_svg = d3.select(".selCancer").append("svg")
				.attr("class", "selCancer")
				.attr("width", width_selCancer)
				.attr("height", height_selCancer);
				
		var selTreatGraphic_svg = d3.select(".selTreatment").append("svg")
				.attr("class", "selTreatment")
				.attr("width", width_selTreatment)
				.attr("height", height_selTreatment);
		
		// Group for the dotplot graphic
		var dotGraphic = dotGraphic_svg.append("g")
				.attr("transform", "translate(" + [margin.left, margin.top] + ")");
				
		// Group for cancer buttons
		var selCancerGraphic = selCancerGraphic_svg.append("g")
				.attr("transform", 
					"translate(" + [
						margin.left/2, 
						margin.top/3
						] + ")"
				);
				
		// Group for treatment buttons
		var selTreatGraphic = selTreatGraphic_svg.append("g")
				.attr("transform", 
					"translate(" + [
						margin.left/2, 
						margin.top/3
						] + ")"
				);
		//----------------------------------------------------------------------
				
				
		// --- Define Scales ---------------------------------------------------
		var xScale_dot = d3.scale.linear()
				.domain([0,53])
				.range([0, width_dotGraphic]);
				
		var yScale_dot = d3.scale.linear()
		.domain([0.5, d3.max(visitData.map(function(a) {return a.accWeek;}))/.8 ])
		.range([height_dotGraphic, 0]);
		
		// From https://colorbrewer2.org/ : 12-class qualitative
		var colorList = [
				"#1f78b4", "#33a02c", 
				"#e31a1c", "#ff7f00", 
				"#6a3d9a", "#b15928", 
				"#a6cee3", "#b2df8a", 
				"#fb9a99",  "#fdbf6f", 
				"#cab2d6", "#eeee88"
			]
		
		var colorScale_cancer = d3.scale.ordinal()
				.domain(cancerTypes)
				.range(colorList)
		
		var colorScale_treatment = d3.scale.ordinal()
				.domain(treatmentTypes)
				.range(colorList)
				
		var colorScale_active = colorScale_cancer;
		var colorScale_inactive = function(ignore){return "#bbbbbb";}
		var colorScale_oneColor = function(ignore){return "#515151";}
		//----------------------------------------------------------------------
		
		// --- Define & draw axes ----------------------------------------------
		var xAxisFn = d3.svg.axis()
				.scale(xScale_dot)
				.orient("bottom");
		
		var yAxisFn = d3.svg.axis()
				.scale(yScale_dot)
				.orient("left");
					
		var xAxis = dotGraphic_svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(" + [margin.left, height_dotGraphic + margin.top] + ")")
			.call(xAxisFn);
			
		xAxis.append("text")
			.text("Weeks")
			.attr("class", "label")
			.attr("text-anchor", "middle")
			.attr("alignment-baseline", "middle")
			.attr("transform", "translate(" + [width_dotGraphic/2, 40 ] + ")")
			
		var yAxis = dotGraphic_svg.append("g")
			.attr("class", "y axis")
			.attr("transform", "translate(" + [margin.left, margin.top] + ")")
			.call(yAxisFn);
			
		yAxis.append("text")
			.text("Number of Patients")
			.attr("class", "label")
			.attr("text-anchor", "middle")
			.attr("alignment-baseline", "middle")
			.attr("transform", "translate(" + [-35, height_dotGraphic/2] + ")rotate(-90)")
			
		//----------------------------------------------------------------------
		
		
		// --- Draw Buttons ----------------------------------------------------
		
		var roundedRect_w = 160,
				roundedRect_h = 40,
				roundedRect_r = 10;
		
		// Cancer select buttons
		var cancerButtons = selCancerGraphic.selectAll("g")
				.data(cancerTypes)
				.enter()
				.append("g")
				.attr("class", "cancerButton selected")
				.attr("transform", function(d,i) {
					// Make 2 columns of buttons
					var nRows = Math.ceil(cancerTypes.length/2)-1;
					if( i <= nRows ){
						return "translate(" + [0, i*(roundedRect_h+5)] + ")";
					}else{
						return "translate(" + [width_selCancer/2, (i-1-nRows)*(roundedRect_h+5)] + ")";
					}
				});
		
		var cancerButton_shapes = cancerButtons
				.append("path")
					.attr("d", createPillButton(0,0, roundedRect_w, roundedRect_h, roundedRect_r))
					.attr("stroke", "#777777");
		
		var cancerButton_text = cancerButtons
				.append("text")
				.text(function(d) {return d;})
				.attr("class", "buttonText")
				.attr("transform", "translate(" + 
					[(roundedRect_w - roundedRect_r)/2, roundedRect_h/2] + 
				")");
				
		// Treatment select buttons
		var treatmentButtons = selTreatGraphic.selectAll("g")
				.data(treatmentTypes)
				.enter()
				.append("g")
				.attr("class", "treatmentButton selected")
				.attr("transform", function(d,i) {
					return "translate(" + [0, i*(roundedRect_h+5)] + ")";
				});
		
		var treatmentButton_shapes = treatmentButtons
				.append("path")
					.attr("d", createPillButton(0,0, roundedRect_w, roundedRect_h, roundedRect_r))
					.attr("stroke", "#777777");
		
		var treatmentButton_text = treatmentButtons
				.append("text")
				.text(function(d) {return d;})
				.attr("class", "buttonText")
				.attr("transform", "translate(" + 
					[(roundedRect_w - roundedRect_r)/2, roundedRect_h/2] + 
				")");
				
				
		// Reset Buttons
		var resetCancerButton = d3.select(".selCancer.well>h4")
				.append("p")
				.attr("class", "resetButton cancerButton")
				.text(" reset")
				.on("click", function(){
					visitData = filterOnClick(visitData_full, this);
					redraw(visitData);
				})
				
		var resetTreatButton = d3.select(".selTreatment.well>h4")
				.append("p")
				.attr("class", "resetButton treatmentButton")
				.text("  reset")
				.on("click", function(){
					visitData = filterOnClick(visitData_full, this);
					visitData = visitData
						.sort(sortByCancerFreqThenWeek);	
					visitData = accumWeeks(visitData);
					redraw(visitData);
				})
				
				
		// Clear Buttons
		var clearCancerButton = d3.select(".selCancer.well>h4")
				.append("p")
				.attr("class", "clearButton cancerButton")
				.text(" clear")
				.on("click", function(){
					visitData = filterOnClick(visitData_full, this);
					visitData = visitData
						.sort(sortByCancerFreqThenWeek);	
					visitData = accumWeeks(visitData);
					redraw(visitData);
				})
				
		var clearTreatButton = d3.select(".selTreatment.well>h4")
				.append("p")
				.attr("class", "clearButton treatmentButton")
				.text(" clear")
				.on("click", function(){
					visitData = filterOnClick(visitData_full, this);
					visitData = visitData
						.sort(sortByCancerFreqThenWeek);	
					visitData = accumWeeks(visitData);
					redraw(visitData);
				})
				
				
		// Recolor Buttons
		var recolorButton_w = 100
		var recolorButton_h = 35
		var recolorButton_r = 8
		
		var recolorButtonGraphic = dotGraphic_svg.append("g")
				.attr("transform", "translate(" + [
					margin.left + width_dotGraphic + 40, 
					margin.top + height_dotGraphic/2 - 2*recolorButton_h
					] + ")");
		
		recolorButtonGraphic.append("text")
			.text("Colorize by:")
		
		var colorOptions = ["Cancer Type", "Treatment Modality", "Single Color"];
		
		var recolorButtons = recolorButtonGraphic.selectAll("g")
				.data(colorOptions)
				.enter()
				.append("g")
				.attr("class", function(d,i) {
					if(i === 0){return "recolorButton selected"};
					return "recolorButton";
				})
				.attr("transform", function(d,i) {
					return "translate(" + [recolorButton_r, i*(recolorButton_h+5)+8] + ")";
				});
		
		var recolorButton_shapes = recolorButtons
				.append("path")
					.attr("d", createPillButton(0,0, recolorButton_w, recolorButton_h, recolorButton_r))
					.attr("fill", "#515151")
					.attr("stroke", "#777777");
		
		var recolorButton_text = recolorButtons
				.append("text")
				.text(function(d) {return d;})
				.attr("class", "recolorButtonText buttonText")
				.attr("transform", "translate(" + 
					[(recolorButton_w - recolorButton_r)/2, recolorButton_h/2] + 
				")");
				
		//----------------------------------------------------------------------
		
		
		// --- Add button functionality ----------------------------------------
		cancerButtons
			.on("mouseover", function(){
					d3.select(this).classed("hover", true);
				})
			.on("mouseout", function(){
					d3.select(this).classed("hover", false);
				});
				
		treatmentButtons
			.on("mouseover", function(){
					d3.select(this).classed("hover", true);
				})
			.on("mouseout", function(){
					d3.select(this).classed("hover", false);
				});
				
		recolorButtons
			.on("mouseover", function(){
					d3.select(this).classed("hover", true);
				})
			.on("mouseout", function(){
					d3.select(this).classed("hover", false);
				});
				
		cancerButtons
			.on("click", function(){
					visitData = filterOnClick(visitData_full, this);
					visitData = visitData
						.sort(sortByCancerFreqThenWeek);	
					visitData = accumWeeks(visitData);
					redraw(visitData);
				});
				
		treatmentButtons
			.on("click", function(){
					visitData = filterOnClick(visitData_full, this);
					visitData = visitData
						.sort(sortByCancerFreqThenWeek);	
					visitData = accumWeeks(visitData);
					redraw(visitData);
				});
				
		recolorButtons
			.on("click", function(d){
					recolor(d);
				});
				
				
		
		//----------------------------------------------------------------------
		
		
		// --- Plot points -----------------------------------------------------
		
		recolor("Cancer Type") //*NOTE* recolor calls redraw!
		
		//----------------------------------------------------------------------
		
		</script>

</body>

</html>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js to a secure url

https://d3js.org/d3.v3.js

https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js