/index.html
Created Aug 23, 2012
A D3.js dashboard with a console for selecting dimensions
| <html> | |
| <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> | |
| <head> | |
| <title>D3.js Dashboard Introduction</title> | |
| <script src="http://d3js.org/d3.v2.js"></script> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> | |
| <script> | |
| function getMaxObjectValue(metric, graph_metric) { | |
| var values = []; | |
| for (var i = 0; i < metric.length; i++) { | |
| for (var k = 0; k < graph_metric.length; k++) { | |
| if (parseFloat(metric[i][""+graph_metric[k]]) < 1) { | |
| values.push(parseFloat(metric[i][""+graph_metric[k]])); | |
| } else { | |
| values.push(Math.ceil(parseFloat(metric[i][""+graph_metric[k]]))); | |
| } | |
| } | |
| } | |
| values.sort(function(a,b){return a-b}); | |
| return values[values.length-1]; | |
| } | |
| function getMinObjectValue(metric, graph_metric) { | |
| var values = []; | |
| for (var i = 0; i < metric.length; i++) { | |
| for (var k = 0; k < graph_metric.length; k++) { | |
| if (parseFloat(metric[i][""+graph_metric[k]]) < 1) { | |
| values.push(parseFloat(metric[i][""+graph_metric[k]])); | |
| } else { | |
| values.push(Math.floor(parseFloat(metric[i][""+graph_metric[k]]))); | |
| } | |
| } | |
| } | |
| values.sort(function(a,b){return a-b}); | |
| return values[0]; | |
| } | |
| function getDate(d) { | |
| return new Date(d.date); | |
| } | |
| function buildLineChart(data, title, graph_metric, width, height, xaxislabel, yaxislabel) { | |
| var metric = data.slice(0); | |
| metric.splice(0,1); | |
| // define graph size parameters | |
| var margin = {top: 30, right: 10, bottom: 40, left: 60}, width = width - margin.left - margin.right, height = height - margin.top - margin.bottom; | |
| //color scale for multiple lines | |
| var colorscale = d3.scale.category10(); | |
| var minDate = getDate(metric[0]), | |
| maxDate = getDate(metric[metric.length-1]), | |
| minObjectValue = getMinObjectValue(metric, graph_metric), | |
| maxObjectValue = getMaxObjectValue(metric, graph_metric); | |
| //create the graph object | |
| var vis= d3.select("#metrics").append("svg") | |
| .data(metric) | |
| .attr("class", "metrics-container") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var y = d3.scale.linear().domain([ minObjectValue - (.1 * minObjectValue) , maxObjectValue + (.1 * maxObjectValue) ]).range([height, 0]), | |
| x = d3.time.scale().domain([minDate, maxDate]).range([0, width]); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(2); | |
| vis.append("text") | |
| .attr("style", "font-family: Helvetica, Arial; font-size: 18px; font-weight: bold;") | |
| .attr("dx", function(d) { return 10; }) | |
| .attr("dy", function(d) { return -10; }) | |
| .text(''+title); | |
| //append the axes | |
| vis.append("g") | |
| .attr("class", "axis") | |
| .call(yAxis); | |
| vis.append("g") | |
| .attr("class", "axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| //add the axes labels | |
| vis.append("text") | |
| .attr("class", "axis-label") | |
| .attr("text-anchor", "end") | |
| .attr("x", 20) | |
| .attr("y", height + 34) | |
| .text(xaxislabel); | |
| vis.append("text") | |
| .attr("class", "axis-label") | |
| .attr("text-anchor", "end") | |
| .attr("y", 6) | |
| .attr("dy", "-5em") | |
| .attr("transform", "rotate(-90)") | |
| .text(yaxislabel); | |
| var lines = []; | |
| var circles = []; | |
| //loop through graph objects, if it's a single graph there will only be one object | |
| for (var z = 0; z < graph_metric.length; z++) { | |
| lines[z] = d3.svg.line() | |
| .x(function(d) { return x(getDate(d)); }) | |
| .y(function(d) { return (isNaN( y(d[''+graph_metric[z]])) ? 0 : y(d[''+graph_metric[z]])); }) | |
| vis.append("svg:path") | |
| .attr("d", lines[z](metric)) | |
| .style("stroke", function() { | |
| return colorscale(""+z); | |
| }) | |
| .style("fill", "none") | |
| .style("stroke-width", "2.5"); | |
| var dataCirclesGroup = vis.append('svg:g'); | |
| var circles = dataCirclesGroup.selectAll('.data-point') | |
| .data(metric); | |
| circles | |
| .enter() | |
| .append('svg:circle') | |
| .attr('class', 'dot') | |
| .attr('fill', function() { return colorscale(""+z); }) | |
| .attr('cx', function(d) { return x(getDate(d)); }) | |
| .attr('cy', function(d) { return (isNaN( y(d[''+graph_metric[z]])) ? 0 : y(d[''+graph_metric[z]])); }) | |
| .attr('r', function() { return 3; }) | |
| .on("mouseover", function(d) { | |
| d3.select(this) | |
| .attr("r", 8) | |
| .attr("class", "dot-selected") | |
| .transition() | |
| .duration(750); | |
| }) | |
| .on("mouseout", function(d) { | |
| d3.select(this) | |
| .attr("r", 3) | |
| .attr("class", "dot") | |
| .transition() | |
| .duration(750); | |
| }) | |
| .append("svg:title") | |
| .text(function(d) { | |
| var return_text = ""; | |
| if (graph_metric.length > 1) { | |
| return_text += graph_metric[z] + "\n"; | |
| } | |
| return_text += $.datepicker.formatDate('yy-mm-dd', new Date(d.date)) + ": "; | |
| return_text += Math.round(d[''+graph_metric[z]] * 100) / 100; | |
| return return_text; | |
| }); | |
| } | |
| } | |
| function safeDivide(num1, num2) { | |
| if (isNaN(parseFloat(num2)) || isNaN(parseFloat(num1)) || num2 == 0) { | |
| return 0; | |
| } | |
| return Math.round( parseFloat(num1) / parseFloat(num2) * 100 ) / 100; | |
| } | |
| function getData() { | |
| var data = []; | |
| var metrics = | |
| {"countries": | |
| [ | |
| { | |
| "country": "USA", | |
| "metrics": | |
| [ | |
| { | |
| "date" : "2012-08-19", | |
| "DAU" : 500, | |
| "DNU" : 200, | |
| "sessions" : 100, | |
| "sessions_length" : 2000, | |
| "d1_retention" : 102, | |
| "d7_retention" : 48, | |
| "d30_retention" : 16 | |
| }, | |
| { | |
| "date" : "2012-08-20", | |
| "DAU" : 800, | |
| "DNU" : 300, | |
| "sessions" : 120, | |
| "sessions_length" : 4000, | |
| "d1_retention" : 82, | |
| "d7_retention" : 58, | |
| "d30_retention" : 19 | |
| }, | |
| { | |
| "date" : "2012-08-21", | |
| "DAU" : 1000, | |
| "DNU" : 700, | |
| "sessions" : 200, | |
| "sessions_length" : 5000, | |
| "d1_retention" : 285, | |
| "d7_retention" : 126, | |
| "d30_retention" : 9 | |
| } | |
| ] | |
| }, | |
| { | |
| "country": "Estonia", | |
| "metrics": | |
| [ | |
| { | |
| "date" : "2012-08-19", | |
| "DAU" : 1500, | |
| "DNU" : 1000, | |
| "sessions" : 430, | |
| "sessions_length" : 5100, | |
| "d1_retention" : 948, | |
| "d7_retention" : 698, | |
| "d30_retention" : 294 | |
| }, | |
| { | |
| "date" : "2012-08-20", | |
| "DAU" : 2094, | |
| "DNU" : 1294, | |
| "sessions" : 491, | |
| "sessions_length" : 6958, | |
| "d1_retention" : 1029, | |
| "d7_retention" : 918, | |
| "d30_retention" : 485 | |
| }, | |
| { | |
| "date" : "2012-08-21", | |
| "DAU" : 2594, | |
| "DNU" : 1592, | |
| "sessions" : 592, | |
| "sessions_length" : 8492, | |
| "d1_retention" : 1349, | |
| "d7_retention" : 1029, | |
| "d30_retention" : 685 | |
| } | |
| ] | |
| }, | |
| { | |
| "country": "Finland", | |
| "metrics": | |
| [ | |
| { | |
| "date" : "2012-08-19", | |
| "DAU" : 984, | |
| "DNU" : 596, | |
| "sessions" : 349, | |
| "sessions_length" : 49852, | |
| "d1_retention" : 294, | |
| "d7_retention" : 102, | |
| "d30_retention" : 55 | |
| }, | |
| { | |
| "date" : "2012-08-20", | |
| "DAU" : 890, | |
| "DNU" : 698, | |
| "sessions" : 589, | |
| "sessions_length" : 60921, | |
| "d1_retention" : 304, | |
| "d7_retention" : 198, | |
| "d30_retention" : 78 | |
| }, | |
| { | |
| "date" : "2012-08-21", | |
| "DAU" : 1201, | |
| "DNU" : 509, | |
| "sessions" : 492, | |
| "sessions_length" : 70982, | |
| "d1_retention" : 295, | |
| "d7_retention" : 159, | |
| "d30_retention" : 98 | |
| } | |
| ] | |
| } | |
| ] | |
| }; | |
| var i = 0; | |
| $.each(metrics.countries, function() { | |
| data[i] = []; | |
| data[i][0] = this.country; | |
| $.each(this.metrics, function() { | |
| var metric = this; | |
| var temp_date = new Date(this.date); | |
| var month = temp_date.getMonth(); | |
| var date = temp_date.getDate(); | |
| var year = temp_date.getFullYear(); | |
| metric.date = month + '/' + date + '/' + year; | |
| data[i].push(metric); | |
| }); | |
| i++; | |
| }); | |
| return data; | |
| } | |
| function buildConsole(data) { | |
| var html = ""; | |
| html += "<div id=\"country-selector\" class=\"console-element\">"; | |
| for (var i = 0; i < data.length; i++) { | |
| html += "<div style=\"width: 150px; float: left;\">"; | |
| html += "<input name=\"countries\" id=\"country-selector-" + data[i][0] + "\" type=\"checkbox\" "; | |
| if (i == 0) { | |
| html += "checked"; // set the first country to checked to provide some default data for the graphs | |
| } | |
| html += " value=\"" + data[i][0] + "\" /> "; | |
| html += data[i][0]; | |
| html += "</div>"; | |
| } | |
| html += "</div>"; | |
| $('#console').html(html); | |
| } | |
| function createAverages(metric) { | |
| for (var i = 1; i < metric.length; i++) { | |
| metric[i].d1_retention_pct = safeDivide(metric[i].d1_retention, metric[i].DNU) * 100; | |
| metric[i].d7_retention_pct = safeDivide(metric[i].d7_retention, metric[i].DNU) * 100; | |
| metric[i].d30_retention_pct = safeDivide(metric[i].d30_retention, metric[i].DNU) * 100; | |
| metric[i].average_session_length = safeDivide(metric[i].sessions_length, metric[i].sessions) / 60; | |
| metric[i].average_sessions_per_user = safeDivide(metric[i].sessions, metric[i].DAU); | |
| } | |
| return metric; | |
| } | |
| function getCountries() { | |
| var elements = $("input:checkbox[name=countries]:checked"); | |
| var countries = []; | |
| $.each(elements, function () { | |
| countries.push($(this).val()); | |
| }); | |
| return countries; | |
| } | |
| function aggregateMetric(metrics, countries) { | |
| var metric = []; //the single metric array of dates that we'll return, | |
| //aggregated over the selected countries | |
| var count = 0; // a count of countries being aggregated over | |
| for (var i = 0; i < metrics.length; i++) { | |
| if (jQuery.inArray(metrics[i][0], countries) > -1) { //this is a country we should aggregate for | |
| if (count == 0) { | |
| metric = cloneMetric(metrics[i]); // since metric is empty, set metric to the first set of metrics we find | |
| count++; | |
| } else { | |
| metric[0] = metric[0] + metrics[i][0]; //combine the country names for auditing | |
| for (var j = 1; j < metric.length; j++) { | |
| //iterate through metric[j] object and add metrics[i][j] values to it. | |
| //note: this requires that each country has the same number of days' worth of data! | |
| for (var key in metrics[i][j]) { | |
| if (key != "date") { // don't add the date | |
| metric[j][""+key] += metrics[i][j][""+key]; | |
| } | |
| } | |
| } | |
| count++; | |
| } | |
| } | |
| } | |
| metric = createAverages(metric); //create the averaged values from the counts | |
| //(like retention metrics, average session length, etc.) | |
| return metric; | |
| } | |
| function resetCharts(metrics) { | |
| var countries = getCountries(); // get checked items | |
| var metric = aggregateMetric(metrics, countries); // build one metric item out of the selected countries and the full dataset | |
| $('#metrics').html(''); // reset the metrics div html | |
| buildLineChart(metric, "Retention", ['d1_retention_pct', 'd7_retention_pct', 'd30_retention_pct'], 1000, 300, "Date", "Retention (percentage)"); | |
| buildLineChart(metric, "Daily New Users", ['DNU'], 500, 300, "Date", "New Users"); | |
| buildLineChart(metric, "Daily Active Users", ['DAU'], 500, 300, "Date", "Users"); | |
| buildLineChart(metric, "Average Session Length", ['average_session_length'], 500, 300, "Date", "Session Length (minutes)"); | |
| buildLineChart(metric, "Average Sessions per User", ['average_sessions_per_user'], 500, 300, "Date", "Sessions per User"); | |
| } | |
| function cloneData(data) { | |
| //create a "deep copy" of the objects within the metrics array | |
| //ensures that objects are not copied by reference | |
| var metrics = []; | |
| for (var i = 0; i < data.length; i++) { | |
| metrics.push(cloneMetric(data[i])); | |
| } | |
| return metrics; | |
| } | |
| function cloneMetric(metric) { | |
| var tmp = []; | |
| tmp[0] = metric[0]; | |
| for (var k = 1; k < metric.length; k++) { | |
| tmp.push( jQuery.extend(true, {}, metric[k]) ); | |
| } | |
| return tmp; | |
| } | |
| $(document).ready(function() { | |
| var data = getData(); | |
| buildConsole(data); | |
| resetCharts(data); | |
| $('#country-selector').change(function() { | |
| var metrics = cloneData(data); | |
| $('#country-selector').stop().css("background-color", "#FFFF9C").animate({ backgroundColor: "#CCFFE6"}, 1500); | |
| resetCharts(metrics); | |
| }); | |
| }); | |
| </script> | |
| <style> | |
| .axis path, .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| stroke-width: 1.5px; | |
| } | |
| body { | |
| background: #FFFFFF; | |
| background-repeat:repeat-x; | |
| text-align: center; | |
| font: 10px sans-serif; | |
| } | |
| .dot { | |
| stroke-width: 1.5px; | |
| } | |
| .dot-selected { | |
| fill: #B0C4DE; | |
| stroke: #B0C4DE; | |
| stroke-width: 1.5px; | |
| } | |
| .metrics-container { | |
| width: auto; | |
| height: auto; | |
| padding: 10px 10px 10px 10px; | |
| border-style: solid; | |
| border-width: 1px; | |
| float: left; | |
| margin-left: 20px; | |
| margin-top: 20px; | |
| } | |
| #console { | |
| background-color: #CCFFE6; | |
| font-size: 12px; | |
| margin: 2px 2px 2px 2px; | |
| padding: 4px 4px 4px 4px; | |
| width: 95%; | |
| float: left; | |
| text-align: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>A D3.js Dashboard</h1> | |
| <div id="console"> | |
| </div> | |
| <div id="metrics"> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment