US Trade Deficit

This example from Brightpoint inc website has a chord visualization with dynamic SVG elements. VisDock has been integrated into the original source (link) with only a few additional lines. For more information about VisDock, please cick on the link.

<!DOCTYPE html>
<!---

TO DO:

-- Clear transitions on pause

-- Add graceful browser degradation framework

-->

<html>
<head>
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>US Trade Deficit</title>
    <link type="text/css" rel="stylesheet" href="style.css">

</head>
<body>

<!--[if IE 7]>
    <div id="bpg-error">
        <p>2 This interactive graphic requires a browser with SVG support, such as <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.apple.com/safari/download/">Safari</a> or the latest <a href="https://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9</a>. </p>
        <img src="images/browserCheck.jpg" alt="Error">
        <div id="bpg-chartFrame" style="display:none;">

<![endif]-->

<!--[if IE 8]>
    <div id="bpg-error">
        <p>3 This interactive graphic requires a browser with SVG support, such as <a href="https://www.google.com/chrome">Chrome</a>, <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.apple.com/safari/download/">Safari</a> or the latest <a href="https://windows.microsoft.com/en-US/internet-explorer/products/ie/home">Internet Explorer 9</a>. </p>
        <img src="images/browserCheck.jpg" alt="Error">
        <div id="bpg-chartFrame" style="display:none;">

<![endif]-->

<div id="mainDiv">
        <div id="svgDiv"></div>
        <div id="imgDiv" style="position:absolute; top:50px;">
            <img id="playPause" src="https://www.brightpointinc.com/interactive/ustrade/images/pause_bw.png" width="24" height="24"/>
        </div>
        <div style="position:absolute; left:5px; top:33px;">
            <a href="https://www.brightpointinc.com">
                <img src="https://www.brightpointinc.com/interactive/images/bp_mark.png">
            </a>
        </div>
        <div id="headerRight" style="width:300px; right:20px;">
            United States Trade Deficit
            <div class="hint">
                click on a timeline year to skip to that point.
            </div>
        </div>

</div>
        <div id="toolTip" class="tooltip" style="opacity:0; width:200px; height:90px; position:absolute;">
            <div id="header1" class="header3"></div>
            <div class="header-rule"></div>
            <div id="head" class="header"></div>
            <div class="header-rule"></div>
            <div  id="header2" class="header2"></div>
            <div  class="tooltipTail"></div>
        </div>

</div>
    <link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
	<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
	<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/2d.js"></script>
	<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/intersectionutilities.js"></script>
	<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.utils.js"></script>      
	<script>
		VisDock.init("#svgDiv", {width: 800, height: 800});
		AnnotatedByData.layerTypes = ["path"];
		var viewport = VisDock.getViewport();		
	</script>
    <script type="text/javascript" src="globals.js"></script>
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/app/initialize.js"></script>
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/app/events.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/app/_buildchords.js"></script>
    <script type="text/javascript" src="update.js"></script>

fetchData();

function run() {

if (month < 11) month++; else {
                month=0;
                if (year < countriesGrouped.length-1) year++;
            }
            if (month==maxMonth && year==maxYear)  {
                month=0;
                year=0;
            }
            else {
                update(year,month);
            }
        }

VisDock.eventHandler = {
	getHitsPolygon : function(points, inclusive) {
		var shapebound = new createPolygon(points);
		return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
	},
	getHitsLine : function(points, inclusive) {
		var shapebound = new createLine(points);
		return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
	},
	getHitsEllipse : function(points, inclusive) {
		var shapebound = new createEllipse(points);
		return shapebound.intersectPath(d3.selectAll("path")[0], inclusive)
	},
	setColor : function(hits) {
		QueryManager.layers[num - 1] = [];
		for (var i = 0; i < hits.length; i++) {
			var str = hits[i].getAttributeNS(null, "transform");
			var d = hits[i].getAttributeNS(null, "d")
			QueryManager.layers[num - 1][i] = d3.select(hits[i].parentNode).append("path").attr("transform", str)
				.attr("d", d)
				.attr("style", "fill: " + VisDock.color[num-1] + "; stroke:" + VisDock.color[num - 1] + "; opacity: 0.5; pointer-events: none")
				.attr("id", "_" + hits[i].getAttributeNS(null, "id"))
				.attr("class", "VisDockPathLayer")
		}
	},
	changeColor : function(color, query, index) {
		var vis = VisDock.utils.getQueryVisibility(index);
		for (var i = 0; i < query.length; i++) {
			query[i][0][0].setAttributeNS(null, "style", "stroke: " + color + "; fill:none; opacity: " + vis)
		}
	},
	changeVisibility : function(vis, query, index) {
		for (var i = 0; i < query.length; i++) {
			var color = query[i][0][0].getAttributeNS(null, "style").split(";")[1]
			query[i][0][0].setAttributeNS(null, "style", "fill: none;" + color + "; opacity: " + vis)
		}
	},
	removeColor : function(hits, index) {
		for (var i = 0; i < hits.length; i++) {
			hits[i].remove();
		}
	},
	QueryClick : function(query, index) {

}
}
BirdView.init(viewport, 800, 800)
d3.select(self.frameElement).style("width", "800px")
d3.select(self.frameElement).style("height", "800px")
    </script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/math/trigonometry.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/svg/arc.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/core/functor.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/core/source.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/core/target.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/layout/arc-chord.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/d3/svg/arc-chord.js to a secure url

Modified http://www.brightpointinc.com/interactive/ustrade/scripts/brightpoint/gradients.js to a secure url

Modified http://www.google-analytics.com/urchin.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js to a secure url