Online D3JS Editor

Browse more D3js Examples
<!-- source is https://bl.ocks.org/mbostock/4060366 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>

    </style>
</head>
<body>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

var svg = d3.select("svg");
var width = +svg.attr("width");
var height = +svg.attr("height");

var data; // a global
d3.json("https://tipiciudadano.es/api/v1/dicts", function(error, json) {
  if (error) return console.warn(error);
  data = json;
  visualizeit();
});

function visualizeit(){
    var node = svg.selectAll(".node")
    .data(data["dicts"]["tipi"])
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d,i) { return "translate(" + Math.sin(i/10)*100 + 200 + "," + Math.sin(i/10)*100 + 200 + ")"; });

  node.append("circle")
      .attr("id", function(d) { return d; })
      .attr("r", 10)
      .style("fill", "blue");
};

    </script>
</body>
</html>
Online D3JS Editor

Follow

Newsletter
