Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/data.json

Forked from anonymous/d3sample.html
Last active December 19, 2015 17:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save biovisualize/5993031 to your computer and use it in GitHub Desktop.
Save biovisualize/5993031 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data.json
{"nodes":[
{"x":80, "r":40, "label":"Sam","info":"Developer"},
{"x":200, "r":60, "label":"Pam","info":"Programmer"},
{"x":380, "r":80, "label":"Ram","info":"Senior Programmer"}
]}
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://d3js.org/d3.v3.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var width = 960,
height = 500;
var svg = d3.select("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")
.data(json.nodes)
/*Create and place the "blocks" containing the circle and the text */
var elemEnter = elem.enter()
.append("g")
.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("stroke", "black")
.attr("fill", "white")
.on("click", function (d) {
var g = svg.append("g")
g.append("rect")
.attr("x", 100)
.attr("y", 200)
.attr("width", 200)
.attr("height", 200)
.style("fill", "red");
g.append("text")
.text(d.info);
});
/* Create the text for each block */
elemEnter.append("text")
.attr("dx", function (d) { return -20 })
.text(function (d) { return d.label })
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment