Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from caged/index.html
Last active February 9, 2016 00:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbostock/939927 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbostock/939927 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Oct 31, 2015. 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
    @@ -20,7 +20,7 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
  3. mbostock revised this gist Jun 11, 2015. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var width = 960,
    @@ -37,6 +37,8 @@
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    d3.json("network.json", function(error, nodes) {
    if (error) throw error;

    var nodeByName = d3.map(),
    links = [];

  4. mbostock revised this gist Jun 18, 2013. 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.
  5. mbostock revised this gist Jun 18, 2013. 2 changed files with 93 additions and 75 deletions.
    162 changes: 87 additions & 75 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,81 +1,93 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="https://github.com/Caged/d3/raw/master/d3.js"></script>
    <style type="text/css">

    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    <meta charset="utf-8">
    <style>

    circle {
    fill: #000;
    stroke: #fff;
    stroke-width: 2px;
    }

    path {
    fill: lightsteelblue;
    stroke: steelblue;
    fill: none;
    stroke: #999;
    stroke-width: 1.5px;
    }

    text {
    font: bold 10px sans-serif;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
    height = 500,
    radius = 240;

    var angle = d3.scale.ordinal()
    .rangePoints([0, 360], 1);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    d3.json("network.json", function(error, nodes) {
    var nodeByName = d3.map(),
    links = [];

    nodes.forEach(function(d) { nodeByName.set(d.name, d); });

    nodes.forEach(function(source) {
    source.connections.forEach(function(target) {
    links.push({source: source, target: nodeByName.get(target)});
    });
    });

    angle.domain(nodes.map(function(d) { return d.name; }));

    var link = svg.append("g")
    .attr("class", "links")
    .selectAll("path")
    .data(links)
    .enter().append("path")
    .attr("d", curve);

    var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("g")
    .data(nodes)
    .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + angle(d.name) + ")translate(" + radius + ",0)"; });

    node.append("circle")
    .attr("r", 5);

    node.append("text")
    .attr("dy", ".35em")
    .attr("x", 6)
    .text(function(d) { return d.name; })
    .filter(function(d) { return (angle(d.name) + 90) % 360 > 180; }) // flipped
    .attr("x", -6)
    .attr("transform", "rotate(-180)")
    .style("text-anchor", "end");
    });

    function curve(link) {
    var a0 = angle(link.source.name) / 180 * Math.PI,
    a1 = angle(link.target.name) / 180 * Math.PI,
    x0 = Math.cos(a0) * radius, y0 = Math.sin(a0) * radius,
    x1 = Math.cos(a1) * radius, y1 = Math.sin(a1) * radius,
    dx = x0 - x1,
    dy = y0 - y1,
    l = Math.sqrt(dx * dx + dy * dy);
    return "M" + x0 + "," + y0
    + "A" + l * 2 + "," + l * 2 + " 0 0 1 "
    + x1 + "," + y1;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">
    var data = [
    {name:'bob', connections: ['jane', 'tom', 'sue']},
    {name:'jane', connections: ['bob', 'sue']},
    {name:'sue', connections: ['tom', 'bob', 'jane', 'tom']},
    {name: 'tom', connections: []}
    ]

    var w = 300,
    h = 300,
    angle = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, 2 * Math.PI]),
    line = d3.svg.chord()
    .startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
    .endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
    .radius(h / 2 - 20),
    angles = {},
    connections = []


    data.forEach(function(d, i) {
    var a = angle(i)
    angles[d.name] = {
    startAngle: a,
    endAngle: a + angle.rangeBand() / 2
    }
    })

    data.forEach(function(p) {
    p.connections.forEach(function(c) {
    connections.push({
    source: angles[p.name],
    target: angles[c]
    })
    })
    })


    var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

    vis.selectAll("path")
    .data(data)
    .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(h / 2 - 20)
    .outerRadius(h / 2 - 10)
    .startAngle(function(d, i) { return angles[d.name].startAngle })
    .endAngle(function(d, i) { return angles[d.name].endAngle; }));

    vis.selectAll('path.c')
    .data(connections)
    .enter().append('svg:path')
    .attr('d', line)
    .attr('class', 'c')
    </script>
    </body>
    </html>
    </script>
    6 changes: 6 additions & 0 deletions network.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    [
    {"name": "Bob", "connections": ["Jane", "Tom", "Sue"]},
    {"name": "Jane", "connections": ["Bob", "Sue"]},
    {"name": "Sue", "connections": ["Tom", "Bob", "Jane", "Tom"]},
    {"name": "Tom", "connections": []}
    ]
  6. mbostock revised this gist Apr 24, 2011. 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
    @@ -13,7 +13,6 @@

    path {
    fill: lightsteelblue;
    fill-opacity: .2;
    stroke: steelblue;
    }

    @@ -31,7 +30,10 @@
    var w = 300,
    h = 300,
    angle = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, 2 * Math.PI]),
    line = d3.svg.chord().radius(h / 2 - 20),
    line = d3.svg.chord()
    .startAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
    .endAngle(function(d) { return (d.startAngle + d.endAngle) / 2; })
    .radius(h / 2 - 20),
    angles = {},
    connections = []

  7. mbostock revised this gist Apr 24, 2011. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,6 +13,7 @@

    path {
    fill: lightsteelblue;
    fill-opacity: .2;
    stroke: steelblue;
    }

  8. mbostock revised this gist Apr 24, 2011. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,12 +30,7 @@
    var w = 300,
    h = 300,
    angle = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, 2 * Math.PI]),
    line = d3.svg.chord()
    .source(function(d) { return d.source; })
    .target(function(d) { return d.target; })
    .startAngle(Number)
    .endAngle(Number)
    .radius(h / 2 - 20),
    line = d3.svg.chord().radius(h / 2 - 20),
    angles = {},
    connections = []

  9. mbostock revised this gist Apr 24, 2011. 1 changed file with 6 additions and 3 deletions.
    9 changes: 6 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,9 +30,12 @@
    var w = 300,
    h = 300,
    angle = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, 2 * Math.PI]),
    line = d3.svg.diagonal()
    .source(function(d) { return { x: 0, y: 0 }})
    .target(function(d) { return { x: 0, y: 0 }})
    line = d3.svg.chord()
    .source(function(d) { return d.source; })
    .target(function(d) { return d.target; })
    .startAngle(Number)
    .endAngle(Number)
    .radius(h / 2 - 20),
    angles = {},
    connections = []

  10. @caged caged renamed this gist Apr 24, 2011. 1 changed file with 0 additions and 0 deletions.
    0 test.html → index.html
    View file
    File renamed without changes.
  11. @caged caged created this gist Apr 24, 2011.
    80 changes: 80 additions & 0 deletions test.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="https://github.com/Caged/d3/raw/master/d3.js"></script>
    <style type="text/css">

    html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }

    path {
    fill: lightsteelblue;
    stroke: steelblue;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">
    var data = [
    {name:'bob', connections: ['jane', 'tom', 'sue']},
    {name:'jane', connections: ['bob', 'sue']},
    {name:'sue', connections: ['tom', 'bob', 'jane', 'tom']},
    {name: 'tom', connections: []}
    ]

    var w = 300,
    h = 300,
    angle = d3.scale.ordinal().domain(d3.range(0, data.length)).rangeBands([0, 2 * Math.PI]),
    line = d3.svg.diagonal()
    .source(function(d) { return { x: 0, y: 0 }})
    .target(function(d) { return { x: 0, y: 0 }})
    angles = {},
    connections = []


    data.forEach(function(d, i) {
    var a = angle(i)
    angles[d.name] = {
    startAngle: a,
    endAngle: a + angle.rangeBand() / 2
    }
    })

    data.forEach(function(p) {
    p.connections.forEach(function(c) {
    connections.push({
    source: angles[p.name],
    target: angles[c]
    })
    })
    })


    var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

    vis.selectAll("path")
    .data(data)
    .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(h / 2 - 20)
    .outerRadius(h / 2 - 10)
    .startAngle(function(d, i) { return angles[d.name].startAngle })
    .endAngle(function(d, i) { return angles[d.name].endAngle; }));

    vis.selectAll('path.c')
    .data(connections)
    .enter().append('svg:path')
    .attr('d', line)
    .attr('class', 'c')
    </script>
    </body>
    </html>