Edit in JSFiddle

var w = 960,
    h = 500;
 
var svg = d3.select("#d3").append("svg")
    .attr("width", w)
    .attr("height", h);

var lines = [
  [{x:0 , y: 0}, {x: 250, y: 250}],
  [{x:0, y: 250}, {x: 250, y: 0}],
  [{x:0 , y: 0}, {x: 0, y: 250}],
  [{x:0, y: 250}, {x: 250, y: 250}],
  [{x:250 , y: 250}, {x: 250, y: 0}],
  [{x:250, y: 0}, {x: 0, y: 0}]
];


//define colors for the lines
var lines_colors = [
  {"color" : "green"},
  {"color" : "purple"},
  {"color" : "black"},
  {"color" : "black"},
  {"color" : "black"},
  {"color" : "black"}
];

var line = d3.svg.line()
   .x(function(d) { return d.x; })
   .y(function(d) { return d.y; })
   .interpolate("basis");

svg.selectAll(".line")
   .data(lines)
   .enter().append("path")
   .attr("class", "line")
   .style("stroke", function(d,i) { return lines_colors[i].color; })
   .attr("d", line);

var jsonCircles = [
  { "x": 0, "y": 0, "radius": 10, "color" : "green" },
  { "x": 50, "y": 50, "radius": 10, "color" : "green"},
  { "x": 100, "y": 100, "radius": 10, "color" : "green" },
  { "x": 150, "y": 150, "radius": 10, "color" : "green"},
  { "x": 200, "y": 200, "radius": 10, "color" : "green" },
  { "x": 250, "y": 250, "radius": 10, "color" : "green" },
  { "x": 125, "y": 125, "radius": 10, "color" : "red" },
  { "x": 0, "y": 250, "radius": 10, "color" : "purple" },
  { "x": 50, "y": 200, "radius": 10, "color" : "purple" },
  { "x": 100, "y": 150, "radius": 10, "color" : "purple" },
  { "x": 150, "y": 100, "radius": 10, "color" : "purple" },
  { "x": 200, "y": 50, "radius": 10, "color" : "purple" },
  { "x": 250, "y": 0, "radius": 10, "color" : "purple" }];


var circles = svg.selectAll("circle")
    .data(jsonCircles)
    .enter()
    .append("circle");

var circleAttributes = circles
    .attr("cx", function (d) { return d.x; })
    .attr("cy", function (d) { return d.y; })
    .attr("r", function (d) { return d.radius; })
    .style("fill", function(d) { return d.color; });

<div id="d3"></div>

#d3 svg{
  margin:30px;
  padding:10px;
}
.line{
  stroke-width: 3px;  
}