HTML5/jQuery-ui/D3.js 谷歌PageRank算法可视化/动画演示

Exploration of the Google PageRank Algorithm. 本作品包含矩阵运算公式的可视化。 Refer to: http://www.nowherenearithaca.com/2013/04/explorating-googles-pagerank.html 需要放大预览窗口查看。

h5, d3, jquery, math

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3284
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html class="no-js">

</head>

<body>
    <div id="topBar">
        <div id="titleAndSubtitle">
            <div id="theTitle">
                Exploration of the Google PageRank Algorithm
            </div>
            <div id="subTitle">
                Circles correspond to web pages, links correspond to hyperlinks
            </div>
        </div>
    </div>

<div id="bottomPart">
        
        <div id="pickDampingFactor">
            <label for="dampingFactor" style="display:inline;">Damping Factor d:</label>
            <input type="text" size="4" id="dampingFactor" style="display:inline;border: 0; font-weight: bold;" />
            <div id="dampingFactorSlider"></div>
            
            <input type="submit" value="Generate New" id="btnGenerateNew" />
            
            <ul id="desktopInstructions">
                <li class="instructions">Drag nodes to rearrange</li>
                <li class="instructions">Click on node, then click on another to create link</li>
                <li class="instructions">Double-click to add node (<span id='instructionNoteAboutMaximum' class='hasToolTip' title='You probably need to hide the matrix area if you have more than 9 nodes'>max 20</span>)</li>
                <li class="instructions"><b>Del+mouseover</b> deletes node</li>
                <li class="instructions">Click on link to delete</li>
                <li class="instructions">Mouseover link to see location in matrix</li>
            </ul>
            <input type="submit" value="Hide Matrix Stuff" id="btnHideShowMatrixStuff" />
            
        </div>
        <div id="pageRankVectorArea">

</div>
        <div id="exploreConvergenceDiv">
            <div id="exploreConvergence_Title">Iteration #n of Power Method</div>

<div id="exploreConvergence_Slider"></div>
            <div id="exploreConvergence_InstructionsUnderSlider">
                Use left/right arrows to step through the iterations
            </div>
            <div id="exploreConvergence_CurrentVector"></div>
        </div>

</div>
    <script>
        window.jQuery || document.write('<script src="/libs/jquery/jquery.min.js"><\/script>')
    </script>
    <script src="/uploads/150401/plugins.js"></script>
    <script src="/uploads/150401/jquery-ui-1.10.2.custom.min.js"></script>
    <script src="/uploads/150401/jquery.color.js"></script>
    <script>
        var pageRankViz;

var resizeDivs = function() {

var theHeight = $('#titleAndSubtitle').height();
            var theGap = 2;

var theLowerDivs = ["#bottomPart"];
            var topBarBottom = $('#topBar').position().top + $('#topBar').height();

theLowerDivs.forEach(function(s) {
                $(s).css('top', topBarBottom);
            });

$('#aboutDetails').css('top', topBarBottom);
        }

var updatePageRankCalculations = function() {
            var currentDampingFactor = $("#dampingFactor").val();
            pageRankViz.calculatePageRank(currentDampingFactor);
        }

$(document).ready(function() {
            resizeDivs();

window.addEventListener('load', function() {
                new FastClick(document.body);
            }, false);

$("#dampingFactorSlider").slider({
                ignoreorientation: "vertical",
                range: "max",
                min: 0,
                max: 100,
                value: 85,
                slide: function(event, ui) {
                    $("#dampingFactor").val(ui.value / 100);
                    updatePageRankCalculations();
                }
            });

$('#exploreConvergence_decreaseIteration').button().click(function() {});

$('#exploreConvergence_increaseIteration').button().click(function() {});

$('#exploreConvergence_Slider').slider({
                min: 0,
                max: 100,
                value: 100,
                slide: function(event, ui) {
                    // $( "#dampingFactor" ).val( ui.value/100 );
                    // updatePageRankCalculations();
                }
            });

$("#dampingFactor").val($("#dampingFactorSlider").slider("value") / 100);

$('#updateCalculations').button().click(function(event) {
                event.preventDefault();
                updatePageRankCalculations();
            });

$("input[type=checkbox]").button({
                icons: {
                    primary: 'ui-icon-circle-minus'
                }
            });
            $("input[type=checkbox]").click(function() {
                if ($(this).is(':checked')) {
                    $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-plus").removeClass("ui-icon-circle-minus");
                    pageRankViz.setUseDanglingNodeMatrix(true);
                } else {
                    $(this).next().children('.ui-button-icon-primary').addClass("ui-icon-circle-minus").removeClass("ui-icon-circle-plus");
                    pageRankViz.setUseDanglingNodeMatrix(false);
                }
            });

$('#btnGenerateNew').button().click(function(event) {
                event.preventDefault();
                pageRankViz.generateNew();
            });

//$('#btnMainExploreConvergence').button();
            $('#btnHideShowMatrixStuff').button().click(function(event) {
                event.preventDefault();

var btn = $('#btnHideShowMatrixStuff');
                var matrixArea = $("#matrixAndCalculationsArea");

if (matrixArea.is(":visible")) {
                    btn.attr("value", "Show Matrix Stuff");
                    pageRankViz.hideMatrixArea();
                } else {
                    btn.attr("value", "Hide Matrix Stuff");
                    pageRankViz.showMatrixArea();
                }
            });

$('#btnGenerateNew').width($('#btnHideShowMatrixStuff').width());

$('#pageRankVectorArea').draggable({
                opacity: 0.9
            });
            $('#exploreConvergenceDiv').draggable({
                handle: '#exploreConvergence_Title'
            });

pageRankViz = PageRankViz();
            $(document).tooltip();
            resizeDivs();

$(window).resize(function() {
                resizeDivs();
            });

updatePageRankCalculations();

});
    </script>

</body>

</html>

Exploration of the Google PageRank Algorithm. 本作品包含矩阵运算公式的可视化。 Refer to: http://www.nowherenearithaca.com/2013/04/explorating-googles-pagerank.html 需要放大预览窗口查看。

h5, d3, jquery, math

编辑器支持Emmet

快捷键

Exploration of the Google PageRank Algorithm. 本作品包含矩阵运算公式的可视化。 Refer to: http://www.nowherenearithaca.com/2013/04/explorating-googles-pagerank.html 需要放大预览窗口查看。

h5, d3, jquery, math

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

HTML5 SVG+jQuery.wavify.js 沙滩情侣动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：