D3 Examples - US Trade Deficit

xxxxxxxxxx
 
<!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">
​
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
​
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/math/trigonometry.js"></script>
​
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/svg/arc.js"></script>
​
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/core/functor.js"></script>
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/core/source.js"></script>
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/core/target.js"></script>
​
​
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/layout/arc-chord.js"></script>
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/d3/svg/arc-chord.js"></script>
​
    <script type="text/javascript" src="https://www.brightpointinc.com/interactive/ustrade/scripts/brightpoint/gradients.js"></script>
​
    <script src="https://www.google-analytics.com/urchin.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        _uacct = "UA-173014-2";
        urchinTracker();
    </script>
​
</head>
<body>
​
<div id="bpg" >
​
    <!--[if IE 6]>
    <div id="bpg-error">
        <p>1 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;">
        </div>
    <![endif]-->
​
    <!--[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]-->
​
    <!--[if IE 9]>
    <div id="bpg-chartFrame">
    <![endif]-->
​
    <!--[if !IE]>
    <div id="bpg-chartFrame">
    <![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>
​
    <script type="text/javascript">
    
        
        initialize();
​
        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>
​
    