Skip to content

Instantly share code, notes, and snippets.

@coderextreme

coderextreme/README.md

Last active January 11, 2016 01:49
Download ZIP

Revisions

  1. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -142,7 +142,7 @@
    })
    .attr("xlink:href", function(d) { return (d.depth == 1 ? "#curvedPath" : null); })
    .attr("fill", function(d, i) { return color(map(d.name)); } )
    .style("font-size", min/50 + "px")
    .style("font-size", min/45 + "px")
    .text(function(d) { return (d.depth == 1 ? d.name : ""); });

    var g = node.append("svg:g")
    @@ -158,7 +158,7 @@
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? "" : "rotate(180)"; })
    .style("font-size", min/50 + "px")
    .style("font-size", min/45 + "px")
    .text(function(d) { return (d.depth == 2 ? d.name : ""); })

    // minor links
  2. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -107,7 +107,7 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return height/7; })
    .outerRadius(function(d,i) {return min/7; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

  3. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -125,7 +125,7 @@

    var cluster = d3.layout.cluster()
    .separation(function(d) { return 1;})
    .size([360, ry/2])
    .size([360, min/4])
    .sort(null);

    var nodes = cluster.nodes(json);
  4. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -147,7 +147,7 @@

    var g = node.append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")"; });

    g.append("svg:circle")
    .attr("r", function(d) { return d.size * min / 900; })
    @@ -157,7 +157,7 @@
    .attr("dx", function(d) { return d.x < 180 ? 18 : -18; })
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(" + d.y/min + ")" : "rotate(180) translate(" + (d.y/min) + ")"; })
    .attr("transform", function(d) { return d.x < 180 ? "" : "rotate(180)"; })
    .style("font-size", min/50 + "px")
    .text(function(d) { return (d.depth == 2 ? d.name : ""); })

    @@ -197,7 +197,7 @@
    if (o.depth == 2 && count[o.name] > 1) {
    o.x += 2.5;
    }
    return "rotate(" + (o.x - 90) + ")translate(" + d.target.y + ")";
    return "rotate(" + (o.x - 90) + ") translate(" + d.target.y + ")";
    })
    .append("svg:circle")
    .attr("r", function(d) { return d.source.size * min / 900; })
  5. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -71,7 +71,7 @@
    });
    // once the big circles have been plotted, move y inward
    if (d.depth == 2) {
    d.y /= 1.25;
    d.y /= 1.15;
    }
    });
    json.forEach(function(d) {
    @@ -107,7 +107,7 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return min/7; })
    .outerRadius(function(d,i) {return height/7; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

  6. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 9 additions and 5 deletions.
    14 changes: 9 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -71,7 +71,7 @@
    });
    // once the big circles have been plotted, move y inward
    if (d.depth == 2) {
    d.y -= 28;
    d.y /= 1.25;
    }
    });
    json.forEach(function(d) {
    @@ -107,7 +107,7 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return (height+width)/11.5; })
    .outerRadius(function(d,i) {return min/7; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    @@ -125,7 +125,7 @@

    var cluster = d3.layout.cluster()
    .separation(function(d) { return 1;})
    .size([360, rm - 170])
    .size([360, ry/2])
    .sort(null);

    var nodes = cluster.nodes(json);
    @@ -142,11 +142,12 @@
    })
    .attr("xlink:href", function(d) { return (d.depth == 1 ? "#curvedPath" : null); })
    .attr("fill", function(d, i) { return color(map(d.name)); } )
    .style("font-size", min/50 + "px")
    .text(function(d) { return (d.depth == 1 ? d.name : ""); });

    var g = node.append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" +d.y + ")"; });
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; });

    g.append("svg:circle")
    .attr("r", function(d) { return d.size * min / 900; })
    @@ -156,9 +157,11 @@
    .attr("dx", function(d) { return d.x < 180 ? 18 : -18; })
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(" + d.y/min + ")" : "rotate(180) translate(" + (-d.y/min) + ")"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(" + d.y/min + ")" : "rotate(180) translate(" + (d.y/min) + ")"; })
    .style("font-size", min/50 + "px")
    .text(function(d) { return (d.depth == 2 ? d.name : ""); })

    // minor links
    var count = {};
    var links = getLinks(nodes, count);
    var splines = bundle(links);
    @@ -184,6 +187,7 @@
    }
    }

    // minor circles
    center.selectAll(".circle")
    .data(links)
    .enter().append("svg:g")
  7. carlsonsolutiondesign revised this gist Jan 11, 2016. 1 changed file with 57 additions and 51 deletions.
    108 changes: 57 additions & 51 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,16 +16,7 @@
    <div style="width:100%;height:100%"></div>
    <script type="text/javascript">

    function redraw(json) {
    var width = $("div").width() || Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = $("div").height() || Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    var rx = width/2;
    var ry = height/2;

    var min = width < height ? width : height;

    var color = d3.scale.category20();

    function setup(json) {
    var domain = [];
    var range = [];
    var i = 0;
    @@ -45,45 +36,65 @@
    .domain(domain)
    .range(range);

    d3.select(window)
    .on("resize", function() {
    /*
    width = window.innerWidth;
    height = window.innerHeight;
    d3.select("svg")
    .attr("width", width)
    .attr("height", height);
    */
    d3.select("svg").remove();
    redraw(json, map);
    })

    redraw(json, map);
    }

    function getLinks(json, count) {
    var map = {};
    var other = [];

    function getLinks(json, count) {
    var map = {};
    var other = [];


    json.forEach(function(d) {
    map[d.name] = d;
    count[d.name] = 0;
    });


    json.forEach(function(d) {
    map[d.name] = d;
    count[d.name] = 0;
    json.forEach(function(d) {
    if (d.other) d.other.forEach(function(o) {
    count[o.name]++;
    other.push({source: map[d.name], target: map[o.name]});
    });
    // once the big circles have been plotted, move y inward
    if (d.depth == 2) {
    d.y -= 28;
    }
    });
    json.forEach(function(d) {
    if (d.depth == 2 && count[d.name] > 1) {
    d.x -= count[d.name] + 0.5;
    }
    });

    return other;
    }

    json.forEach(function(d) {
    if (d.other) d.other.forEach(function(o) {
    count[o.name]++;
    other.push({source: map[d.name], target: map[o.name]});
    });
    // once the big circles have been plotted, move y inward
    if (d.depth == 2) {
    d.y -= 28;
    }
    });
    json.forEach(function(d) {
    if (d.depth == 2 && count[d.name] > 1) {
    d.x -= count[d.name] + 0.5;
    }
    });

    return other;
    }

    var pi = Math.PI;
    function redraw(json, map) {
    var width = $("div").width() || Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = $("div").height() || Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    var min = width < height ? width : height;
    var rx = width/2;
    var ry = height/2;
    var rm = min/2;

    var cluster = d3.layout.cluster()
    .separation(function(d) { return 1;})
    .size([360, ry - 170])
    .sort(null);
    var color = d3.scale.category20();

    var pi = Math.PI;

    var bundle = d3.layout.bundle();

    @@ -109,20 +120,15 @@
    .attr("d", arc)
    .attr("id", "curvedPath");

    d3.select(window)
    .on("resize", function() {
    width = window.innerWidth;
    height = window.innerHeight;
    svg
    .attr("width", width)
    .attr("height", height);
    })

    var center = svg.append("svg:g")
    .attr("transform", "translate(" + rx + "," + ry + ")");

    var nodes = cluster.nodes(json);
    var cluster = d3.layout.cluster()
    .separation(function(d) { return 1;})
    .size([360, rm - 170])
    .sort(null);

    var nodes = cluster.nodes(json);
    var node = center.selectAll("g.node")
    .data(nodes)
    .enter().append("svg:g")
    @@ -150,7 +156,7 @@
    .attr("dx", function(d) { return d.x < 180 ? 18 : -18; })
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
    .attr("transform", function(d) { return d.x < 180 ? "translate(" + d.y/min + ")" : "rotate(180) translate(" + (-d.y/min) + ")"; })
    .text(function(d) { return (d.depth == 2 ? d.name : ""); })

    var count = {};
    @@ -197,7 +203,7 @@
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);
    redraw(json);
    setup(json);
    });
    });
    </script>
  8. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 169 additions and 165 deletions.
    334 changes: 169 additions & 165 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,186 +15,190 @@
    <body>
    <div style="width:100%;height:100%"></div>
    <script type="text/javascript">
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);
    var width = $("div").width() || Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = $("div").height() || Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    var rx = width/2;
    var ry = height/2;

    var min = width < height ? width : height;

    var color = d3.scale.category20();

    var domain = [];
    var range = [];
    var i = 0;
    for (ch in json.children) {
    child = json.children[ch];
    domain.push(child.name);
    range.push(i);
    for (gc in child.children) {
    grandchild = child.children[gc];
    domain.push(grandchild.name);

    function redraw(json) {
    var width = $("div").width() || Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = $("div").height() || Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    var rx = width/2;
    var ry = height/2;

    var min = width < height ? width : height;

    var color = d3.scale.category20();

    var domain = [];
    var range = [];
    var i = 0;
    for (ch in json.children) {
    child = json.children[ch];
    domain.push(child.name);
    range.push(i);
    for (gc in child.children) {
    grandchild = child.children[gc];
    domain.push(grandchild.name);
    range.push(i);
    }
    i++;
    }
    i++;
    }

    var map = d3.scale.ordinal()
    .domain(domain)
    .range(range);
    var map = d3.scale.ordinal()
    .domain(domain)
    .range(range);



    function getLinks(json, count) {
    var map = {};
    var other = [];
    function getLinks(json, count) {
    var map = {};
    var other = [];



    json.forEach(function(d) {
    map[d.name] = d;
    count[d.name] = 0;
    });


    json.forEach(function(d) {
    if (d.other) d.other.forEach(function(o) {
    count[o.name]++;
    other.push({source: map[d.name], target: map[o.name]});
    json.forEach(function(d) {
    map[d.name] = d;
    count[d.name] = 0;
    });
    // once the big circles have been plotted, move y inward
    if (d.depth == 2) {
    d.y -= 28;
    }
    });
    json.forEach(function(d) {
    if (d.depth == 2 && count[d.name] > 1) {
    d.x -= count[d.name] + 0.5;
    }
    });

    return other;
    }

    var pi = Math.PI;

    var cluster = d3.layout.cluster()
    .separation(function(d) { return 1;})
    .size([360, ry - 170])
    .sort(null);

    var bundle = d3.layout.bundle();

    var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(0.50)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * pi; });


    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return (height+width)/11.5; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    var svg = d3.select("div")
    .append("svg:svg")
    .attr("viewBox", "0 0 " + width + " " + height);

    svg.append('defs')
    .append('path')
    .attr("d", arc)
    .attr("id", "curvedPath");

    d3.select(window)
    .on("resize", function() {
    width = window.innerWidth;
    height = window.innerHeight;
    svg
    .attr("width", width)
    .attr("height", height);
    cluster.size([width, height]);
    })

    var center = svg.append("svg:g")
    .attr("transform", "translate(" + rx + "," + ry + ")");

    var nodes = cluster.nodes(json);

    var node = center.selectAll("g.node")
    .data(nodes)
    .enter().append("svg:g")

    node.append("svg:text")
    .attr("text-anchor", function(d) { return "middle"; })
    .append('textPath')
    .attr("startOffset", function(d) {
    var percent = 100*d.x/360;
    return (percent >= 50 ? percent - 50 : percent + 50) +"%";
    })
    .attr("xlink:href", function(d) { return (d.depth == 1 ? "#curvedPath" : null); })
    .attr("fill", function(d, i) { return color(map(d.name)); } )
    .text(function(d) { return (d.depth == 1 ? d.name : ""); });

    var g = node.append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" +d.y + ")"; });

    g.append("svg:circle")
    .attr("r", function(d) { return d.size * min / 900; })
    .attr("fill", function (d,i) { return color(map(d.name));});

    g.append("svg:text")
    .attr("dx", function(d) { return d.x < 180 ? 18 : -18; })
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
    .text(function(d) { return (d.depth == 2 ? d.name : ""); })

    var count = {};
    var links = getLinks(nodes, count);
    var splines = bundle(links);

    center.selectAll(".path")
    .data(links)
    .enter().append("svg:path")
    .attr("stroke", function(d) {return color(map(d.source.name));})
    .attr("fill", "none")
    .attr("class", "path")
    .attr("d", function(d, i) {
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x += 2.5;
    }
    return line(splines[i]); });

    // set o.x back
    for (i in splines) {
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x -= 2.5;
    json.forEach(function(d) {
    if (d.other) d.other.forEach(function(o) {
    count[o.name]++;
    other.push({source: map[d.name], target: map[o.name]});
    });
    // once the big circles have been plotted, move y inward
    if (d.depth == 2) {
    d.y -= 28;
    }
    });
    json.forEach(function(d) {
    if (d.depth == 2 && count[d.name] > 1) {
    d.x -= count[d.name] + 0.5;
    }
    });

    return other;
    }
    }

    center.selectAll(".circle")
    .data(links)
    .enter().append("svg:g")
    .attr("class", "circle")
    .attr("transform", function(d,i) {
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x += 2.5;
    }
    return "rotate(" + (o.x - 90) + ")translate(" + d.target.y + ")";
    var pi = Math.PI;

    var cluster = d3.layout.cluster()
    .separation(function(d) { return 1;})
    .size([360, ry - 170])
    .sort(null);

    var bundle = d3.layout.bundle();

    var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(0.50)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * pi; });


    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return (height+width)/11.5; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    var svg = d3.select("div")
    .append("svg:svg")
    .attr("viewBox", "0 0 " + width + " " + height);

    svg.append('defs')
    .append('path')
    .attr("d", arc)
    .attr("id", "curvedPath");

    d3.select(window)
    .on("resize", function() {
    width = window.innerWidth;
    height = window.innerHeight;
    svg
    .attr("width", width)
    .attr("height", height);
    })

    var center = svg.append("svg:g")
    .attr("transform", "translate(" + rx + "," + ry + ")");

    var nodes = cluster.nodes(json);

    var node = center.selectAll("g.node")
    .data(nodes)
    .enter().append("svg:g")

    node.append("svg:text")
    .attr("text-anchor", function(d) { return "middle"; })
    .append('textPath')
    .attr("startOffset", function(d) {
    var percent = 100*d.x/360;
    return (percent >= 50 ? percent - 50 : percent + 50) +"%";
    })
    .append("svg:circle")
    .attr("r", function(d) { return d.source.size * min / 900; })
    .attr("fill", function (d,i) { return color(map(d.source.name));});
    });
    .attr("xlink:href", function(d) { return (d.depth == 1 ? "#curvedPath" : null); })
    .attr("fill", function(d, i) { return color(map(d.name)); } )
    .text(function(d) { return (d.depth == 1 ? d.name : ""); });

    var g = node.append("svg:g")
    .attr("class", "node")
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" +d.y + ")"; });

    g.append("svg:circle")
    .attr("r", function(d) { return d.size * min / 900; })
    .attr("fill", function (d,i) { return color(map(d.name));});

    g.append("svg:text")
    .attr("dx", function(d) { return d.x < 180 ? 18 : -18; })
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
    .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
    .text(function(d) { return (d.depth == 2 ? d.name : ""); })

    var count = {};
    var links = getLinks(nodes, count);
    var splines = bundle(links);

    center.selectAll(".path")
    .data(links)
    .enter().append("svg:path")
    .attr("stroke", function(d) {return color(map(d.source.name));})
    .attr("fill", "none")
    .attr("class", "path")
    .attr("d", function(d, i) {
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x += 2.5;
    }
    return line(splines[i]); });

    // set o.x back
    for (i in splines) {
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x -= 2.5;
    }
    }

    center.selectAll(".circle")
    .data(links)
    .enter().append("svg:g")
    .attr("class", "circle")
    .attr("transform", function(d,i) {
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x += 2.5;
    }
    return "rotate(" + (o.x - 90) + ")translate(" + d.target.y + ")";
    })
    .append("svg:circle")
    .attr("r", function(d) { return d.source.size * min / 900; })
    .attr("fill", function (d,i) { return color(map(d.source.name));});
    }

    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);
    redraw(json);
    });
    });
    </script>
    <script type="text/javascript">
  9. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 4 additions and 5 deletions.
    9 changes: 4 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -17,10 +17,9 @@
    <script type="text/javascript">
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);
    var divNode = d3.select("div").node()
    var width = $("div").width();
    height = $("div").height() || window.innerHeight;
    if (error) return console.warn(error);
    var width = $("div").width() || Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = $("div").height() || Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
    var rx = width/2;
    var ry = height/2;

    @@ -111,7 +110,7 @@
    .attr("d", arc)
    .attr("id", "curvedPath");

    d3.select("div")
    d3.select(window)
    .on("resize", function() {
    width = window.innerWidth;
    height = window.innerHeight;
  10. coderextreme revised this gist Jan 10, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    Built with [blockbuilder.org](http://blockbuilder.org)
    Built with [blockbuilder.org](http://blockbuilder.org).
    Click on Open in a new window to see responsiveness.
  11. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    Built with [blockbuilder.org](http://blockbuilder.org)
    Built with [blockbuilder.org](http://blockbuilder.org)
    Click on Open in a new window to see responsiveness.
  12. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -198,9 +198,9 @@
    });
    });
    </script>
    <!--script type="text/javascript">
    <script type="text/javascript">
    // Hack to make this example display correctly in an iframe on bl.ocks.org
    d3.select(self.frameElement).style("height", "700px");
    </script-->
    </script>
    </body>
    </html>
  13. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 10 additions and 11 deletions.
    21 changes: 10 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,12 +19,12 @@
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);
    var divNode = d3.select("div").node()
    console.log(divNode);
    var w = $("div").width();
    h = $("div").height() || window.innerHeight;
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;
    var width = $("div").width();
    height = $("div").height() || window.innerHeight;
    var rx = width/2;
    var ry = height/2;

    var min = width < height ? width : height;

    var color = d3.scale.category20();

    @@ -98,13 +98,13 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return w/6; })
    .outerRadius(function(d,i) {return (height+width)/11.5; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    var svg = d3.select("div")
    .append("svg:svg")
    .attr("viewBox", "0 0 " + w + " " + h);
    .attr("viewBox", "0 0 " + width + " " + height);

    svg.append('defs')
    .append('path')
    @@ -115,7 +115,6 @@
    .on("resize", function() {
    width = window.innerWidth;
    height = window.innerHeight;
    console.log(w+" "+h);
    svg
    .attr("width", width)
    .attr("height", height);
    @@ -147,7 +146,7 @@
    .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" +d.y + ")"; });

    g.append("svg:circle")
    .attr("r", function(d) { return d.size; })
    .attr("r", function(d) { return d.size * min / 900; })
    .attr("fill", function (d,i) { return color(map(d.name));});

    g.append("svg:text")
    @@ -194,7 +193,7 @@
    return "rotate(" + (o.x - 90) + ")translate(" + d.target.y + ")";
    })
    .append("svg:circle")
    .attr("r", function(d) { return d.source.size; })
    .attr("r", function(d) { return d.source.size * min / 900; })
    .attr("fill", function (d,i) { return color(map(d.source.name));});
    });
    });
  14. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 14 additions and 14 deletions.
    28 changes: 14 additions & 14 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,11 +18,11 @@
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);
    var divNode = d3.select("div").node()
    var divNode = d3.select("div").node()
    console.log(divNode);
    var w = divNode.offsetWidth || window.width;
    h = divNode.offsetHeight || window.height;
    console.log(w+" "+h);
    var w = $("div").width();
    h = $("div").height() || window.innerHeight;
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;

    @@ -98,30 +98,30 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return w/20; })
    .outerRadius(function(d,i) {return w/6; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    var svg = d3.select("div")
    .append("svg:svg")
    .attr("viewBox", "0 0 " + w + " " + h);

    svg.append('defs')
    .append('path')
    .attr("d", arc)
    .attr("id", "curvedPath");

    d3.select("div")
    .on("resize", function() {
    width = d3.select("div").attr("width");
    height = d3.select("div").attr("height");
    console.log(w+" "+h);
    width = window.innerWidth;
    height = window.innerHeight;
    console.log(w+" "+h);
    svg
    .attr("width", width)
    .attr("height", height);
    cluster.size([width, height]);
    })

    svg.append('defs')
    .append('path')
    .attr("d", arc)
    .attr("id", "curvedPath");

    var center = svg.append("svg:g")
    .attr("transform", "translate(" + rx + "," + ry + ")");

    @@ -204,4 +204,4 @@
    d3.select(self.frameElement).style("height", "700px");
    </script-->
    </body>
    </html>
    </html>
  15. carlsonsolutiondesign revised this gist Jan 10, 2016. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  16. coderextreme revised this gist Jan 10, 2016. No changes.
  17. coderextreme revised this gist Jan 10, 2016. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -98,7 +98,7 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return w/6; })
    .outerRadius(function(d,i) {return w/20; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    @@ -138,7 +138,7 @@
    var percent = 100*d.x/360;
    return (percent >= 50 ? percent - 50 : percent + 50) +"%";
    })
    .attr("xlink:href", function(d) { return (d.depth == 1 ? "#curvedPath" : null); })
    .attr("xlink:href", function(d) { return (d.depth == 1 ? "#curvedPath" : null); })
    .attr("fill", function(d, i) { return color(map(d.name)); } )
    .text(function(d) { return (d.depth == 1 ? d.name : ""); });

    @@ -190,8 +190,8 @@
    var o = splines[i][3];
    if (o.depth == 2 && count[o.name] > 1) {
    o.x += 2.5;
    }
    return "rotate(" + (o.x - 90) + ")translate(" + d.target.y + ")";
    }
    return "rotate(" + (o.x - 90) + ")translate(" + d.target.y + ")";
    })
    .append("svg:circle")
    .attr("r", function(d) { return d.source.size; })
  18. coderextreme revised this gist Jan 10, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -98,7 +98,7 @@

    var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(function(d,i) {return rx/3; })
    .outerRadius(function(d,i) {return w/6; })
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

  19. coderextreme revised this gist Jan 10, 2016. No changes.
  20. coderextreme revised this gist Jan 10, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,8 +20,8 @@
    if (error) return console.warn(error);
    var divNode = d3.select("div").node()
    console.log(divNode);
    var w = divNode.offsetWidth;
    h = divNode.offsetHeight;
    var w = divNode.offsetWidth || window.width;
    h = divNode.offsetHeight || window.height;
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;
  21. coderextreme revised this gist Jan 10, 2016. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,9 +18,10 @@
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    var w = d3.select("div").width();
    h = d3.select("div").height();
    var divNode = d3.select("div").node()
    console.log(divNode);
    var w = divNode.offsetWidth;
    h = divNode.offsetHeight;
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;
  22. coderextreme revised this gist Jan 10, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,8 @@
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    var w = d3.select("div").width;
    h = d3.select("div").height;
    var w = d3.select("div").width();
    h = d3.select("div").height();
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;
  23. coderextreme revised this gist Jan 10, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,8 +19,8 @@
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    var w = d3.select("div").attr("width");
    h = d3.select("div").attr("height");
    var w = d3.select("div").width;
    h = d3.select("div").height;
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;
  24. coderextreme revised this gist Jan 10, 2016. No changes.
  25. coderextreme revised this gist Jan 10, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@

    var w = d3.select("div").attr("width");
    h = d3.select("div").attr("height");
    alert(w+" "+h);
    console.log(w+" "+h);
    var rx = w/2;
    var ry = h/2;

    @@ -109,6 +109,7 @@
    .on("resize", function() {
    width = d3.select("div").attr("width");
    height = d3.select("div").attr("height");
    console.log(w+" "+h);
    svg
    .attr("width", width)
    .attr("height", height);
  26. coderextreme revised this gist Jan 10, 2016. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -3,10 +3,14 @@
    <head>
    <meta charset="utf-8">
    <title>Double Hierarchy DAG</title>
    <style>
    body {
    width:100%;
    height:100%;
    }
    </style>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    </head>
    <body>
    <div style="width:100%;height:100%"></div>
  27. coderextreme revised this gist Jan 10, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,14 +9,15 @@
    href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    </head>
    <body>
    <div></div>
    <div style="width:100%;height:100%"></div>
    <script type="text/javascript">
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    var w = d3.select("div").attr("width");
    h = d3.select("div").attr("height");
    alert(w+" "+h);
    var rx = w/2;
    var ry = h/2;

  28. coderextreme revised this gist Jan 10, 2016. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,7 @@
    <body>
    <div></div>
    <script type="text/javascript">
    $(document).ready(function() {
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    @@ -188,11 +189,12 @@
    .append("svg:circle")
    .attr("r", function(d) { return d.source.size; })
    .attr("fill", function (d,i) { return color(map(d.source.name));});
    });
    });
    </script>
    <script type="text/javascript">
    <!--script type="text/javascript">
    // Hack to make this example display correctly in an iframe on bl.ocks.org
    d3.select(self.frameElement).style("height", "700px");
    </script>
    </script-->
    </body>
    </html>
  29. coderextreme revised this gist Jan 10, 2016. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,8 +14,8 @@
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    var w = document.innerWidth,
    h = document.innerHeight;
    var w = d3.select("div").attr("width");
    h = d3.select("div").attr("height");
    var rx = w/2;
    var ry = h/2;

  30. coderextreme revised this gist Jan 10, 2016. 1 changed file with 7 additions and 6 deletions.
    13 changes: 7 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,12 +9,13 @@
    href="https://fonts.googleapis.com/css?family=Open+Sans:400,600">
    </head>
    <body>
    <div></div>
    <script type="text/javascript">
    d3.json("sw.json", function(error, json) {
    if (error) return console.warn(error);

    var w = window.innerWidth,
    h = window.innerHeight;
    var w = document.innerWidth,
    h = document.innerHeight;
    var rx = w/2;
    var ry = h/2;

    @@ -94,14 +95,14 @@
    .startAngle(function(d,i) { return 0;})
    .endAngle(function(d) { return 2*pi;});

    var svg = d3.select("body")
    var svg = d3.select("div")
    .append("svg:svg")
    .attr("viewBox", "0 0 " + w + " " + h);

    d3.select(window)
    d3.select("div")
    .on("resize", function() {
    width = window.innerWidth;
    height = window.innerHeight;
    width = d3.select("div").attr("width");
    height = d3.select("div").attr("height");
    svg
    .attr("width", width)
    .attr("height", height);