Skip to content

Instantly share code, notes, and snippets.

Created January 7, 2013 13:28
What would you like to do?
d3js: text in circles + json
{"x":80, "r":40, "label":"Node 1"},
{"x":200, "r":60, "label":"Node 2"},
{"x":380, "r":80, "label":"Node 3"}
<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
var width = 960,
height = 500;
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height)
d3.json("data.json", function(json) {
/* Define the data for the circles */
var elem = svg.selectAll("g myCircleText")
/*Create and place the "blocks" containing the circle and the text */
var elemEnter = elem.enter()
.attr("transform", function(d){return "translate("+d.x+",80)"})
/*Create the circle for each block */
var circle = elemEnter.append("circle")
.attr("r", function(d){return d.r} )
.attr("fill", "white")
/* Create the text for each block */
.attr("dx", function(d){return -20})
.text(function(d){return d.label})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment