D3NutsAndBolts5

by Simon Raper

HTML

<svg></svg>

JavaScript

circleData = [{
    "name": "Sun",
        "x": 250,
        "y": 250,
        "r": 40,
        "color": "yellow"
}, {
    "name": "Earth",
        "x": 50,
        "y": 50,
        "r": 16,
        "color": "blue"
}, {
    "name": "Venus",
        "x": 100,
        "y": 100,
        "r": 15,
        "color": "gray"
}, {
    "name": "Mercury",
        "x": 150,
        "y": 150,
        "r": 6,
        "color": "orange"
}]

var svg = d3.select("body").append("svg")
    .attr("width", 500)
    .attr("height", 500);

svg.selectAll(".node")
    .data(circleData)
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function (d) {
    return d.x
})
    .attr("cy", function (d) {
    return d.y
})
    .attr("r", function (d) {
    return d.r
}) .attr("fill", function (d) {
    return d.color
});