├── .gitignore ├── LICENSE ├── README.md ├── css ├── bootstrap.min.css ├── jBox.css ├── main.css └── scrolling-nav.css ├── img ├── EchoDemo.jpg ├── NU_logo.png ├── RdBu.png ├── RdPrBu.png ├── RdPrBu.svg ├── block-iu.png ├── favicon.ico └── presto_enS.jpg ├── index.html ├── js ├── bootstrap.min.js ├── d3-color.v1.min.js ├── d3-scale-chromatic.v1.min.js ├── d3.v4.min.js ├── jBox.min.js ├── jquery-2.2.4.min.js ├── jquery.easing.min.js ├── jquery.flot.min.js ├── language.js ├── languageset.js ├── main.js └── scrolling-nav.js ├── language ├── jsonconverter.py └── language.csv └── svg ├── scenario01.svg ├── scenario02.svg ├── scenario03.svg ├── scenario04.svg └── scenario05.svg /.gitignore: -------------------------------------------------------------------------------- 1 | # certain files 2 | 3 | reference/ 4 | __pycache__ 5 | push.sh 6 | font-awesome-4.7.0 7 | 055662c96ec770be1930574cfe1553f2 8 | legacy 9 | 10 | # LaTeX 11 | *.aux 12 | *.bcf 13 | *.bbl 14 | *.blg 15 | *.synctex.gz 16 | *.toc 17 | *blx.bib 18 | *.fls 19 | *.fdb_latexmk 20 | *.out 21 | *.run.xml 22 | main.pdf 23 | supp.pdf 24 | *.log 25 | 26 | # Data files 27 | *.csv 28 | *.tsv 29 | *.txt 30 | 31 | # figures 32 | *.pdf 33 | *.ai 34 | 35 | # Office files 36 | *.docx 37 | *.doc 38 | *.ppt 39 | *.pptx 40 | *.xls 41 | *.xlsx 42 | 43 | # Jupyter 44 | .ipynb_checkpoints/ 45 | 46 | # Compiled source # 47 | ################### 48 | *.com 49 | *.class 50 | *.dll 51 | *.exe 52 | *.o 53 | *.so 54 | 55 | # Packages # 56 | ############ 57 | # it's better to unpack these files and commit the raw source 58 | # git has its own built in compression methods 59 | *.7z 60 | *.dmg 61 | *.gz 62 | *.iso 63 | *.jar 64 | *.rar 65 | *.tar 66 | *.zip 67 | 68 | # Logs and databases # 69 | ###################### 70 | *.log 71 | *.sql 72 | *.sqlite 73 | 74 | # OS generated files # 75 | ###################### 76 | .DS_Store 77 | .DS_Store? 78 | ._* 79 | .Spotlight-V100 80 | .Trashes 81 | ehthumbs.db 82 | Thumbs.db 83 | 84 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Hao Peng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # echo-demo 2 | 3 | This demo illustrates how mechanisms of social media platforms can facilitate the formation of online echo chambers, a social phenomena where segregated communities reinforce their own beliefs and block out alternative ideas and perspectives. 4 | 5 | Play with it [here](http://haoopeng.github.io/echo/). 6 | -------------------------------------------------------------------------------- /css/jBox.css: -------------------------------------------------------------------------------- 1 | 2 | /* Global */ 3 | 4 | .jBox-wrapper { 5 | text-align: left; 6 | box-sizing: border-box; 7 | } 8 | 9 | .jBox-title, 10 | .jBox-content, 11 | .jBox-container { 12 | position: relative; 13 | word-break: break-word; 14 | box-sizing: border-box; 15 | } 16 | 17 | .jBox-container { 18 | background: #fff; 19 | } 20 | 21 | .jBox-content { 22 | padding: 8px 10px; 23 | overflow-x: hidden; 24 | overflow-y: auto; 25 | transition: opacity .2s; 26 | } 27 | 28 | /* jBox Tooltip */ 29 | 30 | .jBox-Tooltip .jBox-container, 31 | .jBox-Mouse .jBox-container { 32 | border-radius: 3px; 33 | box-shadow: 0 0 3px rgba(0, 0, 0, .25); 34 | } 35 | 36 | .jBox-Tooltip .jBox-title, 37 | .jBox-Mouse .jBox-title { 38 | padding: 8px 10px 0; 39 | font-weight: bold; 40 | } 41 | 42 | .jBox-hasTitle.jBox-Tooltip .jBox-content, 43 | .jBox-hasTitle.jBox-Mouse .jBox-content { 44 | padding-top: 5px; 45 | } 46 | 47 | .jBox-Mouse { 48 | pointer-events: none; 49 | } 50 | 51 | /* Pointer */ 52 | 53 | .jBox-pointer { 54 | position: absolute; 55 | overflow: hidden; 56 | } 57 | 58 | .jBox-pointer-top { top: 0; } 59 | .jBox-pointer-bottom { bottom: 0; } 60 | .jBox-pointer-left { left: 0; } 61 | .jBox-pointer-right { right: 0; } 62 | 63 | .jBox-pointer-top, 64 | .jBox-pointer-bottom { 65 | width: 30px; 66 | height: 12px; 67 | } 68 | 69 | .jBox-pointer-left, 70 | .jBox-pointer-right { 71 | width: 12px; 72 | height: 30px; 73 | } 74 | 75 | .jBox-pointer:after { 76 | content: ''; 77 | width: 20px; 78 | height: 20px; 79 | position: absolute; 80 | background: #fff; 81 | transform: rotate(45deg); 82 | } 83 | 84 | .jBox-pointer-top:after { 85 | left: 5px; 86 | top: 6px; 87 | box-shadow: -1px -1px 2px rgba(0, 0, 0, .15); 88 | } 89 | 90 | .jBox-pointer-right:after { 91 | top: 5px; 92 | right: 6px; 93 | box-shadow: 1px -1px 2px rgba(0, 0, 0, .15); 94 | } 95 | 96 | .jBox-pointer-bottom:after { 97 | left: 5px; 98 | bottom: 6px; 99 | box-shadow: 1px 1px 2px rgba(0, 0, 0, .15); 100 | } 101 | 102 | .jBox-pointer-left:after { 103 | top: 5px; 104 | left: 6px; 105 | box-shadow: -1px 1px 2px rgba(0, 0, 0, .15); 106 | } 107 | 108 | /* jBox Modal */ 109 | 110 | .jBox-Modal .jBox-container { 111 | border-radius: 4px; 112 | } 113 | 114 | .jBox-Modal .jBox-content { 115 | padding: 15px 20px; 116 | } 117 | 118 | .jBox-Modal .jBox-title { 119 | border-radius: 4px 4px 0 0; 120 | padding: 15px 20px; 121 | background: #fafafa; 122 | border-bottom: 1px solid #eee; 123 | } 124 | 125 | .jBox-Modal .jBox-footer { 126 | border-radius: 0 0 4px 4px; 127 | } 128 | 129 | .jBox-Modal.jBox-closeButton-title .jBox-title { 130 | padding-right: 55px; 131 | } 132 | 133 | .jBox-Modal .jBox-container, 134 | .jBox-Modal.jBox-closeButton-box:before { 135 | box-shadow: 0 3px 15px rgba(0, 0, 0, .4), 0 0 5px rgba(0, 0, 0, .4); 136 | } 137 | 138 | /* Close button */ 139 | 140 | .jBox-closeButton { 141 | cursor: pointer; 142 | position: absolute; 143 | } 144 | 145 | .jBox-closeButton svg { 146 | position: absolute; 147 | top: 50%; 148 | right: 50%; 149 | } 150 | 151 | .jBox-closeButton path { 152 | transition: fill .2s; 153 | } 154 | 155 | .jBox-closeButton path { 156 | fill: #aaa; 157 | } 158 | 159 | .jBox-closeButton:hover path { 160 | fill: #888; 161 | } 162 | 163 | .jBox-closeButton:active path { 164 | fill: #666; 165 | } 166 | 167 | /* Close button in overlay */ 168 | 169 | .jBox-overlay .jBox-closeButton { 170 | top: 0; 171 | right: 0; 172 | width: 40px; 173 | height: 40px; 174 | } 175 | 176 | .jBox-overlay .jBox-closeButton svg { 177 | width: 20px; 178 | height: 20px; 179 | margin-top: -10px; 180 | margin-right: -10px; 181 | } 182 | 183 | .jBox-overlay .jBox-closeButton path, 184 | .jBox-overlay .jBox-closeButton:active path { 185 | fill: #ddd; 186 | } 187 | 188 | .jBox-overlay .jBox-closeButton:hover path { 189 | fill: #fff; 190 | } 191 | 192 | /* Close button in title */ 193 | 194 | .jBox-closeButton-title .jBox-closeButton { 195 | top: 0; 196 | right: 0; 197 | bottom: 0; 198 | width: 40px; 199 | } 200 | 201 | .jBox-closeButton-title .jBox-closeButton svg { 202 | width: 12px; 203 | height: 12px; 204 | margin-top: -6px; 205 | margin-right: -6px; 206 | } 207 | 208 | /* Close button in box */ 209 | 210 | .jBox-closeButton-box .jBox-closeButton { 211 | top: -8px; 212 | right: -10px; 213 | width: 24px; 214 | height: 24px; 215 | background: #fff; 216 | border-radius: 50%; 217 | } 218 | 219 | .jBox-closeButton-box .jBox-closeButton svg { 220 | width: 10px; 221 | height: 10px; 222 | margin-top: -5px; 223 | margin-right: -5px; 224 | } 225 | 226 | .jBox-hasTitle.jBox-Modal.jBox-closeButton-box .jBox-closeButton { 227 | background: #fafafa; 228 | } 229 | 230 | .jBox-closeButton-box:before { 231 | content: ''; 232 | position: absolute; 233 | top: -8px; 234 | right: -10px; 235 | width: 24px; 236 | height: 24px; 237 | border-radius: 50%; 238 | box-shadow: 0 0 5px rgba(0, 0, 0, .3); 239 | } 240 | 241 | .jBox-pointerPosition-top.jBox-closeButton-box:before { 242 | top: 5px; 243 | } 244 | 245 | .jBox-pointerPosition-right.jBox-closeButton-box:before { 246 | right: 2px; 247 | } 248 | 249 | /* Overlay */ 250 | 251 | .jBox-overlay { 252 | position: fixed; 253 | top: 0; 254 | left: 0; 255 | width: 100%; 256 | height: 100%; 257 | background-color: rgba(0, 0, 0, .82); 258 | } 259 | 260 | /* Footer */ 261 | 262 | .jBox-footer { 263 | background: #fafafa; 264 | border-top: 1px solid #eee; 265 | padding: 8px 10px; 266 | border-radius: 0 0 3px 3px; 267 | } 268 | 269 | /* Block scrolling */ 270 | 271 | body[class^="jBox-blockScroll-"], 272 | body[class*=" jBox-blockScroll-"] { 273 | overflow: hidden; 274 | } 275 | 276 | /* Draggable */ 277 | 278 | .jBox-draggable { 279 | cursor: move; 280 | } 281 | 282 | /* Spinner */ 283 | 284 | @keyframes jBoxLoading { 285 | to { transform: rotate(360deg); } 286 | } 287 | 288 | .jBox-loading .jBox-content { 289 | opacity: .2; 290 | } 291 | 292 | .jBox-loading-spinner .jBox-content { 293 | min-height: 38px !important; 294 | min-width: 38px !important; 295 | opacity: 0; 296 | } 297 | 298 | .jBox-spinner { 299 | box-sizing: border-box; 300 | position: absolute; 301 | top: 50%; 302 | left: 50%; 303 | width: 24px; 304 | height: 24px; 305 | margin-top: -12px; 306 | margin-left: -12px; 307 | } 308 | 309 | .jBox-spinner:before { 310 | display: block; 311 | box-sizing: border-box; 312 | content: ''; 313 | width: 24px; 314 | height: 24px; 315 | border-radius: 50%; 316 | border: 2px solid rgba(0, 0, 0, .2); 317 | border-top-color: rgba(0, 0, 0, .8); 318 | animation: jBoxLoading .6s linear infinite; 319 | } 320 | 321 | /* Animations */ 322 | 323 | [class^="jBox-animated-"], 324 | [class*=" jBox-animated-"] { 325 | animation-fill-mode: both; 326 | } 327 | 328 | @keyframes jBox-tada { 329 | 0% {transform: scale(1);} 330 | 10%, 20% {transform: scale(0.8) rotate(-4deg);} 331 | 30%, 50%, 70%, 90% {transform: scale(1.2) rotate(4deg);} 332 | 40%, 60%, 80% {transform: scale(1.2) rotate(-4deg);} 333 | 100% {transform: scale(1) rotate(0);} 334 | } 335 | 336 | .jBox-animated-tada { 337 | animation: jBox-tada 1s; 338 | } 339 | 340 | @keyframes jBox-tadaSmall { 341 | 0% {transform: scale(1);} 342 | 10%, 20% {transform: scale(0.9) rotate(-2deg);} 343 | 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(2deg);} 344 | 40%, 60%, 80% {transform: scale(1.1) rotate(-2deg);} 345 | 100% {transform: scale(1) rotate(0);} 346 | } 347 | 348 | .jBox-animated-tadaSmall { 349 | animation: jBox-tadaSmall 1s; 350 | } 351 | 352 | @keyframes jBox-flash { 353 | 0%, 50%, 100% {opacity: 1;} 354 | 25%, 75% {opacity: 0;} 355 | } 356 | 357 | .jBox-animated-flash { 358 | animation: jBox-flash .5s; 359 | } 360 | 361 | @keyframes jBox-shake { 362 | 0%, 100% {transform: translateX(0);} 363 | 20%, 60% {transform: translateX(-6px);} 364 | 40%, 80% {transform: translateX(6px);} 365 | } 366 | 367 | .jBox-animated-shake { 368 | animation: jBox-shake .4s; 369 | } 370 | 371 | @keyframes jBox-pulseUp { 372 | 0% {transform: scale(1);} 373 | 50% {transform: scale(1.15);} 374 | 100% {transform: scale(1);} 375 | } 376 | 377 | .jBox-animated-pulseUp { 378 | animation: jBox-pulseUp .25s; 379 | } 380 | 381 | @keyframes jBox-pulseDown { 382 | 0% {transform: scale(1);} 383 | 50% {transform: scale(0.85);} 384 | 100% {transform: scale(1);} 385 | } 386 | 387 | .jBox-animated-pulseDown { 388 | animation: jBox-pulseDown .25s; 389 | } 390 | 391 | @keyframes jBox-popIn { 392 | 0% {transform: scale(0);} 393 | 50% {transform: scale(1.1);} 394 | 100% {transform: scale(1);} 395 | } 396 | 397 | .jBox-animated-popIn { 398 | animation: jBox-popIn .25s; 399 | } 400 | 401 | @keyframes jBox-popOut { 402 | 0% {transform: scale(1);} 403 | 50% {transform: scale(1.1);} 404 | 100% {transform: scale(0);} 405 | } 406 | 407 | .jBox-animated-popOut { 408 | animation: jBox-popOut .25s; 409 | } 410 | 411 | @keyframes jBox-fadeIn { 412 | 0% {opacity: 0;} 413 | 100% {opacity: 1;} 414 | } 415 | 416 | .jBox-animated-fadeIn { 417 | animation: jBox-fadeIn .2s; 418 | } 419 | 420 | @keyframes jBox-fadeOut { 421 | 0% {opacity: 1;} 422 | 100% {opacity: 0;} 423 | } 424 | 425 | .jBox-animated-fadeOut { 426 | animation: jBox-fadeOut .2s; 427 | } 428 | 429 | @keyframes jBox-slideUp { 430 | 0% {transform: translateY(0);} 431 | 100% {transform: translateY(-300px); opacity: 0;} 432 | } 433 | 434 | .jBox-animated-slideUp { 435 | animation: jBox-slideUp .4s; 436 | } 437 | 438 | @keyframes jBox-slideRight { 439 | 0% {transform: translateX(0);} 440 | 100% {transform: translateX(300px); opacity: 0;} 441 | } 442 | 443 | .jBox-animated-slideRight { 444 | animation: jBox-slideRight .4s; 445 | } 446 | 447 | @keyframes jBox-slideDown { 448 | 0% {transform: translateY(0);} 449 | 100% {transform: translateY(300px); opacity: 0;} 450 | } 451 | 452 | .jBox-animated-slideDown { 453 | animation: jBox-slideDown .4s; 454 | } 455 | 456 | @keyframes jBox-slideLeft { 457 | 0% {transform: translateX(0);} 458 | 100% {transform: translateX(-300px); opacity: 0;} 459 | } 460 | 461 | .jBox-animated-slideLeft { 462 | animation: jBox-slideLeft .4s; 463 | } 464 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | 2 | /*.demo-container { 3 | width: 1040px; 4 | margin: auto; 5 | }*/ 6 | 7 | div#demo-box { 8 | border: 1px solid #eee; 9 | } 10 | 11 | div.tutorial-box { 12 | border: 1px solid #eee; 13 | padding: 30px; 14 | padding-top: 0px; 15 | padding-bottom: 10px; 16 | } 17 | 18 | div#demo-title { 19 | text-align: center; 20 | color: #666; 21 | } 22 | 23 | #demo-title img { 24 | margin-top: 10px; 25 | width: 20px; 26 | padding: 2px; 27 | border: 0; 28 | box-shadow: 0; 29 | display: inline; 30 | } 31 | 32 | div#demo-controls { 33 | height: 160px; 34 | margin: 20px; 35 | margin-bottom: 0; 36 | text-align: right; 37 | padding: 20px; 38 | padding-top: 10px; 39 | padding-bottom: 10px; 40 | border: 1px solid #ccc; 41 | } 42 | 43 | div#para-title { 44 | font-size: 15px; 45 | margin-bottom: 15px; 46 | } 47 | 48 | div.para-line { 49 | margin-bottom: 10px; 50 | } 51 | 52 | select#soflow-t, #soflow-i, #soflow-u { 53 | background-position: 97% center; 54 | background-repeat: no-repeat; 55 | border: 1px solid #AAA; 56 | color: #555; 57 | overflow: hidden; 58 | padding: 5px 10px; 59 | text-overflow: ellipsis; 60 | white-space: nowrap; 61 | width: 70px; 62 | font-size: 10px; 63 | } 64 | 65 | select#soflow-l { 66 | position: absolute; 67 | right: 50px; 68 | top: 50%; 69 | transform: translateY(-50%); 70 | background-position: 97% center; 71 | background-repeat: no-repeat; 72 | border: 1px solid #AAA; 73 | color: #555; 74 | overflow: hidden; 75 | padding: 5px 10px; 76 | text-overflow: ellipsis; 77 | white-space: nowrap; 78 | width: 90px; 79 | font-size: 10px; 80 | } 81 | 82 | div#demo-legend { 83 | height: 160px; 84 | margin: 20px; 85 | margin-bottom: 0; 86 | padding: 20px; 87 | border: 1px solid #ccc; 88 | background: #fafafa; 89 | text-align: left; 90 | } 91 | 92 | .symbol { 93 | float: right; 94 | border-radius: 50%; 95 | border: 2px solid #000000; 96 | display: block; 97 | margin: 5px auto 0; 98 | background-color: #ffffff; 99 | } 100 | 101 | .symbol.small { width: 10px; height: 10px; } 102 | .symbol.large { width: 18px; height: 18px; } 103 | 104 | div#demo-plot { 105 | height: 200px; 106 | background: #fff; 107 | margin: 20px; 108 | } 109 | 110 | div#demo-epicurves { 111 | height: 180px; 112 | } 113 | 114 | div#plot-title { 115 | height: 20px; 116 | text-align: center; 117 | } 118 | 119 | div#plot-xlable { 120 | height: 10px; 121 | text-align: right; 122 | } 123 | 124 | div#demo-graph-layout { 125 | height: 480px; 126 | margin: 20px; 127 | margin-bottom: 0; 128 | background: #fafafa; 129 | border: 1px solid #eee; 130 | clear: both; 131 | position: relative; 132 | } 133 | 134 | div#demo-chatting { 135 | height: 480px; 136 | margin: 20px; 137 | background: #fafafa; 138 | border: 1px solid #eee; 139 | position: relative; 140 | overflow: auto; 141 | font-size: 12px; 142 | text-align: left; 143 | } 144 | 145 | span#demo-right { 146 | float: right; 147 | } 148 | 149 | circle.node { 150 | stroke: #000; 151 | stroke-width: 1px; 152 | fill: #ff0; 153 | } 154 | 155 | line.link { 156 | stroke: #333; 157 | stroke-opacity: .2; 158 | stroke-width: 1px; 159 | } 160 | 161 | button { 162 | float: left; 163 | font-size: 16px; 164 | height: 30px; 165 | } 166 | 167 | button#reset-button { 168 | color: #666; 169 | } 170 | 171 | button#start-button { 172 | color: #008000; 173 | } 174 | 175 | button#stop-button { 176 | color: #E70303; 177 | } 178 | 179 | button#default-button { 180 | margin-top: 0px; 181 | font-size: 10px; 182 | height: 20px; 183 | } 184 | 185 | span#speed-box { 186 | float: left; 187 | height: 30px; 188 | text-align: center; 189 | font-size: 10px; 190 | width: 90px; 191 | border: 1px solid #aaa; 192 | } 193 | 194 | input#speed { 195 | width: 80px; 196 | margin: 0 auto; 197 | } 198 | 199 | a { 200 | text-decoration: none; 201 | color: #057B9B; 202 | } 203 | 204 | p a { 205 | text-decoration: underline; 206 | } 207 | 208 | a.copy { 209 | text-decoration: none; 210 | color: #990000; 211 | } 212 | 213 | .navbar-default .navbar-nav>li>a.page-scroll, .navbar-header>a.navbar-brand.page-scroll { 214 | color: #717171; 215 | } 216 | 217 | div#footer { 218 | background-color: #f8f8f8; 219 | padding: 50px; 220 | text-align: center; 221 | } 222 | 223 | div#copyright { 224 | margin-bottom: 10px; 225 | } 226 | 227 | #info-tab { 228 | cursor: pointer; 229 | position: relative; 230 | font-size: 2.5em; 231 | width: 5em; 232 | height: 1.25em; 233 | /*background: rgba(60,118,61,0.18);*/ 234 | color: black; 235 | text-align: center; 236 | padding-top: 0.2em; 237 | border-radius: 10px; 238 | } 239 | 240 | #info { 241 | position: fixed; 242 | bottom: 0; 243 | right: -100%; 244 | height: 100%; 245 | background: rgba(255,255,255,0.98); 246 | width: 100%; 247 | z-index: 8; 248 | } 249 | 250 | #info #info-inner { 251 | overflow-y: scroll; 252 | padding-bottom: 100px; 253 | height: 100%; 254 | width: 100%; 255 | padding: 75px 50px; 256 | margin: auto; 257 | position: relative; 258 | } 259 | 260 | #info #info-inner #info-inner-inner { 261 | max-width: 750px; 262 | margin: auto; 263 | } 264 | 265 | 266 | #info #info-close { 267 | cursor: pointer; 268 | position: absolute; 269 | font-size: 3em; 270 | top: 20px; 271 | left: 20px; 272 | width: 1.25em; 273 | height: 1.25em; 274 | color: black; 275 | text-align: center; 276 | padding-top: 0.15em; 277 | border-radius: 10px 0 0 10px; 278 | } 279 | 280 | #info #info-close:hover { opacity: 0.5; } 281 | #info h1 { margin-top: 10px; font-size: 18px; font-weight: bold; } 282 | #info h2 { margin-top: 30px; font-size: 16px; font-weight: bold; } 283 | #info p, #info ul { margin-top: 10px; font-size: 14px; } 284 | 285 | -------------------------------------------------------------------------------- /css/scrolling-nav.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | width: 100%; 3 | height: 100%; 4 | } 5 | 6 | body, h1, h2, h3, h4, h5, h6 { 7 | font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; 8 | font-weight: 700; 9 | } 10 | 11 | .intro-section { 12 | height: 1880px; 13 | padding-top: 110px; 14 | background: #fff; 15 | } 16 | 17 | .tutorial-section { 18 | padding: 20px; 19 | padding-top: 100px; 20 | background: #fff; /*#eee*/ 21 | } 22 | 23 | /*when screen is less than 768px, add these: */ 24 | @media only screen and (min-width: 768px) { 25 | .navbar { 26 | padding: 20px 0; 27 | -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 28 | -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; 29 | transition: background .5s ease-in-out,padding .5s ease-in-out; 30 | } 31 | 32 | .top-nav-collapse { 33 | padding: 0; 34 | } 35 | 36 | #intro { 37 | height: 910px; 38 | padding-top: 110px; 39 | background: #fff; 40 | } 41 | 42 | div#demo-controls { 43 | margin-left: 20px; 44 | margin-right: 5px; 45 | margin-top: 40px; 46 | margin-bottom: 0px; 47 | } 48 | 49 | div#demo-legend { 50 | margin: 5px; 51 | margin-top: 40px; 52 | margin-bottom: 0px; 53 | } 54 | 55 | div#demo-plot { 56 | margin-left: 0px; 57 | margin-bottom: 0px; 58 | margin-left: 5px; 59 | } 60 | 61 | div#demo-graph-layout { 62 | margin-right: 5px; 63 | } 64 | 65 | div#demo-chatting { 66 | margin-left: 0px; 67 | } 68 | } 69 | 70 | /*when it continue increases to 992px, add these: */ 71 | @media only screen and (max-width: 992px) and (min-width: 768px){ 72 | div#demo-box { 73 | font-size: 10px; 74 | } 75 | div#para-title { 76 | font-size: 12px; 77 | } 78 | div#plot-title { 79 | height: 12spx; 80 | text-align: center; 81 | } 82 | div#demo-title { 83 | margin-top: 30px; 84 | } 85 | #info-tab { 86 | position: absolute; 87 | right: 9%; 88 | top: 34%; 89 | font-size: 1.5em; 90 | } 91 | select#soflow-l { 92 | right: 5%; 93 | top: 50%; 94 | width: 70px; 95 | } 96 | } 97 | 98 | /*when it's larger than 992px, add these: */ 99 | @media only screen and (min-width: 992px) { 100 | div#copyright { 101 | text-align: left; 102 | } 103 | 104 | div#author { 105 | text-align: right; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /img/EchoDemo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/EchoDemo.jpg -------------------------------------------------------------------------------- /img/NU_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/NU_logo.png -------------------------------------------------------------------------------- /img/RdBu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/RdBu.png -------------------------------------------------------------------------------- /img/RdPrBu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/RdPrBu.png -------------------------------------------------------------------------------- /img/RdPrBu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /img/block-iu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/block-iu.png -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/favicon.ico -------------------------------------------------------------------------------- /img/presto_enS.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haoopeng/echo/507bb0b5da89e6666ecdca8c9030bc4cb47426c8/img/presto_enS.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Social Media Echo Chamber 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 67 | 68 | 69 |
70 |
71 |
72 |
73 |
74 |

Theme

75 |
76 |
77 | Twitter 78 | Facebook 79 |
80 |
81 |
82 | 83 |
84 |
85 |
86 |
87 |
88 | AdvancedParameters 89 |
90 |
Tolerance:   91 | 96 |
97 |
Influence:   98 | 103 |
104 |
Unfriending:   105 | 110 |
111 |
112 |
113 | 114 |
115 |
116 | ProgressiveConservative 117 | RdPrBu 118 |
119 |
120 | LessPopular 121 |
122 |
123 | MorePopular 124 |
125 |
126 |
127 | 128 |
129 |
130 |
       GraphTitle
131 |
132 |
Time
133 |
134 |
135 |
136 | 137 |
138 |
139 |
140 | 141 | 142 | 143 | 144 | Speed: 145 |
146 |
147 | 148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | 157 |
158 |
159 |
160 |
161 |
162 |

ParameterSetting

163 |
    164 |
  • Tolerance: Medium
    • 165 |
  • Influence: Off
    • 166 |
  • Unfriending: Never
    • 167 |
168 |
169 |
170 |
171 |
172 |
173 |

Scenario01Discription

174 |
175 |
176 |
177 |
178 |
179 | scenario01 180 |
181 |
182 |
183 |
184 |
185 |
186 | 187 |
188 |
189 |
190 |
191 |
192 |

ParameterSetting

193 |
    194 |
  • Tolerance: Medium
    • 195 |
  • Influence: Strong
    • 196 |
  • Unfriending: Never
    • 197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |

Scenario02Discription

205 |
206 |
207 |
208 |
209 |
210 | scenario02 211 |
212 |
213 |
214 |
215 |
216 | 217 |
218 |
219 |
220 |
221 |
222 |

ParameterSetting

223 |
    224 |
  • Tolerance: Medium
    • 225 |
  • Influence: Off
    • 226 |
  • Unfriending: Often
    • 227 |
228 |
229 |
230 |
231 |
232 |
233 |

Scenario03Discription

234 |
235 |
236 |
237 |
238 |
239 | scenario03 240 |
241 |
242 |
243 |
244 |
245 |
246 | 247 |
248 |
249 |
250 |
251 |
252 |

ParameterSetting

253 |
    254 |
  • Tolerance: Medium
    • 255 |
  • Influence: Strong
    • 256 |
  • Unfriending: Often
    • 257 |
258 |
259 |
260 |
261 |
262 |
263 |

Scenario04Discription

264 |
265 |
266 |
267 |
268 |
269 | scenario04 270 |
271 |
272 |
273 |
274 |
275 |
276 | 277 |
278 |
279 |
280 |
281 |
282 |

ParameterSetting

283 |
    284 |
  • Tolerance: High
    • 285 |
  • Influence: Strong
    • 286 |
  • Unfriending: Often
    • 287 |
288 |
289 |
290 |
291 |
292 |
293 |

Scenario05Discription

294 |
295 |
296 |
297 |
298 |
299 | scenario05 300 |
301 |
302 |
303 |
304 |
305 |
306 | 307 | 326 | 327 |
328 |
329 | 330 |
331 |

InfoTitle

332 |

InfoIntroQ

333 |

InfoIntroA

334 |

InfoRepresentQ

335 |

InfoRepresentA

336 |

InfoHowQ

337 |

InfoHowA

338 |

InfoInstructionsQ

339 |

InfoInstructionsA

340 |
341 |
342 |
343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 368 | 369 | 370 | 371 | 372 | -------------------------------------------------------------------------------- /js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.7 (http://getbootstrap.com) 3 | * Copyright 2011-2016 Twitter, Inc. 4 | * Licensed under the MIT license 5 | */ 6 | if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");+function(a){"use strict";var b=a.fn.jquery.split(" ")[0].split(".");if(b[0]<2&&b[1]<9||1==b[0]&&9==b[1]&&b[2]<1||b[0]>3)throw new Error("Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4")}(jQuery),+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]};return!1}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one("bsTransitionEnd",function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b(),a.support.transition&&(a.event.special.bsTransitionEnd={bindType:a.support.transition.end,delegateType:a.support.transition.end,handle:function(b){if(a(b.target).is(this))return b.handleObj.handler.apply(this,arguments)}})})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var c=a(this),e=c.data("bs.alert");e||c.data("bs.alert",e=new d(this)),"string"==typeof b&&e[b].call(c)})}var c='[data-dismiss="alert"]',d=function(b){a(b).on("click",c,this.close)};d.VERSION="3.3.7",d.TRANSITION_DURATION=150,d.prototype.close=function(b){function c(){g.detach().trigger("closed.bs.alert").remove()}var e=a(this),f=e.attr("data-target");f||(f=e.attr("href"),f=f&&f.replace(/.*(?=#[^\s]*$)/,""));var g=a("#"===f?[]:f);b&&b.preventDefault(),g.length||(g=e.closest(".alert")),g.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(g.removeClass("in"),a.support.transition&&g.hasClass("fade")?g.one("bsTransitionEnd",c).emulateTransitionEnd(d.TRANSITION_DURATION):c())};var e=a.fn.alert;a.fn.alert=b,a.fn.alert.Constructor=d,a.fn.alert.noConflict=function(){return a.fn.alert=e,this},a(document).on("click.bs.alert.data-api",c,d.prototype.close)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof b&&b;e||d.data("bs.button",e=new c(this,f)),"toggle"==b?e.toggle():b&&e.setState(b)})}var c=function(b,d){this.$element=a(b),this.options=a.extend({},c.DEFAULTS,d),this.isLoading=!1};c.VERSION="3.3.7",c.DEFAULTS={loadingText:"loading..."},c.prototype.setState=function(b){var c="disabled",d=this.$element,e=d.is("input")?"val":"html",f=d.data();b+="Text",null==f.resetText&&d.data("resetText",d[e]()),setTimeout(a.proxy(function(){d[e](null==f[b]?this.options[b]:f[b]),"loadingText"==b?(this.isLoading=!0,d.addClass(c).attr(c,c).prop(c,!0)):this.isLoading&&(this.isLoading=!1,d.removeClass(c).removeAttr(c).prop(c,!1))},this),0)},c.prototype.toggle=function(){var a=!0,b=this.$element.closest('[data-toggle="buttons"]');if(b.length){var c=this.$element.find("input");"radio"==c.prop("type")?(c.prop("checked")&&(a=!1),b.find(".active").removeClass("active"),this.$element.addClass("active")):"checkbox"==c.prop("type")&&(c.prop("checked")!==this.$element.hasClass("active")&&(a=!1),this.$element.toggleClass("active")),c.prop("checked",this.$element.hasClass("active")),a&&c.trigger("change")}else this.$element.attr("aria-pressed",!this.$element.hasClass("active")),this.$element.toggleClass("active")};var d=a.fn.button;a.fn.button=b,a.fn.button.Constructor=c,a.fn.button.noConflict=function(){return a.fn.button=d,this},a(document).on("click.bs.button.data-api",'[data-toggle^="button"]',function(c){var d=a(c.target).closest(".btn");b.call(d,"toggle"),a(c.target).is('input[type="radio"], input[type="checkbox"]')||(c.preventDefault(),d.is("input,button")?d.trigger("focus"):d.find("input:visible,button:visible").first().trigger("focus"))}).on("focus.bs.button.data-api blur.bs.button.data-api",'[data-toggle^="button"]',function(b){a(b.target).closest(".btn").toggleClass("focus",/^focus(in)?$/.test(b.type))})}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},c.DEFAULTS,d.data(),"object"==typeof b&&b),g="string"==typeof b?b:f.slide;e||d.data("bs.carousel",e=new c(this,f)),"number"==typeof b?e.to(b):g?e[g]():f.interval&&e.pause().cycle()})}var c=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=null,this.sliding=null,this.interval=null,this.$active=null,this.$items=null,this.options.keyboard&&this.$element.on("keydown.bs.carousel",a.proxy(this.keydown,this)),"hover"==this.options.pause&&!("ontouchstart"in document.documentElement)&&this.$element.on("mouseenter.bs.carousel",a.proxy(this.pause,this)).on("mouseleave.bs.carousel",a.proxy(this.cycle,this))};c.VERSION="3.3.7",c.TRANSITION_DURATION=600,c.DEFAULTS={interval:5e3,pause:"hover",wrap:!0,keyboard:!0},c.prototype.keydown=function(a){if(!/input|textarea/i.test(a.target.tagName)){switch(a.which){case 37:this.prev();break;case 39:this.next();break;default:return}a.preventDefault()}},c.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},c.prototype.getItemIndex=function(a){return this.$items=a.parent().children(".item"),this.$items.index(a||this.$active)},c.prototype.getItemForDirection=function(a,b){var c=this.getItemIndex(b),d="prev"==a&&0===c||"next"==a&&c==this.$items.length-1;if(d&&!this.options.wrap)return b;var e="prev"==a?-1:1,f=(c+e)%this.$items.length;return this.$items.eq(f)},c.prototype.to=function(a){var b=this,c=this.getItemIndex(this.$active=this.$element.find(".item.active"));if(!(a>this.$items.length-1||a<0))return this.sliding?this.$element.one("slid.bs.carousel",function(){b.to(a)}):c==a?this.pause().cycle():this.slide(a>c?"next":"prev",this.$items.eq(a))},c.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},c.prototype.next=function(){if(!this.sliding)return this.slide("next")},c.prototype.prev=function(){if(!this.sliding)return this.slide("prev")},c.prototype.slide=function(b,d){var e=this.$element.find(".item.active"),f=d||this.getItemForDirection(b,e),g=this.interval,h="next"==b?"left":"right",i=this;if(f.hasClass("active"))return this.sliding=!1;var j=f[0],k=a.Event("slide.bs.carousel",{relatedTarget:j,direction:h});if(this.$element.trigger(k),!k.isDefaultPrevented()){if(this.sliding=!0,g&&this.pause(),this.$indicators.length){this.$indicators.find(".active").removeClass("active");var l=a(this.$indicators.children()[this.getItemIndex(f)]);l&&l.addClass("active")}var m=a.Event("slid.bs.carousel",{relatedTarget:j,direction:h});return a.support.transition&&this.$element.hasClass("slide")?(f.addClass(b),f[0].offsetWidth,e.addClass(h),f.addClass(h),e.one("bsTransitionEnd",function(){f.removeClass([b,h].join(" ")).addClass("active"),e.removeClass(["active",h].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger(m)},0)}).emulateTransitionEnd(c.TRANSITION_DURATION)):(e.removeClass("active"),f.addClass("active"),this.sliding=!1,this.$element.trigger(m)),g&&this.cycle(),this}};var d=a.fn.carousel;a.fn.carousel=b,a.fn.carousel.Constructor=c,a.fn.carousel.noConflict=function(){return a.fn.carousel=d,this};var e=function(c){var d,e=a(this),f=a(e.attr("data-target")||(d=e.attr("href"))&&d.replace(/.*(?=#[^\s]+$)/,""));if(f.hasClass("carousel")){var g=a.extend({},f.data(),e.data()),h=e.attr("data-slide-to");h&&(g.interval=!1),b.call(f,g),h&&f.data("bs.carousel").to(h),c.preventDefault()}};a(document).on("click.bs.carousel.data-api","[data-slide]",e).on("click.bs.carousel.data-api","[data-slide-to]",e),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var c=a(this);b.call(c,c.data())})})}(jQuery),+function(a){"use strict";function b(b){var c,d=b.attr("data-target")||(c=b.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"");return a(d)}function c(b){return this.each(function(){var c=a(this),e=c.data("bs.collapse"),f=a.extend({},d.DEFAULTS,c.data(),"object"==typeof b&&b);!e&&f.toggle&&/show|hide/.test(b)&&(f.toggle=!1),e||c.data("bs.collapse",e=new d(this,f)),"string"==typeof b&&e[b]()})}var d=function(b,c){this.$element=a(b),this.options=a.extend({},d.DEFAULTS,c),this.$trigger=a('[data-toggle="collapse"][href="#'+b.id+'"],[data-toggle="collapse"][data-target="#'+b.id+'"]'),this.transitioning=null,this.options.parent?this.$parent=this.getParent():this.addAriaAndCollapsedClass(this.$element,this.$trigger),this.options.toggle&&this.toggle()};d.VERSION="3.3.7",d.TRANSITION_DURATION=350,d.DEFAULTS={toggle:!0},d.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},d.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b,e=this.$parent&&this.$parent.children(".panel").children(".in, .collapsing");if(!(e&&e.length&&(b=e.data("bs.collapse"),b&&b.transitioning))){var f=a.Event("show.bs.collapse");if(this.$element.trigger(f),!f.isDefaultPrevented()){e&&e.length&&(c.call(e,"hide"),b||e.data("bs.collapse",null));var g=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[g](0).attr("aria-expanded",!0),this.$trigger.removeClass("collapsed").attr("aria-expanded",!0),this.transitioning=1;var h=function(){this.$element.removeClass("collapsing").addClass("collapse in")[g](""),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return h.call(this);var i=a.camelCase(["scroll",g].join("-"));this.$element.one("bsTransitionEnd",a.proxy(h,this)).emulateTransitionEnd(d.TRANSITION_DURATION)[g](this.$element[0][i])}}}},d.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse in").attr("aria-expanded",!1),this.$trigger.addClass("collapsed").attr("aria-expanded",!1),this.transitioning=1;var e=function(){this.transitioning=0,this.$element.removeClass("collapsing").addClass("collapse").trigger("hidden.bs.collapse")};return a.support.transition?void this.$element[c](0).one("bsTransitionEnd",a.proxy(e,this)).emulateTransitionEnd(d.TRANSITION_DURATION):e.call(this)}}},d.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()},d.prototype.getParent=function(){return a(this.options.parent).find('[data-toggle="collapse"][data-parent="'+this.options.parent+'"]').each(a.proxy(function(c,d){var e=a(d);this.addAriaAndCollapsedClass(b(e),e)},this)).end()},d.prototype.addAriaAndCollapsedClass=function(a,b){var c=a.hasClass("in");a.attr("aria-expanded",c),b.toggleClass("collapsed",!c).attr("aria-expanded",c)};var e=a.fn.collapse;a.fn.collapse=c,a.fn.collapse.Constructor=d,a.fn.collapse.noConflict=function(){return a.fn.collapse=e,this},a(document).on("click.bs.collapse.data-api",'[data-toggle="collapse"]',function(d){var e=a(this);e.attr("data-target")||d.preventDefault();var f=b(e),g=f.data("bs.collapse"),h=g?"toggle":e.data();c.call(f,h)})}(jQuery),+function(a){"use strict";function b(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#[A-Za-z]/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}function c(c){c&&3===c.which||(a(e).remove(),a(f).each(function(){var d=a(this),e=b(d),f={relatedTarget:this};e.hasClass("open")&&(c&&"click"==c.type&&/input|textarea/i.test(c.target.tagName)&&a.contains(e[0],c.target)||(e.trigger(c=a.Event("hide.bs.dropdown",f)),c.isDefaultPrevented()||(d.attr("aria-expanded","false"),e.removeClass("open").trigger(a.Event("hidden.bs.dropdown",f)))))}))}function d(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new g(this)),"string"==typeof b&&d[b].call(c)})}var e=".dropdown-backdrop",f='[data-toggle="dropdown"]',g=function(b){a(b).on("click.bs.dropdown",this.toggle)};g.VERSION="3.3.7",g.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=b(e),g=f.hasClass("open");if(c(),!g){"ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a(document.createElement("div")).addClass("dropdown-backdrop").insertAfter(a(this)).on("click",c);var h={relatedTarget:this};if(f.trigger(d=a.Event("show.bs.dropdown",h)),d.isDefaultPrevented())return;e.trigger("focus").attr("aria-expanded","true"),f.toggleClass("open").trigger(a.Event("shown.bs.dropdown",h))}return!1}},g.prototype.keydown=function(c){if(/(38|40|27|32)/.test(c.which)&&!/input|textarea/i.test(c.target.tagName)){var d=a(this);if(c.preventDefault(),c.stopPropagation(),!d.is(".disabled, :disabled")){var e=b(d),g=e.hasClass("open");if(!g&&27!=c.which||g&&27==c.which)return 27==c.which&&e.find(f).trigger("focus"),d.trigger("click");var h=" li:not(.disabled):visible a",i=e.find(".dropdown-menu"+h);if(i.length){var j=i.index(c.target);38==c.which&&j>0&&j--,40==c.which&&jdocument.documentElement.clientHeight;this.$element.css({paddingLeft:!this.bodyIsOverflowing&&a?this.scrollbarWidth:"",paddingRight:this.bodyIsOverflowing&&!a?this.scrollbarWidth:""})},c.prototype.resetAdjustments=function(){this.$element.css({paddingLeft:"",paddingRight:""})},c.prototype.checkScrollbar=function(){var a=window.innerWidth;if(!a){var b=document.documentElement.getBoundingClientRect();a=b.right-Math.abs(b.left)}this.bodyIsOverflowing=document.body.clientWidth
',trigger:"hover focus",title:"",delay:0,html:!1,container:!1,viewport:{selector:"body",padding:0}},c.prototype.init=function(b,c,d){if(this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d),this.$viewport=this.options.viewport&&a(a.isFunction(this.options.viewport)?this.options.viewport.call(this,this.$element):this.options.viewport.selector||this.options.viewport),this.inState={click:!1,hover:!1,focus:!1},this.$element[0]instanceof document.constructor&&!this.options.selector)throw new Error("`selector` option must be specified when initializing "+this.type+" on the window.document object!");for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focusin",i="hover"==g?"mouseleave":"focusout";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},c.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},c.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);return c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),b instanceof a.Event&&(c.inState["focusin"==b.type?"focus":"hover"]=!0),c.tip().hasClass("in")||"in"==c.hoverState?void(c.hoverState="in"):(clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?void(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show)):c.show())},c.prototype.isInStateTrue=function(){for(var a in this.inState)if(this.inState[a])return!0;return!1},c.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget).data("bs."+this.type);if(c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c)),b instanceof a.Event&&(c.inState["focusout"==b.type?"focus":"hover"]=!1),!c.isInStateTrue())return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?void(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide)):c.hide()},c.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){this.$element.trigger(b);var d=a.contains(this.$element[0].ownerDocument.documentElement,this.$element[0]);if(b.isDefaultPrevented()||!d)return;var e=this,f=this.tip(),g=this.getUID(this.type);this.setContent(),f.attr("id",g),this.$element.attr("aria-describedby",g),this.options.animation&&f.addClass("fade");var h="function"==typeof this.options.placement?this.options.placement.call(this,f[0],this.$element[0]):this.options.placement,i=/\s?auto?\s?/i,j=i.test(h);j&&(h=h.replace(i,"")||"top"),f.detach().css({top:0,left:0,display:"block"}).addClass(h).data("bs."+this.type,this),this.options.container?f.appendTo(this.options.container):f.insertAfter(this.$element),this.$element.trigger("inserted.bs."+this.type);var k=this.getPosition(),l=f[0].offsetWidth,m=f[0].offsetHeight;if(j){var n=h,o=this.getPosition(this.$viewport);h="bottom"==h&&k.bottom+m>o.bottom?"top":"top"==h&&k.top-mo.width?"left":"left"==h&&k.left-lg.top+g.height&&(e.top=g.top+g.height-i)}else{var j=b.left-f,k=b.left+f+c;jg.right&&(e.left=g.left+g.width-k)}return e},c.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},c.prototype.getUID=function(a){do a+=~~(1e6*Math.random());while(document.getElementById(a));return a},c.prototype.tip=function(){if(!this.$tip&&(this.$tip=a(this.options.template),1!=this.$tip.length))throw new Error(this.type+" `template` option must consist of exactly 1 top-level element!");return this.$tip},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},c.prototype.enable=function(){this.enabled=!0},c.prototype.disable=function(){this.enabled=!1},c.prototype.toggleEnabled=function(){this.enabled=!this.enabled},c.prototype.toggle=function(b){var c=this;b&&(c=a(b.currentTarget).data("bs."+this.type),c||(c=new this.constructor(b.currentTarget,this.getDelegateOptions()),a(b.currentTarget).data("bs."+this.type,c))),b?(c.inState.click=!c.inState.click,c.isInStateTrue()?c.enter(c):c.leave(c)):c.tip().hasClass("in")?c.leave(c):c.enter(c)},c.prototype.destroy=function(){var a=this;clearTimeout(this.timeout),this.hide(function(){a.$element.off("."+a.type).removeData("bs."+a.type),a.$tip&&a.$tip.detach(),a.$tip=null,a.$arrow=null,a.$viewport=null,a.$element=null})};var d=a.fn.tooltip;a.fn.tooltip=b,a.fn.tooltip.Constructor=c,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=d,this}}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof b&&b;!e&&/destroy|hide/.test(b)||(e||d.data("bs.popover",e=new c(this,f)),"string"==typeof b&&e[b]())})}var c=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");c.VERSION="3.3.7",c.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:''}),c.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),c.prototype.constructor=c,c.prototype.getDefaults=function(){return c.DEFAULTS},c.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content").children().detach().end()[this.options.html?"string"==typeof c?"html":"append":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},c.prototype.hasContent=function(){return this.getTitle()||this.getContent()},c.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},c.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")};var d=a.fn.popover;a.fn.popover=b,a.fn.popover.Constructor=c,a.fn.popover.noConflict=function(){return a.fn.popover=d,this}}(jQuery),+function(a){"use strict";function b(c,d){this.$body=a(document.body),this.$scrollElement=a(a(c).is(document.body)?window:c),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||"")+" .nav li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",a.proxy(this.process,this)),this.refresh(),this.process()}function c(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})}b.VERSION="3.3.7",b.DEFAULTS={offset:10},b.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},b.prototype.refresh=function(){var b=this,c="offset",d=0;this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight(),a.isWindow(this.$scrollElement[0])||(c="position",d=this.$scrollElement.scrollTop()),this.$body.find(this.selector).map(function(){var b=a(this),e=b.data("target")||b.attr("href"),f=/^#./.test(e)&&a(e);return f&&f.length&&f.is(":visible")&&[[f[c]().top+d,e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.getScrollHeight(),d=this.options.offset+c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(this.scrollHeight!=c&&this.refresh(),b>=d)return g!=(a=f[f.length-1])&&this.activate(a);if(g&&b=e[a]&&(void 0===e[a+1]||b .dropdown-menu > .active").removeClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!1),b.addClass("active").find('[data-toggle="tab"]').attr("aria-expanded",!0),h?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu").length&&b.closest("li.dropdown").addClass("active").end().find('[data-toggle="tab"]').attr("aria-expanded",!0),e&&e()}var g=d.find("> .active"),h=e&&a.support.transition&&(g.length&&g.hasClass("fade")||!!d.find("> .fade").length);g.length&&h?g.one("bsTransitionEnd",f).emulateTransitionEnd(c.TRANSITION_DURATION):f(),g.removeClass("in")};var d=a.fn.tab;a.fn.tab=b,a.fn.tab.Constructor=c,a.fn.tab.noConflict=function(){return a.fn.tab=d,this};var e=function(c){c.preventDefault(),b.call(a(this),"show")};a(document).on("click.bs.tab.data-api",'[data-toggle="tab"]',e).on("click.bs.tab.data-api",'[data-toggle="pill"]',e)}(jQuery),+function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof b&&b;e||d.data("bs.affix",e=new c(this,f)),"string"==typeof b&&e[b]()})}var c=function(b,d){this.options=a.extend({},c.DEFAULTS,d),this.$target=a(this.options.target).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(b),this.affixed=null,this.unpin=null,this.pinnedOffset=null,this.checkPosition()};c.VERSION="3.3.7",c.RESET="affix affix-top affix-bottom",c.DEFAULTS={offset:0,target:window},c.prototype.getState=function(a,b,c,d){var e=this.$target.scrollTop(),f=this.$element.offset(),g=this.$target.height();if(null!=c&&"top"==this.affixed)return e=a-d&&"bottom"},c.prototype.getPinnedOffset=function(){if(this.pinnedOffset)return this.pinnedOffset;this.$element.removeClass(c.RESET).addClass("affix");var a=this.$target.scrollTop(),b=this.$element.offset();return this.pinnedOffset=b.top-a},c.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},c.prototype.checkPosition=function(){if(this.$element.is(":visible")){var b=this.$element.height(),d=this.options.offset,e=d.top,f=d.bottom,g=Math.max(a(document).height(),a(document.body).height());"object"!=typeof d&&(f=e=d),"function"==typeof e&&(e=d.top(this.$element)),"function"==typeof f&&(f=d.bottom(this.$element));var h=this.getState(g,b,e,f);if(this.affixed!=h){null!=this.unpin&&this.$element.css("top","");var i="affix"+(h?"-"+h:""),j=a.Event(i+".bs.affix");if(this.$element.trigger(j),j.isDefaultPrevented())return;this.affixed=h,this.unpin="bottom"==h?this.getPinnedOffset():null,this.$element.removeClass(c.RESET).addClass(i).trigger(i.replace("affix","affixed")+".bs.affix")}"bottom"==h&&this.$element.offset({top:g-b-f})}};var d=a.fn.affix;a.fn.affix=b,a.fn.affix.Constructor=c,a.fn.affix.noConflict=function(){return a.fn.affix=d,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var c=a(this),d=c.data();d.offset=d.offset||{},null!=d.offsetBottom&&(d.offset.bottom=d.offsetBottom),null!=d.offsetTop&&(d.offset.top=d.offsetTop),b.call(c,d)})})}(jQuery); -------------------------------------------------------------------------------- /js/d3-color.v1.min.js: -------------------------------------------------------------------------------- 1 | // https://d3js.org/d3-color/ v1.2.3 Copyright 2018 Mike Bostock 2 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.d3=t.d3||{})}(this,function(t){"use strict";function e(t,e,n){t.prototype=e.prototype=n,n.constructor=t}function n(t,e){var n=Object.create(t.prototype);for(var i in e)n[i]=e[i];return n}function i(){}var r="\\s*([+-]?\\d+)\\s*",a="\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",h="\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",s=/^#([0-9a-f]{3})$/,o=/^#([0-9a-f]{6})$/,l=new RegExp("^rgb\\("+[r,r,r]+"\\)$"),u=new RegExp("^rgb\\("+[h,h,h]+"\\)$"),c=new RegExp("^rgba\\("+[r,r,r,a]+"\\)$"),g=new RegExp("^rgba\\("+[h,h,h,a]+"\\)$"),d=new RegExp("^hsl\\("+[a,h,h]+"\\)$"),p=new RegExp("^hsla\\("+[a,h,h,a]+"\\)$"),f={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};function b(t){var e;return t=(t+"").trim().toLowerCase(),(e=s.exec(t))?new N((e=parseInt(e[1],16))>>8&15|e>>4&240,e>>4&15|240&e,(15&e)<<4|15&e,1):(e=o.exec(t))?y(parseInt(e[1],16)):(e=l.exec(t))?new N(e[1],e[2],e[3],1):(e=u.exec(t))?new N(255*e[1]/100,255*e[2]/100,255*e[3]/100,1):(e=c.exec(t))?w(e[1],e[2],e[3],e[4]):(e=g.exec(t))?w(255*e[1]/100,255*e[2]/100,255*e[3]/100,e[4]):(e=d.exec(t))?v(e[1],e[2]/100,e[3]/100,1):(e=p.exec(t))?v(e[1],e[2]/100,e[3]/100,e[4]):f.hasOwnProperty(t)?y(f[t]):"transparent"===t?new N(NaN,NaN,NaN,0):null}function y(t){return new N(t>>16&255,t>>8&255,255&t,1)}function w(t,e,n,i){return i<=0&&(t=e=n=NaN),new N(t,e,n,i)}function m(t){return t instanceof i||(t=b(t)),t?new N((t=t.rgb()).r,t.g,t.b,t.opacity):new N}function k(t,e,n,i){return 1===arguments.length?m(t):new N(t,e,n,null==i?1:i)}function N(t,e,n,i){this.r=+t,this.g=+e,this.b=+n,this.opacity=+i}function M(t){return((t=Math.max(0,Math.min(255,Math.round(t)||0)))<16?"0":"")+t.toString(16)}function v(t,e,n,i){return i<=0?t=e=n=NaN:n<=0||n>=1?t=e=NaN:e<=0&&(t=NaN),new q(t,e,n,i)}function x(t,e,n,r){return 1===arguments.length?function(t){if(t instanceof q)return new q(t.h,t.s,t.l,t.opacity);if(t instanceof i||(t=b(t)),!t)return new q;if(t instanceof q)return t;var e=(t=t.rgb()).r/255,n=t.g/255,r=t.b/255,a=Math.min(e,n,r),h=Math.max(e,n,r),s=NaN,o=h-a,l=(h+a)/2;return o?(s=e===h?(n-r)/o+6*(n0&&l<1?0:s,new q(s,o,l,t.opacity)}(t):new q(t,e,n,null==r?1:r)}function q(t,e,n,i){this.h=+t,this.s=+e,this.l=+n,this.opacity=+i}function E(t,e,n){return 255*(t<60?e+(n-e)*t/60:t<180?n:t<240?e+(n-e)*(240-t)/60:e)}e(i,b,{displayable:function(){return this.rgb().displayable()},hex:function(){return this.rgb().hex()},toString:function(){return this.rgb()+""}}),e(N,k,n(i,{brighter:function(t){return t=null==t?1/.7:Math.pow(1/.7,t),new N(this.r*t,this.g*t,this.b*t,this.opacity)},darker:function(t){return t=null==t?.7:Math.pow(.7,t),new N(this.r*t,this.g*t,this.b*t,this.opacity)},rgb:function(){return this},displayable:function(){return 0<=this.r&&this.r<=255&&0<=this.g&&this.g<=255&&0<=this.b&&this.b<=255&&0<=this.opacity&&this.opacity<=1},hex:function(){return"#"+M(this.r)+M(this.g)+M(this.b)},toString:function(){var t=this.opacity;return(1===(t=isNaN(t)?1:Math.max(0,Math.min(1,t)))?"rgb(":"rgba(")+Math.max(0,Math.min(255,Math.round(this.r)||0))+", "+Math.max(0,Math.min(255,Math.round(this.g)||0))+", "+Math.max(0,Math.min(255,Math.round(this.b)||0))+(1===t?")":", "+t+")")}})),e(q,x,n(i,{brighter:function(t){return t=null==t?1/.7:Math.pow(1/.7,t),new q(this.h,this.s,this.l*t,this.opacity)},darker:function(t){return t=null==t?.7:Math.pow(.7,t),new q(this.h,this.s,this.l*t,this.opacity)},rgb:function(){var t=this.h%360+360*(this.h<0),e=isNaN(t)||isNaN(this.s)?0:this.s,n=this.l,i=n+(n<.5?n:1-n)*e,r=2*n-i;return new N(E(t>=240?t-240:t+120,r,i),E(t,r,i),E(t<120?t+240:t-120,r,i),this.opacity)},displayable:function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1}}));var $=Math.PI/180,R=180/Math.PI,j=.96422,I=1,P=.82521,O=4/29,S=6/29,_=3*S*S,z=S*S*S;function C(t){if(t instanceof A)return new A(t.l,t.a,t.b,t.opacity);if(t instanceof K){if(isNaN(t.h))return new A(t.l,0,0,t.opacity);var e=t.h*$;return new A(t.l,Math.cos(e)*t.c,Math.sin(e)*t.c,t.opacity)}t instanceof N||(t=m(t));var n,i,r=G(t.r),a=G(t.g),h=G(t.b),s=B((.2225045*r+.7168786*a+.0606169*h)/I);return r===a&&a===h?n=i=s:(n=B((.4360747*r+.3850649*a+.1430804*h)/j),i=B((.0139322*r+.0971045*a+.7141733*h)/P)),new A(116*s-16,500*(n-s),200*(s-i),t.opacity)}function L(t,e,n,i){return 1===arguments.length?C(t):new A(t,e,n,null==i?1:i)}function A(t,e,n,i){this.l=+t,this.a=+e,this.b=+n,this.opacity=+i}function B(t){return t>z?Math.pow(t,1/3):t/_+O}function D(t){return t>S?t*t*t:_*(t-O)}function F(t){return 255*(t<=.0031308?12.92*t:1.055*Math.pow(t,1/2.4)-.055)}function G(t){return(t/=255)<=.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)}function H(t){if(t instanceof K)return new K(t.h,t.c,t.l,t.opacity);if(t instanceof A||(t=C(t)),0===t.a&&0===t.b)return new K(NaN,0,t.l,t.opacity);var e=Math.atan2(t.b,t.a)*R;return new K(e<0?e+360:e,Math.sqrt(t.a*t.a+t.b*t.b),t.l,t.opacity)}function J(t,e,n,i){return 1===arguments.length?H(t):new K(t,e,n,null==i?1:i)}function K(t,e,n,i){this.h=+t,this.c=+e,this.l=+n,this.opacity=+i}e(A,L,n(i,{brighter:function(t){return new A(this.l+18*(null==t?1:t),this.a,this.b,this.opacity)},darker:function(t){return new A(this.l-18*(null==t?1:t),this.a,this.b,this.opacity)},rgb:function(){var t=(this.l+16)/116,e=isNaN(this.a)?t:t+this.a/500,n=isNaN(this.b)?t:t-this.b/200;return new N(F(3.1338561*(e=j*D(e))-1.6168667*(t=I*D(t))-.4906146*(n=P*D(n))),F(-.9787684*e+1.9161415*t+.033454*n),F(.0719453*e-.2289914*t+1.4052427*n),this.opacity)}})),e(K,J,n(i,{brighter:function(t){return new K(this.h,this.c,this.l+18*(null==t?1:t),this.opacity)},darker:function(t){return new K(this.h,this.c,this.l-18*(null==t?1:t),this.opacity)},rgb:function(){return C(this).rgb()}}));var Q=-.14861,T=1.78277,U=-.29227,V=-.90649,W=1.97294,X=W*V,Y=W*T,Z=T*U-V*Q;function tt(t,e,n,i){return 1===arguments.length?function(t){if(t instanceof et)return new et(t.h,t.s,t.l,t.opacity);t instanceof N||(t=m(t));var e=t.r/255,n=t.g/255,i=t.b/255,r=(Z*i+X*e-Y*n)/(Z+X-Y),a=i-r,h=(W*(n-r)-U*a)/V,s=Math.sqrt(h*h+a*a)/(W*r*(1-r)),o=s?Math.atan2(h,a)*R-120:NaN;return new et(o<0?o+360:o,s,r,t.opacity)}(t):new et(t,e,n,null==i?1:i)}function et(t,e,n,i){this.h=+t,this.s=+e,this.l=+n,this.opacity=+i}e(et,tt,n(i,{brighter:function(t){return t=null==t?1/.7:Math.pow(1/.7,t),new et(this.h,this.s,this.l*t,this.opacity)},darker:function(t){return t=null==t?.7:Math.pow(.7,t),new et(this.h,this.s,this.l*t,this.opacity)},rgb:function(){var t=isNaN(this.h)?0:(this.h+120)*$,e=+this.l,n=isNaN(this.s)?0:this.s*e*(1-e),i=Math.cos(t),r=Math.sin(t);return new N(255*(e+n*(Q*i+T*r)),255*(e+n*(U*i+V*r)),255*(e+n*(W*i)),this.opacity)}})),t.color=b,t.rgb=k,t.hsl=x,t.lab=L,t.hcl=J,t.lch=function(t,e,n,i){return 1===arguments.length?H(t):new K(n,e,t,null==i?1:i)},t.gray=function(t,e){return new A(t,0,0,null==e?1:e)},t.cubehelix=tt,Object.defineProperty(t,"__esModule",{value:!0})}); 3 | -------------------------------------------------------------------------------- /js/d3-scale-chromatic.v1.min.js: -------------------------------------------------------------------------------- 1 | // https://d3js.org/d3-scale-chromatic/ Version 1.1.1. Copyright 2017 Mike Bostock. 2 | !function(f,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-interpolate")):"function"==typeof define&&define.amd?define(["exports","d3-interpolate"],e):e(f.d3=f.d3||{},f.d3)}(this,function(f,e){"use strict";var d=function(f){for(var e=f.length/6|0,d=new Array(e),c=0;c=1){return"rgb("+[c.r,c.g,c.b].join(",")+")"}else{return"rgba("+[c.r,c.g,c.b,c.a].join(",")+")"}};c.normalize=function(){function h(k,j,l){return jl?l:j)}c.r=h(0,parseInt(c.r),255);c.g=h(0,parseInt(c.g),255);c.b=h(0,parseInt(c.b),255);c.a=h(0,c.a,1);return c};c.clone=function(){return b.color.make(c.r,c.b,c.g,c.a)};return c.normalize()};b.color.extract=function(d,e){var c;do{c=d.css(e).toLowerCase();if(c!=""&&c!="transparent"){break}d=d.parent()}while(!b.nodeName(d.get(0),"body"));if(c=="rgba(0, 0, 0, 0)"){c="transparent"}return b.color.parse(c)};b.color.parse=function(c){var d,f=b.color.make;if(d=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(c)){return f(parseInt(d[1],10),parseInt(d[2],10),parseInt(d[3],10))}if(d=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(c)){return f(parseInt(d[1],10),parseInt(d[2],10),parseInt(d[3],10),parseFloat(d[4]))}if(d=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(c)){return f(parseFloat(d[1])*2.55,parseFloat(d[2])*2.55,parseFloat(d[3])*2.55)}if(d=/rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(c)){return f(parseFloat(d[1])*2.55,parseFloat(d[2])*2.55,parseFloat(d[3])*2.55,parseFloat(d[4]))}if(d=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(c)){return f(parseInt(d[1],16),parseInt(d[2],16),parseInt(d[3],16))}if(d=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(c)){return f(parseInt(d[1]+d[1],16),parseInt(d[2]+d[2],16),parseInt(d[3]+d[3],16))}var e=b.trim(c).toLowerCase();if(e=="transparent"){return f(255,255,255,0)}else{d=a[e]||[0,0,0];return f(d[0],d[1],d[2])}};var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]}})(jQuery);(function(c){function b(av,ai,J,af){var Q=[],O={colors:["#edc240","#afd8f8","#cb4b4b","#4da74d","#9440ed"],legend:{show:true,noColumns:1,labelFormatter:null,labelBoxBorderColor:"#ccc",container:null,position:"ne",margin:5,backgroundColor:null,backgroundOpacity:0.85},xaxis:{show:null,position:"bottom",mode:null,color:null,tickColor:null,transform:null,inverseTransform:null,min:null,max:null,autoscaleMargin:null,ticks:null,tickFormatter:null,labelWidth:null,labelHeight:null,reserveSpace:null,tickLength:null,alignTicksWithAxis:null,tickDecimals:null,tickSize:null,minTickSize:null,monthNames:null,timeformat:null,twelveHourClock:false},yaxis:{autoscaleMargin:0.02,position:"left"},xaxes:[],yaxes:[],series:{points:{show:false,radius:3,lineWidth:2,fill:true,fillColor:"#ffffff",symbol:"circle"},lines:{lineWidth:2,fill:false,fillColor:null,steps:false},bars:{show:false,lineWidth:2,barWidth:1,fill:true,fillColor:null,align:"left",horizontal:false},shadowSize:3},grid:{show:true,aboveData:false,color:"#545454",backgroundColor:null,borderColor:null,tickColor:null,labelMargin:5,axisMargin:8,borderWidth:2,minBorderMargin:null,markings:null,markingsColor:"#f4f4f4",markingsLineWidth:2,clickable:false,hoverable:false,autoHighlight:true,mouseActiveRadius:10},hooks:{}},az=null,ad=null,y=null,H=null,A=null,p=[],aw=[],q={left:0,right:0,top:0,bottom:0},G=0,I=0,h=0,w=0,ak={processOptions:[],processRawData:[],processDatapoints:[],drawSeries:[],draw:[],bindEvents:[],drawOverlay:[],shutdown:[]},aq=this;aq.setData=aj;aq.setupGrid=t;aq.draw=W;aq.getPlaceholder=function(){return av};aq.getCanvas=function(){return az};aq.getPlotOffset=function(){return q};aq.width=function(){return h};aq.height=function(){return w};aq.offset=function(){var aB=y.offset();aB.left+=q.left;aB.top+=q.top;return aB};aq.getData=function(){return Q};aq.getAxes=function(){var aC={},aB;c.each(p.concat(aw),function(aD,aE){if(aE){aC[aE.direction+(aE.n!=1?aE.n:"")+"axis"]=aE}});return aC};aq.getXAxes=function(){return p};aq.getYAxes=function(){return aw};aq.c2p=C;aq.p2c=ar;aq.getOptions=function(){return O};aq.highlight=x;aq.unhighlight=T;aq.triggerRedrawOverlay=f;aq.pointOffset=function(aB){return{left:parseInt(p[aA(aB,"x")-1].p2c(+aB.x)+q.left),top:parseInt(aw[aA(aB,"y")-1].p2c(+aB.y)+q.top)}};aq.shutdown=ag;aq.resize=function(){B();g(az);g(ad)};aq.hooks=ak;F(aq);Z(J);X();aj(ai);t();W();ah();function an(aD,aB){aB=[aq].concat(aB);for(var aC=0;aC=O.colors.length){aG=0;++aF}}var aH=0,aN;for(aG=0;aGa3.datamax&&a1!=aB){a3.datamax=a1}}c.each(m(),function(a1,a2){a2.datamin=aO;a2.datamax=aI;a2.used=false});for(aU=0;aU0&&aT[aR-aP]!=null&&aT[aR-aP]!=aT[aR]&&aT[aR-aP+1]!=aT[aR+1]){for(aN=0;aNaM){aM=a0}}if(aX.y){if(a0aV){aV=a0}}}}if(aJ.bars.show){var aY=aJ.bars.align=="left"?0:-aJ.bars.barWidth/2;if(aJ.bars.horizontal){aQ+=aY;aV+=aY+aJ.bars.barWidth}else{aK+=aY;aM+=aY+aJ.bars.barWidth}}aF(aJ.xaxis,aK,aM);aF(aJ.yaxis,aQ,aV)}c.each(m(),function(a1,a2){if(a2.datamin==aO){a2.datamin=null}if(a2.datamax==aI){a2.datamax=null}})}function j(aB,aC){var aD=document.createElement("canvas");aD.className=aC;aD.width=G;aD.height=I;if(!aB){c(aD).css({position:"absolute",left:0,top:0})}c(aD).appendTo(av);if(!aD.getContext){aD=window.G_vmlCanvasManager.initElement(aD)}aD.getContext("2d").save();return aD}function B(){G=av.width();I=av.height();if(G<=0||I<=0){throw"Invalid dimensions for plot, width = "+G+", height = "+I}}function g(aC){if(aC.width!=G){aC.width=G}if(aC.height!=I){aC.height=I}var aB=aC.getContext("2d");aB.restore();aB.save()}function X(){var aC,aB=av.children("canvas.base"),aD=av.children("canvas.overlay");if(aB.length==0||aD==0){av.html("");av.css({padding:0});if(av.css("position")=="static"){av.css("position","relative")}B();az=j(true,"base");ad=j(false,"overlay");aC=false}else{az=aB.get(0);ad=aD.get(0);aC=true}H=az.getContext("2d");A=ad.getContext("2d");y=c([ad,az]);if(aC){av.data("plot").shutdown();aq.resize();A.clearRect(0,0,G,I);y.unbind();av.children().not([az,ad]).remove()}av.data("plot",aq)}function ah(){if(O.grid.hoverable){y.mousemove(aa);y.mouseleave(l)}if(O.grid.clickable){y.click(R)}an(ak.bindEvents,[y])}function ag(){if(M){clearTimeout(M)}y.unbind("mousemove",aa);y.unbind("mouseleave",l);y.unbind("click",R);an(ak.shutdown,[y])}function r(aG){function aC(aH){return aH}var aF,aB,aD=aG.options.transform||aC,aE=aG.options.inverseTransform;if(aG.direction=="x"){aF=aG.scale=h/Math.abs(aD(aG.max)-aD(aG.min));aB=Math.min(aD(aG.max),aD(aG.min))}else{aF=aG.scale=w/Math.abs(aD(aG.max)-aD(aG.min));aF=-aF;aB=Math.max(aD(aG.max),aD(aG.min))}if(aD==aC){aG.p2c=function(aH){return(aH-aB)*aF}}else{aG.p2c=function(aH){return(aD(aH)-aB)*aF}}if(!aE){aG.c2p=function(aH){return aB+aH/aF}}else{aG.c2p=function(aH){return aE(aB+aH/aF)}}}function L(aD){var aB=aD.options,aF,aJ=aD.ticks||[],aI=[],aE,aK=aB.labelWidth,aG=aB.labelHeight,aC;function aH(aM,aL){return c('
'+aM.join("")+"
").appendTo(av)}if(aD.direction=="x"){if(aK==null){aK=Math.floor(G/(aJ.length>0?aJ.length:1))}if(aG==null){aI=[];for(aF=0;aF'+aE+"")}}if(aI.length>0){aI.push('
');aC=aH(aI,"width:10000px;");aG=aC.height();aC.remove()}}}else{if(aK==null||aG==null){for(aF=0;aF'+aE+"")}}if(aI.length>0){aC=aH(aI,"");if(aK==null){aK=aC.children().width()}if(aG==null){aG=aC.find("div.tickLabel").height()}aC.remove()}}}if(aK==null){aK=0}if(aG==null){aG=0}aD.labelWidth=aK;aD.labelHeight=aG}function au(aD){var aC=aD.labelWidth,aL=aD.labelHeight,aH=aD.options.position,aF=aD.options.tickLength,aG=O.grid.axisMargin,aJ=O.grid.labelMargin,aK=aD.direction=="x"?p:aw,aE;var aB=c.grep(aK,function(aN){return aN&&aN.options.position==aH&&aN.reserveSpace});if(c.inArray(aD,aB)==aB.length-1){aG=0}if(aF==null){aF="full"}var aI=c.grep(aK,function(aN){return aN&&aN.reserveSpace});var aM=c.inArray(aD,aI)==0;if(!aM&&aF=="full"){aF=5}if(!isNaN(+aF)){aJ+=+aF}if(aD.direction=="x"){aL+=aJ;if(aH=="bottom"){q.bottom+=aL+aG;aD.box={top:I-q.bottom,height:aL}}else{aD.box={top:q.top+aG,height:aL};q.top+=aL+aG}}else{aC+=aJ;if(aH=="left"){aD.box={left:q.left+aG,width:aC};q.left+=aC+aG}else{q.right+=aC+aG;aD.box={left:G-q.right,width:aC}}}aD.position=aH;aD.tickLength=aF;aD.box.padding=aJ;aD.innermost=aM}function U(aB){if(aB.direction=="x"){aB.box.left=q.left;aB.box.width=h}else{aB.box.top=q.top;aB.box.height=w}}function t(){var aC,aE=m();c.each(aE,function(aF,aG){aG.show=aG.options.show;if(aG.show==null){aG.show=aG.used}aG.reserveSpace=aG.show||aG.options.reserveSpace;n(aG)});allocatedAxes=c.grep(aE,function(aF){return aF.reserveSpace});q.left=q.right=q.top=q.bottom=0;if(O.grid.show){c.each(allocatedAxes,function(aF,aG){S(aG);P(aG);ap(aG,aG.ticks);L(aG)});for(aC=allocatedAxes.length-1;aC>=0;--aC){au(allocatedAxes[aC])}var aD=O.grid.minBorderMargin;if(aD==null){aD=0;for(aC=0;aC=0){aD=0}}if(aF.max==null){aB+=aH*aG;if(aB>0&&aE.datamax!=null&&aE.datamax<=0){aB=0}}}}aE.min=aD;aE.max=aB}function S(aG){var aM=aG.options;var aH;if(typeof aM.ticks=="number"&&aM.ticks>0){aH=aM.ticks}else{aH=0.3*Math.sqrt(aG.direction=="x"?G:I)}var aT=(aG.max-aG.min)/aH,aO,aB,aN,aR,aS,aQ,aI;if(aM.mode=="time"){var aJ={second:1000,minute:60*1000,hour:60*60*1000,day:24*60*60*1000,month:30*24*60*60*1000,year:365.2425*24*60*60*1000};var aK=[[1,"second"],[2,"second"],[5,"second"],[10,"second"],[30,"second"],[1,"minute"],[2,"minute"],[5,"minute"],[10,"minute"],[30,"minute"],[1,"hour"],[2,"hour"],[4,"hour"],[8,"hour"],[12,"hour"],[1,"day"],[2,"day"],[3,"day"],[0.25,"month"],[0.5,"month"],[1,"month"],[2,"month"],[3,"month"],[6,"month"],[1,"year"]];var aC=0;if(aM.minTickSize!=null){if(typeof aM.tickSize=="number"){aC=aM.tickSize}else{aC=aM.minTickSize[0]*aJ[aM.minTickSize[1]]}}for(var aS=0;aS=aC){break}}aO=aK[aS][0];aN=aK[aS][1];if(aN=="year"){aQ=Math.pow(10,Math.floor(Math.log(aT/aJ.year)/Math.LN10));aI=(aT/aJ.year)/aQ;if(aI<1.5){aO=1}else{if(aI<3){aO=2}else{if(aI<7.5){aO=5}else{aO=10}}}aO*=aQ}aG.tickSize=aM.tickSize||[aO,aN];aB=function(aX){var a2=[],a0=aX.tickSize[0],a3=aX.tickSize[1],a1=new Date(aX.min);var aW=a0*aJ[a3];if(a3=="second"){a1.setUTCSeconds(a(a1.getUTCSeconds(),a0))}if(a3=="minute"){a1.setUTCMinutes(a(a1.getUTCMinutes(),a0))}if(a3=="hour"){a1.setUTCHours(a(a1.getUTCHours(),a0))}if(a3=="month"){a1.setUTCMonth(a(a1.getUTCMonth(),a0))}if(a3=="year"){a1.setUTCFullYear(a(a1.getUTCFullYear(),a0))}a1.setUTCMilliseconds(0);if(aW>=aJ.minute){a1.setUTCSeconds(0)}if(aW>=aJ.hour){a1.setUTCMinutes(0)}if(aW>=aJ.day){a1.setUTCHours(0)}if(aW>=aJ.day*4){a1.setUTCDate(1)}if(aW>=aJ.year){a1.setUTCMonth(0)}var a5=0,a4=Number.NaN,aY;do{aY=a4;a4=a1.getTime();a2.push(a4);if(a3=="month"){if(a0<1){a1.setUTCDate(1);var aV=a1.getTime();a1.setUTCMonth(a1.getUTCMonth()+1);var aZ=a1.getTime();a1.setTime(a4+a5*aJ.hour+(aZ-aV)*a0);a5=a1.getUTCHours();a1.setUTCHours(0)}else{a1.setUTCMonth(a1.getUTCMonth()+a0)}}else{if(a3=="year"){a1.setUTCFullYear(a1.getUTCFullYear()+a0)}else{a1.setTime(a4+aW)}}}while(a4aU){aP=aU}aQ=Math.pow(10,-aP);aI=aT/aQ;if(aI<1.5){aO=1}else{if(aI<3){aO=2;if(aI>2.25&&(aU==null||aP+1<=aU)){aO=2.5;++aP}}else{if(aI<7.5){aO=5}else{aO=10}}}aO*=aQ;if(aM.minTickSize!=null&&aO0){if(aM.min==null){aG.min=Math.min(aG.min,aL[0])}if(aM.max==null&&aL.length>1){aG.max=Math.max(aG.max,aL[aL.length-1])}}aB=function(aX){var aY=[],aV,aW;for(aW=0;aW1&&/\..*0$/.test((aD[1]-aD[0]).toFixed(aE)))){aG.tickDecimals=aE}}}}aG.tickGenerator=aB;if(c.isFunction(aM.tickFormatter)){aG.tickFormatter=function(aV,aW){return""+aM.tickFormatter(aV,aW)}}else{aG.tickFormatter=aR}}function P(aF){var aH=aF.options.ticks,aG=[];if(aH==null||(typeof aH=="number"&&aH>0)){aG=aF.tickGenerator(aF)}else{if(aH){if(c.isFunction(aH)){aG=aH({min:aF.min,max:aF.max})}else{aG=aH}}}var aE,aB;aF.ticks=[];for(aE=0;aE1){aC=aD[1]}}else{aB=+aD}if(aC==null){aC=aF.tickFormatter(aB,aF)}if(!isNaN(aB)){aF.ticks.push({v:aB,label:aC})}}}function ap(aB,aC){if(aB.options.autoscaleMargin&&aC.length>0){if(aB.options.min==null){aB.min=Math.min(aB.min,aC[0].v)}if(aB.options.max==null&&aC.length>1){aB.max=Math.max(aB.max,aC[aC.length-1].v)}}}function W(){H.clearRect(0,0,G,I);var aC=O.grid;if(aC.show&&aC.backgroundColor){N()}if(aC.show&&!aC.aboveData){ac()}for(var aB=0;aBaG){var aC=aH;aH=aG;aG=aC}return{from:aH,to:aG,axis:aE}}function N(){H.save();H.translate(q.left,q.top);H.fillStyle=am(O.grid.backgroundColor,w,0,"rgba(255, 255, 255, 0)");H.fillRect(0,0,h,w);H.restore()}function ac(){var aF;H.save();H.translate(q.left,q.top);var aH=O.grid.markings;if(aH){if(c.isFunction(aH)){var aK=aq.getAxes();aK.xmin=aK.xaxis.min;aK.xmax=aK.xaxis.max;aK.ymin=aK.yaxis.min;aK.ymax=aK.yaxis.max;aH=aH(aK)}for(aF=0;aFaC.axis.max||aI.toaI.axis.max){continue}aC.from=Math.max(aC.from,aC.axis.min);aC.to=Math.min(aC.to,aC.axis.max);aI.from=Math.max(aI.from,aI.axis.min);aI.to=Math.min(aI.to,aI.axis.max);if(aC.from==aC.to&&aI.from==aI.to){continue}aC.from=aC.axis.p2c(aC.from);aC.to=aC.axis.p2c(aC.to);aI.from=aI.axis.p2c(aI.from);aI.to=aI.axis.p2c(aI.to);if(aC.from==aC.to||aI.from==aI.to){H.beginPath();H.strokeStyle=aD.color||O.grid.markingsColor;H.lineWidth=aD.lineWidth||O.grid.markingsLineWidth;H.moveTo(aC.from,aI.from);H.lineTo(aC.to,aI.to);H.stroke()}else{H.fillStyle=aD.color||O.grid.markingsColor;H.fillRect(aC.from,aI.to,aC.to-aC.from,aI.from-aI.to)}}}var aK=m(),aM=O.grid.borderWidth;for(var aE=0;aEaB.max||(aQ=="full"&&aM>0&&(aO==aB.min||aO==aB.max))){continue}if(aB.direction=="x"){aN=aB.p2c(aO);aJ=aQ=="full"?-w:aQ;if(aB.position=="top"){aJ=-aJ}}else{aL=aB.p2c(aO);aP=aQ=="full"?-h:aQ;if(aB.position=="left"){aP=-aP}}if(H.lineWidth==1){if(aB.direction=="x"){aN=Math.floor(aN)+0.5}else{aL=Math.floor(aL)+0.5}}H.moveTo(aN,aL);H.lineTo(aN+aP,aL+aJ)}H.stroke()}if(aM){H.lineWidth=aM;H.strokeStyle=O.grid.borderColor;H.strokeRect(-aM/2,-aM/2,h+aM,w+aM)}H.restore()}function k(){av.find(".tickLabels").remove();var aG=['
'];var aJ=m();for(var aD=0;aD');for(var aE=0;aEaC.max){continue}var aK={},aI;if(aC.direction=="x"){aI="center";aK.left=Math.round(q.left+aC.p2c(aH.v)-aC.labelWidth/2);if(aC.position=="bottom"){aK.top=aF.top+aF.padding}else{aK.bottom=I-(aF.top+aF.height-aF.padding)}}else{aK.top=Math.round(q.top+aC.p2c(aH.v)-aC.labelHeight/2);if(aC.position=="left"){aK.right=G-(aF.left+aF.width-aF.padding);aI="right"}else{aK.left=aF.left+aF.padding;aI="left"}}aK.width=aC.labelWidth;var aB=["position:absolute","text-align:"+aI];for(var aL in aK){aB.push(aL+":"+aK[aL]+"px")}aG.push('
'+aH.label+"
")}aG.push("
")}aG.push("");av.append(aG.join(""))}function d(aB){if(aB.lines.show){at(aB)}if(aB.bars.show){e(aB)}if(aB.points.show){ao(aB)}}function at(aE){function aD(aP,aQ,aI,aU,aT){var aV=aP.points,aJ=aP.pointsize,aN=null,aM=null;H.beginPath();for(var aO=aJ;aO=aR&&aS>aT.max){if(aR>aT.max){continue}aL=(aT.max-aS)/(aR-aS)*(aK-aL)+aL;aS=aT.max}else{if(aR>=aS&&aR>aT.max){if(aS>aT.max){continue}aK=(aT.max-aS)/(aR-aS)*(aK-aL)+aL;aR=aT.max}}if(aL<=aK&&aL=aK&&aL>aU.max){if(aK>aU.max){continue}aS=(aU.max-aL)/(aK-aL)*(aR-aS)+aS;aL=aU.max}else{if(aK>=aL&&aK>aU.max){if(aL>aU.max){continue}aR=(aU.max-aL)/(aK-aL)*(aR-aS)+aS;aK=aU.max}}if(aL!=aN||aS!=aM){H.moveTo(aU.p2c(aL)+aQ,aT.p2c(aS)+aI)}aN=aK;aM=aR;H.lineTo(aU.p2c(aK)+aQ,aT.p2c(aR)+aI)}H.stroke()}function aF(aI,aQ,aP){var aW=aI.points,aV=aI.pointsize,aN=Math.min(Math.max(0,aP.min),aP.max),aX=0,aU,aT=false,aM=1,aL=0,aR=0;while(true){if(aV>0&&aX>aW.length+aV){break}aX+=aV;var aZ=aW[aX-aV],aK=aW[aX-aV+aM],aY=aW[aX],aJ=aW[aX+aM];if(aT){if(aV>0&&aZ!=null&&aY==null){aR=aX;aV=-aV;aM=2;continue}if(aV<0&&aX==aL+aV){H.fill();aT=false;aV=-aV;aM=1;aX=aL=aR+aV;continue}}if(aZ==null||aY==null){continue}if(aZ<=aY&&aZ=aY&&aZ>aQ.max){if(aY>aQ.max){continue}aK=(aQ.max-aZ)/(aY-aZ)*(aJ-aK)+aK;aZ=aQ.max}else{if(aY>=aZ&&aY>aQ.max){if(aZ>aQ.max){continue}aJ=(aQ.max-aZ)/(aY-aZ)*(aJ-aK)+aK;aY=aQ.max}}if(!aT){H.beginPath();H.moveTo(aQ.p2c(aZ),aP.p2c(aN));aT=true}if(aK>=aP.max&&aJ>=aP.max){H.lineTo(aQ.p2c(aZ),aP.p2c(aP.max));H.lineTo(aQ.p2c(aY),aP.p2c(aP.max));continue}else{if(aK<=aP.min&&aJ<=aP.min){H.lineTo(aQ.p2c(aZ),aP.p2c(aP.min));H.lineTo(aQ.p2c(aY),aP.p2c(aP.min));continue}}var aO=aZ,aS=aY;if(aK<=aJ&&aK=aP.min){aZ=(aP.min-aK)/(aJ-aK)*(aY-aZ)+aZ;aK=aP.min}else{if(aJ<=aK&&aJ=aP.min){aY=(aP.min-aK)/(aJ-aK)*(aY-aZ)+aZ;aJ=aP.min}}if(aK>=aJ&&aK>aP.max&&aJ<=aP.max){aZ=(aP.max-aK)/(aJ-aK)*(aY-aZ)+aZ;aK=aP.max}else{if(aJ>=aK&&aJ>aP.max&&aK<=aP.max){aY=(aP.max-aK)/(aJ-aK)*(aY-aZ)+aZ;aJ=aP.max}}if(aZ!=aO){H.lineTo(aQ.p2c(aO),aP.p2c(aK))}H.lineTo(aQ.p2c(aZ),aP.p2c(aK));H.lineTo(aQ.p2c(aY),aP.p2c(aJ));if(aY!=aS){H.lineTo(aQ.p2c(aY),aP.p2c(aJ));H.lineTo(aQ.p2c(aS),aP.p2c(aJ))}}}H.save();H.translate(q.left,q.top);H.lineJoin="round";var aG=aE.lines.lineWidth,aB=aE.shadowSize;if(aG>0&&aB>0){H.lineWidth=aB;H.strokeStyle="rgba(0,0,0,0.1)";var aH=Math.PI/18;aD(aE.datapoints,Math.sin(aH)*(aG/2+aB/2),Math.cos(aH)*(aG/2+aB/2),aE.xaxis,aE.yaxis);H.lineWidth=aB/2;aD(aE.datapoints,Math.sin(aH)*(aG/2+aB/4),Math.cos(aH)*(aG/2+aB/4),aE.xaxis,aE.yaxis)}H.lineWidth=aG;H.strokeStyle=aE.color;var aC=ae(aE.lines,aE.color,0,w);if(aC){H.fillStyle=aC;aF(aE.datapoints,aE.xaxis,aE.yaxis)}if(aG>0){aD(aE.datapoints,0,0,aE.xaxis,aE.yaxis)}H.restore()}function ao(aE){function aH(aN,aM,aU,aK,aS,aT,aQ,aJ){var aR=aN.points,aI=aN.pointsize;for(var aL=0;aLaT.max||aOaQ.max){continue}H.beginPath();aP=aT.p2c(aP);aO=aQ.p2c(aO)+aK;if(aJ=="circle"){H.arc(aP,aO,aM,0,aS?Math.PI:Math.PI*2,false)}else{aJ(H,aP,aO,aM,aS)}H.closePath();if(aU){H.fillStyle=aU;H.fill()}H.stroke()}}H.save();H.translate(q.left,q.top);var aG=aE.points.lineWidth,aC=aE.shadowSize,aB=aE.points.radius,aF=aE.points.symbol;if(aG>0&&aC>0){var aD=aC/2;H.lineWidth=aD;H.strokeStyle="rgba(0,0,0,0.1)";aH(aE.datapoints,aB,null,aD+aD/2,true,aE.xaxis,aE.yaxis,aF);H.strokeStyle="rgba(0,0,0,0.2)";aH(aE.datapoints,aB,null,aD/2,true,aE.xaxis,aE.yaxis,aF)}H.lineWidth=aG;H.strokeStyle=aE.color;aH(aE.datapoints,aB,ae(aE.points,aE.color),0,false,aE.xaxis,aE.yaxis,aF);H.restore()}function E(aN,aM,aV,aI,aQ,aF,aD,aL,aK,aU,aR,aC){var aE,aT,aJ,aP,aG,aB,aO,aH,aS;if(aR){aH=aB=aO=true;aG=false;aE=aV;aT=aN;aP=aM+aI;aJ=aM+aQ;if(aTaL.max||aPaK.max){return}if(aEaL.max){aT=aL.max;aB=false}if(aJaK.max){aP=aK.max;aO=false}aE=aL.p2c(aE);aJ=aK.p2c(aJ);aT=aL.p2c(aT);aP=aK.p2c(aP);if(aD){aU.beginPath();aU.moveTo(aE,aJ);aU.lineTo(aE,aP);aU.lineTo(aT,aP);aU.lineTo(aT,aJ);aU.fillStyle=aD(aJ,aP);aU.fill()}if(aC>0&&(aG||aB||aO||aH)){aU.beginPath();aU.moveTo(aE,aJ+aF);if(aG){aU.lineTo(aE,aP+aF)}else{aU.moveTo(aE,aP+aF)}if(aO){aU.lineTo(aT,aP+aF)}else{aU.moveTo(aT,aP+aF)}if(aB){aU.lineTo(aT,aJ+aF)}else{aU.moveTo(aT,aJ+aF)}if(aH){aU.lineTo(aE,aJ+aF)}else{aU.moveTo(aE,aJ+aF)}aU.stroke()}}function e(aD){function aC(aJ,aI,aL,aG,aK,aN,aM){var aO=aJ.points,aF=aJ.pointsize;for(var aH=0;aH")}aH.push("");aF=true}if(aN){aJ=aN(aJ,aM)}aH.push('
'+aJ+"")}if(aF){aH.push("")}if(aH.length==0){return}var aL=''+aH.join("")+"
";if(O.legend.container!=null){c(O.legend.container).html(aL)}else{var aI="",aC=O.legend.position,aD=O.legend.margin;if(aD[0]==null){aD=[aD,aD]}if(aC.charAt(0)=="n"){aI+="top:"+(aD[1]+q.top)+"px;"}else{if(aC.charAt(0)=="s"){aI+="bottom:"+(aD[1]+q.bottom)+"px;"}}if(aC.charAt(1)=="e"){aI+="right:"+(aD[0]+q.right)+"px;"}else{if(aC.charAt(1)=="w"){aI+="left:"+(aD[0]+q.left)+"px;"}}var aK=c('
'+aL.replace('style="','style="position:absolute;'+aI+";")+"
").appendTo(av);if(O.legend.backgroundOpacity!=0){var aG=O.legend.backgroundColor;if(aG==null){aG=O.grid.backgroundColor;if(aG&&typeof aG=="string"){aG=c.color.parse(aG)}else{aG=c.color.extract(aK,"background-color")}aG.a=1;aG=aG.toString()}var aB=aK.children();c('
').prependTo(aK).css("opacity",O.legend.backgroundOpacity)}}}var ab=[],M=null;function K(aI,aG,aD){var aO=O.grid.mouseActiveRadius,a0=aO*aO+1,aY=null,aR=false,aW,aU;for(aW=Q.length-1;aW>=0;--aW){if(!aD(Q[aW])){continue}var aP=Q[aW],aH=aP.xaxis,aF=aP.yaxis,aV=aP.datapoints.points,aT=aP.datapoints.pointsize,aQ=aH.c2p(aI),aN=aF.c2p(aG),aC=aO/aH.scale,aB=aO/aF.scale;if(aH.options.inverseTransform){aC=Number.MAX_VALUE}if(aF.options.inverseTransform){aB=Number.MAX_VALUE}if(aP.lines.show||aP.points.show){for(aU=0;aUaC||aK-aQ<-aC||aJ-aN>aB||aJ-aN<-aB){continue}var aM=Math.abs(aH.p2c(aK)-aI),aL=Math.abs(aF.p2c(aJ)-aG),aS=aM*aM+aL*aL;if(aS=Math.min(aZ,aK)&&aN>=aJ+aE&&aN<=aJ+aX):(aQ>=aK+aE&&aQ<=aK+aX&&aN>=Math.min(aZ,aJ)&&aN<=Math.max(aZ,aJ))){aY=[aW,aU/aT]}}}}if(aY){aW=aY[0];aU=aY[1];aT=Q[aW].datapoints.pointsize;return{datapoint:Q[aW].datapoints.points.slice(aU*aT,(aU+1)*aT),dataIndex:aU,series:Q[aW],seriesIndex:aW}}return null}function aa(aB){if(O.grid.hoverable){u("plothover",aB,function(aC){return aC.hoverable!=false})}}function l(aB){if(O.grid.hoverable){u("plothover",aB,function(aC){return false})}}function R(aB){u("plotclick",aB,function(aC){return aC.clickable!=false})}function u(aC,aB,aD){var aE=y.offset(),aH=aB.pageX-aE.left-q.left,aF=aB.pageY-aE.top-q.top,aJ=C({left:aH,top:aF});aJ.pageX=aB.pageX;aJ.pageY=aB.pageY;var aK=K(aH,aF,aD);if(aK){aK.pageX=parseInt(aK.series.xaxis.p2c(aK.datapoint[0])+aE.left+q.left);aK.pageY=parseInt(aK.series.yaxis.p2c(aK.datapoint[1])+aE.top+q.top)}if(O.grid.autoHighlight){for(var aG=0;aGaH.max||aIaG.max){return}var aF=aE.points.radius+aE.points.lineWidth/2;A.lineWidth=aF;A.strokeStyle=c.color.parse(aE.color).scale("a",0.5).toString();var aB=1.5*aF,aC=aH.p2c(aC),aI=aG.p2c(aI);A.beginPath();if(aE.points.symbol=="circle"){A.arc(aC,aI,aB,0,2*Math.PI,false)}else{aE.points.symbol(A,aC,aI,aB,false)}A.closePath();A.stroke()}function v(aE,aB){A.lineWidth=aE.bars.lineWidth;A.strokeStyle=c.color.parse(aE.color).scale("a",0.5).toString();var aD=c.color.parse(aE.color).scale("a",0.5).toString();var aC=aE.bars.align=="left"?0:-aE.bars.barWidth/2;E(aB[0],aB[1],aB[2]||0,aC,aC+aE.bars.barWidth,0,function(){return aD},aE.xaxis,aE.yaxis,A,aE.bars.horizontal,aE.bars.lineWidth)}function am(aJ,aB,aH,aC){if(typeof aJ=="string"){return aJ}else{var aI=H.createLinearGradient(0,aH,0,aB);for(var aE=0,aD=aJ.colors.length;aE12){n=n-12}else{if(n==0){n=12}}}for(var g=0;g"+textSet[key]["Language"]+""; 24 | } 25 | $("#soflow-l").html(innerHtml); 26 | $("#soflow-l").val(lang); 27 | } 28 | 29 | function languagesselectorListener(){ 30 | lang = $("#soflow-l").val(); 31 | location.href = location.href.split("?")[0] + "?"+ "lang=" + lang; 32 | } 33 | 34 | function transHTML(){ 35 | var command; 36 | //all text in tag are used as command to translation 37 | for (var i=0; i<$(".lang-command").length; i++){ 38 | command = $(".lang-command").eq(i).html(); 39 | if(textSet[lang] && textSet[lang][command]) $(".lang-command").eq(i).html(textSet[lang][command]); 40 | else if(textSet["english"][command]) $(".lang-command").eq(i).html(textSet["english"][command]); 41 | } 42 | //all value starting with "$" in option tag and i tag's title attribute are used as command to translation 43 | for (var i=0; i<$("option").length; i++){ 44 | command = $("option").eq(i).text(); 45 | if(command.charAt(0) == "$"){ 46 | if(textSet[lang] && textSet[lang][command.substring(1)]) $("option").eq(i).text(textSet[lang][command.substring(1)]); 47 | else if(textSet["english"][command.substring(1)]) $("option").eq(i).text(textSet["english"][command.substring(1)]); 48 | } 49 | } 50 | for (var i=0; i<$("i").length; i++){ 51 | if($("i").eq(i).attr("title")){ 52 | command = $("i").eq(i).attr("title"); 53 | if(command.charAt(0) == "$"){ 54 | if(textSet[lang] && textSet[lang][command.substring(1)]) $("i").eq(i).attr("title", textSet[lang][command.substring(1)]); 55 | else if(textSet["english"][command.substring(1)]) $("i").eq(i).attr("title", textSet["english"][command.substring(1)]); 56 | } 57 | } 58 | } 59 | } 60 | function transJS(command, argments){ 61 | var result = ""; 62 | if(textSet[lang] && textSet[lang][command]) result = textSet[lang][command]; 63 | else if(textSet["english"][command]) result = textSet["english"][command]; 64 | else result = command; 65 | for(var key in argments){ 66 | result = result.split("["+key+"]").join(argments[key]); 67 | } 68 | return result; 69 | } 70 | 71 | //--> 72 | -------------------------------------------------------------------------------- /js/languageset.js: -------------------------------------------------------------------------------- 1 | var textSet = { 2 | "english": { 3 | "Language": "English", 4 | "Title": "EchoDemo", 5 | "Theme": "How echo chambers emerge from social media", 6 | "Scenario": "Scenario", 7 | "Default": "Default", 8 | "AdvancedParameters": "Advanced Parameters", 9 | "Tolerance": "Tolerance", 10 | "ToleranceDiscription": "Tolerance defines how agents deal with different opinions. Messages reflecting opinions within this range from an agent’s own opinion are considered as concordant, otherwise as discordant. Concordant messages can influence an agent’s own opinion. Furthermore, an agent will occasionally unfriend neighbors who post discordant messages.", 11 | "Low": "Low", 12 | "Medium": "Medium", 13 | "High": "High", 14 | "Influence": "Influence", 15 | "InfluenceDiscription": "An agent’s opinion is updated to become more similar, on average, to those reflected in concordant messages from neighbors. The influence controls how fast this happens.", 16 | "Off": "Off", 17 | "Weak": "Weak", 18 | "Strong": "Strong", 19 | "Unfriending": "Unfriending", 20 | "UnfriendingDiscription": "This parameter regulates how often an agent will unfriend a neighbor who posts a discordant message, and replace it with a randomly selected new friend.", 21 | "Never": "Never", 22 | "Sometimes": "Sometimes", 23 | "Often": "Often", 24 | "Progressive": "Progressive", 25 | "Conservative": "Conservative", 26 | "LessPopular": "Less Popular", 27 | "MorePopular": "More Popular", 28 | "Start": "Start", 29 | "Stop": "Stop", 30 | "Reset": "Reset", 31 | "Speed": "Speed", 32 | "GraphTitle": "Opinions", 33 | "GraphDiscription": "This plot tracks how the agent opinions change over time. Convergence to a few groups of homogeneous opinions indicates an echo-chamber effect.", 34 | "Time": "Time", 35 | "ParameterSetting": "Parameter Setting", 36 | "Scenario01Discription": "Without influence and unfriending, agents are exposed to diverse opinions but their own opinions do not change, and the underlying network structure stays the same.", 37 | "Scenario02Discription": "Without unfriending, the network structure remains unchanged and agents are exposed to diverse opinions. However, influence causes agents’ opinions to change based on these exposures. Depending on the initial conditions and on the tolerance, the network converges either to a homogeneous state where all (or almost all) agents have a moderate opinion, or to a state where two (or more) diverse opinions coexist.", 38 | "Scenario03Discription": "Without influence, opinions do not change. However, the unfriending process allows the agents to slowly sort themselves into a few homogeneous groups.", 39 | "Scenario04Discription": "When agents are influenced by their friends with similar opinions and can unfriend those with different opinions, the network quickly converges into two or more segregated and homogeneous echo-chambers. The number depends on the tolerance, as long as it is not too high: the smaller the tolerance, the more echo chambers.", 40 | "Scenario05Discription": "With high tolerance, unfriending has small effect. Influence causes the system to quickly converge to a single group with homogeneous opinions.", 41 | "PostMessage": "User [t_node.name] posts a new message.", 42 | "RepostMessage": "User [t_node.name] reposts user [repost_node.name]'s message.", 43 | "ReadMessage": "User [t_node.name] reads [concordant_nodes.length] messages.", 44 | "BecomeMoreProgressice": "User [t_node.name] becomes a bit more progressive.", 45 | "BecomeLessProgressice": "User [t_node.name] becomes a bit less progressive.", 46 | "BecomeLessConservative": "User [t_node.name] becomes a bit less conservative.", 47 | "BecomeMoreConservative": "User [t_node.name] becomes a bit more conservative.", 48 | "Unfollow": "User [t_node.name] unfollows user [del_node.name], follows user[add_node.name].", 49 | "TranslatersName": " ", 50 | "InfoTitle": "The EchoDemo: FAQ", 51 | "InfoIntroQ": "What is EchoDemo?", 52 | "InfoIntroA": "EchoDemo is a model simulation that demonstrates how two basic mechanisms of social media --- influencing friend opinions and unfriending people with different opinions --- can lead to polarized and segregated social networks. For more details check out our paper.", 53 | "InfoRepresentQ": "What does the network represent?", 54 | "InfoRepresentA": "Each node in the network represents a user; its size represents its popularity (number of friends) and its color represents its political opinion. Friend connections are assumed to be mutual.", 55 | "InfoHowQ": "How does it work?", 56 | "InfoHowA": "Users do four things: (1) they read messages posted/re-posted by their\nfriends; (2) they change their opinion a bit (based on the influence\nparameter) according to concordant messages (based on the tolerance\nparameter); (3) once in a while (based on the unfriending parameter)\nthey replace a friend who posts messages sufficiently different from\ntheir own opinion (based on the tolerance parameter) with a random\nfriend; and (4) they either post a new message reflecting their\nopinion, or re-post a concordant message (based on the tolerance\nparameter) from a random friend.", 57 | "InfoInstructionsQ": "What do I do?", 58 | "InfoInstructionsA": "Initially, users have diverse random opinions and are connected in a random network. Try different values of the parameters (or pick one of the scenarios), start the simulation, and observe what happens. How do user opinions and the network structure change?" 59 | }, 60 | "italiano": { 61 | "Language": "Italiano", 62 | "Title": "EchoDemo", 63 | "Theme": "Come si crea la polarizzazione sui social media", 64 | "Scenario": "Scenario", 65 | "Default": "Predefinito", 66 | "AdvancedParameters": "Parametri avanzati", 67 | "Tolerance": "Tolleranza", 68 | "ToleranceDiscription": "La tolleranza determina come gli agenti reagiscono ad opinioni diverse. I messaggi le cui opinioni cadono entro questo intervallo centrato sull'opinione dell'agente sono considerati concordanti, altrimenti sono discordanti. I messaggi concordanti influenzano l'opinione dell'agente. Inoltre, un agente può occasionalmente togliere l'amicizia a quei vicini che postano messaggi discordanti.", 69 | "Low": "Basso", 70 | "Medium": "Medio", 71 | "High": "Alto", 72 | "Influence": "Influenza", 73 | "InfluenceDiscription": "L'opinione di un agente è aggiornata in modo tale da avvicinarsi alla media delle opinioni rispecchiate nei messaggi concordanti dei propri vicini. L'influenza controlla la velocità di tale processo.", 74 | "Off": "Spento", 75 | "Weak": "Debole", 76 | "Strong": "Forte", 77 | "Unfriending": "Rompere l'amicizia", 78 | "UnfriendingDiscription": "Questo parametro regola quanto spesso un agente toglierà l'amicizia a un vicino che posta messaggi discordanti, rimpiazzandolo con un vicino scelto a caso.", 79 | "Never": "Mai", 80 | "Sometimes": "A volte", 81 | "Often": "Spesso", 82 | "Progressive": "Progressista", 83 | "Conservative": "Conservatore", 84 | "LessPopular": "Poco popolare", 85 | "MorePopular": "Molto popolare", 86 | "Start": "Via", 87 | "Stop": "Stop", 88 | "Reset": "Reset", 89 | "Speed": "Velocità", 90 | "GraphTitle": "Opinioni", 91 | "GraphDiscription": "Questo grafico traccia come le opinioni degli agent cambiano nel tempo. Una convergenza di opinioni intorno a pochi valori omogenei indica la presenza dell'effetto di polarizzazione.", 92 | "Time": "Tempo", 93 | "ParameterSetting": "Impostazione dei parametri", 94 | "Scenario01Discription": "Senza influenza sociale e rottura delle amicizie, gli agenti sono esposti a opinioni diversificate ma non cambiano la propria opinione, e la struttura della rete sociale sottostante rimane immutata.", 95 | "Scenario02Discription": "Senza la rottura delle amicizie, la struttura della rete sociale rimane immutata e gli agenti sono esposti a opinioni eterogenee. Tuttavia, l'influenza sociale porta gli agenti a cambiare opinione in base all'esposizione ad opinioni diverse. A seconda delle condizioni iniziali e della tolleranza, la rete o converge ad uno stato omogeneo in cui tutti (o quasi tutti) gli agenti hanno un'opinione moderata, oppure ad uno stato in cui due o più opinioni opposte coesistono. ", 96 | "Scenario03Discription": "Senza influenza sociale, le opinioni non cambiano. Tuttavia, il processo di rottura delle amicizie permette agli agenti di riorganizzarsi lentamente in una manciata di gruppi omogenei.", 97 | "Scenario04Discription": "Quando gli agenti sono influenzati dagli amici con opinioni affini e rompono l'amicizia con chi ha opinioni opposte, la rete sociale converge velocemente a due o più gruppi polarizzati (echo chambers). Per valori non troppo alti della tolleranza, il numero di gruppi dipende dalla tolleranza. Più bassa è la tolleranza, maggiore il numero di gruppi.", 98 | "Scenario05Discription": "Con alta tolleranza, la rottura delle amicizie ha poco effetto. L'influenza sociale porta il sistema a convergere velocemente ad un singolo gruppo dalle opinioni omogenee.", 99 | "PostMessage": "L'utente [t_node.name] pubblica un nuovo messaggio.", 100 | "RepostMessage": "L'utente [t_node.name] ripubblica il messaggio dell'utente [repost_node.name].", 101 | "ReadMessage": "L'utente [t_node.name] legge [concordant_nodes.length] messaggi.", 102 | "BecomeMoreProgressice": "L'utente [t_node.name] diventa un po' più progressista.", 103 | "BecomeLessProgressice": "L'utente [t_node.name] diventa un po' meno progressista.", 104 | "BecomeLessConservative": "L'utente [t_node.name] diventa un po' meno conservatore.", 105 | "BecomeMoreConservative": "L'utente [t_node.name] diventa un po' più conservatore.", 106 | "Unfollow": "L'utente [t_node.name] smette di seguire l'utente [del_node.name], segue l'utente [add_node.name].", 107 | "TranslatersName": "Traduzione italiana a cura di Giovanni Luca Ciampaglia and Filippo Menczer", 108 | "InfoTitle": "The EchoDemo: FAQ", 109 | "InfoIntroQ": "Che cos'è EchoDemo?", 110 | "InfoIntroA": "EchoDemo è una simulazione computerizzata che dimostra come due meccanismi base dei media sociali --- l'influenzare le opinioni altrui e la rimozione (unfriending) di chi ha opinioni differenti dalle nostre --- possano produrre delle reti sociali polarizzata e segregate. Per maggiori dettagli consulta il nostro articolo.", 111 | "InfoRepresentQ": "Che cosa rappresenta la rete?", 112 | "InfoRepresentA": "Ciascun nodo nella rete rappresenta un utente; la sua grandezza rappresenta la popolarità (numero di amici) e il suo colore rappresenta l'opinione politica. I collegamenti tra amici sono da considerare reciproci.", 113 | "InfoHowQ": "Come funziona?", 114 | "InfoHowA": "Gli utenti fanno quattro cose: (1) leggono i message postati/ri-postati dai loro amici; (2) cambiano le proprie opinioni un po' (in base al parametro di influenza) in seguito alla lettura dei messaggi concordanti (in base al parametro della tolleranza); (3) ogni tanto (in base al parametro di unfriending) sostituiscono un amico che posta messaggi sufficientemente differenti dalla loro opinione (in base al parametro della tolleranza) con un amico scelto a caso; e (4) postano un nuovo messaggio che riflette la loro opinione, o ripostano un messaggio concordante (in base al parametro della tolleranza) da un amico scelto a caso.", 115 | "InfoInstructionsQ": "Che cosa posso fare?", 116 | "InfoInstructionsA": "Inizialmente, gli utenti hanno delle opinioni variegate e sono collegati in modo casuale. Prova differenti valori dei parametri (o scegli uno degli scenari), lancia la simulazione, e osserva cosa succede. Come cambiano le opinioni degli utenti e come cambia la struttura della rete?" 117 | }, 118 | "japanese": { 119 | "Language": "日本語", 120 | "Title": "エコーデモ", 121 | "Theme": "エコーチェンバーはどのようにしてソーシャルメディアから生じるのか", 122 | "Scenario": "シナリオ", 123 | "Default": "初期値", 124 | "AdvancedParameters": "高度なパラメータ", 125 | "Tolerance": "許容範囲", 126 | "ToleranceDiscription": "許容範囲とは異なる意見に対する寛容性のことです。各個人は自分の意見をもっていて、それをメッセージとして投稿します。友人のメッセージが自分の許容範囲にある場合は「合うメッセージ」、そうでない場合は「合わないメッセージ」とみなします。自分に合うメッセージから個人は影響を受けます。そして、自分に合わないメッセージを投稿する友人をしばしばアンフォローします。", 127 | "Low": "低", 128 | "Medium": "中", 129 | "High": "高", 130 | "Influence": "社会的影響", 131 | "InfluenceDiscription": "各個人の意見は、その人に合うメッセージから影響を受けて変化し、次第に友人たちの意見に似ていきます。社会的影響のパラメータは、この変化の速さを調整します。", 132 | "Off": "なし", 133 | "Weak": "弱", 134 | "Strong": "強", 135 | "Unfriending": "アンフォローの頻度", 136 | "UnfriendingDiscription": "このパラメータはアンフォローの頻度を表します。自分に合わないメッセージを投稿する友人1名をアンフォローし、その後、ランダムに新しい友人を1人フォローします。", 137 | "Never": "なし", 138 | "Sometimes": "時々", 139 | "Often": "しばしば", 140 | "Progressive": "進歩的", 141 | "Conservative": "保守的", 142 | "LessPopular": "人気がない", 143 | "MorePopular": "人気がある", 144 | "Start": "開始", 145 | "Stop": "停止", 146 | "Reset": "初期化", 147 | "Speed": "速度", 148 | "GraphTitle": "意見", 149 | "GraphDiscription": "このグラフは、個々人の意見が、時間の経過と共にどのように変化するのかを表しています。同じ意見をもつ少数のグループに収斂する様子は、エコーチェンバーの効果を示しています。", 150 | "Time": "時間", 151 | "ParameterSetting": "パラメータ設定", 152 | "Scenario01Discription": "社会的影響とアンフォローをなしにすると、個人はいろいろなメッセージを受け取りますが、自身の意見は変わりません。アンフォローもしないため、友人関係のネットワークも変化しません。", 153 | "Scenario02Discription": "アンフォローをなしにした場合、友人関係のネットワークは全く変わりませんが、個人はいろいろなメッセージを受け取ります。そして、受け取ったメッセージから社会的影響を受けて、個人の意見は徐々に変化していきます。初期状態と許容範囲の値によって、最終的には全員が中間的な1つの意見をもつネットワークか、2つ以上の違う意見が共存するネットワークのどちらかになります。", 154 | "Scenario03Discription": "社会的影響をなしにした場合、各個人の意見は変化しません。しかし、アンフォローを繰り返すことによって、徐々に同じ意見をもつ人からなる少数のグループをつくります。", 155 | "Scenario04Discription": "社会的影響とアンフォローがある場合、ネットワークは複数の同じ意見からなるエコーチェンバーに分断されます。許容範囲が大きすぎなければ、その大きさによって分断の数が決まります。許容範囲が小さいほど、多くのエコーチェンバーに分断されます。", 156 | "Scenario05Discription": "許容範囲が大きい場合、アンフォローはあまり影響しません。この場合、社会的影響によって、すぐに全員が同じ意見をもつようになります。", 157 | "PostMessage": "ユーザー[t_node.name]が新しいメッセージを投稿しました。", 158 | "RepostMessage": "ユーザー[t_node.name]がユーザー[repost_node.name]のメッセージを共有しました。", 159 | "ReadMessage": "ユーザー[t_node.name]が[concordant_nodes.length]つのメッセージを読みました。", 160 | "BecomeMoreProgressice": "ユーザー[t_node.name]はやや進歩的になりました。", 161 | "BecomeLessProgressice": "ユーザー[t_node.name]はやや進歩的ではなくなりました。", 162 | "BecomeLessConservative": "ユーザー[t_node.name]はやや保守的ではなくなりました。", 163 | "BecomeMoreConservative": "ユーザー[t_node.name]はやや保守的になりました。", 164 | "Unfollow": "ユーザー[t_node.name]がユーザー[del_node.name]をアンフォローし、ユーザー[add_node.name]をフォローしました。", 165 | "TranslatersName": "Japanese translation by Ayahito Saji and Kazutoshi Sasahara", 166 | "InfoTitle": "エコーデモ: FAQ", 167 | "InfoIntroQ": "エコーデモとは？", 168 | "InfoIntroA": "エコーデモは、ソーシャルメディアの2つの基本メカニズム（友人の意見から社会的影響を受ける、意見の合わない友人をアンフォローする）が、どのようにして偏極し分断された社会的ネットワークを生み出すのかをデモンストレーションするモデル・シミュレーションです。詳細は論文をご覧下さい。", 169 | "InfoRepresentQ": "ネットワークは何を表しているのか？", 170 | "InfoRepresentA": "ネットワークのノードはユーザを、ノードの大きさはそのユーザの人気度（友人の数）を、ノードの色は政治的な意見を表しています。友人関係のつながりは双方的だと仮定します。", 171 | "InfoHowQ": "どのように動作するのか？", 172 | "InfoHowA": "ユーザは次の4つのことをします。(1)ユーザは友人が投稿・再投稿したメッセージ読みます。(2)ユーザはこれらのメッセージから影響を受けて、自分の意見を(社会的影響パラメータに基づいて)少しだけ変えます。(3)(アンフォローの頻度のパラメータに基づいて)時々、ユーザは自分の意見とは(許容範囲基づいて)十分に異なる意見のメッセージを投稿した友人1名をランダムにアンフォローし、別の友人1名をランダムに選んでフォローします。(4)ユーザは自分の意見を反映した新しいメッセージを投稿するか、ランダムに選んだ友人のメッセージを再投稿します。", 173 | "InfoInstructionsQ": "どうする？", 174 | "InfoInstructionsA": "初期状態では、ユーザたちは多様でランダムな意見をもち、友人関係のネットワークでは互いにランダムにつながっています。異なるパラメータを選んで（あるいは、シナリオを1つ選んで）、シミュレーションを開始し、何が起こるのかを観察しましょう。どのようにユーザの意見や社会的ネットワークの構造が変化するでしょうか？" 175 | }, 176 | "chinese": { 177 | "Language": "中文", 178 | "Title": "回音演示", 179 | "Theme": "回音室在社交网络中是如何诞生的", 180 | "Scenario": "场景", 181 | "Default": "初始值", 182 | "AdvancedParameters": "重要参数", 183 | "Tolerance": "容忍度", 184 | "ToleranceDiscription": "该参数定义了用户对于不同观点的忍受程度。每条消息会反映某一观点值，我们把与当前主体观点相近的消息称为一致消息，反之称为不一致消息。一致消息会影响当前主体自身的观点。同时，当前主体可能会取消关注发布不一致消息的已关注用户。", 185 | "Low": "低", 186 | "Medium": "中", 187 | "High": "高", 188 | "Influence": "受影响度", 189 | "InfluenceDiscription": "每个主体的观点会被与他观点相近的消息所影响。平均来说，每个主体的观点会更新，并趋近于那些与他观点相近的消息。该参数控制主体观点向相近消息更新的速度。", 190 | "Off": "关", 191 | "Weak": "弱", 192 | "Strong": "强", 193 | "Unfriending": "取消关注", 194 | "UnfriendingDiscription": "该参数控制每个主体取消关注其朋友的概率。根据这个概率，当前主体会随机选取一位发出与其观点不一致消息的已关注用户 (朋友)，对其进行取消关注，然后从社交网络中随机选取一个新朋友 (进行关注)。", 195 | "Never": "从不", 196 | "Sometimes": "偶尔", 197 | "Often": "经常", 198 | "Progressive": "激进", 199 | "Conservative": "保守", 200 | "LessPopular": "不太受欢迎", 201 | "MorePopular": "更受欢迎", 202 | "Start": "开始", 203 | "Stop": "停止", 204 | "Reset": "重置", 205 | "Speed": "速度", 206 | "GraphTitle": "用户观点", 207 | "GraphDiscription": "该图追踪每个主体的观点随时间的变化，观点趋于同质化显示了回音室效应的产生。", 208 | "Time": "时间", 209 | "ParameterSetting": "参数设置", 210 | "Scenario01Discription": "受影响度为零和取消关注机制不存在时，意味着主体不受他人影响并且从不取消其关注用户（朋友）。那么，虽然他们置身于一个观点多样的环境里，他们自身的观点也不会改变，潜在的社交网络结构也不会改变。", 211 | "Scenario02Discription": "取消关注机制不存在时，网络结构不会改变，每个主体都会一直置身于多样观点的环境中。然而，受影响度致使主体的观点受到其关注用户的影响。根据不同的初始网络结构和容忍度参数，社交网络会演变成：（1） 一个同质网络，其中几乎所有主体会持有一个相对中立的观点；或者（2）一个多种观点和谐共存的网络。", 212 | "Scenario03Discription": "受影响度为零时，主体皆不受他人影响，那么他们的观点也不会改变。然而，取消关注机制会使整个社交网络缓慢地分化为少量的同质子网络。", 213 | "Scenario04Discription": "当主体受到持有相似观点的关注用户的影响，并且能够取消关注持不同观点的用户，那么网络会很快地收敛成两个或以上的同质并且相互隔离的回音室。回音室的数目取决于容忍度：只要容忍度不过高，更小的容忍度通常会造成更多的回音室。", 214 | "Scenario05Discription": "很高的容忍度会使取消关注机制近乎无用。人们轻易受到周围一切消息的影响，这促使整个系统很快收敛于一个统一的同质网络。", 215 | "PostMessage": "用户[t_node.name]发布了一条新消息。", 216 | "RepostMessage": "用户[t_node.name]转发了用户[repost_node.name]的消息。", 217 | "ReadMessage": "用户[t_node.name]读了[concordant_nodes.length]条消息。", 218 | "BecomeMoreProgressice": "用户[t_node.name]变得激进了。", 219 | "BecomeLessProgressice": "用户[t_node.name]变得不那么激进了。", 220 | "BecomeLessConservative": "用户[t_node.name]变得不那么保守了。", 221 | "BecomeMoreConservative": "用户[t_node.name]变得保守了。", 222 | "Unfollow": "用户[t_node.name]取消关注了用户[del_node.name]，关注了用户[add_node.name]。", 223 | "TranslatersName": "Chinese translation by Wen Chen", 224 | "InfoTitle": "回音演示: FAQ", 225 | "InfoIntroQ": "回音演示是什么？", 226 | "InfoIntroA": "回音演示运用演示模型来展示社交网络的两种基本机制 --- （1）朋友间的观点互相影响（受影响度）；（2） 取消关注与自己观点不一致的人（取消关注）--- 如何造成社交网络的分化和隔离。详情请参考我们的论文。", 227 | "InfoRepresentQ": "该演示中的网络代表什么？", 228 | "InfoRepresentA": "网络中的每个节点代表社交网络中的一个用户；节点的大小代表该用户的受欢迎程度（朋友数目），节点的颜色代表用户所持有的观点。该网络中的朋友关系 (边) 是相互的。", 229 | "InfoHowQ": "该演示的内在是如何工作的？", 230 | "InfoHowA": "网络中的用户做四件事情：（1）他们阅读朋友发送/转发的消息；（2）他们会根据那些来自朋友的，并且与自己观点一致的消息（根据容忍度参数）来略微地改变自己的观点（根据受影响度参数）；（3）时不时地（根据取消关注参数），他们把一个发送与自己观点不一致的消息的朋友（根据容忍度参数）替换成一个随机选取的用户；（4）他们要么发送一条新消息显示自己的观点，要么随机转发一条朋友发送的一致消息（根据容忍度参数）。", 231 | "InfoInstructionsQ": "我需要做什么？", 232 | "InfoInstructionsA": "在演示的最开始，用户持有各种不同的观点，并形成一个随机网络。你可以设定不同的参数值，开始这个演示模型（或者选取我们提供的场景），观察即将发生的一切。比如：用户的观点和网络结构是如何改变的？" 233 | }, 234 | "bulgarian": { 235 | "Language": "Български", 236 | "Title": "ЕхоДемо", 237 | "Theme": "Как социалните медии допринасят за образуването на ехо стаи", 238 | "Scenario": "Сценарий", 239 | "Default": "По подразбиране", 240 | "AdvancedParameters": "Конфигурация за напреднали", 241 | "Tolerance": "Толерантност", 242 | "ToleranceDiscription": "Параметърът \"толерантност\" определя как агентите се справят с мнения различни от тяхното. Съобщенията, отразяващи мнения подобни на собстевното мнение на агента, се считат за съгласуващи се, в противен случай като противоречащи. Съгласуващите се съобщения могат да повлияят на собственото мнение на агента. Освен това, агентът понякога ще разприятели участник, публикуващ много противоречащи съобщения.", 243 | "Low": "Ниска", 244 | "Medium": "Средна", 245 | "High": "Висока", 246 | "Influence": "Влияние", 247 | "InfluenceDiscription": "Мнението на агента се актуализира и става по-сходно с тези, отразени в съгласувани съобщения от неговите приятели. Параметърът \"влияние\" контролира колко бързо се случва това.", 248 | "Off": "Без", 249 | "Weak": "Слабо", 250 | "Strong": "Силно", 251 | "Unfriending": "Разприятеляване", 252 | "UnfriendingDiscription": "Този параметър регулира колко често агентът премахва приятелството на друг агент, който публикува противоречащи съобщения, и го заменя с произволно избран нов агент.\n", 253 | "Never": "Никога", 254 | "Sometimes": "Понякога", 255 | "Often": "Често", 256 | "Progressive": "Прогресивно", 257 | "Conservative": "Консервативно", 258 | "LessPopular": "По-популярен", 259 | "MorePopular": "По-малко популярен", 260 | "Start": "Старт", 261 | "Stop": "Стоп", 262 | "Reset": "Нулиране", 263 | "Speed": "Скорост", 264 | "GraphTitle": "Мнения", 265 | "GraphDiscription": "Тази графика проследява как мненията на агентите се променят с течение на времето. Конвергенцията към няколко групи хомогенни мнения показва ефекта на ехо стая.", 266 | "Time": "Време", 267 | "ParameterSetting": "Настройка на параметрите", 268 | "Scenario01Discription": "Без влияние и разприятеляване, агентите са изложени на различни мнения, но техните собствени мнения не се променят. Основната структура на мрежата остава същата.", 269 | "Scenario02Discription": "Без разприятеляване, мрежовата структура остава непроменена и агентите са изложени на различни мнения. Въпреки това влиянието кара мненията на агентите да се променят. В зависимост от първоначалните условия и толерантността, мрежата се сближава или до хомогенно състояние, където всички (или почти всички) агенти имат умерено мнение, или до състояние, при което съществуват две (или повече) различни мнения.", 270 | "Scenario03Discription": "Без влияние, мненията не се променят. Процесът на премахване на приятелството обаче позволява на агентите бавно да се сортират в няколко хомогенни групи.", 271 | "Scenario04Discription": "Когато агентите са повлияни от своите приятели с мнения подобни на тяхното и могат да разприятеляват тези с различни мнения, мрежата бързо се слива в две или повече сегрегирани и хомогенни ехо стаи. Броят зависи от толерантността, стига да не е твърде висока: колкото по-малка е толерантността, толкова повече ехо стаи се образуват.", 272 | "Scenario05Discription": "При висока толерантност, премахването на приятелството има малък ефект. Влиянието кара системата бързо да се сближи в една група с хомогенни мнения.", 273 | "PostMessage": "Потребител [t_node.name] написа ново съобщение.", 274 | "RepostMessage": "Потребител [t_node.name] сподели съобщението на потребител [repost_node.name].", 275 | "ReadMessage": "Потребител [t_node.name] прочете [concordant_nodes.length] съобщения.", 276 | "BecomeMoreProgressice": "Потребител [t_node.name] стана малко по-прогресивен.", 277 | "BecomeLessProgressice": "Потребител [t_node.name] стана малко по-малко прогресивен.", 278 | "BecomeLessConservative": "Потребител [t_node.name] стана малко по-малко консервативен.", 279 | "BecomeMoreConservative": "Потребител [t_node.name] стана малко по-консервативен.", 280 | "Unfollow": "Потребител [t_node.name] разприятели потребител [del_node.name] и стана приятел с потребител [add_node.name].", 281 | "TranslatersName": "Превод на бълграски Никола Тулечки", 282 | "InfoTitle": "Eхо Демо: FAQ", 283 | "InfoIntroQ": "Какво е Ехо Демо?", 284 | "InfoIntroA": "EchoDemo е математическа симулация, която демонстрира как два основни механизма на социалните медии --- повлияване от мненията на приятелите и премахване на приятели с различни мнения --- могат да доведат до поляризирани и сегрегрегирани социални мрежи. За повече подробности вижте нашата публикация.", 285 | "InfoRepresentQ": "Какво представлява мрежата?", 286 | "InfoRepresentA": "Всеки възел в мрежата представлява потребител; неговият размер представлява неговата популярност (брой приятели), а цветът му представлява неговото политическо мнение. Приятелските връзки се приемат за взаимни.", 287 | "InfoHowQ": "Как работи?", 288 | "InfoHowA": "Потребителите правят четири неща: (1) четат съобщения, публикувани или споделени от тяхните приятели; (2) променят малко мнението си (в зависимост от параметъра \"влияние\") според съгласуващите съобщения (въз основа на параметъра \"толерантност\"); (3) от време на време (въз основа на параметъра \"разприятеляване\")\nте заместват приятел, който публикува съобщения, достатъчно различни от\nсобственото им мнение (въз основа на параметъра \"толерантност\") със случаен\nприятел; и (4) те или публикуват ново съобщение, отразяващо тяхното\nмнение или споделят някое съгласуващо съобщение (въз основа на параметъра \"толерантност\"\n) от случаен приятел.", 289 | "InfoInstructionsQ": "Какво мога да правя?", 290 | "InfoInstructionsA": "Първоначално потребителите имат различни произволни мнения и са свързани в произволна мрежа. Опитайте различни стойности на параметрите (или изберете един от сценариите), стартирайте симулацията и наблюдавайте какво се случва. Как се променят мненията на потребителите и как това влияе върху мрежовата структура?" 291 | } 292 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // var width = "100%", height = 600; 2 | var width = document.getElementById("demo-graph-layout").offsetWidth; 3 | var height = document.getElementById("demo-graph-layout").offsetHeight - document.getElementById("speed-box").offsetHeight; 4 | 5 | // var colors = d3.scaleSequential(d3.interpolateRdBu).domain([-1.0, 1.0]); 6 | // interpolateRdYlBu 7 | // https://stackoverflow.com/questions/22893789/d3-color-scale-linear-with-multiple-colors 8 | // https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients 9 | 10 | var range_min = -1.0; 11 | var middle = 0; 12 | var range_max = 1.0; 13 | var colors = d3.scaleLinear().domain([range_min, middle, range_max]).range(["red", "purple", "blue"]); 14 | 15 | var count = 0; 16 | var max_time = 2000; 17 | var running = 0; 18 | var slowest_time = 200; 19 | var remove_link = false; 20 | var time_interval = slowest_time - Number($("#speed").val()), 21 | post = 0.4; 22 | 23 | var tolerance, learning, rewire; 24 | get_parameters(); 25 | var nodes, links, adj_list, simulation, svgLinks, svgNodes; 26 | 27 | var n = 100, // number of nodes 28 | m = 400; // number of links 29 | 30 | var timeseries = new Array(n); 31 | var plotOptions = { 32 | xaxis: {min: 0}, 33 | yaxis: {min: range_min-0.1, max: range_max+0.1, tickLength: 0}, 34 | series: {lines: {lineWidth: 0.8}, shadowSize: 0}, 35 | grid: { 36 | hoverable: false, 37 | borderWidth: 2, 38 | backgroundColor: '#fafafa' 39 | } 40 | }; 41 | var plot = $.plot($("#demo-epicurves"), [], plotOptions); 42 | 43 | var svg = d3.select("#demo-graph-layout").append("svg") 44 | .attr("width", width) 45 | .attr("height", height); 46 | 47 | $("#speed").on("change", update_speed); 48 | $("#soflow-t").on("change", update_para); 49 | $("#soflow-i").on("change", update_para); 50 | $("#soflow-u").on("change", update_para); 51 | 52 | reset_all(); 53 | $(document).ready(start_all); 54 | 55 | $("#start-button").click(start_all); 56 | $("#stop-button").click(stop_all); 57 | $("#reset-button").click(reset_all); 58 | $("#default-button").click(default_para); 59 | 60 | var interval = setInterval(run_Model, time_interval); 61 | 62 | interval; 63 | 64 | function run_Model() { 65 | if (running == 0) { 66 | return; 67 | } 68 | // each time, randomly select a node, divide its friends into con/discordant nodes; 69 | var t_node = nodes[getRandomInt(0, n-1)], 70 | concordant_nodes = [], 71 | discordant_nodes = [], 72 | other_nodes = [], 73 | discordant_links = []; 74 | //remove the unfriended link. 75 | if (remove_link == true) { 76 | links.splice(links.length-1, 1); 77 | remove_link = false; 78 | } 79 | 80 | for (l in links) { 81 | var i = links[l].source, 82 | j = links[l].target; 83 | if (j.name == t_node.name) { 84 | var temp = i; 85 | i = j, j = temp, links[l].source = i, links[l].target = j; 86 | } 87 | if (i.name == t_node.name) { 88 | if (Math.abs(i.opinion - j.msg_opinion) <= tolerance) { 89 | concordant_nodes.push(j); 90 | } else { 91 | discordant_nodes.push(j); 92 | discordant_links.push(links[l]); 93 | } 94 | } 95 | } 96 | // identify nodes to which current node will connect. 97 | for (l in nodes) { 98 | var n_t = nodes[l]; 99 | if (n_t.name != t_node.name && discordant_nodes.indexOf(n_t) == -1 && concordant_nodes.indexOf(n_t) == -1) { 100 | other_nodes.push(n_t); 101 | } 102 | } 103 | var prev_opinion = t_node.opinion; 104 | var chat_msg_one = chat_msg_two = chat_msg_three = ""; 105 | if (concordant_nodes.length > 0) { 106 | // always learn its opinion from concordant messages. 107 | t_node.opinion = update_opinion(t_node, concordant_nodes); 108 | // two ways to post a new opinion. 109 | if (Math.random() < post) { 110 | // post a msg reflecting its updated opinion; 111 | t_node.msg_opinion = t_node.opinion; 112 | chat_msg_three = transJS("PostMessage", {"t_node.name":t_node.name}) + "
"; 113 | } else { 114 | // randomly repost msg from one of its concordant messages; 115 | var repost_node = concordant_nodes[getRandomInt(0, concordant_nodes.length-1)] 116 | t_node.msg_opinion = repost_node.msg_opinion; 117 | chat_msg_three = transJS("RepostMessage", {"t_node.name":t_node.name, "repost_node.name":repost_node.name}) + "
"; 118 | } 119 | if (learning > 0) { 120 | chat_msg_one = transJS("ReadMessage",{"t_node.name":t_node.name, "concordant_nodes.length":concordant_nodes.length}) + "
"; 121 | if (prev_opinion <= 0) { 122 | if (t_node.opinion < prev_opinion) { 123 | chat_msg_one += transJS("BecomeMoreProgressice",{"t_node.name":t_node.name}) + "
"; 124 | } else { 125 | chat_msg_one += transJS("BecomeLessProgressice",{"t_node.name":t_node.name}) + "
"; 126 | } 127 | } 128 | if (prev_opinion > 0) { 129 | if (t_node.opinion < prev_opinion) { 130 | chat_msg_one += transJS("BecomeLessConservative",{"t_node.name":t_node.name}) + "
"; 131 | } else { 132 | chat_msg_one += transJS("BecomeMoreConservative",{"t_node.name":t_node.name}) + "
"; 133 | } 134 | } 135 | } 136 | } else { //no concordant nodes, just post a new message. 137 | t_node.msg_opinion = t_node.opinion; 138 | chat_msg_three = transJS("PostMessage", {"t_node.name":t_node.name}) + "
"; 139 | } 140 | // rewire one discordant link to other nodes (its non-friends); 141 | var t_link = false; 142 | if (discordant_nodes.length > 0) { 143 | if (Math.random() < rewire) { 144 | t_link = discordant_links[getRandomInt(0, discordant_links.length-1)]; 145 | // add the link that will be removed from links. 146 | // links.push(jQuery.extend(true, {}, t_link)); 147 | links.push(JSON.parse(JSON.stringify(t_link))); 148 | remove_link = true; 149 | // rewire and update node's degree. 150 | var t_list = adj_list[t_node.index], 151 | del_node = t_link.target, 152 | del_node_list = adj_list[del_node.index], 153 | index_o = del_node_list.indexOf(t_node), 154 | index_d = t_list.indexOf(del_node), 155 | add_node = other_nodes[getRandomInt(0, other_nodes.length-1)], 156 | add_node_list = adj_list[add_node.index]; 157 | t_list.splice(index_d, 1); 158 | del_node_list.splice(index_o, 1); 159 | t_list.push(add_node); 160 | add_node_list.push(t_node); 161 | del_node.k--; 162 | t_link.target = add_node; 163 | add_node.k++; 164 | chat_msg_two = transJS("Unfollow", {"t_node.name":t_node.name,"del_node.name":del_node.name,"add_node.name":add_node.name}) + "
"; 165 | } 166 | } 167 | // highlight the newly established link 168 | update_network(t_node, t_link); 169 | avg_deviation = cal_avg_deviation(); 170 | update_strength(avg_deviation); 171 | if (count < max_time) { 172 | update_plot(count); 173 | $("#demo-chatting").append(chat_msg_one + chat_msg_two + chat_msg_three +"
"); 174 | } 175 | showChatting(); 176 | count += 1; 177 | } 178 | 179 | function showChatting() { 180 | // Prior to getting your chatting. 181 | var chatting = document.getElementById('demo-chatting'); 182 | var shouldScroll = chatting.scrollTop + chatting.clientHeight === chatting.scrollHeight; 183 | // After getting your chatting. 184 | if (!shouldScroll) { 185 | chatting.scrollTop = chatting.scrollHeight; 186 | } 187 | } 188 | 189 | function update_opinion(t_node, concordant_nodes) { 190 | var sum = 0; 191 | for (k in concordant_nodes) { 192 | sum += concordant_nodes[k].msg_opinion; 193 | } 194 | var opinion_f = (1-learning) * t_node.opinion + learning * sum / concordant_nodes.length; 195 | return opinion_f; 196 | } 197 | 198 | function cal_avg_deviation() { 199 | var total = 0, 200 | len = 0; 201 | for (i in adj_list) { 202 | var nlist = adj_list[i], 203 | squ = 0; 204 | if (nlist.length > 0) { 205 | for (j in nlist) { 206 | squ += Math.pow((nlist[j].opinion - nodes[i].opinion), 2); 207 | } 208 | total += Math.sqrt(squ/nlist.length); 209 | len += 1; 210 | } 211 | } 212 | return total/len; 213 | } 214 | 215 | function update_network(t_node, t_link) { 216 | // safari doesn't allow assigning parameter default value. 217 | if (t_node === undefined) { 218 | t_node = false; 219 | } 220 | if (t_link === undefined) { 221 | t_link = false; 222 | } 223 | svg.selectAll("line.link, circle.node").remove(); 224 | //SVG doesn't have a convenient equivalent to html's `z-index`; instead, it relied on the order of the elements in the markup. Below, we add the nodes after the links to ensure that nodes apprear on top of links. 225 | 226 | svgLinks = svg.selectAll("line.link").data(links, function(d) { return d.index;}) 227 | .enter().append("line") 228 | .attr("class", "link"); 229 | 230 | svgNodes = svg.selectAll("circle.node").data(nodes, function(d) { return d.index;}) 231 | .enter().append("circle") 232 | .attr("class", "node") 233 | .attr("r", function(d) { return 2 * Math.sqrt(d.k); }) 234 | .style("fill", function(d) { return colors(d.opinion); }) 235 | // .on("mouseover", function(d) { 236 | // $("#opinion").html(roundToTwo(d.opinion)); 237 | // $("#agent").html(d.name); 238 | // }) 239 | .call(d3.drag() 240 | .on("start", dragstarted) 241 | .on("drag", dragged) 242 | .on("end", dragended)); 243 | 244 | if (t_node != false) { 245 | svgNodes._groups[0][t_node.index].style.fill = "black"; 246 | } 247 | if (t_link != false) { 248 | // highlight the removed link and new link. 249 | svgLinks._groups[0][links.length-1].style.strokeDasharray = "5, 5"; 250 | svgLinks._groups[0][links.length-1].style.strokeOpacity = 1; 251 | svgLinks._groups[0][links.length-1].style.strokeWidth = 2; 252 | svgLinks._groups[0][t_link.index].style.strokeOpacity = 1; 253 | svgLinks._groups[0][t_link.index].style.strokeWidth = 2; 254 | } 255 | simulation.alpha(0.1); 256 | simulation.restart(); 257 | } 258 | 259 | function update_plot(count) { 260 | for (var i = 0; i < n; i++) { 261 | timeseries[nodes[i].name].data.push([count, nodes[i].opinion]); 262 | } 263 | plot.setData(timeseries); 264 | plot.setupGrid(); 265 | plot.draw(); 266 | } 267 | 268 | function dragstarted(d) { 269 | if (!d3.event.active) simulation.alphaTarget(0.2).restart(); 270 | d.fx = d.x; 271 | d.fy = d.y; 272 | } 273 | 274 | function dragged(d) { 275 | d.fx = d3.event.x; 276 | d.fy = d3.event.y; 277 | } 278 | 279 | function dragended(d) { 280 | if (!d3.event.active) simulation.alphaTarget(0); 281 | d.fx = null; 282 | d.fy = null; 283 | } 284 | 285 | function ticked() { 286 | svgNodes 287 | .attr("cx", function(d) { 288 | var radius = 2 * Math.sqrt(d.k); 289 | var max = width - radius; 290 | if (d.x < radius) { 291 | return d.x = radius + 1; 292 | } else if (d.x > max) { 293 | return d.x = max - 1; 294 | } else { 295 | return d.x = d.x; 296 | } 297 | }) 298 | .attr("cy", function(d) { 299 | var radius = 2 * Math.sqrt(d.k); 300 | var max = height - radius; 301 | if (d.y < radius) { 302 | return d.y = radius + 1; 303 | } else if (d.y > max) { 304 | return d.y = max - 1; 305 | } else { 306 | return d.y = d.y; 307 | } 308 | }); 309 | svgLinks 310 | .attr("x1", function(d) { return d.source.x; }) 311 | .attr("y1", function(d) { return d.source.y; }) 312 | .attr("x2", function(d) { return d.target.x; }) 313 | .attr("y2", function(d) { return d.target.y; }); 314 | } 315 | 316 | function update_speed() { 317 | p = Number($(this).val()); 318 | clearInterval(interval); 319 | time_interval = slowest_time - p; 320 | interval = setInterval(run_Model, time_interval); 321 | } 322 | 323 | function get_parameters() { 324 | tolerance = Number($("#soflow-t").val()); 325 | learning = Number($("#soflow-i").val()); 326 | rewire = Number($("#soflow-u").val()); 327 | } 328 | 329 | function update_para() { 330 | p = Number($(this).val()); 331 | name = $(this).attr("id"); 332 | if (name == "soflow-t") { 333 | tolerance = p; 334 | } else if (name == "soflow-i") { 335 | learning = p; 336 | } else { 337 | rewire = p; 338 | } 339 | } 340 | 341 | function default_para() { 342 | // for jQuery-1.7.1 343 | // $('#soflow-t option[value="0.4"]').attr('selected', 'selected'); 344 | $("#soflow-t").val(0.4); 345 | tolerance = 0.4; 346 | $("#soflow-i").val(0.8); 347 | learning = 0.8; 348 | $("#soflow-u").val(0.9); 349 | rewire = 0.9; 350 | } 351 | 352 | function start_all() { 353 | running = 1; 354 | // $("#start-text").fadeOut(); 355 | } 356 | 357 | function stop_all() { 358 | running = 0; 359 | // $("#start-text").fadeIn(); 360 | } 361 | 362 | function reset_all() { 363 | stop_all(); 364 | count = 0; 365 | $("#demo-chatting").html(""); 366 | showChatting(); 367 | //creates a random graph on n nodes and m links 368 | [nodes, links, adj_list] = createRandomNet(n, m); 369 | for (var i = 0; i < n; i++) { 370 | timeseries[i] = []; 371 | timeseries[i].data = []; 372 | timeseries[i].color = colors(nodes[i].opinion); 373 | } 374 | 375 | simulation = d3.forceSimulation() 376 | .force("link", d3.forceLink().id(function(d) { return d.index; }).distance(10).strength(0.1)) 377 | .force("charge", d3.forceManyBody().strength(-73)) 378 | .force("center", d3.forceCenter(width / 2, height / 2)); 379 | // .force("y", d3.forceY(width)) 380 | // .force("x", d3.forceX(height)); 381 | 382 | simulation 383 | .nodes(nodes) 384 | .on("tick", ticked); 385 | 386 | simulation.force("link") 387 | .links(links); 388 | 389 | update_network(); 390 | update_plot(count); 391 | } 392 | 393 | function update_strength(avg_deviation) { 394 | simulation.force("charge", d3.forceManyBody().strength(-1-avg_deviation*90)); 395 | } 396 | 397 | function createRandomNet(n, m) { 398 | var nodes = d3.range(n).map(function (i) {return {name: i}; }), 399 | list = randomChoose(unorderedPairs(d3.range(n)), m), 400 | links = list.map(function (a) { return {source: a[0], target: a[1]}; }); 401 | var adj_list = []; 402 | for (n in nodes) { 403 | nodes[n].k = 0; 404 | var num = genRandomValue(range_min, range_max); 405 | nodes[n].opinion = num; 406 | nodes[n].msg_opinion = num; 407 | adj_list[n] = []; 408 | } 409 | for (l in links) { 410 | nodes[links[l].source].k++; 411 | nodes[links[l].target].k++; 412 | var i = links[l].source; 413 | var j = links[l].target; 414 | adj_list[i].push(nodes[j]); 415 | adj_list[j].push(nodes[i]); 416 | } 417 | return [nodes, links, adj_list]; 418 | } 419 | 420 | /** 421 | * Returns a random number between min (inclusive) and max (exclusive) 422 | */ 423 | function genRandomValue(min, max) { 424 | return Math.random() * (max - min) + min; 425 | } 426 | 427 | /** 428 | * Returns a random integer between min (inclusive) and max (inclusive) 429 | * Using Math.round() will give you a non-uniform distribution! 430 | */ 431 | function getRandomInt(min, max) { 432 | return Math.floor(Math.random() * (max - min + 1)) + min; 433 | } 434 | 435 | function randomChoose(s, k) { // returns a random k element subset of s 436 | var a = [], i = -1, j; 437 | while (++i < k) { 438 | j = Math.floor(Math.random() * s.length); 439 | a.push(s.splice(j, 1)[0]); 440 | }; 441 | return a; 442 | } 443 | 444 | function unorderedPairs(s) { // returns the list of all unordered pairs from s 445 | var i = -1, a = [], j; 446 | while (++i < s.length) { 447 | j = i; 448 | while (++j < s.length) a.push([s[i],s[j]]) 449 | }; 450 | return a; 451 | } 452 | 453 | function roundToTwo(num) { 454 | return +(Math.round(num + "e+2") + "e-2"); 455 | } 456 | 457 | // Infor function 458 | function closeInfoArea() { 459 | $("#info") 460 | .css("right", "0px") 461 | .animate({"right": "-100%"}, 800) 462 | $("nav").show() 463 | } 464 | 465 | function showInfoArea() { 466 | $("#info") 467 | .css("right", "-100%") 468 | .animate({"right": "0px"}, 800) 469 | $("nav").hide() 470 | } 471 | 472 | $("#info-tab").on("click", showInfoArea); 473 | $("#info-close").on("click", closeInfoArea); 474 | -------------------------------------------------------------------------------- /js/scrolling-nav.js: -------------------------------------------------------------------------------- 1 | //jQuery to collapse the navbar on scroll 2 | $(window).scroll(function() { 3 | if ($(".navbar").offset().top > 50) { 4 | $(".navbar-fixed-top").addClass("top-nav-collapse"); 5 | } else { 6 | $(".navbar-fixed-top").removeClass("top-nav-collapse"); 7 | } 8 | }); 9 | 10 | //jQuery for page scrolling feature - requires jQuery Easing plugin 11 | $(function() { 12 | $(document).on('click', 'a.page-scroll', function(event) { 13 | var $anchor = $(this); 14 | $('html, body').stop().animate({ 15 | scrollTop: $($anchor.attr('href')).offset().top 16 | }, 1500, 'easeInOutExpo'); 17 | event.preventDefault(); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /language/jsonconverter.py: -------------------------------------------------------------------------------- 1 | # -*- coding: utf-8 -*- 2 | 3 | import codecs 4 | import csv 5 | import json 6 | import sys 7 | # reload(sys) 8 | # sys.setdefaultencoding('utf8') 9 | 10 | textSet = {} 11 | 12 | with codecs.open("language.csv", encoding="utf-8") as csvfile: 13 | csvreader = csv.reader(csvfile, delimiter=',', quotechar='"') 14 | 15 | header = next(csvreader) 16 | for i in range(1, len(header)): 17 | textSet[header[i]] = {} 18 | 19 | for row in csvreader: 20 | key = row[0] 21 | for i in range(1, len(header)): 22 | textSet[header[i]][key] = row[i] 23 | 24 | with codecs.open("../js/languageset.js", "w", encoding="utf-8") as jsfile: 25 | jsfile.write("var textSet = ") 26 | json.dump(textSet, jsfile, ensure_ascii=False, indent=4, separators=(',', ': ')) 27 | -------------------------------------------------------------------------------- /language/language.csv: -------------------------------------------------------------------------------- 1 | SetID,english,italiano,japanese,chinese,bulgarian 2 | Language,English,Italiano,日本語,中文,Български 3 | Title,EchoDemo,EchoDemo,エコーデモ,回音演示,ЕхоДемо 4 | Theme,How echo chambers emerge from social media,Come si crea la polarizzazione sui social media,エコーチェンバーはどのようにしてソーシャルメディアから生じるのか,回音室在社交网络中是如何诞生的,Как социалните медии допринасят за образуването на ехо стаи 5 | Scenario,Scenario,Scenario,シナリオ,场景,Сценарий 6 | Default,Default,Predefinito,初期値,初始值,По подразбиране 7 | AdvancedParameters,Advanced Parameters,Parametri avanzati,高度なパラメータ,重要参数,Конфигурация за напреднали 8 | Tolerance,Tolerance,Tolleranza,許容範囲,容忍度,Толерантност 9 | ToleranceDiscription,"Tolerance defines how agents deal with different opinions. Messages reflecting opinions within this range from an agent’s own opinion are considered as concordant, otherwise as discordant. Concordant messages can influence an agent’s own opinion. Furthermore, an agent will occasionally unfriend neighbors who post discordant messages.","La tolleranza determina come gli agenti reagiscono ad opinioni diverse. I messaggi le cui opinioni cadono entro questo intervallo centrato sull'opinione dell'agente sono considerati concordanti, altrimenti sono discordanti. I messaggi concordanti influenzano l'opinione dell'agente. Inoltre, un agente può occasionalmente togliere l'amicizia a quei vicini che postano messaggi discordanti.",許容範囲とは異なる意見に対する寛容性のことです。各個人は自分の意見をもっていて、それをメッセージとして投稿します。友人のメッセージが自分の許容範囲にある場合は「合うメッセージ」、そうでない場合は「合わないメッセージ」とみなします。自分に合うメッセージから個人は影響を受けます。そして、自分に合わないメッセージを投稿する友人をしばしばアンフォローします。,该参数定义了用户对于不同观点的忍受程度。每条消息会反映某一观点值，我们把与当前主体观点相近的消息称为一致消息，反之称为不一致消息。一致消息会影响当前主体自身的观点。同时，当前主体可能会取消关注发布不一致消息的已关注用户。,"Параметърът ""толерантност"" определя как агентите се справят с мнения различни от тяхното. Съобщенията, отразяващи мнения подобни на собстевното мнение на агента, се считат за съгласуващи се, в противен случай като противоречащи. Съгласуващите се съобщения могат да повлияят на собственото мнение на агента. Освен това, агентът понякога ще разприятели участник, публикуващ много противоречащи съобщения." 10 | Low,Low,Basso,低,低,Ниска 11 | Medium,Medium,Medio,中,中,Средна 12 | High,High,Alto,高,高,Висока 13 | Influence,Influence,Influenza,社会的影響,受影响度,Влияние 14 | InfluenceDiscription,"An agent’s opinion is updated to become more similar, on average, to those reflected in concordant messages from neighbors. The influence controls how fast this happens.",L'opinione di un agente è aggiornata in modo tale da avvicinarsi alla media delle opinioni rispecchiate nei messaggi concordanti dei propri vicini. L'influenza controlla la velocità di tale processo.,各個人の意見は、その人に合うメッセージから影響を受けて変化し、次第に友人たちの意見に似ていきます。社会的影響のパラメータは、この変化の速さを調整します。,每个主体的观点会被与他观点相近的消息所影响。平均来说，每个主体的观点会更新，并趋近于那些与他观点相近的消息。该参数控制主体观点向相近消息更新的速度。,"Мнението на агента се актуализира и става по-сходно с тези, отразени в съгласувани съобщения от неговите приятели. Параметърът ""влияние"" контролира колко бързо се случва това." 15 | Off,Off,Spento,なし,关,Без 16 | Weak,Weak,Debole,弱,弱,Слабо 17 | Strong,Strong,Forte,強,强,Силно 18 | Unfriending,Unfriending,Rompere l'amicizia,アンフォローの頻度,取消关注,Разприятеляване 19 | UnfriendingDiscription,"This parameter regulates how often an agent will unfriend a neighbor who posts a discordant message, and replace it with a randomly selected new friend.","Questo parametro regola quanto spesso un agente toglierà l'amicizia a un vicino che posta messaggi discordanti, rimpiazzandolo con un vicino scelto a caso.",このパラメータはアンフォローの頻度を表します。自分に合わないメッセージを投稿する友人1名をアンフォローし、その後、ランダムに新しい友人を1人フォローします。,该参数控制每个主体取消关注其朋友的概率。根据这个概率，当前主体会随机选取一位发出与其观点不一致消息的已关注用户 (朋友)，对其进行取消关注，然后从社交网络中随机选取一个新朋友 (进行关注)。,"Този параметър регулира колко често агентът премахва приятелството на друг агент, който публикува противоречащи съобщения, и го заменя с произволно избран нов агент. 20 | " 21 | Never,Never,Mai,なし,从不,Никога 22 | Sometimes,Sometimes,A volte,時々,偶尔,Понякога 23 | Often,Often,Spesso,しばしば,经常,Често 24 | Progressive,Progressive,Progressista,進歩的,激进,Прогресивно 25 | Conservative,Conservative,Conservatore,保守的,保守,Консервативно 26 | LessPopular,Less Popular,Poco popolare,人気がない,不太受欢迎,По-популярен 27 | MorePopular,More Popular,Molto popolare,人気がある,更受欢迎,По-малко популярен 28 | Start,Start,Via,開始,开始,Старт 29 | Stop,Stop,Stop,停止,停止,Стоп 30 | Reset,Reset,Reset,初期化,重置,Нулиране 31 | Speed,Speed,Velocità,速度,速度,Скорост 32 | GraphTitle,Opinions,Opinioni,意見,用户观点,Мнения 33 | GraphDiscription,This plot tracks how the agent opinions change over time. Convergence to a few groups of homogeneous opinions indicates an echo-chamber effect.,Questo grafico traccia come le opinioni degli agent cambiano nel tempo. Una convergenza di opinioni intorno a pochi valori omogenei indica la presenza dell'effetto di polarizzazione.,このグラフは、個々人の意見が、時間の経過と共にどのように変化するのかを表しています。同じ意見をもつ少数のグループに収斂する様子は、エコーチェンバーの効果を示しています。,该图追踪每个主体的观点随时间的变化，观点趋于同质化显示了回音室效应的产生。,Тази графика проследява как мненията на агентите се променят с течение на времето. Конвергенцията към няколко групи хомогенни мнения показва ефекта на ехо стая. 34 | Time,Time,Tempo,時間,时间,Време 35 | ParameterSetting,Parameter Setting,Impostazione dei parametri,パラメータ設定,参数设置,Настройка на параметрите 36 | Scenario01Discription,"Without influence and unfriending, agents are exposed to diverse opinions but their own opinions do not change, and the underlying network structure stays the same.","Senza influenza sociale e rottura delle amicizie, gli agenti sono esposti a opinioni diversificate ma non cambiano la propria opinione, e la struttura della rete sociale sottostante rimane immutata.",社会的影響とアンフォローをなしにすると、個人はいろいろなメッセージを受け取りますが、自身の意見は変わりません。アンフォローもしないため、友人関係のネットワークも変化しません。,受影响度为零和取消关注机制不存在时，意味着主体不受他人影响并且从不取消其关注用户（朋友）。那么，虽然他们置身于一个观点多样的环境里，他们自身的观点也不会改变，潜在的社交网络结构也不会改变。,"Без влияние и разприятеляване, агентите са изложени на различни мнения, но техните собствени мнения не се променят. Основната структура на мрежата остава същата." 37 | Scenario02Discription,"Without unfriending, the network structure remains unchanged and agents are exposed to diverse opinions. However, influence causes agents’ opinions to change based on these exposures. Depending on the initial conditions and on the tolerance, the network converges either to a homogeneous state where all (or almost all) agents have a moderate opinion, or to a state where two (or more) diverse opinions coexist.","Senza la rottura delle amicizie, la struttura della rete sociale rimane immutata e gli agenti sono esposti a opinioni eterogenee. Tuttavia, l'influenza sociale porta gli agenti a cambiare opinione in base all'esposizione ad opinioni diverse. A seconda delle condizioni iniziali e della tolleranza, la rete o converge ad uno stato omogeneo in cui tutti (o quasi tutti) gli agenti hanno un'opinione moderata, oppure ad uno stato in cui due o più opinioni opposte coesistono. ",アンフォローをなしにした場合、友人関係のネットワークは全く変わりませんが、個人はいろいろなメッセージを受け取ります。そして、受け取ったメッセージから社会的影響を受けて、個人の意見は徐々に変化していきます。初期状態と許容範囲の値によって、最終的には全員が中間的な1つの意見をもつネットワークか、2つ以上の違う意見が共存するネットワークのどちらかになります。,取消关注机制不存在时，网络结构不会改变，每个主体都会一直置身于多样观点的环境中。然而，受影响度致使主体的观点受到其关注用户的影响。根据不同的初始网络结构和容忍度参数，社交网络会演变成：（1） 一个同质网络，其中几乎所有主体会持有一个相对中立的观点；或者（2）一个多种观点和谐共存的网络。,"Без разприятеляване, мрежовата структура остава непроменена и агентите са изложени на различни мнения. Въпреки това влиянието кара мненията на агентите да се променят. В зависимост от първоначалните условия и толерантността, мрежата се сближава или до хомогенно състояние, където всички (или почти всички) агенти имат умерено мнение, или до състояние, при което съществуват две (или повече) различни мнения." 38 | Scenario03Discription,"Without influence, opinions do not change. However, the unfriending process allows the agents to slowly sort themselves into a few homogeneous groups.","Senza influenza sociale, le opinioni non cambiano. Tuttavia, il processo di rottura delle amicizie permette agli agenti di riorganizzarsi lentamente in una manciata di gruppi omogenei.",社会的影響をなしにした場合、各個人の意見は変化しません。しかし、アンフォローを繰り返すことによって、徐々に同じ意見をもつ人からなる少数のグループをつくります。,受影响度为零时，主体皆不受他人影响，那么他们的观点也不会改变。然而，取消关注机制会使整个社交网络缓慢地分化为少量的同质子网络。,"Без влияние, мненията не се променят. Процесът на премахване на приятелството обаче позволява на агентите бавно да се сортират в няколко хомогенни групи." 39 | Scenario04Discription,"When agents are influenced by their friends with similar opinions and can unfriend those with different opinions, the network quickly converges into two or more segregated and homogeneous echo-chambers. The number depends on the tolerance, as long as it is not too high: the smaller the tolerance, the more echo chambers.","Quando gli agenti sono influenzati dagli amici con opinioni affini e rompono l'amicizia con chi ha opinioni opposte, la rete sociale converge velocemente a due o più gruppi polarizzati (echo chambers). Per valori non troppo alti della tolleranza, il numero di gruppi dipende dalla tolleranza. Più bassa è la tolleranza, maggiore il numero di gruppi.",社会的影響とアンフォローがある場合、ネットワークは複数の同じ意見からなるエコーチェンバーに分断されます。許容範囲が大きすぎなければ、その大きさによって分断の数が決まります。許容範囲が小さいほど、多くのエコーチェンバーに分断されます。,当主体受到持有相似观点的关注用户的影响，并且能够取消关注持不同观点的用户，那么网络会很快地收敛成两个或以上的同质并且相互隔离的回音室。回音室的数目取决于容忍度：只要容忍度不过高，更小的容忍度通常会造成更多的回音室。,"Когато агентите са повлияни от своите приятели с мнения подобни на тяхното и могат да разприятеляват тези с различни мнения, мрежата бързо се слива в две или повече сегрегирани и хомогенни ехо стаи. Броят зависи от толерантността, стига да не е твърде висока: колкото по-малка е толерантността, толкова повече ехо стаи се образуват." 40 | Scenario05Discription,"With high tolerance, unfriending has small effect. Influence causes the system to quickly converge to a single group with homogeneous opinions.","Con alta tolleranza, la rottura delle amicizie ha poco effetto. L'influenza sociale porta il sistema a convergere velocemente ad un singolo gruppo dalle opinioni omogenee.",許容範囲が大きい場合、アンフォローはあまり影響しません。この場合、社会的影響によって、すぐに全員が同じ意見をもつようになります。,很高的容忍度会使取消关注机制近乎无用。人们轻易受到周围一切消息的影响，这促使整个系统很快收敛于一个统一的同质网络。,"При висока толерантност, премахването на приятелството има малък ефект. Влиянието кара системата бързо да се сближи в една група с хомогенни мнения." 41 | PostMessage,User [t_node.name] posts a new message.,L'utente [t_node.name] pubblica un nuovo messaggio.,ユーザー[t_node.name]が新しいメッセージを投稿しました。,用户[t_node.name]发布了一条新消息。,Потребител [t_node.name] написа ново съобщение. 42 | RepostMessage,User [t_node.name] reposts user [repost_node.name]'s message.,L'utente [t_node.name] ripubblica il messaggio dell'utente [repost_node.name].,ユーザー[t_node.name]がユーザー[repost_node.name]のメッセージを共有しました。,用户[t_node.name]转发了用户[repost_node.name]的消息。,Потребител [t_node.name] сподели съобщението на потребител [repost_node.name]. 43 | ReadMessage,User [t_node.name] reads [concordant_nodes.length] messages.,L'utente [t_node.name] legge [concordant_nodes.length] messaggi.,ユーザー[t_node.name]が[concordant_nodes.length]つのメッセージを読みました。,用户[t_node.name]读了[concordant_nodes.length]条消息。,Потребител [t_node.name] прочете [concordant_nodes.length] съобщения. 44 | BecomeMoreProgressice,User [t_node.name] becomes a bit more progressive.,L'utente [t_node.name] diventa un po' più progressista.,ユーザー[t_node.name]はやや進歩的になりました。,用户[t_node.name]变得激进了。,Потребител [t_node.name] стана малко по-прогресивен. 45 | BecomeLessProgressice,User [t_node.name] becomes a bit less progressive.,L'utente [t_node.name] diventa un po' meno progressista.,ユーザー[t_node.name]はやや進歩的ではなくなりました。,用户[t_node.name]变得不那么激进了。,Потребител [t_node.name] стана малко по-малко прогресивен. 46 | BecomeLessConservative,User [t_node.name] becomes a bit less conservative.,L'utente [t_node.name] diventa un po' meno conservatore.,ユーザー[t_node.name]はやや保守的ではなくなりました。,用户[t_node.name]变得不那么保守了。,Потребител [t_node.name] стана малко по-малко консервативен. 47 | BecomeMoreConservative,User [t_node.name] becomes a bit more conservative.,L'utente [t_node.name] diventa un po' più conservatore.,ユーザー[t_node.name]はやや保守的になりました。,用户[t_node.name]变得保守了。,Потребител [t_node.name] стана малко по-консервативен. 48 | Unfollow,"User [t_node.name] unfollows user [del_node.name], follows user[add_node.name].","L'utente [t_node.name] smette di seguire l'utente [del_node.name], segue l'utente [add_node.name].",ユーザー[t_node.name]がユーザー[del_node.name]をアンフォローし、ユーザー[add_node.name]をフォローしました。,用户[t_node.name]取消关注了用户[del_node.name]，关注了用户[add_node.name]。,Потребител [t_node.name] разприятели потребител [del_node.name] и стана приятел с потребител [add_node.name]. 49 | TranslatersName, ,Traduzione italiana a cura di Giovanni Luca Ciampaglia and Filippo Menczer,Japanese translation by Ayahito Saji and Kazutoshi Sasahara,Chinese translation by Wen Chen,Превод на бълграски Никола Тулечки 50 | InfoTitle,The EchoDemo: FAQ,The EchoDemo: FAQ,エコーデモ: FAQ,回音演示: FAQ,Eхо Демо: FAQ 51 | InfoIntroQ,What is EchoDemo?,Che cos'è EchoDemo?,エコーデモとは？,回音演示是什么？,Какво е Ехо Демо? 52 | InfoIntroA,EchoDemo is a model simulation that demonstrates how two basic mechanisms of social media --- influencing friend opinions and unfriending people with different opinions --- can lead to polarized and segregated social networks. For more details check out our paper.,EchoDemo è una simulazione computerizzata che dimostra come due meccanismi base dei media sociali --- l'influenzare le opinioni altrui e la rimozione (unfriending) di chi ha opinioni differenti dalle nostre --- possano produrre delle reti sociali polarizzata e segregate. Per maggiori dettagli consulta il nostro articolo.,エコーデモは、ソーシャルメディアの2つの基本メカニズム（友人の意見から社会的影響を受ける、意見の合わない友人をアンフォローする）が、どのようにして偏極し分断された社会的ネットワークを生み出すのかをデモンストレーションするモデル・シミュレーションです。詳細は論文をご覧下さい。,回音演示运用演示模型来展示社交网络的两种基本机制 --- （1）朋友间的观点互相影响（受影响度）；（2） 取消关注与自己观点不一致的人（取消关注）--- 如何造成社交网络的分化和隔离。详情请参考我们的论文。,"EchoDemo е математическа симулация, която демонстрира как два основни механизма на социалните медии --- повлияване от мненията на приятелите и премахване на приятели с различни мнения --- могат да доведат до поляризирани и сегрегрегирани социални мрежи. За повече подробности вижте нашата публикация." 53 | InfoRepresentQ,What does the network represent?,Che cosa rappresenta la rete?,ネットワークは何を表しているのか？,该演示中的网络代表什么？,Какво представлява мрежата? 54 | InfoRepresentA,Each node in the network represents a user; its size represents its popularity (number of friends) and its color represents its political opinion. Friend connections are assumed to be mutual.,Ciascun nodo nella rete rappresenta un utente; la sua grandezza rappresenta la popolarità (numero di amici) e il suo colore rappresenta l'opinione politica. I collegamenti tra amici sono da considerare reciproci.,ネットワークのノードはユーザを、ノードの大きさはそのユーザの人気度（友人の数）を、ノードの色は政治的な意見を表しています。友人関係のつながりは双方的だと仮定します。,网络中的每个节点代表社交网络中的一个用户；节点的大小代表该用户的受欢迎程度（朋友数目），节点的颜色代表用户所持有的观点。该网络中的朋友关系 (边) 是相互的。,"Всеки възел в мрежата представлява потребител; неговият размер представлява неговата популярност (брой приятели), а цветът му представлява неговото политическо мнение. Приятелските връзки се приемат за взаимни." 55 | InfoHowQ,How does it work?,Come funziona?,どのように動作するのか？,该演示的内在是如何工作的？,Как работи? 56 | InfoHowA,"Users do four things: (1) they read messages posted/re-posted by their 57 | friends; (2) they change their opinion a bit (based on the influence 58 | parameter) according to concordant messages (based on the tolerance 59 | parameter); (3) once in a while (based on the unfriending parameter) 60 | they replace a friend who posts messages sufficiently different from 61 | their own opinion (based on the tolerance parameter) with a random 62 | friend; and (4) they either post a new message reflecting their 63 | opinion, or re-post a concordant message (based on the tolerance 64 | parameter) from a random friend.","Gli utenti fanno quattro cose: (1) leggono i message postati/ri-postati dai loro amici; (2) cambiano le proprie opinioni un po' (in base al parametro di influenza) in seguito alla lettura dei messaggi concordanti (in base al parametro della tolleranza); (3) ogni tanto (in base al parametro di unfriending) sostituiscono un amico che posta messaggi sufficientemente differenti dalla loro opinione (in base al parametro della tolleranza) con un amico scelto a caso; e (4) postano un nuovo messaggio che riflette la loro opinione, o ripostano un messaggio concordante (in base al parametro della tolleranza) da un amico scelto a caso.",ユーザは次の4つのことをします。(1)ユーザは友人が投稿・再投稿したメッセージ読みます。(2)ユーザはこれらのメッセージから影響を受けて、自分の意見を(社会的影響パラメータに基づいて)少しだけ変えます。(3)(アンフォローの頻度のパラメータに基づいて)時々、ユーザは自分の意見とは(許容範囲基づいて)十分に異なる意見のメッセージを投稿した友人1名をランダムにアンフォローし、別の友人1名をランダムに選んでフォローします。(4)ユーザは自分の意見を反映した新しいメッセージを投稿するか、ランダムに選んだ友人のメッセージを再投稿します。,网络中的用户做四件事情：（1）他们阅读朋友发送/转发的消息；（2）他们会根据那些来自朋友的，并且与自己观点一致的消息（根据容忍度参数）来略微地改变自己的观点（根据受影响度参数）；（3）时不时地（根据取消关注参数），他们把一个发送与自己观点不一致的消息的朋友（根据容忍度参数）替换成一个随机选取的用户；（4）他们要么发送一条新消息显示自己的观点，要么随机转发一条朋友发送的一致消息（根据容忍度参数）。,"Потребителите правят четири неща: (1) четат съобщения, публикувани или споделени от тяхните приятели; (2) променят малко мнението си (в зависимост от параметъра ""влияние"") според съгласуващите съобщения (въз основа на параметъра ""толерантност""); (3) от време на време (въз основа на параметъра ""разприятеляване"") 65 | те заместват приятел, който публикува съобщения, достатъчно различни от 66 | собственото им мнение (въз основа на параметъра ""толерантност"") със случаен 67 | приятел; и (4) те или публикуват ново съобщение, отразяващо тяхното 68 | мнение или споделят някое съгласуващо съобщение (въз основа на параметъра ""толерантност"" 69 | ) от случаен приятел." 70 | InfoInstructionsQ,What do I do?,Che cosa posso fare?,どうする？,我需要做什么？,Какво мога да правя? 71 | InfoInstructionsA,"Initially, users have diverse random opinions and are connected in a random network. Try different values of the parameters (or pick one of the scenarios), start the simulation, and observe what happens. How do user opinions and the network structure change?","Inizialmente, gli utenti hanno delle opinioni variegate e sono collegati in modo casuale. Prova differenti valori dei parametri (o scegli uno degli scenari), lancia la simulazione, e osserva cosa succede. Come cambiano le opinioni degli utenti e come cambia la struttura della rete?",初期状態では、ユーザたちは多様でランダムな意見をもち、友人関係のネットワークでは互いにランダムにつながっています。異なるパラメータを選んで（あるいは、シナリオを1つ選んで）、シミュレーションを開始し、何が起こるのかを観察しましょう。どのようにユーザの意見や社会的ネットワークの構造が変化するでしょうか？,在演示的最开始，用户持有各种不同的观点，并形成一个随机网络。你可以设定不同的参数值，开始这个演示模型（或者选取我们提供的场景），观察即将发生的一切。比如：用户的观点和网络结构是如何改变的？,"Първоначално потребителите имат различни произволни мнения и са свързани в произволна мрежа. Опитайте различни стойности на параметрите (или изберете един от сценариите), стартирайте симулацията и наблюдавайте какво се случва. Как се променят мненията на потребителите и как това влияе върху мрежовата структура?" --------------------------------------------------------------------------------