├── .DS_Store ├── .idea ├── TimeArcs.iml ├── modules.xml ├── vcs.xml └── workspace.xml ├── IMDB ├── .DS_Store ├── README.md ├── data │ ├── .DS_Store │ ├── VISpapers1990-2014.tsv │ ├── imdb1.tsv │ ├── imdb82_100.tsv │ └── imdb85_50.tsv ├── images │ ├── IMDB1.png │ ├── IMDB2.png │ ├── IMDB3.png │ └── IMDB4.png ├── index.html ├── javascripts │ ├── ImageResolver.js │ ├── d3.v3.min.js │ ├── fisheye.js │ ├── select2.min.css │ ├── select2.min.js │ └── select2x2.png ├── myscripts │ ├── .DS_Store │ ├── forVideo.js │ ├── grouping.js │ ├── lensing.js │ ├── main.js │ ├── saveFriesCards.js │ ├── searchBox.js │ ├── sliderRelationship.js │ ├── stopList.js │ ├── streamGraph.js │ └── util.js └── styles │ └── jquery-ui.css ├── IndexCards ├── README.md ├── data │ ├── .DS_Store │ ├── FriesCards.tsv │ ├── PopCha.tsv │ └── pcCombined3.tsv ├── images │ ├── PC1.png │ ├── PC2.png │ └── PC3.png ├── index.html ├── javascripts │ ├── .DS_Store │ ├── d3.v3.min.js │ ├── fisheye.js │ ├── select2.min.css │ ├── select2.min.js │ ├── select2x2.png │ └── stopList.js ├── myscripts │ ├── .DS_Store │ ├── main.js │ ├── saveFriesCards.js │ ├── searchBox.js │ ├── sliderRadius.js │ ├── sliderRelationship.js │ ├── streamGraph.js │ └── util.js └── styles │ └── jquery-ui.css ├── League ├── README.md ├── data │ ├── .DS_Store │ └── league.tsv ├── images │ ├── .DS_Store │ └── HamlinField.jpg ├── index.html ├── javascripts │ ├── .DS_Store │ ├── d3.v3.min.js │ ├── fisheye.js │ ├── select2.min.css │ ├── select2.min.js │ ├── select2x2.png │ └── stopList.js ├── myscripts │ ├── .DS_Store │ ├── main.js │ ├── searchBox.js │ ├── sliderRadius.js │ ├── sliderRelationship.js │ ├── streamGraph.js │ └── util.js └── styles │ └── jquery-ui.css ├── Publication ├── .DS_Store ├── index.html └── pubJavascripts │ ├── javascripts │ ├── .DS_Store │ ├── d3.v3.min.js │ ├── fisheye.js │ ├── select2.min.css │ ├── select2.min.js │ ├── select2x2.png │ └── stopList.js │ ├── myscripts │ ├── .DS_Store │ ├── main.js │ ├── searchBox.js │ ├── sliderRadius.js │ ├── sliderRelationship.js │ ├── streamGraph.js │ └── util.js │ ├── publication.tsv │ └── styles │ ├── jquery-ui.css │ └── timeArcs.css ├── README.md └── Text ├── .DS_Store ├── README.md ├── data ├── .DS_Store ├── corpus_ner_geo.tsv ├── huffington.tsv ├── stopListForBlogs.txt └── wikinews.tsv ├── images ├── PoliticalBlogs1.png ├── PoliticalBlogs2.png └── PoliticalBlogs3.png ├── index.html ├── javascripts ├── ImageResolver.js ├── d3.v3.min.js ├── fisheye.js ├── select2.min.css ├── select2.min.js └── select2x2.png ├── myscripts ├── .DS_Store ├── main.js ├── saveFriesCards.js ├── searchBox.js ├── sliderRelationship.js ├── stopList.js ├── streamGraph.js └── util.js └── styles └── jquery-ui.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/.DS_Store -------------------------------------------------------------------------------- /.idea/TimeArcs.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /IMDB/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/.DS_Store -------------------------------------------------------------------------------- /IMDB/README.md: -------------------------------------------------------------------------------- 1 | ### TimeArcs for Finding Patterns in the IMDB Co-Star Network 2 | The data is available on [IMDB website](http://www.imdb.com/interfaces). We went through 9,963 movies rated 8.3 or higher from 1955 to 2014 across three genres: comedy, action, and drama. In total, our dataset contains over 66,178 actors. The next figure shows *TimeArcs* for the top 2000 actors. In particular, the arcs connect co-actors in the same movies and color coded by movie genres: green for comedy, red for action, blue for drama. TimeArcs helps viewers to quickly identify temporal communities of actors. Each horizontal line represents one actor and connects his or her first through last appearances in highly rated movies. This helps to highlight actors with long careers and many good movies. By brushing any actors' name, we can immediately visualize his or her co-star network to see how it changes over time. Brushing an arc, *TimeArcs* shows the list of movies that actors (at two ends of the arc) co-star in that year. Please try [online demo](http://www2.cs.uic.edu/~tdang/TimeArcs/IMDB/). 3 | 4 | ![ScreenShot](https://github.com/CreativeCodingLab/TimeArcs/blob/master/IMDB/images/IMDB2.png) 5 | 6 | Lensing tool is useful to focus on a sub-network of a larger network. Lensing can be applied on both X and Y axis. 7 | ![ScreenShot](https://github.com/CreativeCodingLab/TimeArcs/blob/master/IMDB/images/IMDB3.png) 8 | 9 | The following figure shows lensing into a different time period (on X axis) and lower part of the network (on Y axis). 10 | ![ScreenShot](https://github.com/CreativeCodingLab/TimeArcs/blob/master/IMDB/images/IMDB4.png) 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /IMDB/data/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/data/.DS_Store -------------------------------------------------------------------------------- /IMDB/images/IMDB1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/images/IMDB1.png -------------------------------------------------------------------------------- /IMDB/images/IMDB2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/images/IMDB2.png -------------------------------------------------------------------------------- /IMDB/images/IMDB3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/images/IMDB3.png -------------------------------------------------------------------------------- /IMDB/images/IMDB4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/images/IMDB4.png -------------------------------------------------------------------------------- /IMDB/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 |             76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /IMDB/javascripts/ImageResolver.js: -------------------------------------------------------------------------------- 1 | // HTTP Request to other domain are blocked 2 | // We need a CORS proxy 3 | function proxify( request ) { 4 | request.url = "http://www.inertie.org/ba-simple-proxy.php?mode=native&url=" + encodeURIComponent( request.url ); 5 | return request; 6 | } 7 | 8 | // Create an instance of ImageResolver 9 | // The proxy function is passed as an option 10 | var resolver = new ImageResolver( { requestPlugin : proxify } ); 11 | 12 | // Register plugins we want to use 13 | // You can use the built-in plugin, or create your own 14 | // Plugins will be called in the order of their registration 15 | resolver.register(new ImageResolver.FileExtension()); 16 | resolver.register(new ImageResolver.NineGag()); 17 | resolver.register(new ImageResolver.Instagram()); 18 | resolver.register(new ImageResolver.ImgurPage()); 19 | 20 | resolver.register(new ImageResolver.MimeType()); 21 | resolver.register(new ImageResolver.Flickr( '6a4f9b6d16c0eaced089c91a2e7e87ad' )); 22 | resolver.register(new ImageResolver.Opengraph()); 23 | resolver.register(new ImageResolver.Webpage()); 24 | 25 | 26 | $(function(){ 27 | $('form').on('submit', function(e){ 28 | //e.preventDefault(); 29 | /*var url = "http://www.cs.uic.edu/~tdang/"; 30 | console.log( url ); 31 | resolver.resolve( url, function( result ){ 32 | console.log( result ); 33 | if ( result ) { 34 | console.log("result.image="+result.image); 35 | $('body').css('background-image', 'url(' + result.image + ')'); 36 | } else { 37 | alert('Can not find image'); 38 | } 39 | });*/ 40 | 41 | }); 42 | }); -------------------------------------------------------------------------------- /IMDB/javascripts/fisheye.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | d3.fisheye = { 3 | scale: function(scaleType) { 4 | return d3_fisheye_scale(scaleType(), 3, 0); 5 | }, 6 | circular: function() { 7 | var radius = 200, 8 | distortion = 2, 9 | k0, 10 | k1, 11 | focus = [0, 0]; 12 | 13 | function fisheye(d) { 14 | var dx = d.x - focus[0], 15 | dy = d.y - focus[1], 16 | dd = Math.sqrt(dx * dx + dy * dy); 17 | if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1}; 18 | var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25; 19 | return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)}; 20 | } 21 | 22 | function rescale() { 23 | k0 = Math.exp(distortion); 24 | k0 = k0 / (k0 - 1) * radius; 25 | k1 = distortion / radius; 26 | return fisheye; 27 | } 28 | 29 | fisheye.radius = function(_) { 30 | if (!arguments.length) return radius; 31 | radius = +_; 32 | return rescale(); 33 | }; 34 | 35 | fisheye.distortion = function(_) { 36 | if (!arguments.length) return distortion; 37 | distortion = +_; 38 | return rescale(); 39 | }; 40 | 41 | fisheye.focus = function(_) { 42 | if (!arguments.length) return focus; 43 | focus = _; 44 | return fisheye; 45 | }; 46 | 47 | return rescale(); 48 | } 49 | }; 50 | 51 | function d3_fisheye_scale(scale, d, a) { 52 | 53 | function fisheye(_) { 54 | var x = scale(_), 55 | left = x < a, 56 | range = d3.extent(scale.range()), 57 | min = range[0], 58 | max = range[1], 59 | m = left ? a - min : max - a; 60 | if (m == 0) m = max - min; 61 | return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a; 62 | } 63 | 64 | fisheye.distortion = function(_) { 65 | if (!arguments.length) return d; 66 | d = +_; 67 | return fisheye; 68 | }; 69 | 70 | fisheye.focus = function(_) { 71 | if (!arguments.length) return a; 72 | a = +_; 73 | return fisheye; 74 | }; 75 | 76 | fisheye.copy = function() { 77 | return d3_fisheye_scale(scale.copy(), d, a); 78 | }; 79 | 80 | fisheye.nice = scale.nice; 81 | fisheye.ticks = scale.ticks; 82 | fisheye.tickFormat = scale.tickFormat; 83 | return d3.rebind(fisheye, scale, "domain", "range"); 84 | } 85 | })(); -------------------------------------------------------------------------------- /IMDB/javascripts/select2.min.css: -------------------------------------------------------------------------------- 1 | .select2-container{margin:0;position:relative;display:inline-block;zoom:1;vertical-align:middle}.select2-container,.select2-drop,.select2-search,.select2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.select2-container .select2-choice{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#eee),color-stop(0.5,#fff));background-image:-webkit-linear-gradient(center bottom,#eee 0,#fff 50%);background-image:-moz-linear-gradient(center bottom,#eee 0,#fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);background-image:linear-gradient(to top,#eee 0,#fff 50%)}html[dir=rtl] .select2-container .select2-choice{padding:0 8px 0 0}.select2-container.select2-drop-above .select2-choice{border-bottom-color:#aaa;border-radius:0 0 4px 4px;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#eee),color-stop(0.9,#fff));background-image:-webkit-linear-gradient(center bottom,#eee 0,#fff 90%);background-image:-moz-linear-gradient(center bottom,#eee 0,#fff 90%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);background-image:linear-gradient(to bottom,#eee 0,#fff 90%)}.select2-container.select2-allowclear .select2-choice .select2-chosen{margin-right:42px}.select2-container .select2-choice>.select2-chosen{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;float:none;width:auto}html[dir=rtl] .select2-container .select2-choice>.select2-chosen{margin-left:26px;margin-right:0}.select2-container .select2-choice abbr{display:none;width:12px;height:12px;position:absolute;right:24px;top:8px;font-size:1px;text-decoration:none;border:0;background:url(select2.png) right top no-repeat;cursor:pointer;outline:0}.select2-container.select2-allowclear .select2-choice abbr{display:inline-block}.select2-container .select2-choice abbr:hover{background-position:right -11px;cursor:pointer}.select2-drop-mask{border:0;margin:0;padding:0;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:9998;background-color:#fff;filter:alpha(opacity=0)}.select2-drop{width:100%;margin-top:-1px;position:absolute;z-index:9999;top:100%;background:#fff;color:#000;border:1px solid #aaa;border-top:0;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0,0,0,.15);box-shadow:0 4px 5px rgba(0,0,0,.15)}.select2-drop.select2-drop-above{margin-top:1px;border-top:1px solid #aaa;border-bottom:0;border-radius:4px 4px 0 0;-webkit-box-shadow:0 -4px 5px rgba(0,0,0,.15);box-shadow:0 -4px 5px rgba(0,0,0,.15)}.select2-drop-active{border:1px solid #5897fb;border-top:none}.select2-drop.select2-drop-above.select2-drop-active{border-top:1px solid #5897fb}.select2-drop-auto-width{border-top:1px solid #aaa;width:auto}.select2-drop-auto-width .select2-search{padding-top:4px}.select2-container .select2-choice .select2-arrow{display:inline-block;width:18px;height:100%;position:absolute;right:0;top:0;border-left:1px solid #aaa;border-radius:0 4px 4px 0;background:#ccc;background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#ccc),color-stop(0.6,#eee)) #ccc;background:-webkit-linear-gradient(center bottom,#ccc 0,#eee 60%) #ccc;background:-moz-linear-gradient(center bottom,#ccc 0,#eee 60%) #ccc;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);background:linear-gradient(to top,#ccc 0,#eee 60%) #ccc}html[dir=rtl] .select2-container .select2-choice .select2-arrow{left:0;right:auto;border-left:none;border-right:1px solid #aaa;border-radius:4px 0 0 4px}.select2-container .select2-choice .select2-arrow b{display:block;width:100%;height:100%;background:url(select2.png) 0 1px no-repeat}html[dir=rtl] .select2-container .select2-choice .select2-arrow b{background-position:2px 1px}.select2-search{display:inline-block;width:100%;min-height:26px;margin:0;padding-left:4px;padding-right:4px;position:relative;z-index:10000;white-space:nowrap}.select2-search input{width:100%;height:auto!important;min-height:26px;padding:4px 20px 4px 5px;margin:0;outline:0;font-family:sans-serif;font-size:1em;border:1px solid #aaa;border-radius:0;-webkit-box-shadow:none;box-shadow:none;background:url(select2.png) 100% -22px no-repeat #fff;background:url(select2.png) 100% -22px no-repeat,linear-gradient(to bottom,#fff 85%,#eee 99%)}html[dir=rtl] .select2-search input{padding:4px 5px 4px 20px;background:url(select2.png) -37px -22px no-repeat #fff;background:url(select2.png) -37px -22px no-repeat,linear-gradient(to bottom,#fff 85%,#eee 99%)}.select2-drop.select2-drop-above .select2-search input{margin-top:4px}.select2-search input.select2-active{background:url(select2-spinner.gif) no-repeat 100% #fff;background:url(select2-spinner.gif) no-repeat 100%,linear-gradient(to bottom,#fff 85%,#eee 99%)}.select2-container-active .select2-choice,.select2-container-active .select2-choices{border:1px solid #5897fb;outline:0;-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);box-shadow:0 0 5px rgba(0,0,0,.3)}.select2-dropdown-open .select2-choice{border-bottom-color:transparent;-webkit-box-shadow:0 1px 0 #fff inset;box-shadow:0 1px 0 #fff inset;border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:#eee;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#fff),color-stop(0.5,#eee));background-image:-webkit-linear-gradient(center bottom,#fff 0,#eee 50%);background-image:-moz-linear-gradient(center bottom,#fff 0,#eee 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);background-image:linear-gradient(to top,#fff 0,#eee 50%)}.select2-dropdown-open.select2-drop-above .select2-choice,.select2-dropdown-open.select2-drop-above .select2-choices{border:1px solid #5897fb;border-top-color:transparent;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(0.5,#eee));background-image:-webkit-linear-gradient(center top,#fff 0,#eee 50%);background-image:-moz-linear-gradient(center top,#fff 0,#eee 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);background-image:linear-gradient(to bottom,#fff 0,#eee 50%)}.select2-dropdown-open .select2-choice .select2-arrow{background:0 0;border-left:none;filter:none}html[dir=rtl] .select2-dropdown-open .select2-choice .select2-arrow{border-right:none}.select2-dropdown-open .select2-choice .select2-arrow b{background-position:-18px 1px}html[dir=rtl] .select2-dropdown-open .select2-choice .select2-arrow b{background-position:-16px 1px}.select2-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.select2-results{max-height:200px;padding:0 0 0 4px;margin:4px 4px 4px 0;position:relative;overflow-x:hidden;overflow-y:auto;-webkit-tap-highlight-color:transparent}html[dir=rtl] .select2-results{padding:0 4px 0 0;margin:4px 0 4px 4px}.select2-results ul.select2-result-sub{margin:0;padding-left:0}.select2-results li{list-style:none;display:list-item;background-image:none}.select2-results li.select2-result-with-children>.select2-result-label{font-weight:700}.select2-results .select2-result-label{padding:3px 7px 4px;margin:0;cursor:pointer;min-height:1em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select2-results-dept-1 .select2-result-label{padding-left:20px}.select2-results-dept-2 .select2-result-label{padding-left:40px}.select2-results-dept-3 .select2-result-label{padding-left:60px}.select2-results-dept-4 .select2-result-label{padding-left:80px}.select2-results-dept-5 .select2-result-label{padding-left:100px}.select2-results-dept-6 .select2-result-label{padding-left:110px}.select2-results-dept-7 .select2-result-label{padding-left:120px}.select2-results .select2-highlighted{background:#3875d7;color:#fff}.select2-results li em{background:#feffde;font-style:normal}.select2-results .select2-highlighted em{background:0 0}.select2-results .select2-highlighted ul{background:#fff;color:#000}.select2-results .select2-ajax-error,.select2-results .select2-no-results,.select2-results .select2-searching,.select2-results .select2-selection-limit{background:#f4f4f4;display:list-item;padding-left:5px}.select2-results .select2-disabled.select2-highlighted{color:#666;background:#f4f4f4;display:list-item;cursor:default}.select2-results .select2-disabled{background:#f4f4f4;display:list-item;cursor:default}.select2-results .select2-selected{display:none}.select2-more-results.select2-active{background:url(select2-spinner.gif) no-repeat 100% #f4f4f4}.select2-results .select2-ajax-error{background:rgba(255,50,50,.2)}.select2-more-results{background:#f4f4f4;display:list-item}.select2-container.select2-container-disabled .select2-choice{background-color:#f4f4f4;background-image:none;border:1px solid #ddd;cursor:default}.select2-container.select2-container-disabled .select2-choice .select2-arrow{background-color:#f4f4f4;background-image:none;border-left:0}.select2-container.select2-container-disabled .select2-choice abbr{display:none}.select2-container-multi .select2-choices{height:auto!important;height:1%;margin:0;padding:0 5px 0 0;position:relative;border:1px solid #aaa;cursor:text;overflow:hidden;background-color:#fff;background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(1%,#eee),color-stop(15%,#fff));background-image:-webkit-linear-gradient(top,#eee 1%,#fff 15%);background-image:-moz-linear-gradient(top,#eee 1%,#fff 15%);background-image:linear-gradient(to bottom,#eee 1%,#fff 15%)}html[dir=rtl] .select2-container-multi .select2-choices{padding:0 0 0 5px}.select2-locked{padding:3px 5px!important}.select2-container-multi .select2-choices{min-height:26px}.select2-container-multi.select2-container-active .select2-choices{border:1px solid #5897fb;outline:0;-webkit-box-shadow:0 0 5px rgba(0,0,0,.3);box-shadow:0 0 5px rgba(0,0,0,.3)}.select2-container-multi .select2-choices li{float:left;list-style:none}html[dir=rtl] .select2-container-multi .select2-choices li{float:right}.select2-container-multi .select2-choices .select2-search-field{margin:0;padding:0;white-space:nowrap}.select2-container-multi .select2-choices .select2-search-field input{padding:5px;margin:1px 0;font-family:sans-serif;font-size:100%;color:#666;outline:0;border:0;-webkit-box-shadow:none;box-shadow:none;background:0 0!important}.select2-container-multi .select2-choices .select2-search-field input.select2-active{background:url(select2-spinner.gif) no-repeat 100% #fff!important}.select2-default{color:#999!important}.select2-container-multi .select2-choices .select2-search-choice{padding:3px 5px 3px 18px;margin:3px 0 3px 5px;position:relative;line-height:13px;color:#333;cursor:default;border:1px solid #aaa;border-radius:3px;-webkit-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#e4e4e4;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(20%,#f4f4f4),color-stop(50%,#f0f0f0),color-stop(52%,#e8e8e8),color-stop(100%,#eee));background-image:-webkit-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:-moz-linear-gradient(top,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);background-image:linear-gradient(to bottom,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%)}html[dir=rtl] .select2-container-multi .select2-choices .select2-search-choice{margin:3px 5px 3px 0;padding:3px 18px 3px 5px}.select2-container-multi .select2-choices .select2-search-choice .select2-chosen{cursor:default}.select2-container-multi .select2-choices .select2-search-choice-focus{background:#d4d4d4}.select2-search-choice-close{display:block;width:12px;height:13px;position:absolute;right:3px;top:4px;font-size:1px;outline:0;background:url(select2.png) right top no-repeat}html[dir=rtl] .select2-search-choice-close{right:auto;left:3px}.select2-container-multi .select2-search-choice-close{left:3px}html[dir=rtl] .select2-container-multi .select2-search-choice-close{left:auto;right:2px}.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover,.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close{background-position:right -11px}.select2-container-multi.select2-container-disabled .select2-choices{background-color:#f4f4f4;background-image:none;border:1px solid #ddd;cursor:default}.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice{padding:3px 5px;border:1px solid #ddd;background-image:none;background-color:#f4f4f4}.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close{display:none;background:0 0}.select2-result-selectable .select2-match,.select2-result-unselectable .select2-match{text-decoration:underline}.select2-offscreen,.select2-offscreen:focus{clip:rect(0 0 0 0)!important;width:1px!important;height:1px!important;border:0!important;margin:0!important;padding:0!important;overflow:hidden!important;position:absolute!important;outline:0!important;left:0!important;top:0!important}.select2-display-none{display:none}.select2-measure-scrollbar{position:absolute;top:-10000px;left:-10000px;width:100px;height:100px;overflow:scroll}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:2dppx){.select2-container .select2-choice .select2-arrow b,.select2-container .select2-choice abbr,.select2-search input,.select2-search-choice-close{background-image:url(select2x2.png)!important;background-repeat:no-repeat!important;background-size:60px 40px!important}.select2-search input{background-position:100% -21px!important}} -------------------------------------------------------------------------------- /IMDB/javascripts/select2x2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/javascripts/select2x2.png -------------------------------------------------------------------------------- /IMDB/myscripts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IMDB/myscripts/.DS_Store -------------------------------------------------------------------------------- /IMDB/myscripts/grouping.js: -------------------------------------------------------------------------------- 1 | function groupSimilarNodes(){ 2 | if (document.getElementById("checkbox2").checked){ 3 | nodeG.selectAll(".nodeText") 4 | .attr("font-size", "8px"); 5 | 6 | //console.log("****** groupSimilarNodes *******"); 7 | for (var i=0;i b.y) { 33 | return 1; 34 | } 35 | if (a.y < b.y) { 36 | return -1; 37 | } 38 | return 0; 39 | }); 40 | 41 | // asign the Y position 42 | console.log("Begin asigning Y positions ****"); 43 | var step = Math.min((height-20)/(pNodes.length+1),6); 44 | var currentY = 0; 45 | var gapY = step/5; 46 | for (var i=0;i0){ 52 | n1.groupName += "("+(n1.listOfSimilar.length+1)+")"; 53 | } 54 | for (var j=0;jlMonth+numLens){ 181 | return maxM*xGap+ numMonthInLense*xGap*lensingMul + (m-(lMonth+numLens+1))*xGap; 182 | } 183 | else{ 184 | return maxM*xGap+(m-maxM)*xGap*lensingMul; 185 | } 186 | } 187 | else{ 188 | return m*XGAP_; 189 | } 190 | } 191 | 192 | 193 | function computeY_Scale() { 194 | var termArray = []; 195 | for (var i=0; i< numNode; i++) { 196 | if (nodes[i].connect && nodes[i].connect.length>0){ 197 | var e = {}; 198 | e.y = nodes[i].y; 199 | e.nodeId = i; 200 | termArray.push(e); 201 | } 202 | } 203 | termArray.sort(function (a, b) { 204 | if (a.y > b.y) { 205 | return 1; 206 | } 207 | if (a.y < b.y) { 208 | return -1; 209 | } 210 | return 0; 211 | }); 212 | 213 | listLensing = {}; 214 | svg.selectAll(".nodeText").remove(); 215 | if (isLensing){ 216 | console.log("lY="+lY); 217 | var numLens = 20; 218 | var yLensing = 7; 219 | var yGap = (height-(numLens*2+1)*yLensing)/numNode; 220 | 221 | for (var i=0; i< termArray.length; i++) { 222 | var yy; 223 | if (ilY+numLens){ 226 | yy=(i-(numLens*2+1))*yGap+ (numLens*2+1)*yLensing; 227 | } 228 | else{ 229 | yy=(lY-numLens)*yGap + (i-(lY-numLens))*yLensing; 230 | listLensing[nodes[termArray[i].nodeId].name] = nodes[termArray[i].nodeId]; 231 | } 232 | nodes[termArray[i].nodeId].y = yy; 233 | } 234 | 235 | var nodesLensing = pNodes.filter(function (d) { 236 | if (listLensing[d.name]) { 237 | return d; 238 | } 239 | }); 240 | svg.selectAll(".nodeText").data(nodesLensing).enter() 241 | .append("text") 242 | .attr("class", "nodeText") 243 | .text(function(d) { return d.name }) 244 | .attr("x", function(d) { return d.x }) 245 | .attr("y", function(d) { return d.y }) 246 | .attr("dy", ".35em") 247 | .style("fill","#000000") 248 | //.style("fill-opacity",1) 249 | .style("text-anchor","end") 250 | .style("text-shadow", "1px 1px 0 rgba(255, 255, 255, 0.6") 251 | .attr("dy", ".21em") 252 | .attr("font-family", "sans-serif") 253 | .attr("font-size", function(d) { 254 | return d.isSearchTerm ? "9px" : "8px"; }); 255 | } 256 | else{ 257 | var step = Math.min((height-22)/(termArray.length),13); 258 | for (var i=0; i< termArray.length; i++) { 259 | nodes[termArray[i].nodeId].y = 10+i*step; 260 | } 261 | force.stop(); 262 | } 263 | 264 | 265 | 266 | 267 | } 268 | -------------------------------------------------------------------------------- /IMDB/myscripts/saveFriesCards.js: -------------------------------------------------------------------------------- 1 | 2 | var data3; 3 | var nodes3 =[]; 4 | var links3 =[]; 5 | 6 | d3.json("data/cards-for-time-arcs.json", function(error, data_) { 7 | data3 = data_; 8 | 9 | }) 10 | 11 | function saveTimeArcsData() { 12 | console.log("*********** saveTimeArcsData ******************"); 13 | var csvContent = ""; 14 | /* 15 | var encodedUri = encodeURI(csvContent); 16 | var link = document.createElement("a"); 17 | link.setAttribute("href", encodedUri); 18 | link.setAttribute("download", "aaaavvv.tsv"); 19 | link.click(); // This will download the data file named "my_data.csv". 20 | console.log("*********** DONE save ******************");*/ 21 | 22 | nodes3List ={}; 23 | nodes.forEach(function(d, index){ 24 | if (nodes3List[d.name]==undefined){ 25 | var nod = {}; 26 | nod.name = d.name; 27 | nod.id = d.id; 28 | nod.index = nodes3.length; // The index make sure id start from 0; 29 | nodes3.push(nod); 30 | nodes3List[d.name] = nod; 31 | } 32 | else{ 33 | //if (d.id>nodes3List[d.name].id) 34 | // console.log("d.id="+d.id+" nodes3List[d.name]="+nodes3List[d.name].id); 35 | } 36 | }); 37 | 38 | links3List ={}; 39 | links.forEach(function(d, index){ 40 | var sourceName = d.source.name; 41 | var targetName = d.target.name; 42 | var source3 = nodes3List[sourceName]; 43 | var target3 = nodes3List[targetName]; 44 | if (links3List[sourceName+"__"+targetName]==undefined){ 45 | var lin = {}; 46 | lin.name = sourceName+"__"+targetName; 47 | lin.id = source3.id+target3.id; 48 | lin.source = source3; 49 | lin.target = target3; 50 | lin.count=1; 51 | links3.push(lin); 52 | links3List[lin.name] = lin; 53 | } 54 | else{ 55 | links3List[sourceName+"__"+targetName].count++; 56 | } 57 | }); 58 | 59 | csvContent += "{"+ "\n"; 60 | csvContent += '"nodes": ['+ "\n" 61 | 62 | nodes3.forEach(function(d, index){ 63 | csvContent += "\t"+'{"id": "'+d.index+'", "name": "'+ d.name +'", "group": '+ 1+'}'; 64 | //csvContent += "\t"+'{"id": "'+d.index+'", "group": '+ 1+'}'; 65 | if (index b) return 1; // sort 31 | if (a < b) return -1; 32 | return 0; 33 | }) 34 | .filter(function(item, i, ar) { 35 | return ar.indexOf(item) === i; 36 | }) // remove duplicate items 37 | .filter(function(item, i, ar) { 38 | select2DataObject.push({ 39 | "id": i, 40 | "text": item 41 | }); 42 | }); 43 | select2Data.sort(function(a, b) { 44 | if (a > b) return 1; // sort 45 | if (a < b) return -1; 46 | return 0; 47 | }) 48 | .filter(function(item, i, ar) { 49 | return ar.indexOf(item) === i; 50 | }) // remove duplicate items 51 | .filter(function(item, i, ar) { 52 | select2DataObject.push({ 53 | "id": i, 54 | "text": item 55 | }); 56 | }); 57 | $("#searchName").select2({ 58 | data: select2DataObject, 59 | containerCssClass: "search" 60 | }); 61 | rootSearch.children.forEach(collapse); 62 | updateSearch(rootSearch); 63 | } 64 | 65 | 66 | //=============================================== 67 | function select2DataCollectName(d) { 68 | if (d.children) 69 | d.children.forEach(select2DataCollectName); 70 | else if (d._children) 71 | d._children.forEach(select2DataCollectName); 72 | select2Data.push(d.name); 73 | } 74 | 75 | //=============================================== 76 | function searchTree(d) { 77 | if (d.children) 78 | d.children.forEach(searchTree); 79 | else if (d._children) 80 | d._children.forEach(searchTree); 81 | var searchFieldValue = eval(searchField); 82 | if (searchFieldValue && searchFieldValue.match(searchText)) { 83 | // Walk parent chain 84 | var ancestors = []; 85 | var parent = d; 86 | while (typeof(parent) !== "undefined") { 87 | ancestors.push(parent); 88 | //console.log(parent); 89 | parent.class = "found"; 90 | parent = parent.parent; 91 | } 92 | //console.log(ancestors); 93 | } 94 | } 95 | 96 | //=============================================== 97 | function clearAll(d) { 98 | d.class = ""; 99 | if (d.children) 100 | d.children.forEach(clearAll); 101 | else if (d._children) 102 | d._children.forEach(clearAll); 103 | } 104 | 105 | //=============================================== 106 | function collapse(d) { 107 | if (d.children) { 108 | d._children = d.children; 109 | d._children.forEach(collapse); 110 | d.children = null; 111 | } 112 | } 113 | 114 | //=============================================== 115 | function collapseAllNotFound(d) { 116 | if (d.children) { 117 | if (d.class !== "found") { 118 | d._children = d.children; 119 | d._children.forEach(collapseAllNotFound); 120 | d.children = null; 121 | } else 122 | d.children.forEach(collapseAllNotFound); 123 | } 124 | } 125 | 126 | //=============================================== 127 | function expandAll(d) { 128 | if (d._children) { 129 | d.children = d._children; 130 | d.children.forEach(expandAll); 131 | d._children = null; 132 | } else if (d.children) 133 | d.children.forEach(expandAll); 134 | } 135 | 136 | //=============================================== 137 | // Toggle children on click. 138 | function toggle(d) { 139 | if (d.children) { 140 | d._children = d.children; 141 | d.children = null; 142 | } else { 143 | d.children = d._children; 144 | d._children = null; 145 | } 146 | clearAll(rootSearch); 147 | updateSearch(d); 148 | $("#searchName").select2("val", ""); 149 | } 150 | 151 | 152 | //=============================================== 153 | function updateSearch(source) { 154 | 155 | // Compute the new tree layout. 156 | var nodesSeach = treeSearch.nodes(rootSearch).reverse(), 157 | linksSearch = treeSearch.links(nodesSeach); 158 | 159 | // Normalize for fixed-depth. 160 | nodesSeach.forEach(function(d) { d.y = d.depth * 180; }); 161 | 162 | // Update the nodes… 163 | var nodeSearch = svg.selectAll("g.nodeSearch") 164 | .data(nodesSeach, function(d) { return d.id || (d.id = ++i); }); 165 | 166 | // Enter any new nodes at the parent's previous position. 167 | var nodeEnter2 = nodeSearch.enter().append("g") 168 | .attr("class", "nodeSearch") 169 | .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 170 | .on("click", toggle); 171 | 172 | nodeEnter2.append("circle") 173 | .attr("r", 1e-6) 174 | .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 175 | 176 | nodeEnter2.append("text") 177 | .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 178 | .attr("dy", ".35em") 179 | .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 180 | .text(function(d) { return d.name; }) 181 | .style("fill-opacity", 1e-6); 182 | 183 | // Transition nodes to their new position. 184 | var nodeUpdate = nodeSearch.transition() 185 | .duration(duration) 186 | .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 187 | 188 | nodeUpdate.select("circle") 189 | .attr("r", 4.5) 190 | .style("fill", function(d) { 191 | if (d.class === "found") { 192 | return "#ff4136"; //red 193 | } else if (d._children) { 194 | return "lightsteelblue"; 195 | } else { 196 | return "#fff"; 197 | } 198 | }) 199 | .style("stroke", function(d) { 200 | if (d.class === "found") { 201 | return "#ff4136"; //red 202 | } 203 | }); 204 | 205 | nodeUpdate.select("text") 206 | .style("fill-opacity", 1); 207 | 208 | // Transition exiting nodes to the parent's new position. 209 | var nodeExit = nodeSearch.exit().transition() 210 | .duration(duration) 211 | .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 212 | .remove(); 213 | 214 | nodeExit.select("circle") 215 | .attr("r", 1e-6); 216 | 217 | nodeExit.select("text") 218 | .style("fill-opacity", 1e-6); 219 | 220 | // Update the links… 221 | var linkSearch = svg.selectAll("path.linkSearch") 222 | .data(linksSearch, function(d) { return d.target.id; }); 223 | 224 | // Enter any new links at the parent's previous position. 225 | linkSearch.enter().insert("path", "g") 226 | .attr("class", "linkSearch") 227 | .attr("d", function(d) { 228 | var o = {x: source.x0, y: source.y0}; 229 | return diagonal({source: o, target: o}); 230 | }); 231 | 232 | // Transition links to their new position. 233 | linkSearch.transition() 234 | .duration(duration) 235 | .attr("d", diagonal) 236 | .style("stroke", function(d) { 237 | if (d.target.class === "found") { 238 | return "#ff4136"; 239 | } 240 | }); 241 | 242 | // Transition exiting nodes to the parent's new position. 243 | linkSearch.exit().transition() 244 | .duration(duration) 245 | .attr("d", function(d) { 246 | var o = {x: source.x, y: source.y}; 247 | return diagonal({source: o, target: o}); 248 | }) 249 | .remove(); 250 | 251 | // Stash the old positions for transition. 252 | nodesSeach.forEach(function(d) { 253 | d.x0 = d.x; 254 | d.y0 = d.y; 255 | }); 256 | } 257 | 258 | 259 | function collapse(d) { 260 | if (d.children) { 261 | d._children = d.children; 262 | d._children.forEach(collapse); 263 | d.children = null; 264 | } 265 | } -------------------------------------------------------------------------------- /IMDB/myscripts/sliderRelationship.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brush; 4 | var slider; 5 | var handle; 6 | var xScaleSlider; 7 | var xSlider = 3; 8 | var ySlider = 125; 9 | var valueSlider = 1; 10 | var valueMax = 10; 11 | function setupSliderScale(svg) { 12 | xScaleSlider = d3.scale.linear() 13 | .domain([0, valueMax]) 14 | .range([xSlider, 120]) 15 | ; 16 | 17 | //valueSlider = relationshipMaxMax2*0.1; 18 | brush = d3.svg.brush() 19 | .x(xScaleSlider) 20 | .extent([valueSlider, valueSlider]) 21 | .on("brush", brushed) 22 | .on("brushend", brushend); 23 | 24 | svg.append("g") 25 | .attr("class", "x axis") 26 | .attr("transform", "translate(0," + ySlider + ")") 27 | .attr("font-family", "sans-serif") 28 | .attr("font-size", "10px") 29 | .call(d3.svg.axis() 30 | .scale(xScaleSlider) 31 | .ticks(5) 32 | .orient("bottom") 33 | .tickFormat(function(d) { return d; }) 34 | .tickSize(0) 35 | .tickPadding(5)) 36 | .select(".domain") 37 | .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) 38 | .attr("class", "halo"); 39 | 40 | svg.append("text") 41 | .attr("class", "sliderText") 42 | .attr("x", xSlider) 43 | .attr("y", ySlider-12) 44 | .attr("dy", ".21em") 45 | .attr("font-family", "sans-serif") 46 | .attr("font-size", "10px") 47 | .text("Filter frequency") 48 | .style("text-anchor","start"); 49 | 50 | slider = svg.append("g") 51 | .attr("class", "slider") 52 | .call(brush); 53 | 54 | slider.selectAll(".extent,.resize") 55 | .remove(); 56 | 57 | slider.select(".background") 58 | .attr("y",ySlider-5) 59 | .attr("height", 10); 60 | 61 | handle = slider.append("circle") 62 | .attr("class", "handle") 63 | .attr("transform", "translate(0," + ySlider + ")") 64 | .attr("r", 5) 65 | .attr("cx", xScaleSlider(valueSlider)); 66 | } 67 | 68 | function brushed() { 69 | //console.log("Slider brushed ************** valueSlider="+valueSlider); 70 | valueSlider = brush.extent()[0]; 71 | if (d3.event.sourceEvent) { // not a programmatic event 72 | valueSlider = Math.max(xScaleSlider.invert(d3.mouse(this)[0]),0.5); 73 | valueSlider = Math.min(valueSlider, valueMax); 74 | valueSlider = Math.round(valueSlider); 75 | brush.extent([valueSlider, valueSlider]); 76 | } 77 | handle.attr("cx", xScaleSlider(valueSlider)); 78 | 79 | } 80 | function brushend() { 81 | // console.log("Slider brushed ************** valueSlider="+valueSlider); 82 | recompute(); 83 | } 84 | 85 | -------------------------------------------------------------------------------- /IMDB/myscripts/stopList.js: -------------------------------------------------------------------------------- 1 | var stopList = {}; 2 | stopList.america = 1; 3 | stopList.american = 1; 4 | stopList.republican = 1; -------------------------------------------------------------------------------- /IMDB/myscripts/streamGraph.js: -------------------------------------------------------------------------------- 1 | // Stream graph****************************************** 2 | 3 | 4 | function drawStreamTerm(svg, data_, ymin, ymax) { 5 | var x = d3.time.scale() 6 | .range([0, width]); 7 | 8 | var y = d3.scale.linear() 9 | .range([ymax, ymin]); 10 | 11 | 12 | var stack = d3.layout.stack() 13 | .offset("silhouette") 14 | .order("inside-out") 15 | .values(function(d) { return d.values; }) 16 | .x(function(d) { return d.date; }) 17 | .y(function(d) { return d.value; }); 18 | 19 | var nest = d3.nest() 20 | .key(function(d) { return d.key; }); 21 | 22 | var layers = stack(nest.entries(data_)); 23 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 24 | y.domain([0, d3.max(data_, function(d) { return d.yNode+d.y/2; })]); 25 | // y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 26 | 27 | var area = d3.svg.area() 28 | .interpolate("cardinal") 29 | .x(function(d) { return x(d.yearId); }) 30 | .y0(function(d) { return y(d.yNode-d.y/2); }) 31 | .y1(function(d) { return y(d.yNode+d.y/2); }); 32 | 33 | svg.selectAll(".layer") 34 | .data(layers) 35 | .enter().append("path") 36 | .attr("class", "layer") 37 | .attr("d", function(d) { return area(d.values); }) 38 | .style("fill-opacity",1) 39 | .style("fill", function(d, i) { 40 | return getColor(d.values[0].category, d.values[0].max); 41 | }); 42 | } 43 | 44 | function drawStreamSource(svg, data_, colorScale, ymin, ymax) { 45 | if (colorScale == "blue") { 46 | colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"]; 47 | } 48 | else if (colorScale == "pink") { 49 | colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"]; 50 | } 51 | else if (colorScale == "orange") { 52 | colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"]; 53 | } 54 | var z = d3.scale.ordinal() 55 | .range(colorrange); 56 | 57 | var x = d3.time.scale() 58 | .range([0, width]); 59 | 60 | var y = d3.scale.linear() 61 | .range([ymax, ymin]); 62 | 63 | 64 | var stack = d3.layout.stack() 65 | .offset("silhouette") 66 | .order("inside-out") 67 | .values(function(d) { return d.values; }) 68 | .x(function(d) { return d.date; }) 69 | .y(function(d) { return d.value; }); 70 | 71 | var nest = d3.nest() 72 | .key(function(d) { return d.key; }); 73 | 74 | var area = d3.svg.area() 75 | .interpolate("cardinal") 76 | .x(function(d) { return x(d.yearId); }) 77 | .y0(function(d) { return y(d.y0); }) 78 | .y1(function(d) { return y(d.y0+d.y); }); 79 | 80 | var layers = stack(nest.entries(data_)); 81 | // debugger; 82 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 83 | y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 84 | 85 | svg.selectAll(".layer") 86 | .data(layers) 87 | .enter().append("path") 88 | .attr("class", "layer") 89 | .attr("d", function(d) { return area(d.values); }) 90 | .style("fill-opacity",1) 91 | .style("fill", function(d, i) { return z(i); }); 92 | } -------------------------------------------------------------------------------- /IMDB/myscripts/util.js: -------------------------------------------------------------------------------- 1 | var diameter = 1000, 2 | radius = diameter / 2, 3 | innerRadius = radius - 120; 4 | 5 | // Add color legend 6 | function drawColorLegend() { 7 | var xx = 6; 8 | var y1 = 50; 9 | var y2 = 64; 10 | var y3 = 78; 11 | var y4 = 92; 12 | var y5 = 106; 13 | var rr = 6; 14 | 15 | svg.append("circle") 16 | .attr("class", "nodeLegend") 17 | .attr("cx", xx) 18 | .attr("cy", y1) 19 | .attr("r", rr) 20 | .style("fill", "#00aa00"); 21 | 22 | svg.append("text") 23 | .attr("class", "nodeLegend") 24 | .attr("x", xx+10) 25 | .attr("y", y1+2) 26 | //.text("adds_modification") 27 | // .text("InfoVis") 28 | .text("Comedy") 29 | .attr("dy", ".21em") 30 | .attr("font-family", "sans-serif") 31 | .attr("font-size", "12px") 32 | .style("text-anchor", "left") 33 | .style("fill", "#00aa00"); 34 | 35 | svg.append("circle") 36 | .attr("class", "nodeLegend") 37 | .attr("cx", xx) 38 | .attr("cy", y2) 39 | .attr("r", rr) 40 | .style("fill", "#cc0000"); 41 | 42 | svg.append("text") 43 | .attr("class", "nodeLegend") 44 | .attr("x", xx+10) 45 | .attr("y", y2+2) 46 | //.text("removes_modification") 47 | //.text("VAST") 48 | .text("Action") 49 | .attr("dy", ".21em") 50 | .attr("font-family", "sans-serif") 51 | .attr("font-size", "12px") 52 | .style("text-anchor", "left") 53 | .style("fill", "#cc0000"); 54 | 55 | svg.append("circle") 56 | .attr("class", "nodeLegend") 57 | .attr("cx", xx) 58 | .attr("cy", y3) 59 | .attr("r", rr) 60 | .style("fill", "#0000cc"); 61 | 62 | svg.append("text") 63 | .attr("class", "nodeLegend") 64 | .attr("x", xx+10) 65 | .attr("y", y3+2) 66 | // .text("translocation") 67 | // .text("SciVis") 68 | .text("Drama") 69 | .attr("dy", ".21em") 70 | .attr("font-family", "sans-serif") 71 | .attr("font-size", "12px") 72 | .style("text-anchor", "left") 73 | .style("fill", "#0000cc"); 74 | 75 | 76 | /* 77 | svg.append("circle") 78 | .attr("class", "nodeLegend") 79 | .attr("cx", xx) 80 | .attr("cy", y4) 81 | .attr("r", rr) 82 | .style("fill", "#ca0"); 83 | 84 | svg.append("text") 85 | .attr("class", "nodeLegend") 86 | .attr("x", xx+10) 87 | .attr("y", y4+2) 88 | .text("binds") 89 | // .text("SciVis") 90 | // .text("Drama") 91 | .attr("dy", ".21em") 92 | .attr("font-family", "sans-serif") 93 | .attr("font-size", "12px") 94 | .style("text-anchor", "left") 95 | .style("fill", "#ca0"); 96 | 97 | svg.append("circle") 98 | .attr("class", "nodeLegend") 99 | .attr("cx", xx) 100 | .attr("cy", y5) 101 | .attr("r", rr) 102 | .style("fill", "#f0f"); 103 | 104 | svg.append("text") 105 | .attr("class", "nodeLegend") 106 | .attr("x", xx+10) 107 | .attr("y", y5+2) 108 | .text("increases") 109 | // .text("SciVis") 110 | // .text("Drama") 111 | .attr("dy", ".21em") 112 | .attr("font-family", "sans-serif") 113 | .attr("font-size", "12px") 114 | .style("text-anchor", "left") 115 | .style("fill", "#f0f"); */ 116 | } 117 | 118 | function removeColorLegend() { 119 | svg.selectAll(".nodeLegend").remove(); 120 | } 121 | 122 | 123 | function getColor(category, count) { 124 | var minSat = 0; 125 | var maxSat = 200; 126 | var percent = count/(termMaxMax3); 127 | var sat = minSat+Math.round(percent*(maxSat-minSat)); 128 | //console.log(category+" "+count+" termMaxMax3="+termMaxMax3+" sat="+sat); 129 | if (category=="InfoVis" || category=="Comedy" || category=="adds_modification") 130 | return "rgb("+sat+", "+180+", "+sat+")" ; // leaf node 131 | else if (category=="VAST" || category=="Action" || category=="removes_modification") 132 | return "rgb("+230+", "+sat+", "+sat+")" ; // leaf node 133 | else if (category=="SciVis" || category=="Drama"|| category=="translocation") 134 | return "rgb("+sat+", "+sat+", "+230+")" ; // leaf node 135 | else if (category=="binds") 136 | return "rgb("+200+", "+150+", "+0+")" ; // leaf node 137 | else if (category=="increases") 138 | return "rgb("+255+", "+0+", "+255+")" ; // leaf node 139 | else{ 140 | console.log(category); 141 | return "#000000"; 142 | } 143 | } 144 | 145 | function colorFaded(d) { 146 | var minSat = 80; 147 | var maxSat = 200; 148 | var step = (maxSat-minSat)/maxDepth; 149 | var sat = Math.round(maxSat-d.depth*step); 150 | 151 | //console.log("maxDepth = "+maxDepth+" sat="+sat+" d.depth = "+d.depth+" step="+step); 152 | return d._children ? "rgb("+sat+", "+sat+", "+sat+")" // collapsed package 153 | : d.children ? "rgb("+sat+", "+sat+", "+sat+")" // expanded package 154 | : "#aaaacc"; // leaf node 155 | } 156 | 157 | 158 | function getBranchingAngle1(radius3, numChild) { 159 | if (numChild<=2){ 160 | return Math.pow(radius3,2); 161 | } 162 | else 163 | return Math.pow(radius3,1); 164 | } 165 | 166 | function getRadius(d) { 167 | // console.log("scaleCircle = "+scaleCircle +" scaleRadius="+scaleRadius); 168 | return d._children ? scaleCircle*Math.pow(d.childCount1, scaleRadius)// collapsed package 169 | : d.children ? scaleCircle*Math.pow(d.childCount1, scaleRadius) // expanded package 170 | : scaleCircle; 171 | // : 1; // leaf node 172 | } 173 | 174 | 175 | function childCount1(level, n) { 176 | count = 0; 177 | if(n.children && n.children.length > 0) { 178 | count += n.children.length; 179 | n.children.forEach(function(d) { 180 | count += childCount1(level + 1, d); 181 | }); 182 | n.childCount1 = count; 183 | } 184 | else{ 185 | n.childCount1 = 0; 186 | } 187 | return count; 188 | }; 189 | 190 | function childCount2(level, n) { 191 | var arr = []; 192 | if(n.children && n.children.length > 0) { 193 | n.children.forEach(function(d) { 194 | arr.push(d); 195 | }); 196 | } 197 | arr.sort(function(a,b) { return parseFloat(a.childCount1) - parseFloat(b.childCount1) } ); 198 | var arr2 = []; 199 | arr.forEach(function(d, i) { 200 | d.order1 = i; 201 | arr2.splice(arr2.length/2,0, d); 202 | }); 203 | arr2.forEach(function(d, i) { 204 | d.order2 = i; 205 | childCount2(level + 1, d); 206 | d.idDFS = nodeDFSCount++; // this set DFS id for nodes 207 | }); 208 | 209 | }; 210 | 211 | d3.select(self.frameElement).style("height", diameter + "px"); 212 | 213 | 214 | 215 | 216 | // Toggle children on click. 217 | function click(d) { 218 | /* if (d3.event.defaultPrevented) return; // ignore drag 219 | if (d.children) { 220 | d._children = d.children; 221 | d.children = null; 222 | } else { 223 | d.children = d._children; 224 | d._children = null; 225 | } 226 | console.log("Clicking on = "+d.name+ " d.depth = "+d.depth); 227 | 228 | update();*/ 229 | } 230 | 231 | /* 232 | function collide(alpha) { 233 | var quadtree = d3.geom.quadtree(tree_nodes); 234 | return function(d) { 235 | quadtree.visit(function(quad, x1, y1, x2, y2) { 236 | if (quad.point && (quad.point !== d) && (quad.point !== d.parent) && (quad.point.parent !== d)) { 237 | var rb = getRadius(d) + getRadius(quad.point), 238 | nx1 = d.x - rb, 239 | nx2 = d.x + rb, 240 | ny1 = d.y - rb, 241 | ny2 = d.y + rb; 242 | 243 | var x = d.x - quad.point.x, 244 | y = d.y - quad.point.y, 245 | l = Math.sqrt(x * x + y * y); 246 | if (l < rb) { 247 | l = (l - rb) / l * alpha; 248 | d.x -= x *= l; 249 | d.y -= y *= l; 250 | quad.point.x += x; 251 | quad.point.y += y; 252 | } 253 | } 254 | return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; 255 | }); 256 | }; 257 | } 258 | */ 259 | -------------------------------------------------------------------------------- /IndexCards/README.md: -------------------------------------------------------------------------------- 1 | ### TimeArcs for analyzing evidences in Biological Pathway Literature 2 | 3 | This document shows TimeArcs visualization for Pathway Commons index cards. Time axis goes from left (2000) to right (2014). An arc connects two proteins/complexes at a particular time (based on when the interaction was discovered/ publication year). The colors encode interaction types: green for adds_modification, red for removes_modification, blue for translocation, orange for binds, and pink for increases. A black (and usually thicker) arc indicates multiple interactions between two proteins/complexes which are discovered in the same year (and probably in the same publication). The horizontal lines connect multiple occurrences of the same proteins/complexes in different publications/years. Please try [online demo](http://www2.cs.uic.edu/~tdang/TimeArcs/IndexCards/). 4 | 5 | ![ScreenShot](https://github.com/CreativeCodingLab/TimeArcs/blob/master/IndexCards/images/PC2.png) 6 | 7 | Related proteins (proteins with similar connections to other nodes in the network) can be grouped together to provide a more compressed view as depicted in the following figure. 8 | 9 | ![ScreenShot](https://github.com/CreativeCodingLab/TimeArcs/blob/master/IndexCards/images/PC3.png) 10 | 11 | For the same amount of data, we can use a force directed layout (without time element) to visualize as depicted in the following image. Over-plotting protein/complex labels obscures the base graph, and the labels themselves. In contrast, by organizing text labels vertically (and evenly spaced) and locating them horizontally at the first occurrence (first publication year), TimeArcs reduces the over-plotting problem significantly as depicted in the above picture. 12 | 13 | ![ScreenShot](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/summary2.png) 14 | 15 | When there are multiple connections (arcs) between two proteins/complexes, it may falls into one of the two following circumstances: (1) If they have the same color (same interaction type), these are supporting evidences in different publications which confirm the interaction between two elements. (2) If they have the different colors (different interaction types), the latter evidence may adds more knowledge or conflicts the previous publication. We will show an example of each circumstances in the next Section. 16 | 17 | #### Supporting evidences: 18 | In the following figure, we show TimeArcs visualization for interactions between PCAF complex and other elements (which were recorded by evidences in Pathway Commons index cards). In particular above PCAF timeline, we can see there are new evidences in 2013 supporting "PCAF binds p300 and KAT3A" which was first discovered in 2011. Similarly under PCAF timeline, there are 3 evidences supporting "PCAF binds MAML" in 2008, 2011, and 2013. Here are the details of these 3 evidences: 19 | 20 | ![ScreenShot](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/supporting.png). 21 | 22 | (1) "Authored: Caudy, M, 2008-09-05", 23 | "Mammalian CSL Coactivator Complexes: Upon activation of Notch signaling, cleavage of the transmembrane Notch receptor releases the Notch Intracellular Domain (NICD), which translocates to the nucleus, where it binds to CSL and displaces the corepressor complex from CSL (reviewed in Mumm, 2000 and Kovall, 2007). The resulting CSL-NICD "binary complex" then recruits an additional coactivator, Mastermind (Mam), to form a ternary complex. The ternary complex then recruits additional, more general coactivators, such as CREB Binding Protein (CBP), or the related p300 coactivator, and a number of Histone Acetytransferase (HAT) proteins, including GCN5 and PCAF (Fryer, 2002). There is evidence that Mam also can subsequently recruit specific kinases that phosphorylate NICD, to downregulate its function and turn off Notch signaling (Fryer, 2004)." 24 | 25 | The complete PC card can be downloaded [here](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/supporting1.json). 26 | 27 | (2) "Authored: Egan, SE, Orlic-Milacic, M, 2011-11-14", 28 | "TAD and PEST domains of NOTCH intracellular domain contain multiple conserved cyclin-dependent kinase phosphorylation sites. In vitro, recombinant human CDK8 in complex with recombinant human cyclin C (CDK8:CCNC) readily phosphorylates recombinant Xenopus NICD1 (xNICD1). This phosphorylation also occurs when these recombinant proteins are expressed in HeLa cells, and was directly shown to involve conserved serine residues in the PEST domain. Phosphorylation by CDK8 targets xNICD1 for ubiquitination and subsequent degradation, thereby coordinating NICD1 transcriptional activity with NICD1 turnover." 29 | 30 | The complete PC card can be downloaded [here](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/supporting2.json). 31 | 32 | (3) "Authored: Orlic-Milacic, M, 2013-01-04", 33 | "While CDK8 can probably phosphorylate the TAD domain of NICD1 PEST domain mutants, it cannot phosphorylate the PEST domain of these mutants as it is partially or completely truncated." 34 | 35 | The complete PC card can be downloaded [here](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/supporting3.json). 36 | 37 | 38 | #### Conflicting evidences: 39 | 40 | In the following figure, we show TimeArcs visualization for interactions between OPSD protein and other elements. In particular, we can see there are a few conflicting evidences between 2003 and 2012 publications. We are going to show only one conflicting example where OPSD and K+ appear both in positive and negative regulations denoted as (1) and (2) in the following figure. 41 | 42 | ![ScreenShot](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/conflicting.png) 43 | 44 | 1) "Authored: Carleton, KL, 2003-07-31", "interaction_type" : "adds_modification", 45 | "Protein phosphatase 2A removes the phosphates from phosphorylated rhodopsin (p MII) and phosphorylated opsin (p-RHO) (Fowles et al. 1989, Palczewski et al. 1989a,b). A Ca2+ dependent opsin phosphatase is also present (Kutuzov & Bennett 1996). Serine/threonine protein phosphatases with EF hands (PPEF1 and 2) that share homology with Drosophila retinal degeneration C (rdgC) are expressed in retina and may be responsible (Huang & Honkanen 1998), there is no evidence for a physiological role in dephosphorylating rhodopsin. Once dephosphorylated, RHO can once again bind the chromophore 11 cis retinal (11cRAL), in readiness for the next photon response. Arrestin (S-antigen or SAG, Yamaki et al. 1988) binds to and sterically caps MII, preventing PPEF1 from dephosphorylating it." 46 | 47 | The complete PC card can be downloaded [here](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/conflicting1.json). 48 | 49 | (2) "Jassal, Bijay, 2012-11-13", "interaction_type" : "removes_modification", 50 | "Activated rhodopsin (MII aka R*) must be deactivated to terminate the single photon response. Deactivation begins during the rising phase of the single photon response after MII binds rhodopsin kinase (GRK1), a serine/threonine protein kinase (Khani et al. 1996). GRK1 is activated by MII whereupon it phosphorylates MII at multiple serine and threonine sites on its C terminus. There are six serine and threonine residues that can be phosphorylated. Increasing phosphorylation progressively reduces the rate at which MII can activate transducin but full quenching requires the binding of arrestin (S-antigen or SAG, Yamaki et al. 1988) which binds to and sterically caps MII (Burns & Pugh 2010, Korenbrot 2012).

A substantial fraction of rhodopsin kinase (GRK1) is bound to recoverin (RCVRN) in darkness, when internal Ca2+ levels are high. RCVRN is an EF-hand protein (Murakami et al. 1992) that functions as a myristoyl switch. With Ca2+ bound, the myristoyl group is exposed to attach RCVRN to the membrane. When Ca2+ levels drop with light exposure, Ca2+ dissociates from RCVRN and GRK1 is released. Higher levels of free GRK1 accelerate the phosphorylation and shutoff of photoexcited rhodopsin (MII).

Certain mutations in GRK1 cause Oguchi type 2 disease, a rare, recessive form of congenital stationary night blindness (https://sph.uth.edu/retnet/)." 51 | 52 | The complete PC card can be downloaded [here](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/conflicting2.json). 53 | 54 | 55 | -------------------------------------------------------------------------------- /IndexCards/data/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/data/.DS_Store -------------------------------------------------------------------------------- /IndexCards/data/pcCombined3.tsv: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/data/pcCombined3.tsv -------------------------------------------------------------------------------- /IndexCards/images/PC1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/images/PC1.png -------------------------------------------------------------------------------- /IndexCards/images/PC2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/images/PC2.png -------------------------------------------------------------------------------- /IndexCards/images/PC3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/images/PC3.png -------------------------------------------------------------------------------- /IndexCards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 97 | 98 | 99 | 100 | 101 | 102 |             103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /IndexCards/javascripts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/javascripts/.DS_Store -------------------------------------------------------------------------------- /IndexCards/javascripts/fisheye.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | d3.fisheye = { 3 | scale: function(scaleType) { 4 | return d3_fisheye_scale(scaleType(), 3, 0); 5 | }, 6 | circular: function() { 7 | var radius = 200, 8 | distortion = 2, 9 | k0, 10 | k1, 11 | focus = [0, 0]; 12 | 13 | function fisheye(d) { 14 | var dx = d.x - focus[0], 15 | dy = d.y - focus[1], 16 | dd = Math.sqrt(dx * dx + dy * dy); 17 | if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1}; 18 | var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25; 19 | return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)}; 20 | } 21 | 22 | function rescale() { 23 | k0 = Math.exp(distortion); 24 | k0 = k0 / (k0 - 1) * radius; 25 | k1 = distortion / radius; 26 | return fisheye; 27 | } 28 | 29 | fisheye.radius = function(_) { 30 | if (!arguments.length) return radius; 31 | radius = +_; 32 | return rescale(); 33 | }; 34 | 35 | fisheye.distortion = function(_) { 36 | if (!arguments.length) return distortion; 37 | distortion = +_; 38 | return rescale(); 39 | }; 40 | 41 | fisheye.focus = function(_) { 42 | if (!arguments.length) return focus; 43 | focus = _; 44 | return fisheye; 45 | }; 46 | 47 | return rescale(); 48 | } 49 | }; 50 | 51 | function d3_fisheye_scale(scale, d, a) { 52 | 53 | function fisheye(_) { 54 | var x = scale(_), 55 | left = x < a, 56 | range = d3.extent(scale.range()), 57 | min = range[0], 58 | max = range[1], 59 | m = left ? a - min : max - a; 60 | if (m == 0) m = max - min; 61 | return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a; 62 | } 63 | 64 | fisheye.distortion = function(_) { 65 | if (!arguments.length) return d; 66 | d = +_; 67 | return fisheye; 68 | }; 69 | 70 | fisheye.focus = function(_) { 71 | if (!arguments.length) return a; 72 | a = +_; 73 | return fisheye; 74 | }; 75 | 76 | fisheye.copy = function() { 77 | return d3_fisheye_scale(scale.copy(), d, a); 78 | }; 79 | 80 | fisheye.nice = scale.nice; 81 | fisheye.ticks = scale.ticks; 82 | fisheye.tickFormat = scale.tickFormat; 83 | return d3.rebind(fisheye, scale, "domain", "range"); 84 | } 85 | })(); -------------------------------------------------------------------------------- /IndexCards/javascripts/select2x2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/javascripts/select2x2.png -------------------------------------------------------------------------------- /IndexCards/javascripts/stopList.js: -------------------------------------------------------------------------------- 1 | var stopList = {}; 2 | stopList.america = 1; 3 | stopList.american = 1; 4 | stopList.republican = 1; -------------------------------------------------------------------------------- /IndexCards/myscripts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/IndexCards/myscripts/.DS_Store -------------------------------------------------------------------------------- /IndexCards/myscripts/saveFriesCards.js: -------------------------------------------------------------------------------- 1 | 2 | var data3; 3 | var nodes3 =[]; 4 | var links3 =[]; 5 | 6 | d3.json("data/cards-for-time-arcs.json", function(error, data_) { 7 | data3 = data_; 8 | 9 | }) 10 | 11 | function saveTimeArcsData() { 12 | console.log("*********** saveTimeArcsData ******************"); 13 | var csvContent = ""; 14 | /* 15 | var encodedUri = encodeURI(csvContent); 16 | var link = document.createElement("a"); 17 | link.setAttribute("href", encodedUri); 18 | link.setAttribute("download", "aaaavvv.tsv"); 19 | link.click(); // This will download the data file named "my_data.csv". 20 | console.log("*********** DONE save ******************");*/ 21 | 22 | nodes3List ={}; 23 | nodes.forEach(function(d, index){ 24 | if (nodes3List[d.name]==undefined){ 25 | var nod = {}; 26 | nod.name = d.name; 27 | nod.id = d.id; 28 | nod.index = nodes3.length; // The index make sure id start from 0; 29 | nodes3.push(nod); 30 | nodes3List[d.name] = nod; 31 | } 32 | else{ 33 | //if (d.id>nodes3List[d.name].id) 34 | // console.log("d.id="+d.id+" nodes3List[d.name]="+nodes3List[d.name].id); 35 | } 36 | }); 37 | 38 | links3List ={}; 39 | links.forEach(function(d, index){ 40 | var sourceName = d.source.name; 41 | var targetName = d.target.name; 42 | var source3 = nodes3List[sourceName]; 43 | var target3 = nodes3List[targetName]; 44 | if (links3List[sourceName+"__"+targetName]==undefined){ 45 | var lin = {}; 46 | lin.name = sourceName+"__"+targetName; 47 | lin.id = source3.id+target3.id; 48 | lin.source = source3; 49 | lin.target = target3; 50 | lin.count=1; 51 | links3.push(lin); 52 | links3List[lin.name] = lin; 53 | } 54 | else{ 55 | links3List[sourceName+"__"+targetName].count++; 56 | } 57 | }); 58 | 59 | csvContent += "{"+ "\n"; 60 | csvContent += '"nodes": ['+ "\n" 61 | 62 | nodes3.forEach(function(d, index){ 63 | csvContent += "\t"+'{"id": "'+d.index+'", "name": "'+ d.name +'", "group": '+ 1+'}'; 64 | //csvContent += "\t"+'{"id": "'+d.index+'", "group": '+ 1+'}'; 65 | if (index b) return 1; // sort 31 | if (a < b) return -1; 32 | return 0; 33 | }) 34 | .filter(function(item, i, ar) { 35 | return ar.indexOf(item) === i; 36 | }) // remove duplicate items 37 | .filter(function(item, i, ar) { 38 | select2DataObject.push({ 39 | "id": i, 40 | "text": item 41 | }); 42 | }); 43 | select2Data.sort(function(a, b) { 44 | if (a > b) return 1; // sort 45 | if (a < b) return -1; 46 | return 0; 47 | }) 48 | .filter(function(item, i, ar) { 49 | return ar.indexOf(item) === i; 50 | }) // remove duplicate items 51 | .filter(function(item, i, ar) { 52 | select2DataObject.push({ 53 | "id": i, 54 | "text": item 55 | }); 56 | }); 57 | $("#searchName").select2({ 58 | data: select2DataObject, 59 | containerCssClass: "search" 60 | }); 61 | rootSearch.children.forEach(collapse); 62 | updateSearch(rootSearch); 63 | } 64 | 65 | 66 | //=============================================== 67 | function select2DataCollectName(d) { 68 | if (d.children) 69 | d.children.forEach(select2DataCollectName); 70 | else if (d._children) 71 | d._children.forEach(select2DataCollectName); 72 | select2Data.push(d.name); 73 | } 74 | 75 | //=============================================== 76 | function searchTree(d) { 77 | if (d.children) 78 | d.children.forEach(searchTree); 79 | else if (d._children) 80 | d._children.forEach(searchTree); 81 | var searchFieldValue = eval(searchField); 82 | if (searchFieldValue && searchFieldValue.match(searchText)) { 83 | // Walk parent chain 84 | var ancestors = []; 85 | var parent = d; 86 | while (typeof(parent) !== "undefined") { 87 | ancestors.push(parent); 88 | //console.log(parent); 89 | parent.class = "found"; 90 | parent = parent.parent; 91 | } 92 | //console.log(ancestors); 93 | } 94 | } 95 | 96 | //=============================================== 97 | function clearAll(d) { 98 | d.class = ""; 99 | if (d.children) 100 | d.children.forEach(clearAll); 101 | else if (d._children) 102 | d._children.forEach(clearAll); 103 | } 104 | 105 | //=============================================== 106 | function collapse(d) { 107 | if (d.children) { 108 | d._children = d.children; 109 | d._children.forEach(collapse); 110 | d.children = null; 111 | } 112 | } 113 | 114 | //=============================================== 115 | function collapseAllNotFound(d) { 116 | if (d.children) { 117 | if (d.class !== "found") { 118 | d._children = d.children; 119 | d._children.forEach(collapseAllNotFound); 120 | d.children = null; 121 | } else 122 | d.children.forEach(collapseAllNotFound); 123 | } 124 | } 125 | 126 | //=============================================== 127 | function expandAll(d) { 128 | if (d._children) { 129 | d.children = d._children; 130 | d.children.forEach(expandAll); 131 | d._children = null; 132 | } else if (d.children) 133 | d.children.forEach(expandAll); 134 | } 135 | 136 | //=============================================== 137 | // Toggle children on click. 138 | function toggle(d) { 139 | if (d.children) { 140 | d._children = d.children; 141 | d.children = null; 142 | } else { 143 | d.children = d._children; 144 | d._children = null; 145 | } 146 | clearAll(rootSearch); 147 | updateSearch(d); 148 | $("#searchName").select2("val", ""); 149 | } 150 | 151 | 152 | //=============================================== 153 | function updateSearch(source) { 154 | 155 | // Compute the new tree layout. 156 | var nodesSeach = treeSearch.nodes(rootSearch).reverse(), 157 | linksSearch = treeSearch.links(nodesSeach); 158 | 159 | // Normalize for fixed-depth. 160 | nodesSeach.forEach(function(d) { d.y = d.depth * 180; }); 161 | 162 | // Update the nodes… 163 | var nodeSearch = svg.selectAll("g.nodeSearch") 164 | .data(nodesSeach, function(d) { return d.id || (d.id = ++i); }); 165 | 166 | // Enter any new nodes at the parent's previous position. 167 | var nodeEnter2 = nodeSearch.enter().append("g") 168 | .attr("class", "nodeSearch") 169 | .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 170 | .on("click", toggle); 171 | 172 | nodeEnter2.append("circle") 173 | .attr("r", 1e-6) 174 | .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 175 | 176 | nodeEnter2.append("text") 177 | .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 178 | .attr("dy", ".35em") 179 | .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 180 | .text(function(d) { return d.name; }) 181 | .style("fill-opacity", 1e-6); 182 | 183 | // Transition nodes to their new position. 184 | var nodeUpdate = nodeSearch.transition() 185 | .duration(duration) 186 | .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 187 | 188 | nodeUpdate.select("circle") 189 | .attr("r", 4.5) 190 | .style("fill", function(d) { 191 | if (d.class === "found") { 192 | return "#ff4136"; //red 193 | } else if (d._children) { 194 | return "lightsteelblue"; 195 | } else { 196 | return "#fff"; 197 | } 198 | }) 199 | .style("stroke", function(d) { 200 | if (d.class === "found") { 201 | return "#ff4136"; //red 202 | } 203 | }); 204 | 205 | nodeUpdate.select("text") 206 | .style("fill-opacity", 1); 207 | 208 | // Transition exiting nodes to the parent's new position. 209 | var nodeExit = nodeSearch.exit().transition() 210 | .duration(duration) 211 | .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 212 | .remove(); 213 | 214 | nodeExit.select("circle") 215 | .attr("r", 1e-6); 216 | 217 | nodeExit.select("text") 218 | .style("fill-opacity", 1e-6); 219 | 220 | // Update the links… 221 | var linkSearch = svg.selectAll("path.linkSearch") 222 | .data(linksSearch, function(d) { return d.target.id; }); 223 | 224 | // Enter any new links at the parent's previous position. 225 | linkSearch.enter().insert("path", "g") 226 | .attr("class", "linkSearch") 227 | .attr("d", function(d) { 228 | var o = {x: source.x0, y: source.y0}; 229 | return diagonal({source: o, target: o}); 230 | }); 231 | 232 | // Transition links to their new position. 233 | linkSearch.transition() 234 | .duration(duration) 235 | .attr("d", diagonal) 236 | .style("stroke", function(d) { 237 | if (d.target.class === "found") { 238 | return "#ff4136"; 239 | } 240 | }); 241 | 242 | // Transition exiting nodes to the parent's new position. 243 | linkSearch.exit().transition() 244 | .duration(duration) 245 | .attr("d", function(d) { 246 | var o = {x: source.x, y: source.y}; 247 | return diagonal({source: o, target: o}); 248 | }) 249 | .remove(); 250 | 251 | // Stash the old positions for transition. 252 | nodesSeach.forEach(function(d) { 253 | d.x0 = d.x; 254 | d.y0 = d.y; 255 | }); 256 | } 257 | 258 | 259 | function collapse(d) { 260 | if (d.children) { 261 | d._children = d.children; 262 | d._children.forEach(collapse); 263 | d.children = null; 264 | } 265 | } -------------------------------------------------------------------------------- /IndexCards/myscripts/sliderRadius.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brushRadius; 4 | var sliderRadius; 5 | var handleRadius; 6 | var xScaleRadius; 7 | 8 | var ySliderRadius = 70; 9 | 10 | function setupSliderRadius(svg) { 11 | xScaleRadius = d3.scale.linear() 12 | .domain([0.1, 1]) 13 | .range([xSlider, 180]) 14 | .clamp(true); 15 | 16 | brushRadius = d3.svg.brush() 17 | .x(xScaleRadius) 18 | .extent([scaleRadius, scaleRadius]) 19 | .on("brush", brushedRadius); 20 | 21 | svg.append("g") 22 | .attr("class", "x axis") 23 | .attr("transform", "translate(0," + ySliderRadius + ")") 24 | .attr("font-family", "sans-serif") 25 | .attr("font-size", "10px") 26 | .call(d3.svg.axis() 27 | .scale(xScaleRadius) 28 | .ticks(4) 29 | .orient("bottom") 30 | .tickFormat(function(d) { return d; }) 31 | .tickSize(0) 32 | .tickPadding(5)) 33 | .select(".domain") 34 | .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) 35 | .attr("class", "halo"); 36 | 37 | svg.append("text") 38 | .attr("class", "sliderText") 39 | .attr("x", xSlider-5) 40 | .attr("y", ySliderRadius) 41 | .attr("dy", ".21em") 42 | .attr("font-family", "sans-serif") 43 | .attr("font-size", "10px") 44 | .text("Scale Children") 45 | .style("text-anchor","end"); 46 | 47 | sliderRadius = svg.append("g") 48 | .attr("class", "slider") 49 | .call(brushRadius); 50 | 51 | sliderRadius.selectAll(".extent,.resize") 52 | .remove(); 53 | 54 | sliderRadius.select(".background") 55 | .attr("y",ySliderRadius-5) 56 | .attr("height", 10); 57 | 58 | handleRadius = sliderRadius.append("circle") 59 | .attr("class", "handle") 60 | .attr("transform", "translate(0," + ySliderRadius + ")") 61 | .attr("r", 6); 62 | 63 | sliderRadius 64 | .call(brushRadius.event) 65 | .transition() // gratuitous intro! 66 | .duration(750) 67 | .call(brushRadius.event); 68 | } 69 | 70 | function brushedRadius() { 71 | var value = brushRadius.extent()[0]; 72 | 73 | if (d3.event.sourceEvent) { // not a programmatic event 74 | value = xScaleRadius.invert(d3.mouse(this)[0]); 75 | brushRadius.extent([value, value]); 76 | } 77 | handleRadius.attr("cx", xScaleRadius(value)); 78 | scaleRadius =value; 79 | 80 | //d3.select("body").style("background-color", d3.hsl(value*20, .8, .8)); 81 | 82 | // scaleRate = height/(height-minY); 83 | //scaleCircle = 10-value; 84 | //handle.attr("cx", xScale(scaleCircle)); 85 | //console.log("scaleCircle1 = "+scaleCircle); 86 | 87 | setupTree(); 88 | update(); 89 | } 90 | -------------------------------------------------------------------------------- /IndexCards/myscripts/sliderRelationship.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brush; 4 | var slider; 5 | var handle; 6 | var xScaleSlider; 7 | var xSlider = 3; 8 | var ySlider = 125; 9 | var valueSlider = 1; 10 | var valueMax = 10; 11 | function setupSliderScale(svg) { 12 | xScaleSlider = d3.scale.linear() 13 | .domain([0, valueMax]) 14 | .range([xSlider, 120]) 15 | ; 16 | 17 | //valueSlider = relationshipMaxMax2*0.1; 18 | brush = d3.svg.brush() 19 | .x(xScaleSlider) 20 | .extent([valueSlider, valueSlider]) 21 | .on("brush", brushed) 22 | .on("brushend", brushend); 23 | 24 | svg.append("g") 25 | .attr("class", "x axis") 26 | .attr("transform", "translate(0," + ySlider + ")") 27 | .attr("font-family", "sans-serif") 28 | .attr("font-size", "10px") 29 | .call(d3.svg.axis() 30 | .scale(xScaleSlider) 31 | .ticks(5) 32 | .orient("bottom") 33 | .tickFormat(function(d) { return d; }) 34 | .tickSize(0) 35 | .tickPadding(5)) 36 | .select(".domain") 37 | .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) 38 | .attr("class", "halo"); 39 | 40 | svg.append("text") 41 | .attr("class", "sliderText") 42 | .attr("x", xSlider) 43 | .attr("y", ySlider-12) 44 | .attr("dy", ".21em") 45 | .attr("font-family", "sans-serif") 46 | .attr("font-size", "10px") 47 | .text("Mentioned together") 48 | .style("text-anchor","start"); 49 | 50 | slider = svg.append("g") 51 | .attr("class", "slider") 52 | .call(brush); 53 | 54 | slider.selectAll(".extent,.resize") 55 | .remove(); 56 | 57 | slider.select(".background") 58 | .attr("y",ySlider-5) 59 | .attr("height", 10); 60 | 61 | handle = slider.append("circle") 62 | .attr("class", "handle") 63 | .attr("transform", "translate(0," + ySlider + ")") 64 | .attr("r", 5) 65 | .attr("cx", xScaleSlider(valueSlider)); 66 | } 67 | 68 | function brushed() { 69 | //console.log("Slider brushed ************** valueSlider="+valueSlider); 70 | valueSlider = brush.extent()[0]; 71 | if (d3.event.sourceEvent) { // not a programmatic event 72 | valueSlider = Math.max(xScaleSlider.invert(d3.mouse(this)[0]),0.5); 73 | valueSlider = Math.min(valueSlider, valueMax); 74 | valueSlider = Math.round(valueSlider); 75 | brush.extent([valueSlider, valueSlider]); 76 | } 77 | handle.attr("cx", xScaleSlider(valueSlider)); 78 | 79 | } 80 | function brushend() { 81 | // console.log("Slider brushed ************** valueSlider="+valueSlider); 82 | recompute(); 83 | } 84 | 85 | -------------------------------------------------------------------------------- /IndexCards/myscripts/streamGraph.js: -------------------------------------------------------------------------------- 1 | // Stream graph****************************************** 2 | 3 | 4 | function drawStreamTerm(svg, data_, ymin, ymax) { 5 | var x = d3.time.scale() 6 | .range([0, width]); 7 | 8 | var y = d3.scale.linear() 9 | .range([ymax, ymin]); 10 | 11 | 12 | var stack = d3.layout.stack() 13 | .offset("silhouette") 14 | .order("inside-out") 15 | .values(function(d) { return d.values; }) 16 | .x(function(d) { return d.date; }) 17 | .y(function(d) { return d.value; }); 18 | 19 | var nest = d3.nest() 20 | .key(function(d) { return d.key; }); 21 | 22 | var layers = stack(nest.entries(data_)); 23 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 24 | y.domain([0, d3.max(data_, function(d) { return d.yNode+d.y/2; })]); 25 | // y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 26 | 27 | var area = d3.svg.area() 28 | .interpolate("cardinal") 29 | .x(function(d) { return x(d.yearId); }) 30 | .y0(function(d) { return y(d.yNode-d.y/2); }) 31 | .y1(function(d) { return y(d.yNode+d.y/2); }); 32 | 33 | svg.selectAll(".layer") 34 | .data(layers) 35 | .enter().append("path") 36 | .attr("class", "layer") 37 | .attr("d", function(d) { return area(d.values); }) 38 | .style("fill-opacity",1) 39 | .style("fill", function(d, i) { 40 | return getColor(d.values[0].category, d.values[0].max); 41 | }); 42 | } 43 | 44 | function drawStreamSource(svg, data_, colorScale, ymin, ymax) { 45 | if (colorScale == "blue") { 46 | colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"]; 47 | } 48 | else if (colorScale == "pink") { 49 | colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"]; 50 | } 51 | else if (colorScale == "orange") { 52 | colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"]; 53 | } 54 | var z = d3.scale.ordinal() 55 | .range(colorrange); 56 | 57 | var x = d3.time.scale() 58 | .range([0, width]); 59 | 60 | var y = d3.scale.linear() 61 | .range([ymax, ymin]); 62 | 63 | 64 | var stack = d3.layout.stack() 65 | .offset("silhouette") 66 | .order("inside-out") 67 | .values(function(d) { return d.values; }) 68 | .x(function(d) { return d.date; }) 69 | .y(function(d) { return d.value; }); 70 | 71 | var nest = d3.nest() 72 | .key(function(d) { return d.key; }); 73 | 74 | var area = d3.svg.area() 75 | .interpolate("cardinal") 76 | .x(function(d) { return x(d.yearId); }) 77 | .y0(function(d) { return y(d.y0); }) 78 | .y1(function(d) { return y(d.y0+d.y); }); 79 | 80 | var layers = stack(nest.entries(data_)); 81 | // debugger; 82 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 83 | y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 84 | 85 | svg.selectAll(".layer") 86 | .data(layers) 87 | .enter().append("path") 88 | .attr("class", "layer") 89 | .attr("d", function(d) { return area(d.values); }) 90 | .style("fill-opacity",1) 91 | .style("fill", function(d, i) { return z(i); }); 92 | } -------------------------------------------------------------------------------- /IndexCards/myscripts/util.js: -------------------------------------------------------------------------------- 1 | var diameter = 1000, 2 | radius = diameter / 2, 3 | innerRadius = radius - 120; 4 | 5 | // Add color legend 6 | function drawColorLegend() { 7 | var xx = 6; 8 | var y1 = 20; 9 | var y2 = 34; 10 | var y3 = 48; 11 | var y4 = 62; 12 | var y5 = 76; 13 | var rr = 6; 14 | 15 | svg.append("circle") 16 | .attr("class", "nodeLegend") 17 | .attr("cx", xx) 18 | .attr("cy", y1) 19 | .attr("r", rr) 20 | .style("fill", "#00aa00"); 21 | 22 | svg.append("text") 23 | .attr("class", "nodeLegend") 24 | .attr("x", xx+10) 25 | .attr("y", y1+2) 26 | .text("increases_activity") 27 | // .text("adds_modification") 28 | // .text("InfoVis") 29 | //.text("Comedy") 30 | .attr("dy", ".21em") 31 | .attr("font-family", "sans-serif") 32 | .attr("font-size", "12px") 33 | .style("text-anchor", "left") 34 | .style("fill", "#00aa00"); 35 | 36 | svg.append("circle") 37 | .attr("class", "nodeLegend") 38 | .attr("cx", xx) 39 | .attr("cy", y2) 40 | .attr("r", rr) 41 | .style("fill", "#cc0000"); 42 | 43 | svg.append("text") 44 | .attr("class", "nodeLegend") 45 | .attr("x", xx+10) 46 | .attr("y", y2+2) 47 | .text("decreases_activity") 48 | //.text("removes_modification") 49 | //.text("VAST") 50 | //.text("Action") 51 | .attr("dy", ".21em") 52 | .attr("font-family", "sans-serif") 53 | .attr("font-size", "12px") 54 | .style("text-anchor", "left") 55 | .style("fill", "#cc0000"); 56 | 57 | svg.append("circle") 58 | .attr("class", "nodeLegend") 59 | .attr("cx", xx) 60 | .attr("cy", y3) 61 | .attr("r", rr) 62 | .style("fill", "#0000cc"); 63 | 64 | svg.append("text") 65 | .attr("class", "nodeLegend") 66 | .attr("x", xx+10) 67 | .attr("y", y3+2) 68 | .text("translocation") 69 | // .text("SciVis") 70 | // .text("Drama") 71 | .attr("dy", ".21em") 72 | .attr("font-family", "sans-serif") 73 | .attr("font-size", "12px") 74 | .style("text-anchor", "left") 75 | .style("fill", "#0000cc"); 76 | 77 | 78 | svg.append("circle") 79 | .attr("class", "nodeLegend") 80 | .attr("cx", xx) 81 | .attr("cy", y4) 82 | .attr("r", rr) 83 | .style("fill", "#ca0"); 84 | 85 | svg.append("text") 86 | .attr("class", "nodeLegend") 87 | .attr("x", xx+10) 88 | .attr("y", y4+2) 89 | .text("binds") 90 | // .text("SciVis") 91 | // .text("Drama") 92 | .attr("dy", ".21em") 93 | .attr("font-family", "sans-serif") 94 | .attr("font-size", "12px") 95 | .style("text-anchor", "left") 96 | .style("fill", "#ca0"); 97 | 98 | svg.append("circle") 99 | .attr("class", "nodeLegend") 100 | .attr("cx", xx) 101 | .attr("cy", y5) 102 | .attr("r", rr) 103 | .style("fill", "#f0f"); 104 | 105 | svg.append("text") 106 | .attr("class", "nodeLegend") 107 | .attr("x", xx+10) 108 | .attr("y", y5+2) 109 | .text("increases") 110 | // .text("SciVis") 111 | // .text("Drama") 112 | .attr("dy", ".21em") 113 | .attr("font-family", "sans-serif") 114 | .attr("font-size", "12px") 115 | .style("text-anchor", "left") 116 | .style("fill", "#f0f"); 117 | } 118 | 119 | function removeColorLegend() { 120 | svg.selectAll(".nodeLegend").remove(); 121 | } 122 | function drawTimeLegend() { 123 | for (var i=minYear; i
A substantial fraction of rhodopsin kinase (GRK1) is bound to recoverin (RCVRN) in darkness, when internal Ca2+ levels are high. RCVRN is an EF-hand protein (Murakami et al. 1992) that functions as a myristoyl switch. With Ca2+ bound, the myristoyl group is exposed to attach RCVRN to the membrane. When Ca2+ levels drop with light exposure, Ca2+ dissociates from RCVRN and GRK1 is released. Higher levels of free GRK1 accelerate the phosphorylation and shutoff of photoexcited rhodopsin (MII).

Certain mutations in GRK1 cause Oguchi type 2 disease, a rare, recessive form of congenital stationary night blindness (https://sph.uth.edu/retnet/)." 51 | 52 | The complete PC card can be downloaded [here](http://www.cs.uic.edu/~tdang/TimeArcs/imagesForPCcards/conflicting2.json). 53 | 54 | 55 | -------------------------------------------------------------------------------- /League/data/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/League/data/.DS_Store -------------------------------------------------------------------------------- /League/data/league.tsv: -------------------------------------------------------------------------------- 1 | Time Location Title Teams 10:00 Field A Game 1 Viet-Chicago vs. Team 4 10:00 Field B Game 2 Team 2 vs. Team 3 11:40 Field A Game 3 Viet-Chicago vs. Team 3 11:40 Field B Game 4 Team 4 vs. Legends 13:20 Field A Game 5 Team 3 vs. Legends 13:20 Field B Game 6 Viet-Chicago vs. Team 2 15:00 Field A Game 7 Team 2 vs. Legends 15:00 Field B Game 8 Team 3 vs. Team 4 16:40 Field A Game 9 Team 2 vs. Team 4 16:40 Field B Game 10 Viet-Chicago vs. Legends -------------------------------------------------------------------------------- /League/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/League/images/.DS_Store -------------------------------------------------------------------------------- /League/images/HamlinField.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/League/images/HamlinField.jpg -------------------------------------------------------------------------------- /League/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 92 | 93 | 94 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /League/javascripts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/League/javascripts/.DS_Store -------------------------------------------------------------------------------- /League/javascripts/fisheye.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | d3.fisheye = { 3 | scale: function(scaleType) { 4 | return d3_fisheye_scale(scaleType(), 3, 0); 5 | }, 6 | circular: function() { 7 | var radius = 200, 8 | distortion = 2, 9 | k0, 10 | k1, 11 | focus = [0, 0]; 12 | 13 | function fisheye(d) { 14 | var dx = d.x - focus[0], 15 | dy = d.y - focus[1], 16 | dd = Math.sqrt(dx * dx + dy * dy); 17 | if (!dd || dd >= radius) return {x: d.x, y: d.y, z: 1}; 18 | var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25; 19 | return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)}; 20 | } 21 | 22 | function rescale() { 23 | k0 = Math.exp(distortion); 24 | k0 = k0 / (k0 - 1) * radius; 25 | k1 = distortion / radius; 26 | return fisheye; 27 | } 28 | 29 | fisheye.radius = function(_) { 30 | if (!arguments.length) return radius; 31 | radius = +_; 32 | return rescale(); 33 | }; 34 | 35 | fisheye.distortion = function(_) { 36 | if (!arguments.length) return distortion; 37 | distortion = +_; 38 | return rescale(); 39 | }; 40 | 41 | fisheye.focus = function(_) { 42 | if (!arguments.length) return focus; 43 | focus = _; 44 | return fisheye; 45 | }; 46 | 47 | return rescale(); 48 | } 49 | }; 50 | 51 | function d3_fisheye_scale(scale, d, a) { 52 | 53 | function fisheye(_) { 54 | var x = scale(_), 55 | left = x < a, 56 | range = d3.extent(scale.range()), 57 | min = range[0], 58 | max = range[1], 59 | m = left ? a - min : max - a; 60 | if (m == 0) m = max - min; 61 | return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a; 62 | } 63 | 64 | fisheye.distortion = function(_) { 65 | if (!arguments.length) return d; 66 | d = +_; 67 | return fisheye; 68 | }; 69 | 70 | fisheye.focus = function(_) { 71 | if (!arguments.length) return a; 72 | a = +_; 73 | return fisheye; 74 | }; 75 | 76 | fisheye.copy = function() { 77 | return d3_fisheye_scale(scale.copy(), d, a); 78 | }; 79 | 80 | fisheye.nice = scale.nice; 81 | fisheye.ticks = scale.ticks; 82 | fisheye.tickFormat = scale.tickFormat; 83 | return d3.rebind(fisheye, scale, "domain", "range"); 84 | } 85 | })(); -------------------------------------------------------------------------------- /League/javascripts/select2x2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/League/javascripts/select2x2.png -------------------------------------------------------------------------------- /League/javascripts/stopList.js: -------------------------------------------------------------------------------- 1 | var stopList = {}; 2 | stopList.america = 1; 3 | stopList.american = 1; 4 | stopList.republican = 1; -------------------------------------------------------------------------------- /League/myscripts/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreativeCodingLab/TimeArcs/191794715f46503b3bafddf43859dae3de1d699d/League/myscripts/.DS_Store -------------------------------------------------------------------------------- /League/myscripts/searchBox.js: -------------------------------------------------------------------------------- 1 | function addSearchBox() { 2 | //=============================================== 3 | $("#searchName").on("select2-selecting", function(e) { 4 | clearAll(root); 5 | clearAll(rootSearch); 6 | expandAll(rootSearch); 7 | updateSearch(rootSearch); 8 | 9 | searchField = "d.name"; 10 | searchText = e.object.text; 11 | searchTree(rootSearch); 12 | rootSearch.children.forEach(collapseAllNotFound); 13 | updateSearch(rootSearch); 14 | }) 15 | 16 | treeSearch = d3.layout.tree() 17 | .size([height, width]); 18 | 19 | diagonal = d3.svg.diagonal() 20 | .projection(function(d) { return [d.y, d.x]; }); 21 | 22 | rootSearch = root; 23 | rootSearch.x0 = height / 2; 24 | rootSearch.y0 = 0; 25 | 26 | select2Data = []; 27 | select2DataCollectName(rootSearch); 28 | select2DataObject = []; 29 | select2Data.sort(function(a, b) { 30 | if (a > b) return 1; // sort 31 | if (a < b) return -1; 32 | return 0; 33 | }) 34 | .filter(function(item, i, ar) { 35 | return ar.indexOf(item) === i; 36 | }) // remove duplicate items 37 | .filter(function(item, i, ar) { 38 | select2DataObject.push({ 39 | "id": i, 40 | "text": item 41 | }); 42 | }); 43 | select2Data.sort(function(a, b) { 44 | if (a > b) return 1; // sort 45 | if (a < b) return -1; 46 | return 0; 47 | }) 48 | .filter(function(item, i, ar) { 49 | return ar.indexOf(item) === i; 50 | }) // remove duplicate items 51 | .filter(function(item, i, ar) { 52 | select2DataObject.push({ 53 | "id": i, 54 | "text": item 55 | }); 56 | }); 57 | $("#searchName").select2({ 58 | data: select2DataObject, 59 | containerCssClass: "search" 60 | }); 61 | rootSearch.children.forEach(collapse); 62 | updateSearch(rootSearch); 63 | } 64 | 65 | 66 | //=============================================== 67 | function select2DataCollectName(d) { 68 | if (d.children) 69 | d.children.forEach(select2DataCollectName); 70 | else if (d._children) 71 | d._children.forEach(select2DataCollectName); 72 | select2Data.push(d.name); 73 | } 74 | 75 | //=============================================== 76 | function searchTree(d) { 77 | if (d.children) 78 | d.children.forEach(searchTree); 79 | else if (d._children) 80 | d._children.forEach(searchTree); 81 | var searchFieldValue = eval(searchField); 82 | if (searchFieldValue && searchFieldValue.match(searchText)) { 83 | // Walk parent chain 84 | var ancestors = []; 85 | var parent = d; 86 | while (typeof(parent) !== "undefined") { 87 | ancestors.push(parent); 88 | //console.log(parent); 89 | parent.class = "found"; 90 | parent = parent.parent; 91 | } 92 | //console.log(ancestors); 93 | } 94 | } 95 | 96 | //=============================================== 97 | function clearAll(d) { 98 | d.class = ""; 99 | if (d.children) 100 | d.children.forEach(clearAll); 101 | else if (d._children) 102 | d._children.forEach(clearAll); 103 | } 104 | 105 | //=============================================== 106 | function collapse(d) { 107 | if (d.children) { 108 | d._children = d.children; 109 | d._children.forEach(collapse); 110 | d.children = null; 111 | } 112 | } 113 | 114 | //=============================================== 115 | function collapseAllNotFound(d) { 116 | if (d.children) { 117 | if (d.class !== "found") { 118 | d._children = d.children; 119 | d._children.forEach(collapseAllNotFound); 120 | d.children = null; 121 | } else 122 | d.children.forEach(collapseAllNotFound); 123 | } 124 | } 125 | 126 | //=============================================== 127 | function expandAll(d) { 128 | if (d._children) { 129 | d.children = d._children; 130 | d.children.forEach(expandAll); 131 | d._children = null; 132 | } else if (d.children) 133 | d.children.forEach(expandAll); 134 | } 135 | 136 | //=============================================== 137 | // Toggle children on click. 138 | function toggle(d) { 139 | if (d.children) { 140 | d._children = d.children; 141 | d.children = null; 142 | } else { 143 | d.children = d._children; 144 | d._children = null; 145 | } 146 | clearAll(rootSearch); 147 | updateSearch(d); 148 | $("#searchName").select2("val", ""); 149 | } 150 | 151 | 152 | //=============================================== 153 | function updateSearch(source) { 154 | 155 | // Compute the new tree layout. 156 | var nodesSeach = treeSearch.nodes(rootSearch).reverse(), 157 | linksSearch = treeSearch.links(nodesSeach); 158 | 159 | // Normalize for fixed-depth. 160 | nodesSeach.forEach(function(d) { d.y = d.depth * 180; }); 161 | 162 | // Update the nodes… 163 | var nodeSearch = svg.selectAll("g.nodeSearch") 164 | .data(nodesSeach, function(d) { return d.id || (d.id = ++i); }); 165 | 166 | // Enter any new nodes at the parent's previous position. 167 | var nodeEnter2 = nodeSearch.enter().append("g") 168 | .attr("class", "nodeSearch") 169 | .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 170 | .on("click", toggle); 171 | 172 | nodeEnter2.append("circle") 173 | .attr("r", 1e-6) 174 | .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 175 | 176 | nodeEnter2.append("text") 177 | .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 178 | .attr("dy", ".35em") 179 | .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 180 | .text(function(d) { return d.name; }) 181 | .style("fill-opacity", 1e-6); 182 | 183 | // Transition nodes to their new position. 184 | var nodeUpdate = nodeSearch.transition() 185 | .duration(duration) 186 | .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 187 | 188 | nodeUpdate.select("circle") 189 | .attr("r", 4.5) 190 | .style("fill", function(d) { 191 | if (d.class === "found") { 192 | return "#ff4136"; //red 193 | } else if (d._children) { 194 | return "lightsteelblue"; 195 | } else { 196 | return "#fff"; 197 | } 198 | }) 199 | .style("stroke", function(d) { 200 | if (d.class === "found") { 201 | return "#ff4136"; //red 202 | } 203 | }); 204 | 205 | nodeUpdate.select("text") 206 | .style("fill-opacity", 1); 207 | 208 | // Transition exiting nodes to the parent's new position. 209 | var nodeExit = nodeSearch.exit().transition() 210 | .duration(duration) 211 | .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 212 | .remove(); 213 | 214 | nodeExit.select("circle") 215 | .attr("r", 1e-6); 216 | 217 | nodeExit.select("text") 218 | .style("fill-opacity", 1e-6); 219 | 220 | // Update the links… 221 | var linkSearch = svg.selectAll("path.linkSearch") 222 | .data(linksSearch, function(d) { return d.target.id; }); 223 | 224 | // Enter any new links at the parent's previous position. 225 | linkSearch.enter().insert("path", "g") 226 | .attr("class", "linkSearch") 227 | .attr("d", function(d) { 228 | var o = {x: source.x0, y: source.y0}; 229 | return diagonal({source: o, target: o}); 230 | }); 231 | 232 | // Transition links to their new position. 233 | linkSearch.transition() 234 | .duration(duration) 235 | .attr("d", diagonal) 236 | .style("stroke", function(d) { 237 | if (d.target.class === "found") { 238 | return "#ff4136"; 239 | } 240 | }); 241 | 242 | // Transition exiting nodes to the parent's new position. 243 | linkSearch.exit().transition() 244 | .duration(duration) 245 | .attr("d", function(d) { 246 | var o = {x: source.x, y: source.y}; 247 | return diagonal({source: o, target: o}); 248 | }) 249 | .remove(); 250 | 251 | // Stash the old positions for transition. 252 | nodesSeach.forEach(function(d) { 253 | d.x0 = d.x; 254 | d.y0 = d.y; 255 | }); 256 | } 257 | 258 | 259 | function collapse(d) { 260 | if (d.children) { 261 | d._children = d.children; 262 | d._children.forEach(collapse); 263 | d.children = null; 264 | } 265 | } -------------------------------------------------------------------------------- /League/myscripts/sliderRadius.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brushRadius; 4 | var sliderRadius; 5 | var handleRadius; 6 | var xScaleRadius; 7 | 8 | var ySliderRadius = 70; 9 | 10 | function setupSliderRadius(svg) { 11 | xScaleRadius = d3.scale.linear() 12 | .domain([0.1, 1]) 13 | .range([xSlider, 180]) 14 | .clamp(true); 15 | 16 | brushRadius = d3.svg.brush() 17 | .x(xScaleRadius) 18 | .extent([scaleRadius, scaleRadius]) 19 | .on("brush", brushedRadius); 20 | 21 | svg.append("g") 22 | .attr("class", "x axis") 23 | .attr("transform", "translate(0," + ySliderRadius + ")") 24 | .attr("font-family", "sans-serif") 25 | .attr("font-size", "10px") 26 | .call(d3.svg.axis() 27 | .scale(xScaleRadius) 28 | .ticks(4) 29 | .orient("bottom") 30 | .tickFormat(function(d) { return d; }) 31 | .tickSize(0) 32 | .tickPadding(5)) 33 | .select(".domain") 34 | .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) 35 | .attr("class", "halo"); 36 | 37 | svg.append("text") 38 | .attr("class", "sliderText") 39 | .attr("x", xSlider-5) 40 | .attr("y", ySliderRadius) 41 | .attr("dy", ".21em") 42 | .attr("font-family", "sans-serif") 43 | .attr("font-size", "10px") 44 | .text("Scale Children") 45 | .style("text-anchor","end"); 46 | 47 | sliderRadius = svg.append("g") 48 | .attr("class", "slider") 49 | .call(brushRadius); 50 | 51 | sliderRadius.selectAll(".extent,.resize") 52 | .remove(); 53 | 54 | sliderRadius.select(".background") 55 | .attr("y",ySliderRadius-5) 56 | .attr("height", 10); 57 | 58 | handleRadius = sliderRadius.append("circle") 59 | .attr("class", "handle") 60 | .attr("transform", "translate(0," + ySliderRadius + ")") 61 | .attr("r", 6); 62 | 63 | sliderRadius 64 | .call(brushRadius.event) 65 | .transition() // gratuitous intro! 66 | .duration(750) 67 | .call(brushRadius.event); 68 | } 69 | 70 | function brushedRadius() { 71 | var value = brushRadius.extent()[0]; 72 | 73 | if (d3.event.sourceEvent) { // not a programmatic event 74 | value = xScaleRadius.invert(d3.mouse(this)[0]); 75 | brushRadius.extent([value, value]); 76 | } 77 | handleRadius.attr("cx", xScaleRadius(value)); 78 | scaleRadius =value; 79 | 80 | //d3.select("body").style("background-color", d3.hsl(value*20, .8, .8)); 81 | 82 | // scaleRate = height/(height-minY); 83 | //scaleCircle = 10-value; 84 | //handle.attr("cx", xScale(scaleCircle)); 85 | //console.log("scaleCircle1 = "+scaleCircle); 86 | 87 | setupTree(); 88 | update(); 89 | } 90 | -------------------------------------------------------------------------------- /League/myscripts/sliderRelationship.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brush; 4 | var slider; 5 | var handle; 6 | var xScaleSlider; 7 | var xSlider = 3; 8 | var ySlider = 125; 9 | var valueSlider = 1; 10 | var valueMax = 10; 11 | function setupSliderScale(svg) { 12 | xScaleSlider = d3.scale.linear() 13 | .domain([0, valueMax]) 14 | .range([xSlider, 120]) 15 | ; 16 | 17 | //valueSlider = relationshipMaxMax2*0.1; 18 | brush = d3.svg.brush() 19 | .x(xScaleSlider) 20 | .extent([valueSlider, valueSlider]) 21 | .on("brush", brushed) 22 | .on("brushend", brushend); 23 | 24 | 25 | } 26 | 27 | function brushed() { 28 | //console.log("Slider brushed ************** valueSlider="+valueSlider); 29 | valueSlider = brush.extent()[0]; 30 | if (d3.event.sourceEvent) { // not a programmatic event 31 | valueSlider = Math.max(xScaleSlider.invert(d3.mouse(this)[0]),0.5); 32 | valueSlider = Math.min(valueSlider, valueMax); 33 | valueSlider = Math.round(valueSlider); 34 | brush.extent([valueSlider, valueSlider]); 35 | } 36 | handle.attr("cx", xScaleSlider(valueSlider)); 37 | 38 | } 39 | function brushend() { 40 | // console.log("Slider brushed ************** valueSlider="+valueSlider); 41 | recompute(); 42 | } 43 | 44 | -------------------------------------------------------------------------------- /League/myscripts/streamGraph.js: -------------------------------------------------------------------------------- 1 | // Stream graph****************************************** 2 | 3 | 4 | function drawStreamTerm(svg, data_, ymin, ymax) { 5 | var x = d3.time.scale() 6 | .range([0, width]); 7 | 8 | var y = d3.scale.linear() 9 | .range([ymax, ymin]); 10 | 11 | 12 | var stack = d3.layout.stack() 13 | .offset("silhouette") 14 | .order("inside-out") 15 | .values(function(d) { return d.values; }) 16 | .x(function(d) { return d.date; }) 17 | .y(function(d) { return d.value; }); 18 | 19 | var nest = d3.nest() 20 | .key(function(d) { return d.key; }); 21 | 22 | var layers = stack(nest.entries(data_)); 23 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 24 | y.domain([0, d3.max(data_, function(d) { return d.yNode+d.y/2; })]); 25 | // y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 26 | 27 | var area = d3.svg.area() 28 | .interpolate("cardinal") 29 | .x(function(d) { return x(d.yearId); }) 30 | .y0(function(d) { return y(d.yNode-d.y/2); }) 31 | .y1(function(d) { return y(d.yNode+d.y/2); }); 32 | 33 | svg.selectAll(".layer") 34 | .data(layers) 35 | .enter().append("path") 36 | .attr("class", "layer") 37 | .attr("d", function(d) { return area(d.values); }) 38 | .style("fill-opacity",1) 39 | .style("fill", function(d, i) { 40 | return getColor(d.values[0].category, d.values[0].max); 41 | }); 42 | } 43 | 44 | function drawStreamSource(svg, data_, colorScale, ymin, ymax) { 45 | if (colorScale == "blue") { 46 | colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"]; 47 | } 48 | else if (colorScale == "pink") { 49 | colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"]; 50 | } 51 | else if (colorScale == "orange") { 52 | colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"]; 53 | } 54 | var z = d3.scale.ordinal() 55 | .range(colorrange); 56 | 57 | var x = d3.time.scale() 58 | .range([0, width]); 59 | 60 | var y = d3.scale.linear() 61 | .range([ymax, ymin]); 62 | 63 | 64 | var stack = d3.layout.stack() 65 | .offset("silhouette") 66 | .order("inside-out") 67 | .values(function(d) { return d.values; }) 68 | .x(function(d) { return d.date; }) 69 | .y(function(d) { return d.value; }); 70 | 71 | var nest = d3.nest() 72 | .key(function(d) { return d.key; }); 73 | 74 | var area = d3.svg.area() 75 | .interpolate("cardinal") 76 | .x(function(d) { return x(d.yearId); }) 77 | .y0(function(d) { return y(d.y0); }) 78 | .y1(function(d) { return y(d.y0+d.y); }); 79 | 80 | var layers = stack(nest.entries(data_)); 81 | // debugger; 82 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 83 | y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 84 | 85 | svg.selectAll(".layer") 86 | .data(layers) 87 | .enter().append("path") 88 | .attr("class", "layer") 89 | .attr("d", function(d) { return area(d.values); }) 90 | .style("fill-opacity",1) 91 | .style("fill", function(d, i) { return z(i); }); 92 | } -------------------------------------------------------------------------------- /League/myscripts/util.js: -------------------------------------------------------------------------------- 1 | var diameter = 1000, 2 | radius = diameter / 2, 3 | innerRadius = radius - 120; 4 | 5 | var typeList = ["Field A","Field B"] 6 | function drawColorLegend() { 7 | var x1 = [xStep*0.32,xStep*0.27]; 8 | var y1 = [35,45+xStep*0.6]; 9 | 10 | svg.selectAll(".textLegend").data(typeList).enter() 11 | .append("text") 12 | .attr("class", "textLegend") 13 | .attr("x", function(l,i){ 14 | return x1[i]+11; 15 | }) 16 | .attr("y", function(l,i){ 17 | var yyy = y1[i]; 18 | return yyy+13; 19 | }) 20 | .text(function (d) { 21 | return d; 22 | }) 23 | .attr("font-family", "sans-serif") 24 | .attr("font-size", "16px") 25 | .style("text-anchor", "left") 26 | .style("font-weight", "bold") 27 | .style("fill", function (d) { 28 | return getColor(d); 29 | }); 30 | 31 | svg.append("line") 32 | .attr("class", "nodeLineLegend") 33 | .attr("x1", function(d) { return xStep; }) 34 | .attr("y1", function(d) { return 8; }) 35 | .attr("x2", function(d) { return xStep+xScale(30); }) 36 | .attr("y2", function(d) { return 8; }) 37 | .style("stroke-width",5) 38 | .style("stroke-opacity",0.28) 39 | .style("stroke", "#000"); 40 | 41 | svg.append("text") 42 | .attr("class", "textLegend") 43 | .attr("x", xStep+xScale(30)+2) 44 | .attr("y", 13) 45 | .text("Playing time") 46 | .attr("font-family", "sans-serif") 47 | .attr("font-size", "12px") 48 | .style("text-anchor", "left") 49 | .style("fill", "#555"); 50 | } 51 | 52 | 53 | function removeColorLegend() { 54 | svg.selectAll(".nodeLegend").remove(); 55 | } 56 | function drawTimeLegend() { 57 | for (var i=minYear; i b) return 1; // sort 31 | if (a < b) return -1; 32 | return 0; 33 | }) 34 | .filter(function(item, i, ar) { 35 | return ar.indexOf(item) === i; 36 | }) // remove duplicate items 37 | .filter(function(item, i, ar) { 38 | select2DataObject.push({ 39 | "id": i, 40 | "text": item 41 | }); 42 | }); 43 | select2Data.sort(function(a, b) { 44 | if (a > b) return 1; // sort 45 | if (a < b) return -1; 46 | return 0; 47 | }) 48 | .filter(function(item, i, ar) { 49 | return ar.indexOf(item) === i; 50 | }) // remove duplicate items 51 | .filter(function(item, i, ar) { 52 | select2DataObject.push({ 53 | "id": i, 54 | "text": item 55 | }); 56 | }); 57 | $("#searchName").select2({ 58 | data: select2DataObject, 59 | containerCssClass: "search" 60 | }); 61 | rootSearch.children.forEach(collapse); 62 | updateSearch(rootSearch); 63 | } 64 | 65 | 66 | //=============================================== 67 | function select2DataCollectName(d) { 68 | if (d.children) 69 | d.children.forEach(select2DataCollectName); 70 | else if (d._children) 71 | d._children.forEach(select2DataCollectName); 72 | select2Data.push(d.name); 73 | } 74 | 75 | //=============================================== 76 | function searchTree(d) { 77 | if (d.children) 78 | d.children.forEach(searchTree); 79 | else if (d._children) 80 | d._children.forEach(searchTree); 81 | var searchFieldValue = eval(searchField); 82 | if (searchFieldValue && searchFieldValue.match(searchText)) { 83 | // Walk parent chain 84 | var ancestors = []; 85 | var parent = d; 86 | while (typeof(parent) !== "undefined") { 87 | ancestors.push(parent); 88 | //console.log(parent); 89 | parent.class = "found"; 90 | parent = parent.parent; 91 | } 92 | //console.log(ancestors); 93 | } 94 | } 95 | 96 | //=============================================== 97 | function clearAll(d) { 98 | d.class = ""; 99 | if (d.children) 100 | d.children.forEach(clearAll); 101 | else if (d._children) 102 | d._children.forEach(clearAll); 103 | } 104 | 105 | //=============================================== 106 | function collapse(d) { 107 | if (d.children) { 108 | d._children = d.children; 109 | d._children.forEach(collapse); 110 | d.children = null; 111 | } 112 | } 113 | 114 | //=============================================== 115 | function collapseAllNotFound(d) { 116 | if (d.children) { 117 | if (d.class !== "found") { 118 | d._children = d.children; 119 | d._children.forEach(collapseAllNotFound); 120 | d.children = null; 121 | } else 122 | d.children.forEach(collapseAllNotFound); 123 | } 124 | } 125 | 126 | //=============================================== 127 | function expandAll(d) { 128 | if (d._children) { 129 | d.children = d._children; 130 | d.children.forEach(expandAll); 131 | d._children = null; 132 | } else if (d.children) 133 | d.children.forEach(expandAll); 134 | } 135 | 136 | //=============================================== 137 | // Toggle children on click. 138 | function toggle(d) { 139 | if (d.children) { 140 | d._children = d.children; 141 | d.children = null; 142 | } else { 143 | d.children = d._children; 144 | d._children = null; 145 | } 146 | clearAll(rootSearch); 147 | updateSearch(d); 148 | $("#searchName").select2("val", ""); 149 | } 150 | 151 | 152 | //=============================================== 153 | function updateSearch(source) { 154 | 155 | // Compute the new tree layout. 156 | var nodesSeach = treeSearch.nodes(rootSearch).reverse(), 157 | linksSearch = treeSearch.links(nodesSeach); 158 | 159 | // Normalize for fixed-depth. 160 | nodesSeach.forEach(function(d) { d.y = d.depth * 180; }); 161 | 162 | // Update the nodes… 163 | var nodeSearch = svg.selectAll("g.nodeSearch") 164 | .data(nodesSeach, function(d) { return d.id || (d.id = ++i); }); 165 | 166 | // Enter any new nodes at the parent's previous position. 167 | var nodeEnter2 = nodeSearch.enter().append("g") 168 | .attr("class", "nodeSearch") 169 | .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) 170 | .on("click", toggle); 171 | 172 | nodeEnter2.append("circle") 173 | .attr("r", 1e-6) 174 | .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); 175 | 176 | nodeEnter2.append("text") 177 | .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) 178 | .attr("dy", ".35em") 179 | .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) 180 | .text(function(d) { return d.name; }) 181 | .style("fill-opacity", 1e-6); 182 | 183 | // Transition nodes to their new position. 184 | var nodeUpdate = nodeSearch.transition() 185 | .duration(duration) 186 | .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); 187 | 188 | nodeUpdate.select("circle") 189 | .attr("r", 4.5) 190 | .style("fill", function(d) { 191 | if (d.class === "found") { 192 | return "#ff4136"; //red 193 | } else if (d._children) { 194 | return "lightsteelblue"; 195 | } else { 196 | return "#fff"; 197 | } 198 | }) 199 | .style("stroke", function(d) { 200 | if (d.class === "found") { 201 | return "#ff4136"; //red 202 | } 203 | }); 204 | 205 | nodeUpdate.select("text") 206 | .style("fill-opacity", 1); 207 | 208 | // Transition exiting nodes to the parent's new position. 209 | var nodeExit = nodeSearch.exit().transition() 210 | .duration(duration) 211 | .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) 212 | .remove(); 213 | 214 | nodeExit.select("circle") 215 | .attr("r", 1e-6); 216 | 217 | nodeExit.select("text") 218 | .style("fill-opacity", 1e-6); 219 | 220 | // Update the links… 221 | var linkSearch = svg.selectAll("path.linkSearch") 222 | .data(linksSearch, function(d) { return d.target.id; }); 223 | 224 | // Enter any new links at the parent's previous position. 225 | linkSearch.enter().insert("path", "g") 226 | .attr("class", "linkSearch") 227 | .attr("d", function(d) { 228 | var o = {x: source.x0, y: source.y0}; 229 | return diagonal({source: o, target: o}); 230 | }); 231 | 232 | // Transition links to their new position. 233 | linkSearch.transition() 234 | .duration(duration) 235 | .attr("d", diagonal) 236 | .style("stroke", function(d) { 237 | if (d.target.class === "found") { 238 | return "#ff4136"; 239 | } 240 | }); 241 | 242 | // Transition exiting nodes to the parent's new position. 243 | linkSearch.exit().transition() 244 | .duration(duration) 245 | .attr("d", function(d) { 246 | var o = {x: source.x, y: source.y}; 247 | return diagonal({source: o, target: o}); 248 | }) 249 | .remove(); 250 | 251 | // Stash the old positions for transition. 252 | nodesSeach.forEach(function(d) { 253 | d.x0 = d.x; 254 | d.y0 = d.y; 255 | }); 256 | } 257 | 258 | 259 | function collapse(d) { 260 | if (d.children) { 261 | d._children = d.children; 262 | d._children.forEach(collapse); 263 | d.children = null; 264 | } 265 | } -------------------------------------------------------------------------------- /Publication/pubJavascripts/myscripts/sliderRadius.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brushRadius; 4 | var sliderRadius; 5 | var handleRadius; 6 | var xScaleRadius; 7 | 8 | var ySliderRadius = 70; 9 | 10 | function setupSliderRadius(svg) { 11 | xScaleRadius = d3.scale.linear() 12 | .domain([0.1, 1]) 13 | .range([xSlider, 180]) 14 | .clamp(true); 15 | 16 | brushRadius = d3.svg.brush() 17 | .x(xScaleRadius) 18 | .extent([scaleRadius, scaleRadius]) 19 | .on("brush", brushedRadius); 20 | 21 | svg.append("g") 22 | .attr("class", "x axis") 23 | .attr("transform", "translate(0," + ySliderRadius + ")") 24 | .attr("font-family", "sans-serif") 25 | .attr("font-size", "10px") 26 | .call(d3.svg.axis() 27 | .scale(xScaleRadius) 28 | .ticks(4) 29 | .orient("bottom") 30 | .tickFormat(function(d) { return d; }) 31 | .tickSize(0) 32 | .tickPadding(5)) 33 | .select(".domain") 34 | .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }) 35 | .attr("class", "halo"); 36 | 37 | svg.append("text") 38 | .attr("class", "sliderText") 39 | .attr("x", xSlider-5) 40 | .attr("y", ySliderRadius) 41 | .attr("dy", ".21em") 42 | .attr("font-family", "sans-serif") 43 | .attr("font-size", "10px") 44 | .text("Scale Children") 45 | .style("text-anchor","end"); 46 | 47 | sliderRadius = svg.append("g") 48 | .attr("class", "slider") 49 | .call(brushRadius); 50 | 51 | sliderRadius.selectAll(".extent,.resize") 52 | .remove(); 53 | 54 | sliderRadius.select(".background") 55 | .attr("y",ySliderRadius-5) 56 | .attr("height", 10); 57 | 58 | handleRadius = sliderRadius.append("circle") 59 | .attr("class", "handle") 60 | .attr("transform", "translate(0," + ySliderRadius + ")") 61 | .attr("r", 6); 62 | 63 | sliderRadius 64 | .call(brushRadius.event) 65 | .transition() // gratuitous intro! 66 | .duration(750) 67 | .call(brushRadius.event); 68 | } 69 | 70 | function brushedRadius() { 71 | var value = brushRadius.extent()[0]; 72 | 73 | if (d3.event.sourceEvent) { // not a programmatic event 74 | value = xScaleRadius.invert(d3.mouse(this)[0]); 75 | brushRadius.extent([value, value]); 76 | } 77 | handleRadius.attr("cx", xScaleRadius(value)); 78 | scaleRadius =value; 79 | 80 | //d3.select("body").style("background-color", d3.hsl(value*20, .8, .8)); 81 | 82 | // scaleRate = height/(height-minY); 83 | //scaleCircle = 10-value; 84 | //handle.attr("cx", xScale(scaleCircle)); 85 | //console.log("scaleCircle1 = "+scaleCircle); 86 | 87 | setupTree(); 88 | update(); 89 | } 90 | -------------------------------------------------------------------------------- /Publication/pubJavascripts/myscripts/sliderRelationship.js: -------------------------------------------------------------------------------- 1 | 2 | //=============================================== 3 | var brush; 4 | var slider; 5 | var handle; 6 | var xScaleSlider; 7 | var xSlider = 3; 8 | var ySlider = 125; 9 | var valueSlider = 1; 10 | var valueMax = 10; 11 | function setupSliderScale(svg) { 12 | xScaleSlider = d3.scale.linear() 13 | .domain([0, valueMax]) 14 | .range([xSlider, 120]) 15 | ; 16 | 17 | //valueSlider = relationshipMaxMax2*0.1; 18 | brush = d3.svg.brush() 19 | .x(xScaleSlider) 20 | .extent([valueSlider, valueSlider]) 21 | .on("brush", brushed) 22 | .on("brushend", brushend); 23 | 24 | 25 | } 26 | 27 | function brushed() { 28 | //console.log("Slider brushed ************** valueSlider="+valueSlider); 29 | valueSlider = brush.extent()[0]; 30 | if (d3.event.sourceEvent) { // not a programmatic event 31 | valueSlider = Math.max(xScaleSlider.invert(d3.mouse(this)[0]),0.5); 32 | valueSlider = Math.min(valueSlider, valueMax); 33 | valueSlider = Math.round(valueSlider); 34 | brush.extent([valueSlider, valueSlider]); 35 | } 36 | handle.attr("cx", xScaleSlider(valueSlider)); 37 | 38 | } 39 | function brushend() { 40 | // console.log("Slider brushed ************** valueSlider="+valueSlider); 41 | recompute(); 42 | } 43 | 44 | -------------------------------------------------------------------------------- /Publication/pubJavascripts/myscripts/streamGraph.js: -------------------------------------------------------------------------------- 1 | // Stream graph****************************************** 2 | 3 | 4 | function drawStreamTerm(svg, data_, ymin, ymax) { 5 | var x = d3.time.scale() 6 | .range([0, width]); 7 | 8 | var y = d3.scale.linear() 9 | .range([ymax, ymin]); 10 | 11 | 12 | var stack = d3.layout.stack() 13 | .offset("silhouette") 14 | .order("inside-out") 15 | .values(function(d) { return d.values; }) 16 | .x(function(d) { return d.date; }) 17 | .y(function(d) { return d.value; }); 18 | 19 | var nest = d3.nest() 20 | .key(function(d) { return d.key; }); 21 | 22 | var layers = stack(nest.entries(data_)); 23 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 24 | y.domain([0, d3.max(data_, function(d) { return d.yNode+d.y/2; })]); 25 | // y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 26 | 27 | var area = d3.svg.area() 28 | .interpolate("cardinal") 29 | .x(function(d) { return x(d.yearId); }) 30 | .y0(function(d) { return y(d.yNode-d.y/2); }) 31 | .y1(function(d) { return y(d.yNode+d.y/2); }); 32 | 33 | svg.selectAll(".layer") 34 | .data(layers) 35 | .enter().append("path") 36 | .attr("class", "layer") 37 | .attr("d", function(d) { return area(d.values); }) 38 | .style("fill-opacity",1) 39 | .style("fill", function(d, i) { 40 | return getColor(d.values[0].category, d.values[0].max); 41 | }); 42 | } 43 | 44 | function drawStreamSource(svg, data_, colorScale, ymin, ymax) { 45 | if (colorScale == "blue") { 46 | colorrange = ["#045A8D", "#2B8CBE", "#74A9CF", "#A6BDDB", "#D0D1E6", "#F1EEF6"]; 47 | } 48 | else if (colorScale == "pink") { 49 | colorrange = ["#980043", "#DD1C77", "#DF65B0", "#C994C7", "#D4B9DA", "#F1EEF6"]; 50 | } 51 | else if (colorScale == "orange") { 52 | colorrange = ["#B30000", "#E34A33", "#FC8D59", "#FDBB84", "#FDD49E", "#FEF0D9"]; 53 | } 54 | var z = d3.scale.ordinal() 55 | .range(colorrange); 56 | 57 | var x = d3.time.scale() 58 | .range([0, width]); 59 | 60 | var y = d3.scale.linear() 61 | .range([ymax, ymin]); 62 | 63 | 64 | var stack = d3.layout.stack() 65 | .offset("silhouette") 66 | .order("inside-out") 67 | .values(function(d) { return d.values; }) 68 | .x(function(d) { return d.date; }) 69 | .y(function(d) { return d.value; }); 70 | 71 | var nest = d3.nest() 72 | .key(function(d) { return d.key; }); 73 | 74 | var area = d3.svg.area() 75 | .interpolate("cardinal") 76 | .x(function(d) { return x(d.yearId); }) 77 | .y0(function(d) { return y(d.y0); }) 78 | .y1(function(d) { return y(d.y0+d.y); }); 79 | 80 | var layers = stack(nest.entries(data_)); 81 | // debugger; 82 | x.domain(d3.extent(data_, function(d) { return d.yearId; })); 83 | y.domain([0, d3.max(data_, function(d) { return d.y0 + d.y; })]); 84 | 85 | svg.selectAll(".layer") 86 | .data(layers) 87 | .enter().append("path") 88 | .attr("class", "layer") 89 | .attr("d", function(d) { return area(d.values); }) 90 | .style("fill-opacity",1) 91 | .style("fill", function(d, i) { return z(i); }); 92 | } -------------------------------------------------------------------------------- /Publication/pubJavascripts/myscripts/util.js: -------------------------------------------------------------------------------- 1 | var diameter = 1000, 2 | radius = diameter / 2, 3 | innerRadius = radius - 120; 4 | 5 | var typeList = ["Field A","Field B"] 6 | function drawColorLegend() { 7 | var x1 = [xStep*0.32,xStep*0.27]; 8 | var y1 = [35,45+xStep*0.6]; 9 | 10 | /* 11 | svg.selectAll(".textLegend").data(typeList).enter() 12 | .append("text") 13 | .attr("class", "textLegend") 14 | .attr("x", function(l,i){ 15 | return x1[i]+11; 16 | }) 17 | .attr("y", function(l,i){ 18 | var yyy = y1[i]; 19 | return yyy+13; 20 | }) 21 | .text(function (d) { 22 | return d; 23 | }) 24 | .attr("font-family", "sans-serif") 25 | .attr("font-size", "16px") 26 | .style("text-anchor", "left") 27 | .style("font-weight", "bold") 28 | .style("fill", function (d) { 29 | return getColor(d); 30 | }); 31 | */ 32 | } 33 | 34 | 35 | function removeColorLegend() { 36 | svg.selectAll(".nodeLegend").remove(); 37 | } 38 | function drawTimeLegend() { 39 | for (var i=minYear; i