Benchmark: Subway Canvas Check

HTML Preparation code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>Subway Map</title>
    <script type="text/javascript" src="../_catalogs/masterpage/bgl/js/libraries/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../_catalogs/masterpage/bgl/js/plugins/jquery.subwayMap-0.5.0.js"></script>
    <style type="text/css">
    @media only screen {
    	.instructions {
			display:block;	
		}
    }
    @media only screen and (min-width: 40.063em) { 
    	.instructions {
			display:none;	
		}
    }
    @media only screen and (min-width: 64.063em) { 
    	.instructions {
			display:none;	
		}
    }
    
    
    
    body
    {
        font-family: Verdana;
        font-size: 8pt;
    }

    /* The main DIV for the map */
    .subway-map
    {
        margin: 0;
        width: 500px;
        height:410px;
        background-color: white;
    }

    /* Text labels */
    .text
    {
        text-decoration: none;
        color: black;
    }

    #legend
    {
        float: left;
        width: 250px;
        height:400px;
    }

    #legend div
    {
        height: 25px;
    }

    #legend span
    {
        margin: 5px 5px 5px 0;
    }
    .subway-map span
    {
        margin: 5px 5px 5px 0;
    }
 
    </style>
</head>
<body>
	<div class="instructions">
		&lt;--------- scroll left or right ---------&gt;
	</div>
    <div class="subway-map" data-columns="22" data-rows="40" data-cellSize="30" data-legendId="legend" data-textClass="text" data-gridNumbers="true" data-grid="false" data-lineWidth="8">
        <ul data-color="#F7941D" data-label="seniorTechnicalManager1">          
            <li data-coords="2,10"><a href="/sites/mibgl/Documents/Career%20Paths/Junior%20Software%20Engineer_Aug16.pdf">Junior</a></li>  
			<li data-coords="2,9" ></li>
			<li data-coords="3,8" data-dir="N"></li>
            <li data-coords="5,6" ><a target="_self" href="/sites/mibgl/Documents/Career%20Paths/DevOps%20Engineer.pdf">Engineer</a></li>
            <li data-coords="9,6" ><a href="/sites/mibgl/Documents/Career%20Paths/Senior%20DevOps%20Engineer.pdf">Senior Engineer</a></li>            
        </ul>
		<ul data-color="#F7941D" data-label="seniorTechnicalManager2"> 
			<li data-coords="2,10"></li>
			<li data-coords="5,10" ><a href="http://jqueryui.com/demos/tabs/">Developer</a></li>
			<li data-coords="9,10" ><a href="http://jqueryui.com/demos/tabs/">Senior Developer</a></li>
			<!--<li data-coords="7,9" data-dri="N"></li>-->
			<li data-coords="5,6"></li>
		</ul>
		<ul data-color="#F7941D" data-label="seniorTechnicalManager3"> 
			<li data-coords="9,10" ></li>
			<li data-coords="13,10" ><a href="/sites/mibgl/Documents/Career%20Paths/DevOps%20Tech%20Lead.pdf">Technical Lead</a></li>
			<li data-coords="17,10" ><a href="http://jqueryui.com/demos/tabs/">Senior Technical Lead</a></li>
			<li data-coords="21,10" ></li>
		</ul>
		<ul data-color="#F7941D" data-label="seniorTechnicalManager4"> 
			<li data-coords="2,10" ></li>
			<li data-coords="2,11" ></li>
			<li data-coords="3,12" data-dir="S"></li>
			<li data-coords="4.9,14" data-marker="interchange" ><a href="http://jqueryui.com/demos/tabs/">Analyst</a></li>			
			<li data-coords="9,14" ><a href="http://jqueryui.com/demos/tabs/">Senior Analyst</a></li>			
			<li data-coords="5,10" ></li>
		</ul>
		<ul data-color="#F7941D" data-label="seniorTechnicalManager5"> 
			<li data-coords="9,14" ></li>
			<li data-coords="10,13" ></li>
			<li data-coords="13,13" ><a href="http://jqueryui.com/demos/tabs/">Development Lead</a></li>			
		</ul>
		<ul data-color="#F7941D" data-label="seniorTechnicalManager6"> 
			<li data-coords="12,13" ></li>
			<li data-coords="9,10" ></li>
		</ul>
		<ul data-color="#F6ED31" data-label="seniorManager1"> 
			<li data-coords="13,13" ></li>
			<li data-coords="17,13" ><a href="http://jqueryui.com/demos/tabs/">Development Manager</a></li>
			<li data-coords="21,13" ></li>
		</ul>
		<ul data-color="#662D91" data-label="seniorManagerITOperations1"> 
			<li data-coords="9,6" ></li>
			<li data-coords="10,5" ></li>
			<li data-coords="12,3" ></li>
			<li data-coords="13,3" ><a href="http://jqueryui.com/demos/tabs/">Team Lead / Tech Lead</a></li>						
			<li data-coords="17,3" ><a href="http://jqueryui.com/demos/tabs/">IT Operations Manager</a></li>						
			<li data-coords="21,3" ></li>			
		</ul>
		<ul data-color="#EC008D" data-label="seniorManagerArchitect1"> 
			<li data-coords="9,6" ></li>
			<li data-coords="13,6" ><a href="http://jqueryui.com/demos/tabs/">Solutions Architect</a></li>						
			<li data-coords="17,6" ><a href="http://jqueryui.com/demos/tabs/">Estate / Senior Solutions Architect</a></li>												
			<li data-coords="21,6" ></li>		
		</ul>
		<ul data-color="#8DC63F" data-label="seniorManagerQualityAssurance1"> 
			<li data-coords="9,14" ></li>
			<li data-coords="11,16" ></li>
			<li data-coords="13,16" ><a href="http://jqueryui.com/demos/tabs/">QA Team Lead</a></li>						
			<li data-coords="17,16" ><a href="http://jqueryui.com/demos/tabs/">Test Manager</a></li>						
			<li data-coords="21,16" ></li>		
		</ul>
		<ul data-color="#14A79D" data-label="seniorProjectManager1"> 
			<li data-coords="5,14" ></li>
			<li data-coords="5,15" ></li>
			<li data-coords="6,16" data-dir="S"></li>
			<li data-coords="9,19" ><a href="http://jqueryui.com/demos/tabs/">Project / Implementation Lead</a></li>									
			<li data-coords="13,19" ><a href="http://jqueryui.com/demos/tabs/">Project / Implementation Manager</a></li>						
			<li data-coords="17,19" ><a href="http://jqueryui.com/demos/tabs/">Portfolio Manager</a></li>						
			<li data-coords="21,19" ></li>		
		</ul>
		<ul data-color="#25AAE1" data-label="seniorManagerComDev1" data-shiftCoords="-1,0"> 
			<li data-coords="5,14" ></li>
			<li data-coords="5,18" ></li>
			<li data-coords="6,19" data-dir="S" ></li>
			<li data-coords="9,22" ><a href="http://jqueryui.com/demos/tabs/">Analyst - Business / Technical</a></li>									
			<li data-coords="15,22" ><a href="http://jqueryui.com/demos/tabs/">Senior Analyst - Business / Techical</a></li>						
			<li data-coords="21,22" ></li>
		</ul>
		<ul data-color="#25AAE1" data-label="test1">
			<li data-coords="2,25"></li>
			<li data-coords="4,25"><a href="http://jqueryui.com/demos/tabs/">Test 1</a></li>
			<li data-coords="7,25"><a href="http://jqueryui.com/demos/tabs/">Test 2</a></li>
			<li data-coords="10,25"><a href="http://jqueryui.com/demos/tabs/">Test 3</a></li>
			<li data-coords="13,25"><a href="http://jqueryui.com/demos/tabs/">Test 4</a></li>
			<li data-coords="16,25"><a href="http://jqueryui.com/demos/tabs/">Test 5</a></li>
			<li data-coords="19,25"><a href="http://jqueryui.com/demos/tabs/">Test 6</a></li>												
			<li data-coords="21,25" ></li>			
		</ul>
		<ul data-color="#25AAE1" data-label="test2">
			<li data-coords="2,28"></li>
			<li data-coords="4,28"><a href="http://jqueryui.com/demos/tabs/">Test 1</a></li>
			<li data-coords="7,28"><a href="http://jqueryui.com/demos/tabs/">Test 2</a></li>
			<li data-coords="10,28"><a href="http://jqueryui.com/demos/tabs/">Test 3</a></li>
			<li data-coords="13,28"><a href="http://jqueryui.com/demos/tabs/">Test 4</a></li>
			<li data-coords="16,28"><a href="http://jqueryui.com/demos/tabs/">Test 5</a></li>
			<li data-coords="19,28"><a href="http://jqueryui.com/demos/tabs/">Test 6</a></li>												
			<li data-coords="21,28" ></li>			
		</ul>
		<ul data-color="#25AAE1" data-label="test3">
			<li data-coords="2,31"></li>
			<li data-coords="4,31"><a href="http://jqueryui.com/demos/tabs/">Test 1</a></li>
			<li data-coords="7,31"><a href="http://jqueryui.com/demos/tabs/">Test 2</a></li>
			<li data-coords="10,31"><a href="http://jqueryui.com/demos/tabs/">Test 3</a></li>
			<li data-coords="13,31"><a href="http://jqueryui.com/demos/tabs/">Test 4</a></li>
			<li data-coords="16,31"><a href="http://jqueryui.com/demos/tabs/">Test 5</a></li>
			<li data-coords="19,31"><a href="http://jqueryui.com/demos/tabs/">Test 6</a></li>												
			<li data-coords="21,31" ></li>			
		</ul>
    </div>
   
    

    <script type="text/javascript">
        $(".subway-map").subwayMap({ debug: false });
    </script>
</body>
</html>

Script Preparation code:

/*

Copyright (c) 2010 Nik Kalyani nik@kalyani.com http://www.kalyani.com

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/

(function ($) {

    var plugin = {

        defaults: {
            debug: false,
            grid: false
        },

        options: {
    },

    identity: function (type) {
        if (type === undefined) type = "name";

        switch (type.toLowerCase()) {
            case "version": return "1.0.0"; break;
            default: return "subwayMap Plugin"; break;
        }
    },
    _debug: function (s) {
        if (this.options.debug)
            this._log(s);
    },
    _log: function () {
        if (window.console && window.console.log)
            window.console.log('[subwayMap] ' + Array.prototype.join.call(arguments, ' '));
    },
    _supportsCanvas: function () {
        var canvas = $("<canvas></canvas>");
        if (canvas[0].getContext)
            return true;
        else
            return false;
    },
    _getCanvasLayer: function (el, overlay) {
        this.layer++;
        var canvas = $("<canvas style='position:absolute;z-Index:" + ((overlay ? 2000 : 1000) + this.layer) + "' width='" + this.options.pixelWidth + "' height='" + this.options.pixelHeight + "'></canvas>");
        el.append(canvas);
        return (canvas[0].getContext("2d"));
    },
    _render: function (el) {

        this.layer = -1;
        var rows = el.attr("data-rows");
        if (rows === undefined) 
            rows = 10;
        else
            rows = parseInt(rows);

        var columns = el.attr("data-columns");
        if (columns === undefined) 
            columns = 10;
        else
            columns = parseInt(columns);

        var scale = el.attr("data-cellSize");
        if (scale === undefined) 
            scale = 100;
        else
            scale = parseInt(scale);

        var lineWidth = el.attr("data-lineWidth");
        if (lineWidth === undefined) 
            lineWidth = 10;
        else
            lineWidth = parseInt(lineWidth);

        var textClass = el.attr("data-textClass");
        if (textClass === undefined) textClass = "";

        var grid = el.attr("data-grid");
        if ((grid === undefined) || (grid.toLowerCase() == "false"))
            grid = false;
        else
            grid = true;

        var legendId = el.attr("data-legendId");
        if (legendId === undefined) legendId = "";

        var gridNumbers = el.attr("data-gridNumbers");
        if ((gridNumbers === undefined) || (gridNumbers.toLowerCase() == "false"))
            gridNumbers = false;
        else
            gridNumbers = true;

        var reverseMarkers = el.attr("data-reverseMarkers");
        if ((reverseMarkers === undefined) || (reverseMarkers.toLowerCase() == "false"))
            reverseMarkers = false;
        else
            reverseMarkers = true;


        this.options.pixelWidth = columns * scale;
        this.options.pixelHeight = rows * scale;

        //el.css("width", this.options.pixelWidth);
        //el.css("height", this.options.pixelHeight);
        self = this;
        var lineLabels = [];
        var supportsCanvas = $("<canvas></canvas>")[0].getContext;
        if (supportsCanvas) {

            if (grid) this._drawGrid(el, scale, gridNumbers);
            $(el).children("ul").each(function (index) {
                var ul = $(this);

                var color = $(ul).attr("data-color");
                if (color === undefined) color = "#000000";

                var lineTextClass = $(ul).attr("data-textClass");
                if (lineTextClass === undefined) lineTextClass = "";                

                var shiftCoords = $(ul).attr("data-shiftCoords");
                if (shiftCoords === undefined) shiftCoords = "";

                var shiftX = 0.00;
                var shiftY = 0.00;
                if (shiftCoords.indexOf(",") > -1) {
                    shiftX = parseInt(shiftCoords.split(",")[0]) * lineWidth/scale;
                    shiftY = parseInt(shiftCoords.split(",")[1]) * lineWidth/scale;
                }

                var lineLabel = $(ul).attr("data-label");
                if (lineLabel === undefined) 
                    lineLabel = "Line " + index;

                lineLabels[lineLabels.length] = {label: lineLabel, color: color};

                var nodes = [];
                $(ul).children("li").each(function () {

                    var coords = $(this).attr("data-coords");
                    if (coords === undefined) coords = "";

                    var dir = $(this).attr("data-dir");
                    if (dir === undefined) dir = "";

                    var labelPos = $(this).attr("data-labelPos");
                    if (labelPos === undefined) labelPos = "s";

                    var marker = $(this).attr("data-marker");
                    if (marker == undefined) marker = "";

                    var markerInfo = $(this).attr("data-markerInfo");
                    if (markerInfo == undefined) markerInfo = "";

                    var anchor = $(this).children("a:first-child");
                    var label = $(this).text();
                    if (label === undefined) label = "";

                    var link = "";
                    var title = "";
                    if (anchor != undefined) {
                        link = $(anchor).attr("href");
                        if (link === undefined) link = "";
                        title = $(anchor).attr("title");
                        if (title === undefined) title = "";
                    }

                    self._debug("Coords=" + coords + "; Dir=" + dir + "; Link=" + link + "; Label=" + label + "; labelPos=" + labelPos + "; Marker=" + marker);

                    var x = "";
                    var y = "";
                    if (coords.indexOf(",") > -1) {
                        x = Number(coords.split(",")[0]) + (marker.indexOf("interchange") > -1 ? 0 : shiftX);
                        y = Number(coords.split(",")[1]) + (marker.indexOf("interchange") > -1 ? 0 : shiftY);
                    }
                    nodes[nodes.length] = { x: x, y:y, direction: dir, marker: marker, markerInfo: markerInfo, link: link, title: title, label: label, labelPos: labelPos};
                });
                if (nodes.length > 0)
                    self._drawLine(el, scale, rows, columns, color, (lineTextClass != "" ? lineTextClass : textClass), lineWidth, nodes, reverseMarkers);
                $(ul).remove();
            });

            if ((lineLabels.length > 0) && (legendId != ""))
            {
                var legend = $("#" + legendId);

                for(var line=0; line<lineLabels.length; line++)
                    legend.append("<div><span style='float:left;width:100px;height:" + lineWidth + "px;background-color:" + lineLabels[line].color + "'></span>" + lineLabels[line].label + "</div>");
            }

        }
    },
    _drawLine: function (el, scale, rows, columns, color, textClass, width, nodes, reverseMarkers) {

        var ctx = this._getCanvasLayer(el, false);
        ctx.beginPath();
        ctx.moveTo(nodes[0].x * scale, nodes[0].y * scale);
        var markers = [];
        var lineNodes = [];
        for(var node = 0; node < nodes.length; node++)
        {
            if (nodes[node].marker.indexOf("@") != 0)
                lineNodes[lineNodes.length] = nodes[node];
        }
        for (var lineNode = 0; lineNode < lineNodes.length; lineNode++) {
            if (lineNode < (lineNodes.length - 1)) {
                var nextNode = lineNodes[lineNode + 1];
                var currNode = lineNodes[lineNode];

                // Correction for edges so lines are not running off campus
                var xCorr = 0;
                var yCorr = 0;
                if (nextNode.x == 0) xCorr = width / 2;
                if (nextNode.x == columns) xCorr = -1 * width / 2;
                if (nextNode.y == 0) yCorr = width / 2;
                if (nextNode.y == rows) yCorr = -1 * width / 2;

                var xVal = 0;
                var yVal = 0;
                var direction = "";

                var xDiff = Math.round(Math.abs(currNode.x - nextNode.x));
                var yDiff = Math.round(Math.abs(currNode.y - nextNode.y));
                if ((xDiff == 0) || (yDiff == 0)) {
                    // Horizontal or Vertical
                    ctx.lineTo((nextNode.x * scale) + xCorr, (nextNode.y * scale) + yCorr);
                }
                else if ((xDiff == 1) && (yDiff == 1)) {
                    // 90 degree turn
                    if (nextNode.direction != "")
                        direction = nextNode.direction.toLowerCase();
                    switch (direction) {
                        case "s": xVal = 0; yVal = scale; break;
                        case "e": xVal = scale; yVal = 0; break;
                        case "w": xVal = -1 * scale; yVal = 0; break;
                        default: xVal = 0; yVal = -1 * scale; break;
                    }
                    ctx.quadraticCurveTo((currNode.x * scale) + xVal, (currNode.y * scale) + yVal,
                                                    (nextNode.x * scale) + xCorr, (nextNode.y * scale) + yCorr);
                }
                else if (xDiff == yDiff) {
                    // Symmetric, angular with curves at both ends
                    if (nextNode.x < currNode.x) {
                        if (nextNode.y < currNode.y)
                            direction = "nw";
                        else
                            direction = "sw";
                    }
                    else {
                        if (nextNode.y < currNode.y)
                            direction = "ne";
                        else
                            direction = "se";
                    }
                    var dirVal = 1;
                    switch (direction) {
                        case "nw": xVal = -1 * (scale / 2); yVal = 1; dirVal = 1; break;
                        case "sw": xVal = -1 * (scale / 2); yVal = -1; dirVal = 1; break;
                        case "se": xVal = (scale / 2); yVal = -1; dirVal = -1; break;
                        case "ne": xVal = (scale / 2); yVal = 1; dirVal = -1; break;
                    }
                    this._debug((currNode.x * scale) + xVal + ", " + (currNode.y * scale) + "; " + (nextNode.x + (dirVal * xDiff / 2)) * scale + ", " +
                    (nextNode.y + (yVal * xDiff / 2)) * scale)
                    ctx.bezierCurveTo(
                            (currNode.x * scale) + xVal, (currNode.y * scale),
                            (currNode.x * scale) + xVal, (currNode.y * scale),
                            (nextNode.x + (dirVal * xDiff / 2)) * scale, (nextNode.y + (yVal * xDiff / 2)) * scale);
                    ctx.bezierCurveTo(
                            (nextNode.x * scale) + (dirVal * scale / 2), (nextNode.y) * scale,
                            (nextNode.x * scale) + (dirVal * scale / 2), (nextNode.y) * scale,
                            nextNode.x * scale, nextNode.y * scale);
                }
                else
                    ctx.lineTo(nextNode.x * scale, nextNode.y * scale);
            }
        } 

        ctx.strokeStyle = color;
        ctx.lineWidth = width;
        ctx.stroke();

        ctx = this._getCanvasLayer(el, true);
        for (var node = 0; node < nodes.length; node++) {
            this._drawMarker(el, ctx, scale, color, textClass, width, nodes[node], reverseMarkers);
        }


    },
    _drawMarker: function (el, ctx, scale, color, textClass, width, data, reverseMarkers) {

        if (data.label == "") return;
        if (data.marker == "") data.marker = "station";

        // Scale coordinates for rendering
        var x = data.x * scale;
        var y = data.y * scale;

        // Keep it simple -- black on white, or white on black
        var fgColor = "#000000";
        var bgColor = "#ffffff";
        if (reverseMarkers)
        {
            fgColor = "#ffffff";
            bgColor = "#000000";
        }

        // Render station and interchange icons
        ctx.strokeStyle = fgColor;
        ctx.fillStyle = bgColor;
        ctx.beginPath();
        switch(data.marker.toLowerCase())
        {
            case "interchange":
            case "@interchange":
                ctx.lineWidth = width;
                if (data.markerInfo == "")
                    ctx.arc(x, y, width * 0.7, 0, Math.PI * 2, true);
                else
                {
                    var mDir = data.markerInfo.substr(0,1).toLowerCase();
                    var mSize = parseInt(data.markerInfo.substr(1,10));
                    if (((mDir == "v") || (mDir == "h")) && (mSize > 1))
                    {
                        if (mDir == "v")
                        {
                            ctx.arc(x, y, width * 0.7,290 * Math.PI/180, 250 * Math.PI/180, false);
                            ctx.arc(x, y-(width*mSize), width * 0.7,110 * Math.PI/180, 70 * Math.PI/180, false);
                        }
                        else
                        {
                            ctx.arc(x, y, width * 0.7,20 * Math.PI/180, 340 * Math.PI/180, false);
                            ctx.arc(x+(width*mSize), y, width * 0.7,200 * Math.PI/180, 160 * Math.PI/180, false);
                        }
                    }
                    else
                        ctx.arc(x, y, width * 0.7, 0, Math.PI * 2, true);
                }
                break;
            case "station":
            case "@station":
                ctx.lineWidth = width/2;
                ctx.arc(x, y, width/2, 0, Math.PI * 2, true);
                break;
        }
        ctx.closePath();
        ctx.stroke();
        ctx.fill();
        
        // Render text labels and hyperlinks
        var pos = "";
        var offset = width + 4;
        var topOffset = 0;
        var centerOffset = "-50px";
        switch(data.labelPos.toLowerCase())
        {
            case "n":
                pos = "text-align: center; margin: 0 0 " + offset + "px " + centerOffset;
                topOffset = offset * 2;
                break;
            case "w":
                pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px";
                topOffset = offset;
                break;
            case "e":
                pos = "text-align: left; margin:0 0 0 " + offset + "px";
                topOffset = offset;
                break;
            case "s":
                pos = "text-align: center; margin:" + offset + "px 0 0 " + centerOffset;
                break;
            case "se":
                pos = "text-align: left; margin:" + offset + "px 0 0 " + offset + "px";
                break;
            case "ne":
                pos = "text-align: left; padding-left: " + offset + "px; margin: 0 0 " + offset + "px 0";
                topOffset = offset * 2;
                break;
            case "sw": //TODO
                pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px";
                topOffset = offset;
                break;
            case "nw": //TODO
                pos = "text-align: right; margin:0 " + offset + "px 0 -" + (100 + offset) + "px";
                topOffset = offset;
                break;
        }
        var style = (textClass != "" ? "class='" + textClass + "' " : "") + "style='" + (textClass == "" ? "font-size:8pt;font-family:Verdana,Arial,Helvetica,Sans Serif;text-decoration:none;" : "") + "width:100px;" + (pos != "" ? pos : "") + ";position:absolute;top:" + (y + el.offset().top - (topOffset > 0 ? topOffset : 0)) + "px;left:" + (x + el.offset().left) + "px;z-index:3000;'";
        if (data.link != "")
            $("<a " + style + " title='" + data.title.replace(/\\n/g,"<br />") + "' href='" + data.link + "' target='_parent'>" + data.label.replace(/\\n/g,"<br />") + "</span>").appendTo(el);
        else
            $("<span " + style + ">" + data.label.replace(/\\n/g,"<br />") + "</span>").appendTo(el);;
        
    },
    _drawGrid: function (el, scale, gridNumbers) {

        var ctx = this._getCanvasLayer(el, false);
        ctx.fillStyle = "#000";
        ctx.beginPath();
        var counter = 0;
        for (var x = 0.5; x < this.options.pixelWidth; x += scale) {
            if (gridNumbers)
            {
                ctx.moveTo(x, 0);
                ctx.fillText(counter++, x-15, 10);
            }
            ctx.moveTo(x, 0);
            ctx.lineTo(x, this.options.pixelHeight);
        }
        ctx.moveTo(this.options.pixelWidth - 0.5, 0);
        ctx.lineTo(this.options.pixelWidth - 0.5, this.options.pixelHeight);

        counter = 0;
        for (var y = 0.5; y < this.options.pixelHeight; y += scale) {
            if (gridNumbers)
            {
                ctx.moveTo(0, y);
                ctx.fillText(counter++, 0, y-15);
            }
            ctx.moveTo(0, y);
            ctx.lineTo(this.options.pixelWidth, y);
        }
        ctx.moveTo(0, this.options.pixelHeight - 0.5);
        ctx.lineTo(this.options.pixelWidth, this.options.pixelHeight - 0.5);
        ctx.strokeStyle = "#eee";
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.fill();
        ctx.closePath();

    }
}

var methods = {

    init: function (options) {

        plugin.options = $.extend({}, plugin.defaults, options);
        // iterate and reformat each matched element
        return this.each(function (index) {

            plugin.options = $.meta
                                    ? $.extend(plugin.options, $(this).data())
                                    : plugin.options;

            plugin._debug("BEGIN: " + plugin.identity() + " for element " + index);

            plugin._render($(this));

            plugin._debug("END: " + plugin.identity() + " for element " + index);
        });

    },
    drawLine: function (data) {
        plugin._drawLine(data.element, data.scale, data.rows, data.columns, data.color, data.width, data.nodes);
    },
};

$.fn.subwayMap = function (method) {

    // Method calling logic
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.tooltip');
    }

};

})(jQuery);

Tests:

test1
1
test2
2

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test1
test2

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

A big code snippet!

After analyzing the HTML code, I noticed that it contains two `<ul>` elements with different `data-color` attributes and labels ("test2" and "test3"). Each list item (`<li>`) within these lists has a `data-coords` attribute.

The data seems to be related to a subway map visualization. The `data-coords` values appear to represent coordinates (x, y) on the map.

To answer your question without knowing more context, I'll provide some general observations:

1. **Subway Map Visualization**: The HTML code appears to be generating a subway map visualization using JavaScript and jQuery UI.
2. **Data Structure**: The `<ul>` elements contain list items with `data-coords` attributes, suggesting that the data is being used to display points or markers on the map.
3. **Benchmarking Data**: The "Individual test cases" section contains two benchmarking definitions with corresponding test names ("test1" and "test2"). These might be related to performance testing or optimization of the subway map visualization.

Without more information about the specific requirements or goals of this project, I can only provide general insights. If you'd like to share more context or clarify what's being asked, I'll do my best to help!

Related benchmarks:

Subway Canvas Check (version: 0)

Canvas' are slow in chrome. Hoping this will help spot problems?

Comparing performance of: test1 vs test2

Created: 9 years ago by: Guest

Jump to the latest result

test1

test2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):