Skip to content

Instantly share code, notes, and snippets.

@kylenstone
Forked from mbostock/.block
Created March 2, 2020 02:45
Show Gist options
  • Select an option

  • Save kylenstone/e85bd31a94b4e50e0961edb70a18c95d to your computer and use it in GitHub Desktop.

Select an option

Save kylenstone/e85bd31a94b4e50e0961edb70a18c95d to your computer and use it in GitHub Desktop.

Revisions

  1. @mbostock mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. @mbostock mbostock revised this gist Oct 30, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <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 w = 960,
  3. @mbostock mbostock revised this gist Jun 11, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <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 w = 960,
  4. @mbostock mbostock revised this gist Apr 6, 2013. 1 changed file with 9 additions and 16 deletions.
    25 changes: 9 additions & 16 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,15 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Force-Directed Symbols</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.25.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.25.0"></script>
    </head>
    <body>
    <script type="text/javascript">
    <meta charset="utf-8">
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var w = 960,
    h = 500,
    nodes = [],
    node;

    var vis = d3.select("body").append("svg:svg")
    var vis = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);

    @@ -41,18 +36,16 @@

    vis.selectAll("path")
    .data(nodes)
    .enter().append("svg:path")
    .enter().append("path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("d", d3.svg.symbol()
    .size(function(d) { return d.size; })
    .type(function(d) { return d.type; }))
    .size(function(d) { return d.size; })
    .type(function(d) { return d.type; }))
    .style("fill", "steelblue")
    .style("stroke", "white")
    .style("stroke-width", "1.5px")
    .call(force.drag);

    }, 1000);

    </script>
    </body>
    </html>
    </script>
  5. @mbostock mbostock revised this gist Dec 20, 2012. No changes.
  6. @mbostock mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  7. @mbostock mbostock revised this gist Jul 3, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -46,8 +46,8 @@
    .attr("d", d3.svg.symbol()
    .size(function(d) { return d.size; })
    .type(function(d) { return d.type; }))
    .style("fill", "#fff")
    .style("stroke", "steelblue")
    .style("fill", "steelblue")
    .style("stroke", "white")
    .style("stroke-width", "1.5px")
    .call(force.drag);

  8. @mbostock mbostock revised this gist Jul 3, 2011. 1 changed file with 12 additions and 2 deletions.
    14 changes: 12 additions & 2 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -29,18 +29,28 @@
    });

    setInterval(function(){
    nodes.push({shape: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)]});

    // Add a new random shape.
    nodes.push({
    type: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)],
    size: Math.random() * 300 + 100
    });

    // Restart the layout.
    force.start();

    vis.selectAll("path")
    .data(nodes)
    .enter().append("svg:path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("d", d3.svg.symbol().type(function(d) { return d.shape; }))
    .attr("d", d3.svg.symbol()
    .size(function(d) { return d.size; })
    .type(function(d) { return d.type; }))
    .style("fill", "#fff")
    .style("stroke", "steelblue")
    .style("stroke-width", "1.5px")
    .call(force.drag);

    }, 1000);

    </script>
  9. @mbostock mbostock revised this gist Jul 3, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@
    .data(nodes)
    .enter().append("svg:path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("d", d3.svg.symbol().shape(function(d) { return d.shape; }))
    .attr("d", d3.svg.symbol().type(function(d) { return d.shape; }))
    .style("fill", "#fff")
    .style("stroke", "steelblue")
    .style("stroke-width", "1.5px")
  10. @mbostock mbostock created this gist Jul 3, 2011.
    48 changes: 48 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Force-Directed Symbols</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.25.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.25.0"></script>
    </head>
    <body>
    <script type="text/javascript">

    var w = 960,
    h = 500,
    nodes = [],
    node;

    var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

    var force = d3.layout.force()
    .nodes(nodes)
    .links([])
    .size([w, h]);

    force.on("tick", function(e) {
    vis.selectAll("path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    });

    setInterval(function(){
    nodes.push({shape: d3.svg.symbolTypes[~~(Math.random() * d3.svg.symbolTypes.length)]});
    force.start();

    vis.selectAll("path")
    .data(nodes)
    .enter().append("svg:path")
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
    .attr("d", d3.svg.symbol().shape(function(d) { return d.shape; }))
    .style("fill", "#fff")
    .style("stroke", "steelblue")
    .style("stroke-width", "1.5px")
    .call(force.drag);
    }, 1000);

    </script>
    </body>
    </html>