Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> // Feel free to change or delete any of the code you see in this editor!var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) /*creating a background that we don't want with the group */ svg.append("rect") .attr("width", 960) .attr("height", 500) .attr("x",0) .attr("y",0) .attr("fill","pink");d3.json("data.json", function(error, json) { /* Define the data for the circles */ var elem = svg.selectAll("g") .data(json) var elemEnter = elem.enter().append("g") //.attr("transform", function(d){return "translate("+d.x+",80)"}) /*Create the circle for each block */ elemEnter.append("circle") .attr("cy", function (d) {return d.y-300}) .attr("cx", function (d) {return d.x}) .attr("r", function (d) {return d.r}) .attr("stroke","black") .attr("fill", "orange") /* Create the text for each block */ var text = elemEnter.append("text") .attr("y", function(d){return d.y-300}) .attr("x", function(d){return d.x}) .style("font-size", 36) .style("font-family", "monospace") .text(function(d){return d.name})}) </script></body> https://d3js.org/d3.v4.min.js