System Operator Transmission Owner Codes

​

<meta charset="utf-8">

​

​

<style>

    .node {

        cursor: pointer;

    }

​

    .node circle {

        fill: #fff;

        stroke: steelblue;

        stroke-width: 3px;

    }

​

    .found {

        fill: #ff4136;

        stroke: #ff4136;

    }

    .node text {

        font: 13px Tahoma;

    font-weight: bold;

    fill: #6d6d6d;

    }

​

    .link {

        fill: none;

        stroke: #ededed;

        stroke-width: 2px;

    }

    .search {

      width: 50%;    

    }

  div.tooltip {

  position: absolute;

  padding: 8px;

  text-align: left;

  font: 12px "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif !important;

  background: rgba(0, 0, 0, .87);

  color: #fff;

  border: 0px;

  border-radius: 8px;

 // pointer-events: none;

}

</style>

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.css"></link>

​

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.0/select2.min.js"></script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/frasermacmillangithub/d3-hierarchy/test/data/flare.json"></script>

​

​

<div id="search"></div>

<script type="text/javascript">

  // Fraser MacMillan

    // Built using a combination of work from the D3 and bl.ocks community

    //basically a way to get the path to an object

    function searchTree(obj,search,path){

        if(obj.name === search){ //if search is found return, add the object to the path and return it

            path.push(obj);

            return path;

        }

        else if(obj.children || obj._children){ //if children are collapsed d3 object will have them instantiated as _children

            var children = (obj.children) ? obj.children : obj._children;

            for(var i=0;i<children.length;i++){

                path.push(obj);// we assume this path is the right one

                var found = searchTree(children[i],search,path);

                if(found){// we were right, this should return the bubbled-up path from the first if statement

                    return found;

                }

                else{//we were wrong, remove this parent from the path and continue iterating

                    path.pop();

                }

            }

        }

        else{//not the right object, return false so it will continue to iterate in the loop

            return false;

        }

    }

​

    function extract_select2_data(node,leaves,index){

            if (node.children){

                for(var i = 0;i<node.children.length;i++){

                    index = extract_select2_data(node.children[i],leaves,index)[0];

                }

            }

            else {

                leaves.push({id:++index,text:node.name});

            }

            return [index,leaves];

    }

​

    var div = d3.select("body")

        .append("div") // declare the tooltip div

        .attr("class", "tooltip")

        .style("opacity", 0);

​

    var margin = {top: 0, right: 120, bottom: 20, left: 120},

        width = 2060 - margin.right - margin.left,

        height = 1026 - margin.top - margin.bottom;

​

    var i = 0,

        duration = 1979,

        root,

        select2_data;

​

    var diameter = 1960;

​

    var tree = d3.layout.tree()

        .size([height, width]);

​

    var diagonal = d3.svg.diagonal()

        .projection(function(d) { return [d.y, d.x]; });

​

var svg = d3.select("body").append("svg")

    .attr("width", width + margin.right + margin.left)

    .attr("height", height + margin.top + margin.bottom)

    .attr("style", "outline: thick solid steelblue", )

  .append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append('svg:image')

.attr({

  'xlink:href': 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/National_Grid.svg/2000px-National_Grid.svg.png',  // can also add svg file here

  x:  -100,

  y: -20,

  width: 250,

  height: 100

});

​

​

​

​

    //recursively collapse children

    function collapse(d) {

        if (d.children) {

            d._children = d.children;

            d._children.forEach(collapse);

            d.children = null;

        }

    }

​

    // Toggle children on click.

    function click(d) {

        if (d.children) {

            d._children = d.children;

            d.children = null;

        }

        else{

            d.children = d._children;

            d._children = null;

        }

        update(d);

    }

​

    function openPaths(paths){

        for(var i =0;i<paths.length;i++){

            if(paths[i].id !== "1"){//i.e. not root

                paths[i].class = 'found';

                if(paths[i]._children){ //if children are hidden: open them, otherwise: don't do anything

                    paths[i].children = paths[i]._children;

                    paths[i]._children = null;

                }

                update(paths[i]);

            }

        }

    }

​

​

//fdwad 

d3.json("FrasSTC.json", function(error,values){

        root = values;

        select2_data = extract_select2_data(values,[],0)[1];//I know, not the prettiest...

        root.x0 = height / 2;

        root.y0 = 0;

        root.children.forEach(collapse);

        update(root);

        //init search box

        $("#search").select2({

            data: select2_data,

            containerCssClass: "search"

        });

    });

    //attach search box listener

    $("#search").on("select2-selecting", function(e) {

        var paths = searchTree(root,e.object.text,[]);

        if(typeof(paths) !== "undefined"){

            openPaths(paths);

        }

        else{

            alert(e.object.text+" not found!");

        }

    })

​

    d3.select(self.frameElement).style("height", "798px");

​

    function update(source) {

        // Compute the new tree layout.

        var nodes = tree.nodes(root).reverse(),

        links = tree.links(nodes);

​

        // Normalize for fixed-depth.

        nodes.forEach(function(d) { d.y = d.depth * 600; });

​

        // Update the nodes…

        var node = svg.selectAll("g.node")

            .data(nodes, function(d) { return d.id || (d.id = ++i); });

​

        // Enter any new nodes at the parent's previous position.

        var nodeEnter = node.enter().append("g")

            .attr("class", "node")

        .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })

        .on("click", click)

   .on("mouseover", function(d) {

                                if (d.dx =="off") {

                                 }

     else{

                 div.transition()

                .duration(1000)

                .style("opacity", 1);

                div .html(' Link to Document: '+"</a>" + "</a>"  + "<br/>"+'<a href= "'+d.dy+'">' + d.name + "</a>")

                .style("left", (d3.event.pageX) + "px")

                .style("top", (d3.event.pageY + 15) + "px") ;

     }

   })

             .on("mouseout", function(d) {

           div.transition()

                .duration(2500)

                .style("opacity", 0);

        });

    ;

    ;

​

​

        nodeEnter.append("circle")

        .attr("r", 1e-6)

        .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

​

        nodeEnter.append("text")

            .attr("x", function(d) { return d.children || d._children ? -10 : 10; })

            .attr("dy", ".35em")

            .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })

            .text(function(d) { return d.name; })

            .style("fill-opacity", 1e-6);

​

        // Transition nodes to their new position.

        var nodeUpdate = node.transition()

            .duration(duration)

            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

​

        nodeUpdate.select("circle")

            .attr("r", 8)

            .style("fill", function(d) {

                if(d.class === "found"){

                    return "#a539fe"; //red

                }

                else if(d._children){

                    return "lightsteelblue";

                }

                else{

                    return "#fff";

                }

            })

            .style("stroke", function(d) {

                if(d.class === "found"){

                    return "##6b3d89"; //red

                }

        });

​

        nodeUpdate.select("text")

            .style("fill-opacity", 1);

​

        // Transition exiting nodes to the parent's new position.

        var nodeExit = node.exit().transition()

            .duration(duration)

            .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })

            .remove();

​

        nodeExit.select("circle")

            .attr("r", 1e-6);

​

        nodeExit.select("text")

            .style("fill-opacity", 1e-6);

​

        // Update the links…

        var link = svg.selectAll("path.link")

            .data(links, function(d) { return d.target.id; });

​

        // Enter any new links at the parent's previous position.

        link.enter().insert("path", "g")

            .attr("class", "link")

            .attr("d", function(d) {

                var o = {x: source.x0, y: source.y0};

                return diagonal({source: o, target: o});

            });

​

        // Transition links to their new position.

        link.transition()

            .duration(duration)

            .attr("d", diagonal)

            .style("stroke",function(d){

                if(d.target.class==="found"){

                    return "#dd39fe";

                }

            });

​

        // Transition exiting nodes to the parent's new position.

        link.exit().transition()

            .duration(duration)

            .attr("d", function(d) {

                var o = {x: source.x, y: source.y};

                return diagonal({source: o, target: o});

            })

            .remove();

​

        // Stash the old positions for transition.

        nodes.forEach(function(d) {

            d.x0 = d.x;

            d.y0 = d.y;

          });

    }

  var width = 449;

    var height = 249;

    var word = "System Operator Transmission Owner Code";

​

​

// draw a rectangle

svg.append("a")

    .attr("xlink:href", "https://www.nationalgrid.com/uk/electricity/codes/system-operator-transmission-owner-code?overview"+word)

    .append("rect")  

    .attr("x", -100)

    .attr("y", 100)

    .attr("height", 40)

    .attr("width", 300)

    .style("fill", "white")

    .attr("rx", 10)

    .attr("ry", 10);

​

// draw text on the screen

svg.append("text")

    .attr("x", 50)

    .attr("y", 60)

    .style("fill", "black")

    .style("font-family", "Tahoma")

    .style("font-weight", "bold")

    .style("font-size", "15px")

    .attr("dy", ".35em")

    .attr("text-anchor", "middle")

    .style("pointer-events", "none")

    .text(word);

  svg.append("text")

    .attr("x", 40)

    .attr("y", 80)

    .style("fill", "steelblue")

    .style("font-family", "Tahoma")

    .style("font-size", "14px")

    .attr("dy", ".35em")

    .attr("text-anchor", "middle")

    .style("pointer-events", "none")

    .text("fraser.macmillan@nationalgrid.com");

</script>

</html>