prototype/visualization/visualization.html - cobalt - Git at Google

 <html>
   <head>
     <!--Load the AJAX API-->
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <!-- Defines the variables named foo_data and foo_data_sc -->
     <script type="text/javascript" src="../out/data.js"></script>

     <script type="text/javascript">

       // Load the Visualization API and some packages.
       google.charts.load('current', {'packages':['corechart', 'geochart', 'table']});

       // Set a callback to run when the Google Visualization API is loaded.
       google.charts.setOnLoadCallback(drawCharts);

       function privacyBudget(rappor_params) {
         p = rappor_params.probIrr0;
         q = rappor_params.probIrr1;
         h = Math.max(1., rappor_params.numHashes); // Basic RAPPOR is signaled by numHashes == 0
         return h * Math.abs(Math.log(q * (1 - p) / (p * (1 - q))));
       }

       // Callback that invokes the chart-drawing functions.
       // NOTE: "_SC" refers to charts that represent data from the
       // "Straight Counting" pipeline.
       function drawCharts() {
         drawUsageByModulePieChart_SC();
         // without differentially private release
         drawUsageByModuleIntervalChart(false);
         // with differentially private release
         drawUsageByModuleIntervalChart(true);

         drawUsageByCityGeoChart_SC();
         drawUsageAndRatingBubbleChart();

         drawUsageByHourColumnChart_SC();
         drawUsageByHourColumnChart();

         drawPopularUrlsTables();
         drawPopularUrlsColumnChart_SC();

         drawPopularHelpQueriesColumnChart_SC();
         drawPopularHelpQueriesTables();
       };

       function drawUsageByModulePieChart_SC() {
         // Parse the data table.
         var data = new google.visualization.DataTable(usage_by_module_data_sc);

         // Set chart options
         var options = {'title':'Top Modules by Usage',
                        'width':400,
                        'height':300};
         // Instantiate and draw our chart.
         var chart = new google.visualization.PieChart(document.getElementById('usage_by_module_chart_sc'));
         chart.draw(data, options);
       };

       function drawUsageByModuleIntervalChart(with_private_release) {
         // Format the title to include privacy budget
         var privacy_eps = privacyBudget(usage_by_module_params).toFixed(2);
         var title = 'Top Modules by Usage, Estimates with 95% Confidence Intervals' +
         ' (privacy budget = ' + privacy_eps + ')';
         if (with_private_release) {
           title = 'Modules by Usage. Weak RAPPOR privacy with Laplacian noise for differentially private release.' +
           ' (Privacy budget = 1)';
         }

         var usage_data = with_private_release ? usage_by_module_pr_data : usage_by_module_data
         var data = new google.visualization.DataTable(usage_data);

         var chart_height = with_private_release ? 750 : 450
         var chart_width = with_private_release ? 650 : 600
         var options = {
             title: title,
             curveType: 'function',
             pointSize: 5,
             lineWidth: 0,
             orientation: 'vertical',
             height: chart_height,
             width: chart_width,
             intervals: { style: 'bars', color: 'grey' },
             vAxis: {title: 'Module'},
             hAxis: {title: 'Usage Count', viewWindow: {min: 0},
                     minorGridlines: {count: 4}}
         };
         element_id = with_private_release ? 'usage_by_module_with_pr_chart' : 'usage_by_module_chart'
         var chart = new google.visualization.LineChart(document.getElementById(element_id));
         chart.draw(data, options);
       };

       function drawUsageByCityGeoChart_SC() {
         // Parse the data table.
         var data = new google.visualization.DataTable(usage_by_city_data_sc)
         var options = {
           region: 'US',
           'width': 500,
           backgroundColor: '#81d4fa',
           datalessRegionColor: '#85e085',
           displayMode: 'markers',
           colorAxis: {colors: ['red', 'yellow', 'green']}
         };
         // Instantiate and draw our chart.
         var chart = new google.visualization.GeoChart(document.getElementById('usage_by_city_chart_sc'));
         chart.draw(data, options);
       }

       function drawUsageAndRatingBubbleChart() {
         // Parse the data table.
         var data = new google.visualization.DataTable(usage_by_city_data)

         var options = {
           title: 'Correlation between Fuchsia usage counts and ' +
                  'ratings for various US Cities. (Size of bubble ' +
                  'reflects, but is not proportional to, size of ' +
                  'confidence interval for count.)',
           width: 900,
           height: 600,
           hAxis: {title: 'Usage Count'},
           vAxis: {title: 'Rating'},
           sizeAxis: {minValue: 0, maxValue: 200, minSize: 5, maxSize: 25},
           bubble: {textStyle: {fontSize: 11}}
         };

         var chart = new google.visualization.BubbleChart(document.getElementById('usage_and_rating_chart'));
         chart.draw(data, options);
       }

       function drawUsageByHourColumnChart_SC() {
         // Parse the data table.
         var data = new google.visualization.DataTable(usage_by_hour_data_sc)
         var options = {
           title: 'Fuchsia usage, by hour of the day, PST',
           'width': 650,
           'height': 400,
           hAxis: {
             title: 'Hour of Day',
             gridlines: {count: 12},
           },
           vAxis: {viewWindow: {max: 1200}},
         };

         // Instantiate and draw our chart.
         var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart_sc'));
         chart.draw(data, options);
       }

       function drawUsageByHourColumnChart() {
         // Format the title to include privacy budget
         var privacy_eps = privacyBudget(usage_by_hour_params).toFixed(2);
         var title = 'Fuchsia usage by hour, estimates with 95% Confidence Intervals' +
         ' (privacy budget = ' + privacy_eps + ')';

         // Parse the data table.
         var data = new google.visualization.DataTable(usage_by_hour_data);
         var options = {
           title: title,
           'width': 900,
           'height': 400,
           intervals: { color: 'black', 'lineWidth':2, 'barWidth': 1.2},
           hAxis: {
             title: 'Hour of Day',
             gridlines: {count: 12},
           },
           vAxis: {viewWindow: {max: 1200}},
         };

         // Instantiate and draw our chart.
         var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart'));
         chart.draw(data, options);
       }

       function drawPopularHelpQueriesColumnChart_SC() {
         // Parse the data table.
         var data = new google.visualization.DataTable(popular_help_queries_histogram_data_sc)
         var options = {
           title: 'Popular help queries -- histogram',
           'width': 700,
           hAxis: {
             title: 'Popular help queries',
             gridlines: {count: 12},
           },
         };

         // Instantiate and draw our chart.
         var chart = new google.visualization.ColumnChart(document.getElementById('popular_help_queries_chart_sc'));
         chart.draw(data, options);
       }

       function drawPopularUrlsColumnChart_SC() {
         // Parse the data table.
         var data = new google.visualization.DataTable(popular_urls_histogram_data_sc)
         var options = {
           title: 'Popular urls -- histogram',
           'width': 700,
           'height': 400,
           hAxis: {
             title: 'Popular urls',
             gridlines: {count: 12},
           },
         };

         // Instantiate and draw our chart.
         var chart = new google.visualization.ColumnChart(document.getElementById('popular_urls_chart_sc'));
         chart.draw(data, options);
       }

       function drawTable(data_var, element_id) {
         // Parse the data table.
         var data = new google.visualization.DataTable(data_var);

         // Instantiate and draw our table.
         var table = new google.visualization.Table(document.getElementById(element_id));

         table.draw(data, {
             showRowNumber: false,
             alternatingRowStyle: true,
             sortAscending: false,
             allowHtml: true,
             cssClassNames: {headerRow: 'table_header'},
             width: 500,
             frozenColumns: 1,
         });
       }

       function drawPopularUrlsTables() {
         drawTable(popular_urls_data_sc, 'popular_urls_table_sc')
         drawTable(popular_urls_data, 'popular_urls_table')
       }

       function drawPopularHelpQueriesTables() {
         drawTable(popular_help_queries_data_sc, 'popular_help_queries_table_sc')
         drawTable(popular_help_queries_data, 'popular_help_queries_table')
       }

     </script>
   </head>

   <style>
 .table_header {
    text-align: left;
   }
  </style>

   <body>
     <table>
       <tr>
         <th> Straight Counting Pipeline </th>
         <th> Cobalt Prototype Pipeline </th>
       </tr>

       <tr>
         <td><div id="usage_by_module_chart_sc"></div></td>
         <td><div id="usage_by_module_chart"></div>
         </td>
       </tr>

       <tr>
         <td></div></td>
         <td><div id="usage_by_module_with_pr_chart"></div>
         </td>
       </tr>

       <tr>
         <td>
           Fuchsia Usage and Ratings By City
           <div id="usage_by_city_chart_sc"></div>
         </td>
         <td>
           <div id="usage_and_rating_chart"></div>
         </td>
       </tr>

       <tr>
         <td>
           <div id="usage_by_hour_chart_sc"></div>
         </td>
         <td>
           <div id="usage_by_hour_chart"></div>
         </td>
       </tr>

       <tr>
         <td>&nbsp;</td><td>&nbsp;</td>
       </tr>

       <tr>
         <td>
           Top 50 URLs by usage
           <div id="popular_urls_table_sc"></div>
         </td>
         <td style="vertical-align:top">
           URLs decrypted because they occur at least 20 times.
           <div id="popular_urls_table"></div>
         </td>
       </tr>

       <tr>
         <td colspan="2"><div id="popular_urls_chart_sc"></div></td>
       </tr>

       <tr>
         <td>&nbsp;</td><td>&nbsp;</td>
       </tr>

       <tr>
         <td colspan="2"><div id="popular_help_queries_chart_sc"></div></td>
       </tr>

       <tr>
         <td>&nbsp;</td><td>&nbsp;</td>
       </tr>

       <tr>
         <td>
           Fuchsia Top 50 Popular Help Queries
           <div id="popular_help_queries_table_sc"></div>
         </td>
         <td style="vertical-align:top">
           Help Queries decrypted because they occur at least 20 times.
           <div id="popular_help_queries_table"></div>
         </td>
       </tr>

     </table>


   </body>
 </html>
	<html>
	<head>
	<!--Load the AJAX API-->
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<!-- Defines the variables named foo_data and foo_data_sc -->
	<script type="text/javascript" src="../out/data.js"></script>

	<script type="text/javascript">

	// Load the Visualization API and some packages.
	google.charts.load('current', {'packages':['corechart', 'geochart', 'table']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.charts.setOnLoadCallback(drawCharts);

	function privacyBudget(rappor_params) {
	p = rappor_params.probIrr0;
	q = rappor_params.probIrr1;
	h = Math.max(1., rappor_params.numHashes); // Basic RAPPOR is signaled by numHashes == 0
	return h * Math.abs(Math.log(q * (1 - p) / (p * (1 - q))));
	}

	// Callback that invokes the chart-drawing functions.
	// NOTE: "_SC" refers to charts that represent data from the
	// "Straight Counting" pipeline.
	function drawCharts() {
	drawUsageByModulePieChart_SC();
	// without differentially private release
	drawUsageByModuleIntervalChart(false);
	// with differentially private release
	drawUsageByModuleIntervalChart(true);

	drawUsageByCityGeoChart_SC();
	drawUsageAndRatingBubbleChart();

	drawUsageByHourColumnChart_SC();
	drawUsageByHourColumnChart();

	drawPopularUrlsTables();
	drawPopularUrlsColumnChart_SC();

	drawPopularHelpQueriesColumnChart_SC();
	drawPopularHelpQueriesTables();
	};

	function drawUsageByModulePieChart_SC() {
	// Parse the data table.
	var data = new google.visualization.DataTable(usage_by_module_data_sc);

	// Set chart options
	var options = {'title':'Top Modules by Usage',
	'width':400,
	'height':300};
	// Instantiate and draw our chart.
	var chart = new google.visualization.PieChart(document.getElementById('usage_by_module_chart_sc'));
	chart.draw(data, options);
	};

	function drawUsageByModuleIntervalChart(with_private_release) {
	// Format the title to include privacy budget
	var privacy_eps = privacyBudget(usage_by_module_params).toFixed(2);
	var title = 'Top Modules by Usage, Estimates with 95% Confidence Intervals' +
	' (privacy budget = ' + privacy_eps + ')';
	if (with_private_release) {
	title = 'Modules by Usage. Weak RAPPOR privacy with Laplacian noise for differentially private release.' +
	' (Privacy budget = 1)';
	}

	var usage_data = with_private_release ? usage_by_module_pr_data : usage_by_module_data
	var data = new google.visualization.DataTable(usage_data);

	var chart_height = with_private_release ? 750 : 450
	var chart_width = with_private_release ? 650 : 600
	var options = {
	title: title,
	curveType: 'function',
	pointSize: 5,
	lineWidth: 0,
	orientation: 'vertical',
	height: chart_height,
	width: chart_width,
	intervals: { style: 'bars', color: 'grey' },
	vAxis: {title: 'Module'},
	hAxis: {title: 'Usage Count', viewWindow: {min: 0},
	minorGridlines: {count: 4}}
	};
	element_id = with_private_release ? 'usage_by_module_with_pr_chart' : 'usage_by_module_chart'
	var chart = new google.visualization.LineChart(document.getElementById(element_id));
	chart.draw(data, options);
	};

	function drawUsageByCityGeoChart_SC() {
	// Parse the data table.
	var data = new google.visualization.DataTable(usage_by_city_data_sc)
	var options = {
	region: 'US',
	'width': 500,
	backgroundColor: '#81d4fa',
	datalessRegionColor: '#85e085',
	displayMode: 'markers',
	colorAxis: {colors: ['red', 'yellow', 'green']}
	};
	// Instantiate and draw our chart.
	var chart = new google.visualization.GeoChart(document.getElementById('usage_by_city_chart_sc'));
	chart.draw(data, options);
	}

	function drawUsageAndRatingBubbleChart() {
	// Parse the data table.
	var data = new google.visualization.DataTable(usage_by_city_data)

	var options = {
	title: 'Correlation between Fuchsia usage counts and ' +
	'ratings for various US Cities. (Size of bubble ' +
	'reflects, but is not proportional to, size of ' +
	'confidence interval for count.)',
	width: 900,
	height: 600,
	hAxis: {title: 'Usage Count'},
	vAxis: {title: 'Rating'},
	sizeAxis: {minValue: 0, maxValue: 200, minSize: 5, maxSize: 25},
	bubble: {textStyle: {fontSize: 11}}
	};

	var chart = new google.visualization.BubbleChart(document.getElementById('usage_and_rating_chart'));
	chart.draw(data, options);
	}

	function drawUsageByHourColumnChart_SC() {
	// Parse the data table.
	var data = new google.visualization.DataTable(usage_by_hour_data_sc)
	var options = {
	title: 'Fuchsia usage, by hour of the day, PST',
	'width': 650,
	'height': 400,
	hAxis: {
	title: 'Hour of Day',
	gridlines: {count: 12},
	},
	vAxis: {viewWindow: {max: 1200}},
	};

	// Instantiate and draw our chart.
	var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart_sc'));
	chart.draw(data, options);
	}

	function drawUsageByHourColumnChart() {
	// Format the title to include privacy budget
	var privacy_eps = privacyBudget(usage_by_hour_params).toFixed(2);
	var title = 'Fuchsia usage by hour, estimates with 95% Confidence Intervals' +
	' (privacy budget = ' + privacy_eps + ')';

	// Parse the data table.
	var data = new google.visualization.DataTable(usage_by_hour_data);
	var options = {
	title: title,
	'width': 900,
	'height': 400,
	intervals: { color: 'black', 'lineWidth':2, 'barWidth': 1.2},
	hAxis: {
	title: 'Hour of Day',
	gridlines: {count: 12},
	},
	vAxis: {viewWindow: {max: 1200}},
	};

	// Instantiate and draw our chart.
	var chart = new google.visualization.ColumnChart(document.getElementById('usage_by_hour_chart'));
	chart.draw(data, options);
	}

	function drawPopularHelpQueriesColumnChart_SC() {
	// Parse the data table.
	var data = new google.visualization.DataTable(popular_help_queries_histogram_data_sc)
	var options = {
	title: 'Popular help queries -- histogram',
	'width': 700,
	hAxis: {
	title: 'Popular help queries',
	gridlines: {count: 12},
	},
	};

	// Instantiate and draw our chart.
	var chart = new google.visualization.ColumnChart(document.getElementById('popular_help_queries_chart_sc'));
	chart.draw(data, options);
	}

	function drawPopularUrlsColumnChart_SC() {
	// Parse the data table.
	var data = new google.visualization.DataTable(popular_urls_histogram_data_sc)
	var options = {
	title: 'Popular urls -- histogram',
	'width': 700,
	'height': 400,
	hAxis: {
	title: 'Popular urls',
	gridlines: {count: 12},
	},
	};

	// Instantiate and draw our chart.
	var chart = new google.visualization.ColumnChart(document.getElementById('popular_urls_chart_sc'));
	chart.draw(data, options);
	}

	function drawTable(data_var, element_id) {
	// Parse the data table.
	var data = new google.visualization.DataTable(data_var);

	// Instantiate and draw our table.
	var table = new google.visualization.Table(document.getElementById(element_id));

	table.draw(data, {
	showRowNumber: false,
	alternatingRowStyle: true,
	sortAscending: false,
	allowHtml: true,
	cssClassNames: {headerRow: 'table_header'},
	width: 500,
	frozenColumns: 1,
	});
	}

	function drawPopularUrlsTables() {
	drawTable(popular_urls_data_sc, 'popular_urls_table_sc')
	drawTable(popular_urls_data, 'popular_urls_table')
	}

	function drawPopularHelpQueriesTables() {
	drawTable(popular_help_queries_data_sc, 'popular_help_queries_table_sc')
	drawTable(popular_help_queries_data, 'popular_help_queries_table')
	}

	</script>
	</head>

	<style>
	.table_header {
	text-align: left;
	}
	</style>

	<body>
	<table>
	<tr>
	<th> Straight Counting Pipeline </th>
	<th> Cobalt Prototype Pipeline </th>
	</tr>

	<tr>
	<td><div id="usage_by_module_chart_sc"></div></td>
	<td><div id="usage_by_module_chart"></div>
	</td>
	</tr>

	<tr>
	<td></div></td>
	<td><div id="usage_by_module_with_pr_chart"></div>
	</td>
	</tr>

	<tr>
	<td>
	Fuchsia Usage and Ratings By City
	<div id="usage_by_city_chart_sc"></div>
	</td>
	<td>
	<div id="usage_and_rating_chart"></div>
	</td>
	</tr>

	<tr>
	<td>
	<div id="usage_by_hour_chart_sc"></div>
	</td>
	<td>
	<div id="usage_by_hour_chart"></div>
	</td>
	</tr>

	<tr>
	<td> </td><td> </td>
	</tr>

	<tr>
	<td>
	Top 50 URLs by usage
	<div id="popular_urls_table_sc"></div>
	</td>
	<td style="vertical-align:top">
	URLs decrypted because they occur at least 20 times.
	<div id="popular_urls_table"></div>
	</td>
	</tr>

	<tr>
	<td colspan="2"><div id="popular_urls_chart_sc"></div></td>
	</tr>

	<tr>
	<td> </td><td> </td>
	</tr>

	<tr>
	<td colspan="2"><div id="popular_help_queries_chart_sc"></div></td>
	</tr>

	<tr>
	<td> </td><td> </td>
	</tr>

	<tr>
	<td>
	Fuchsia Top 50 Popular Help Queries
	<div id="popular_help_queries_table_sc"></div>
	</td>
	<td style="vertical-align:top">
	Help Queries decrypted because they occur at least 20 times.
	<div id="popular_help_queries_table"></div>
	</td>
	</tr>

	</table>


	</body>
	</html>