| <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> |