Skip to content

Instantly share code, notes, and snippets.

@EvanZ

EvanZ/gist:3029682

Created July 1, 2012 21:17
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save EvanZ/3029682 to your computer and use it in GitHub Desktop.
Save EvanZ/3029682 to your computer and use it in GitHub Desktop.
Download ZIP
drawing chemical structure with d3.js
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<style type="text/css">
.link {
fill: steelblue;
stroke: lightgray;
stroke-width: 2px;
}
.node circle {
stroke: solid black 1px;
}
.node text {
pointer-events: none;
font: 14px sans-serif;
color: blue;
}
</style>
</head>
<body>
<script>
var w=300,
h=300,
fill = d3.scale.category20(),
nodes = [
{"atom":"C", "size":12},
{"atom":"C", "size":12},
{"atom":"C", "size":12},
{"atom":"N", "size":7},
{"atom":"H", "size":1},
{"atom":"O", "size":16},
{"atom":"O", "size":16},
{"atom":"H", "size":1},
{"atom":"H", "size":1},
{"atom":"H", "size":1},
{"atom":"H", "size":1},
{"atom":"H", "size":1},
{"atom":"H", "size":1}
],
links = [
{"source":0, "target":1},
{"source":1, "target":2},
{"source":1, "target":3},
{"source":2, "target":5},
{"source":2, "target":6},
{"source":1, "target":4},
{"source":3, "target":10},
{"source":3, "target":11},
{"source":0, "target":7},
{"source":0, "target":8},
{"source":0, "target":9},
{"source":5, "target":12}
],
vis = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h),
force = d3.layout.force()
.nodes(nodes)
.links(links)
.charge(-1500)
.friction(0.8)
.gravity(0.5)
.size([w,h])
.start(),
link = vis.selectAll("line")
.data(links)
.enter()
.append("line")
.attr("class","link"),
node = vis.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class","node")
.call(force.drag);
node.append("circle")
.attr("r", function(d) {
return Math.pow(40*d.size,1/3);
})
.attr("fill",function(d) {
return fill(d.size);
})
.attr("stroke","black")
.attr("stroke-width",2);
node.append("text")
.attr("dx",function(d) {
return Math.pow(40*d.size,1/3)+1;
})
.attr("dy",".35em")
.text(function(d) {return d.atom;});
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
</script>
Chemical structure visualized using D3.
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment