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", 1000) .attr("height", 1000) //svg.append("text") //.text("RAWR!!!") //.attr("y", 200) //.attr("x", 150) //.attr("font-size", 102) //.attr("font-family", "freestyle script") //.attr("fill", "lavender") //.attr("stroke" , "plum") //.attr("stroke-width", 2) var flag=[{"fill": "blue", "x":100}, {"fill": "white", "x":300}, {"fill": "red", "x": 500}]; console.log(flag); svg.selectAll("rect") .data(flag) .enter() .append("rect") .attr("y", 100) .attr("x", function(d) {return d.x}) .attr("width", 200) .attr("height", 400) .attr("fill", function(d) {return d.fill}) .attr("stroke", "black"); /* //France svg.append("rect") .attr("height", 100) .attr("width", 50) .attr("x", 100) .attr("y", 200) .attr("fill", "blue") .attr("stroke", "black") svg.append("rect") .attr("height", 100) .attr("width", 50) .attr("x", 200) .attr("y", 200) .attr("fill", "red") .attr("stroke", "black") svg.append("rect") .attr("height", 100) .attr("width", 50) .attr("x", 150) .attr("y", 200) .attr("fill", "white") .attr("stroke", "black") */ </script></body> https://d3js.org/d3.v4.min.js