D3 Examples - d3

xxxxxxxxxx
 
​
<!DOCTYPE html>
​
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Glyph Edges</title>
<style>
  
 body {
   overflow: hidden;
  }
.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}
​
.node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}
​
.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .05;
}
​
.link:hover {
  stroke-opacity: .25;
}
​
svg {
  position: absolute;
}
​
canvas {
  position: absolute;
}
​
​
</style>
</head>
<body>
<svg width="1500" height="1500" ></svg>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script src="d3-glyphEdge.js" charset="utf-8" type="text/javascript"></script>
​
    <script type="text/javascript">
​
set3 = ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"];
​
d3.json("network.json", makeViz)
​
function makeViz(data) {
​
  overallFrequency = 0.5;
​
data.links.forEach(function (d) {
  //These edge properties are necessary for particles
  d.particles = [];
  d.frequency = overallFrequency;
})
​
  force = d3.layout.force().links(data.links).nodes(data.nodes)
  .charge(function (d) {return (d.weight + 1) * -400})
  .linkDistance(5)
  .size([400,400])
  .gravity(2)
    .on("tick", tick)
​
  edgeTypes = ["ribbon", "arrowhead", "halfarrow", "taffy", "comet", "particle", "offset", "nail"]
​
  edgeDemo = d3.select("svg").selectAll("edgeDemo")
  .data(edgeTypes)
  .enter()
  .append("g")
  .attr("class", function (d) {return "edgeDemo " + d})
  .attr("transform", function (d, i) {return "translate(" + (i%3 * 350) + "," + (250 + (parseInt(i/3) * 350)) + ")"});
​
  edgeDemo.selectAll("g.edge").data(data.links)
    .enter()
    .append("g")
    .attr("class", "edge")
    .append("path")
    .attr("class", "edge")
    .style("fill", "darkgreen")
    .style("stroke", "black")
    .style("stroke-width", 1)
    .style("opacity", 0.75)
​
  edgeDemo.selectAll("g.node").data(data.nodes)
    .enter()
    .append("g")
    .attr("class", "node")
    .call(force.drag);
​
  edgeDemo.append("text")
    .attr("x", 100)
    .attr("y", 190)
    .style("text-anchor", "middle")
    .style("stroke", "white")
    .style("stroke-width", "2px")
    .style("stroke-opacity", .75)
    .style("font-size", "24px")
    .text(function (d) {return d})
​
  edgeDemo.append("text")
    .attr("x", 100)
    .attr("y", 190)
    .style("text-anchor", "middle")
    .style("font-size", "24px")
    .text(function (d) {return d})
​
    d3.selectAll("g.node")
    .append("circle")
    .attr("class", "node")
    .style("fill", function (d) {return set3[d.module]})
    .style("fill-opacity", 1)
    .style("stroke", "darkgray")
​
    force.start();
​
  function tick(e) {
    d3.selectAll("circle.node")
    .attr("r", function (d) {return (d.weight + 1)});
​
    d3.selectAll("g.node")
      .attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")"});
​
    d3.select("g.ribbon").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.ribbon(d, 2)})
      .style("fill", "darkred")
​
​
    d3.select("g.halfarrow").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.halfArrow(d, d.target.weight + 2, 1, 2)})
      .style("fill", "#9B817A")
​
    d3.select("g.arrowhead").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.arrowhead(d, d.target.weight + 2, 1, 2)})
      .style("fill", "#9B817A")
​
    d3.select("g.taffy").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.taffy(d, d.source.weight, d.target.weight, (d.source.weight + d.target.weight) / 8)})
      .style("fill", "pink")
​
    d3.select("g.comet").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.comet(d, d.target.weight)})
      .style("fill", "gold")
​
    d3.select("g.nail").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.nail(d, d.source.weight)})
      .style("fill", "silver")
​
    d3.select("g.offset").selectAll("path.edge")
      .attr("d", function (d) {return d3_glyphEdge.d.arrowhead(d3_glyphEdge.project.offset(d, d.source.weight, d.target.weight), d.target.weight, 0.5, 1)})
      .style("opacity", 0.25)
​
    d3.select("g.particle").selectAll("g.edge")
      .each(function (d, i) {
​
          d3_glyphEdge.mutate.particle(d, d3.select(this).select("path").node(), 3, 2);
          d3.select(this).selectAll("circle")
            .data(d.particles)
            .enter()
            .append("circle")
            .style("fill-opacity", .25)
            .attr("r", 1);
​
          d3.select(this).selectAll("circle")
            .data(d.particles)
            .exit()
            .remove();
​
          d3.select(this).selectAll("circle")
            .attr("cx", function (p) {return p.x})
            .attr("cy", function (p) {return p.y});
      })
      .select("path")
      .attr("d", d3_glyphEdge.d.lineArc)
      .style("fill", "none")
      .style("stroke-opacity", 0.1)
      .style("stroke-width", 3)
  }
​
​
}
​
    </script>
</body>
</html>
    