http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/incubator-logo.png ---------------------------------------------------------------------- diff --git a/_site/images/incubator-logo.png b/_site/images/incubator-logo.png deleted file mode 100644 index c04e70d..0000000 Binary files a/_site/images/incubator-logo.png and /dev/null differ
http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/stout.png ---------------------------------------------------------------------- diff --git a/_site/images/stout.png b/_site/images/stout.png deleted file mode 100644 index 29ec1de..0000000 Binary files a/_site/images/stout.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/stout_inverted.png ---------------------------------------------------------------------- diff --git a/_site/images/stout_inverted.png b/_site/images/stout_inverted.png deleted file mode 100644 index 597c819..0000000 Binary files a/_site/images/stout_inverted.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/system.png ---------------------------------------------------------------------- diff --git a/_site/images/system.png b/_site/images/system.png deleted file mode 100644 index 6849d34..0000000 Binary files a/_site/images/system.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/tap.png ---------------------------------------------------------------------- diff --git a/_site/images/tap.png b/_site/images/tap.png deleted file mode 100644 index 82b4991..0000000 Binary files a/_site/images/tap.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/tap_inverted.png ---------------------------------------------------------------------- diff --git a/_site/images/tap_inverted.png b/_site/images/tap_inverted.png deleted file mode 100644 index dd1b363..0000000 Binary files a/_site/images/tap_inverted.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/userale.png ---------------------------------------------------------------------- diff --git a/_site/images/userale.png b/_site/images/userale.png deleted file mode 100644 index d3267e5..0000000 Binary files a/_site/images/userale.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/images/userale_inverted.png ---------------------------------------------------------------------- diff --git a/_site/images/userale_inverted.png b/_site/images/userale_inverted.png deleted file mode 100644 index c873912..0000000 Binary files a/_site/images/userale_inverted.png and /dev/null differ http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/index.html ---------------------------------------------------------------------- diff --git a/_site/index.html b/_site/index.html deleted file mode 100644 index 04fcdb9..0000000 --- a/_site/index.html +++ /dev/null @@ -1,458 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> - - <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - - <title>Apache SensSoft</title> - <meta name="description" content="The homepage for Apache SensSoft"> - - <link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css"> - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";></script> - <script src="/semantic/dist/semantic.min.js"></script> - <script src="https://d3js.org/d3.v4.min.js";></script> - <script src="/js/main.js"></script> - - <link rel="stylesheet" href="/assets/main.css"> - <link rel="canonical" href="http://localhost:4000/";> - <link rel="alternate" type="application/rss+xml" title="Apache SensSoft" href="/feed.xml"> - - -</head> - - - <body> - - <div class="site-header"> - <div id="main-menu" class="ui inverted padded fixed top borderless menu"> - <a class="site-title" href="/"> - <h3 class="ui inverted header item">Apache SensSoft</h3> - </a> - - <div class="right menu"> - <div class="ui dropdown item"> - Components - <div class="menu"> - <a class="item" href="/system">System</a> - <a class="item" href="/userale">UserALE</a> - <a class="item" href="/distill">Distill</a> - <a class="item" href="/tap">Tap</a> - <a class="item" href="/stout">Stout</a> - </div> - </div> - <div class="ui dropdown item"> - <a href="/docs">Docs</a> - <div class="menu"> - <a class="item" href="/docs/system">System</a> - <a class="item" href="/docs/userale">UserALE</a> - <a class="item" href="/docs/useralejs">UserALE.js</a> - <a class="item" href="/docs/useralepyqt">UserALE.pyqt</a> - <a class="item" href="/docs/distill">Distill</a> - <a class="item" href="/docs/tap">Tap</a> - <a class="item" href="/docs/stout">Stout</a> - </div> - </div> - <a class="item" href="/releases">Releases</a> - <a class="item" href="/community">Community</a> - </div> - </div> -</div> - - - <div class="main-wrapper"> - <div id="main-masthead" class="ui masthead padded center aligned inverted vertical segment"> - - <h1 class="ui header">Apache SensSoft</h1> - <h2 class="ui header">Instrument Software. Understand Humans.</h2> - -</div> - -<div class="ui very padded vertical segment"> - <div class="ui center aligned text container"> - <p> - Apache Software as a Sensor⢠(SensSoft) incorporates a number of components that work together to provide user-experience researchers, project managers and software developers insights about how web applications are used. Each of the components of Apache SensSoft is made available through its own repository, allowing its distinctive capabilities to grow organically. A simplified system architecture ensures that the components will continue to share data and work together efficiently throughout their evolution. - </p> - - <br> - - <a class="ui big red button" href="/system"> - Learn More - </a> - <a class="ui big blue button" href="/releases"> - Download SensSoft - </a> - <a class="ui big yellow button" href="mailto:users-subscr...@senssoft.incubator.apache.org";> - Sign Up For News - </a> - </div> -</div> - -<div class="ui inverted grey very padded vertical segment"> - <div class="ui text container"> - <div class="ui two column middle aligned grid"> - <div class="column"> - With a single line of code, capture all of your usersâ behavior on your web page with enough resolution and granularity for advanced behavioral modeling. Apache UserALE is a free, open-source application for standard user event tracking, but is specially tailored for capturing behavior in web applications build for productivityâdata analysis, logistics, system monitoring, and service provisioning. - </div> - <div class="center aligned column"> - <a href="/userale"> - <img class="component-image" src="/images/userale_inverted.png"> - </a> - </div> - </div> - </div> -</div> - -<div class="ui very padded vertical segment"> - <div class="ui center aligned text container"> - <h2 class="ui header">UserALE.js</h2> - <p> - UserALE.js is the DOM/JavaScript client for UserALE. Every user activity is logged and sent to the UserALE backend for storage and analysis by Distill. - </p> - <div class="ui basic vertical segment"> - <div id="start-button" class="ui green button">Start Logging</div> - <div id="stop-button" class="ui red button">Pause Logging</div> - </div> - </div> - - <div class="ui container"> - <div class="ui equal height two column grid"> - <div class="center aligned column"> - <div class="ui basic row segment"> - <h4 class="ui dividing header">Buttons</h4> - <div class="ui blue button">Blue</div> - <div class="ui yellow button">Yellow</div> - <div class="ui green button">Green</div> - <div class="ui red button">Red</div> - </div> - - <div class="ui form"> - <h4 class="ui dividing header">Checkboxes</h4> - <div class="field"> - <div class="two fields"> - <div class="field"> - <input type="checkbox"> - <label>Checked!</label> - </div> - <div class="field"> - <div class="two fields"> - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="demo-checkbox"> - <label>Yes</label> - </div> - </div> - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="demo-checkbox"> - <label>No</label> - </div> - </div> - </div> - </div> - </div> - </div> - - <h4 class="ui dividing header">Inputs</h4> - <div class="field"> - <div class="two fields"> - <div class="field"> - <div class="ui labeled input"> - <div class="ui grey label">Text</div> - <input type="text"> - </div> - </div> - - <div class="field"> - <div id="demo-dropdown" class="ui fluid selection dropdown"> - <input type="hidden" name="senssoft-component"> - <i class="dropdown icon"></i> - <div class="default text">Select Component</div> - <div class="menu"> - <div class="item">UserALE</div> - <div class="item">Distill</div> - <div class="item">Tap</div> - <div class="item">Stout</div> - </div> - </div> - </div> - </div> - </div> - - <h4 class="ui dividing header">Maps</h4> - <div class="ui basic row segment"> - <div id="map-example"></div> - </div> - - - </div> - </div> - - <div id="log-feed" class="center aligned column"> - <div class="ui fluid row segment"> - - </div> - </div> - </div> - </div> -</div> - - -<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"; /> -<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js";></script> -<script src="/js/userale-demo.min.js" data-url=""></script> - -<script> - $(document).ready(function () { - $('#demo-dropdown').dropdown(); - $('.ui.checkbox').checkbox(); - - $('#start-button').on('click', userale.start); - $('#stop-button').on('click', userale.stop); - userale.options({ - logCb: addLog, - noSend: true - }); - - var map = L.map('map-example').setView([42.3601, -71.0589], 13); - L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { - attribution: '© <a href="http://osm.org/copyright";>OpenStreetMap</a> contributors' - }).addTo(map); - - function addLog(log) { - var html = '<div class="log ui fluid row segment">' + JSON.stringify(log) + '</div>'; - $('#log-feed').prepend(html); - } - - function clearLogs() { - setTimeout(function () { - var $feed = $('#log-feed .log'); - if ($feed.length > 10) { - $feed.slice(9).remove(); - } - clearLogs(); - }, 1000); - } - - clearLogs(); - }); -</script> - - -<div class="ui inverted grey very padded vertical segment"> - <div class="ui text container"> - <div class="ui two column middle aligned grid"> - <div class="center aligned column"> - <a href="/distill"> - <img class="component-image" src="/images/distill_inverted.png"> - </a> - </div> - <div class="column"> - Process and control your own user event data. Apache Distill is a scalable, customizable analytics stack built in Python that allows you to segment your user data and generate both simple usage statistics on different features of your application and complex graph models of user workflow. Distill provides an easy access point into databases storing your user event data and packages data for discovery through visual analytics. - </div> - </div> - </div> -</div> - -<div class="ui very padded vertical segment"> - <div class="ui text container"> - <div class="ui two column middle aligned grid"> - <div class="column"> - Explore your usersâ behavior and discover trends through visual analytics. Apache TAP is a customizable visual analytics application that allows you to see trends in usage across users of different types, usage trends across different versions of your application, and rich visualizations of usersâ workflow. Tailor visual analytics to your needs customizing TAP with your favorite D3 visualizations. - </div> - <div class="center aligned column"> - <a href="/tap"> - <img class="component-image" src="/images/tap.png"> - </a> - </div> - </div> - </div> -</div> - -<div class="ui inverted grey very padded vertical segment"> - <div class="ui center aligned text container"> - <h2 class="ui inverted header">The Bowie Plot</h2> - <p> - Tap uses the Bowie plot to present your users' micro-workflows and help you uncover insights into how your users interact with you apps. Start on the left, with the activity that starts the workflow, sized by the frequency of the activity. Next, the circles in the middle show the second activity in the workflow. The circles are downselected and sized by a graph metric to help uncover a particular type of insight. End on the right with the final activity of the workflow. - </p> - </div> - - <div class="ui container"> - <div class="ui padded grid"> - <div class="four wide middle aligned column"> - <div class="ui inverted form"> - <h3 class="ui inverted header">Graph Metrics</h3> - - <div class="grouped fields"> - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="metric" value="out_degree" checked></input> - <label>Out Degree</label> - </div> - </div> - - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="metric" value="in_degree"></input> - <label>In Degree</label> - </div> - </div> - - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="metric" value="betweenness_cent_dir_weighted"></input> - <label>Weighted Betweenness</label> - </div> - </div> - - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="metric" value="closeness_cent_dir_weighted"></input> - <label>Weighted Closeness</label> - </div> - </div> - - <div class="field"> - <div class="ui radio checkbox"> - <input type="radio" name="metric" value="closeness_cent_dir_unweighted"></input> - <label>Unweighted Closeness</label> - </div> - </div> - </div> - </div> - </div> - - <div class="twelve wide center aligned column"> - <div class="ui basic row segment"> - <div id="bowie"></div> - </div> - </div> - </div> - - <div id="metric-explanation" class="ui center aligned text container"></div> - </div> -</div> - -<script src="/js/bowiePlot.js"></script> -<script> - $(document).ready(function () { - // Metric explanations - var metricExplanations = { - 'out_degree': 'Out degree describes how often an activity was a source. How often did a micro-workflow start with this activity? This could indicate an entry point to your app or the start of a particularly common workflow.', - 'in_degree': 'In degree describes how often an activity was a sink. How often did a micro-workflow end with this activity? This could indicate a final confirmation, exit navigation, or a place the user got stuck.', - 'betweenness_cent_dir_weighted': 'Betweenness centrality describes how often an activity was passed through. This indicates a common intermediate activity, like a busy intersection of your app.', - 'closeness_cent_dir_weighted': 'Closeness centrality indicates how "close" an activity is to all others. A higher closeness indicates an activity that was involved in more workflows. Weighted closeness focuses on closeness to the most common activities, rather than to all equally.', - 'closeness_cent_dir_unweighted': 'Closeness centrality indicates how "close" an activity is to all others. A higher closeness indicates an activity that was involved in more workflows. Unweighted closeness focuses on closeness to all activities equally, regardless of how often each activity occurred.' - }; - - // Change metric - function changeMetric() { - var metric = $('input[name=metric]:checked').val(); - $('#metric-explanation').html(metricExplanations[metric]); - Bowie.update(metric); - } - - // Initialize radio buttons - $('.ui.radio.checkbox').checkbox({ - onChange: changeMetric - }); - - // Initialize - Bowie.create(); - changeMetric(); - }); -</script> - - -<div class="ui very padded vertical segment"> - <div class="ui text container"> - <div class="ui two column middle aligned grid"> - <div class="center aligned column"> - <a href="/stout"> - <img class="component-image" src="/images/stout.png"> - </a> - </div> - <div class="column"> - Stage systematic user research on the web. Apache STOUT provides everyone the ability to perform user research on the web. Track research participants through different tasks with your web applications, or track them through different versions of the same web application. Apache STOUT allows you to manage user research participants and data collected through Apache UserALE and 3rd party form data services. - </div> - </div> - </div> -</div> - -<div class="ui inverted grey very padded vertical segment"> - <div class="ui text container"> - <h2 class="ui inverted header">About the Project</h2> - <p> - Apache SensSoft is a user activity logging and analytics system that enables developers to instrument and extract design and user insights from their applications. It was originally developed at Draper for DARPA's XDATA program as a means of evaluating and improving tools for big data analysis and exploration. Commercially available as Draper's Software as a Sensorâ¢, Apache SensSoft aims to provide a more complete and customizable user analytics platform. - </p> - </div> -</div> - - </div> - - <div class="footer ui inverted very padded vertical segment"> - <div class="ui vertical segment"> - <div class="ui four column grid"> - <div class="column"> - <h4 class="ui inverted header">About</h4> - <div class="ui inverted link list"> - <a class="item" href="/system">System</a> - <a class="item" href="/userale">UserALE</a> - <a class="item" href="/distill">Distill</a> - <a class="item" href="/tap">Tap</a> - <a class="item" href="/stout">Stout</a> - </div> - </div> - <div class="column"> - <h4 class="ui inverted header">Docs</h4> - <div class="ui inverted link list"> - <a class="item" href="/docs/system">System</a> - <a class="item" href="/docs/userale">UserALE</a> - <a class="item" href="/docs/useralejs">UserAle.js</a> - <a class="item" href="/docs/useralepyqt">UserAle.pyqt</a> - <a class="item" href="/docs/distill">Distill</a> - <a class="item" href="/docs/tap">Tap</a> - <a class="item" href="/docs/stout">Stout</a> - </div> - </div> - <div class="column"> - <h4 class="ui inverted header">Community</h4> - <div class="ui inverted link list"> - <a class="item" href="https://github.com/apache?q=senssoft";>GitHub</a> - <a class="item" href="http://stackoverflow.com/questions/tagged/apache-senssoft";>StackOverflow</a> - <a class="item" href="https://issues.apache.org/jira/browse/SENSSOFT";>Jira Issue Tracker</a> - <a class="item" href="https://cwiki.apache.org/confluence/display/SENSSOFT";>Project Wiki</a> - <a class="item" href="https://twitter.com/apachesenssoft";>Twitter</a> - </div> - </div> - <div class="column"> - <h4 class="ui inverted header">Apache</h4> - <div class="ui inverted link list"> - <a class="item" href="http://www.apache.org/licenses/LICENSE-2.0.html";>License</a> - <a class="item" href="http://www.apache.org/";>Apache Software Foundation</a> - <a class="item" href="http://incubator.apache.org/";>Apache Incubator</a> - <a class="item" href="http://www.apache.org/foundation/sponsorship.html";>Sponsor Apache</a> - <a class="item" href="http://www.apache.org/foundation/thanks.html";>Thank you</a> - </div> - </div> - </div> - </div> - <div class="ui inverted vertical segment"> - <div class="ui two column middle aligned grid"> - <div class="column"> - Apache SensSoft is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF. - </div> - <div class="center aligned column"> - <img class="component-image" src="/images/incubator-logo-white.png"> - <br> - Copyright © 2017 The Apache Software Foundation, Licensed under the Apache License, Version 2.0. Apache, the Apache feather logo, and the Apache Incubator logo are trademarks of The Apache Software Foundation. Software as a Sensor is a trademark of the Charles Stark Draper Laboratory, Inc. - </div> - </div> - </div> -</div> - - - </body> - -</html> http://git-wip-us.apache.org/repos/asf/incubator-senssoft/blob/6a2b3459/_site/js/bowiePlot.js ---------------------------------------------------------------------- diff --git a/_site/js/bowiePlot.js b/_site/js/bowiePlot.js deleted file mode 100644 index b36d740..0000000 --- a/_site/js/bowiePlot.js +++ /dev/null @@ -1,408 +0,0 @@ -var Bowie = (function () { - // Set up module variables - var element = '#bowie'; - var data; - var metric; - - - // Grab data for this static case - d3.json('/js/graphData.json', function (error, response) { - if (error) throw error; - data = response; - - if (typeof metric !== 'undefined') { - update(metric); - } - }); - - - // Set up D3 variables - var svg; - var tooltip; - var arcs; - var chords; - var circles; - var margin = { - top : 20, - right : 20, - bottom : 20, - left : 20, - }; - var fullWidth = 600; - var fullHeight = 400; - var width = fullWidth - margin.left - margin.right; - var height = fullHeight - margin.top - margin.bottom; - var mainRadius = 280; - - var color = d3.scaleOrdinal() - .range([ - '#E24614', - '#DBA915', - '#BFD02C', - '#38A6D8', - '#852EB7' - ]); - - var arc = d3.arc() - .innerRadius(mainRadius - 50) - .outerRadius(mainRadius); - - var ribbon = d3.ribbon(); - - var graphLayout = graphFlow() - .radius(mainRadius - 50) - .innerRadius(mainRadius - 150); - - - // Define bowie layout function - function graphFlow() { - var tau = Math.PI * 2; - - var padAngle = 0; - var spaceAngle = tau / 4; - var radius = 0; - var innerRadius = 0; - - function layout(data) { - var result = {}; - - result.in = arrayToObj(data.in); - result.out = arrayToObj(data.out); - result.blt = arrayToObj(circleLayout(data.blt, innerRadius)); - - var arcAngle = (tau - (spaceAngle * 2)) / 2; - var inStart = (tau + spaceAngle) / 2; - var outStart = spaceAngle / 2; - - var inSide = sideLayout(data.inMatrix, result.blt, inStart, arcAngle, padAngle, radius, 'in'); - var outSide = sideLayout(data.outMatrix, result.blt, outStart, arcAngle, padAngle, radius, 'out'); - - result.inArcs = inSide[0]; - result.inChords = inSide[1]; - result.outArcs = outSide[0]; - result.outChords = outSide[1]; - - return result; - } - - layout.padAngle = function (value) { - return value ? (padAngle = value, layout) : padAngle; - }; - - layout.spaceAngle = function (value) { - return value ? (spaceAngle = value, layout) : spaceAngle; - }; - - layout.radius = function (value) { - return value ? (radius = value, layout) : radius; - }; - - layout.innerRadius = function (value) { - return value ? (innerRadius = value, layout) : innerRadius; - }; - - return layout; - } - - function sideLayout(matrix, circles, startAngle, angle, padAngle, radius, type) { - var n = matrix.length; - var m = matrix[0].length; - var groupSums = []; - var total = 0; - var arcs = new Array(n); - var chordTemp = new Array(n * m); - var chords = []; - var k; - var dx; - var x; - var x0; - var i; - var j; - - matrix.forEach(function (group) { - groupSums.push(group.reduce(function (prev, curr) { return prev + curr; })); - }); - - total = groupSums.reduce(function (prev, curr) { return prev + curr; }); - - k = Math.max(0, angle - padAngle * n) / total; - dx = k ? padAngle : angle / n; - - x = startAngle; - i = -1; - - while(++i < n) { - x0 = x; - j = -1; - - while(++j < n) { - var v = matrix[i][j]; - var a0 = x; - var a1 = x += v * k; - - chordTemp[j + (n * i)] = { - index : i, - subindex : j, - startAngle : a0, - endAngle : a1, - value : v, - }; - } - - arcs[i] = { - index : i, - type : type, - startAngle : x0, - endAngle : x, - value : groupSums[i], - }; - - x += dx; - } - - chordTemp.forEach(function (chord) { - if (chord.value > 0) { - var circle = circles[chord.subindex]; - - chords.push({ - index : chord.index, - subindex : chord.subindex, - type : type, - source : { - startAngle : chord.startAngle, - endAngle : chord.endAngle, - radius : radius, - }, - target : { - startAngle : circle.theta - 0.001, - endAngle : circle.theta + 0.001, - radius : circle.radius, - }, - }); - } - }); - - return [arcs, chords]; - } - - function circleLayout(circles, innerRadius) { - circles.forEach(function (d) { - d.r = d.value; - }); - - d3.packSiblings(circles); - var enclose = d3.packEnclose(circles); - var k = innerRadius / enclose.r; - - circles.forEach(function (d) { - d.r = d.r * k; - d.x = d.x * k; - d.y = d.y * k; - - var rSq = Math.pow(d.x, 2) + Math.pow(d.y, 2); - d.radius = Math.sqrt(rSq); - d.theta = Math.atan2(d.y, d.x) + (Math.PI / 2); - }); - - return circles; - } - - function arrayToObj(a) { - var o = {}; - - a.forEach(function (d) { - o[d.index] = d; - }); - - return o; - } - - // Initial full build of bowie - function create() { - svg = d3.select(element).append('svg') - .attr('width', fullWidth) - .attr('height', fullHeight) - .append('g') - .attr('transform', 'translate(' + ((width / 2) + margin.left) + ',' + ((height / 2) + margin.top) + ')'); - - tooltip = d3.select('body').append('div') - .attr('class', 'tooltip') - .style('opacity', 0); - } - - - // Actually render bowie - function update(m) { - metric = m; - if (typeof data === 'undefined') { - return false; - } - - var currentData = data[metric]; - var layout = graphLayout(currentData); - - var t = d3.transition() - .duration(500); - - arcs = svg.selectAll('.arc') - .data(layout.inArcs.concat(layout.outArcs), function (d) { - return d.type + d.index; - }); - - arcs.exit() - .attr('class', 'exit') - .transition(t) - .style('fill-opacity', 0) - .remove(); - - arcs = arcs.enter() - .append('path') - .attr('class', 'arc') - .merge(arcs); - - arcs - .on('mouseover', function (d) { - highlight(d, 'arc'); - showTooltip(currentData.in[d.index], d3.event.pageX, d3.event.pageY); - }) - .on('mouseout', function (d) { - restore(); - hideTooltip(); - }) - .transition(t) - // TODO: add arc tweens - .attr('d', arc) - .style('fill', function (d) { return color(currentData.in[d.index].elementGroup); }); - - chords = svg.selectAll('.chord') - .data(layout.inChords.concat(layout.outChords), function (d) { - return d.index + d.type + d.subindex; - }); - - chords.exit() - .attr('class', 'exit') - .transition(t) - .style('fill-opacity', 0) - .remove(); - - chords = chords.enter() - .append('path') - .attr('class', 'chord') - .style('fill', '#B0B9BE') - .merge(chords); - - chords - .transition(t) - .attr('d', ribbon) - .style('fill-opacity', 0.5); - - circles = svg.selectAll('.node') - .data($.map(layout.blt, function (val) { return val; }), function (d) { return d.index; }); - - circles.exit() - .attr('class', 'exit') - .transition(t) - .attr('r', 0) - .remove(); - - circles = circles.enter() - .append('circle') - .attr('class', 'node') - .merge(circles); - - circles - .on('mouseover', function (d) { - highlight(d, 'circle'); - showTooltip(currentData.in[d.index], d3.event.pageX, d3.event.pageY); - }) - .on('mouseout', function (d) { - restore(); - hideTooltip(); - }) - .transition(t) - .attr('r', function (d) { return d.r; }) - .attr('cx', function (d) { return d.x; }) - .attr('cy', function (d) { return d.y; }) - .style('fill', function (d) { - return color(currentData.in[d.index].elementGroup) - }) - .style('fill-opacity', 0.75); - } - - - // Helper functions for mouse behaviors - function hideTooltip() { - tooltip.transition() - .duration(350) - .style('opacity', 0); - } - - function showTooltip(activity, x, y) { - tooltip.transition() - .duration(350) - .style('opacity', 0.9); - - tooltip - .style('left', (x + 6) + 'px') - .style('top', (y - 28) + 'px') - .html('Action: ' + activity.action + '<br>Id: ' + activity.elementId + '<br>Group: ' + activity.elementGroup); - } - - function highlight(d, type) { - var indices = []; - - if (type === 'arc') { - chords - .style('fill-opacity', function (c) { - if (c.index !== d.index || c.type !== d.type) { - return 0.1; - } else { - indices.push(c.subindex); - return 0.5; - } - }); - - circles - .style('fill-opacity', function (c) { - return indices.includes(c.index) ? 0.75 : 0.1; - }); - - arcs - .style('fill-opacity', function (c) { - return c === d ? 1 : 0.25; - }); - } else if (type === 'circle') { - chords - .style('fill-opacity', function (c) { - if (c.subindex !== d.index) { - return 0.1; - } else { - indices.push(c.index); - return 0.5; - } - }); - - circles - .style('fill-opacity', function (c) { - return c === d ? 0.75 : 0.25; - }); - - arcs - .style('fill-opacity', function (c) { - return indices.includes(c.index) ? 1 : 0.1; - }); - } - } - - function restore() { - chords.style('fill-opacity', 0.5); - circles.style('fill-opacity', 0.75); - arcs.style('fill-opacity', 1); - } - - // Return API - return { - create: create, - update: update - }; -})();
