Skip to content

Instantly share code, notes, and snippets.

@tristanz

tristanz/force.css

Created April 7, 2011 21:05
Show Gist options
  • Save tristanz/908713 to your computer and use it in GitHub Desktop.
Save tristanz/908713 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
force.css
circle.node {
stroke: #fff;
stroke-width: 1.5px;
}
line.link {
stroke: #999;
stroke-opacity: .6;
}
text.txt {
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color:#FFF;
}
Raw
force.js
var w = 960,
h = 500,
fill = d3.scale.category20();
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", w)
.attr("height", h);
d3.json("miserables.json", function(json) {
var force = d3.layout.force()
.nodes(json.nodes)
.links(json.links)
.size([w, h])
.start();
var link = vis.selectAll("line.link")
.data(json.links)
.enter().append("svg:line")
.attr("class", "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; });
var node = vis.selectAll("circle.node")
.data(json.nodes)
.enter().append("svg:circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", function(d) { return d.level*5; })
.style("fill", function(d) { return fill(d.group); })
.call(force.drag);
// var p = node.enter().append("svg:text")
// .text(function(d){ return d.name; });
var text = vis.selectAll("text.node")
.data(json.nodes)
.enter().append("svg:text")
.attr("class", "txt")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text(function(d){ return d.name; })
.call(force.drag);
vis.attr("opacity", 0)
.transition()
.duration(1000)
.attr("opacity", 1);
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("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
text.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Force-Directed Layout</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<link type="text/css" rel="stylesheet" href="force.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="force.js"></script>
</body>
</html>
Raw
miserables.json
{
"nodes": [
{
"name": "Our Values",
"group": 1,
"level": 4
},
{
"name": "Communication",
"group": 2,
"level": 3
},
{
"name": "Teamwork",
"group": 3,
"level": 3
},
{
"name": "Business Savvy",
"group": 4,
"level": 3
},
{
"name": "Quality",
"group": 5,
"level": 3
},
{
"name": "Innovation",
"group": 6,
"level": 3
},
{
"name": "Reach Out",
"group": 2,
"level": 2
},
{
"name": "Be Persuasive",
"group": 2,
"level": 2
},
{
"name": "Be Open",
"group": 2,
"level": 2
},
{
"name": "Be Supportive",
"group": 3,
"level": 2
},
{
"name": "Share Success",
"group": 3,
"level": 2
},
{
"name": "Seek Out Collaboration",
"group": 3,
"level": 2
},
{
"name": "See The Big Picture",
"group": 4,
"level": 2
},
{
"name": "Engage The Citrix Community",
"group": 4,
"level": 2
},
{
"name": "Be Citrix-literate",
"group": 4,
"level": 2
},
{
"name": "Hold To High Standards",
"group": 5,
"level": 2
},
{
"name": "Focus On Human Goals",
"group": 5,
"level": 2
},
{
"name": "Take Pride In Your Work",
"group": 5,
"level": 2
},
{
"name": "Experiment",
"group": 6,
"level": 2
},
{
"name": "Identify New Opportunities",
"group": 6,
"level": 2
},
{
"name": "Challenge The Status Quo",
"group": 6,
"level": 2
},
{
"name": "Speak Up",
"group": 2,
"level": 1
},
{
"name": "Just Ask",
"group": 2,
"level": 1
},
{
"name": "Pick Up The Phone",
"group": 2,
"level": 1
},
{
"name": "Be Consise",
"group": 2,
"level": 1
},
{
"name": "No Politics",
"group": 2,
"level": 1
},
{
"name": "Be Candid",
"group": 2,
"level": 1
},
{
"name": "Be Considerate",
"group": 2,
"level": 1
},
{
"name": "Show Your Work",
"group": 2,
"level": 1
},
{
"name": "Provide Constructive Feedback",
"group": 2,
"level": 1
},
{
"name": "Listen",
"group": 2,
"level": 1
},
{
"name": "Have Fun",
"group": 3,
"level": 1
},
{
"name": "Assume The Best",
"group": 3,
"level": 1
},
{
"name": "Show Respect",
"group": 3,
"level": 1
},
{
"name": "Share Ideas",
"group": 3,
"level": 1
},
{
"name": "Be Trustworthy",
"group": 3,
"level": 1
},
{
"name": "Put Ego Aside",
"group": 3,
"level": 1
},
{
"name": "Know Your Team",
"group": 3,
"level": 1
},
{
"name": "Partner With Other Disciplines",
"group": 3,
"level": 1
},
{
"name": "Interate Together",
"group": 3,
"level": 1
},
{
"name": "Know The Competition",
"group": 4,
"level": 1
},
{
"name": "Ask 'WHY?'",
"group": 4,
"level": 1
},
{
"name": "Visit Customers",
"group": 4,
"level": 1
},
{
"name": "Take Part In Events",
"group": 4,
"level": 1
},
{
"name": "Eat Your Own Dog Food",
"group": 4,
"level": 1
},
{
"name": "Know Your Products",
"group": 4,
"level": 1
},
{
"name": "Know How Our Company Works",
"group": 4,
"level": 1
},
{
"name": "Challenge Every Pixel",
"group": 5,
"level": 1
},
{
"name": "Set Clear Success Metrics",
"group": 5,
"level": 1
},
{
"name": "Exhibit Craftmanship",
"group": 5,
"level": 1
},
{
"name": "A Great Experience Everytime",
"group": 5,
"level": 1
},
{
"name": "Make It Simple",
"group": 5,
"level": 1
},
{
"name": "Inspire Delight",
"group": 5,
"level": 1
},
{
"name": "Don't Settle For Less",
"group": 5,
"level": 1
},
{
"name": "Have A Point Of View",
"group": 5,
"level": 1
},
{
"name": "Be Accountable",
"group": 5,
"level": 1
},
{
"name": "Take Risks",
"group": 6,
"level": 1
},
{
"name": "Blue-sky It",
"group": 6,
"level": 1
},
{
"name": "Learn and Iterate",
"group": 6,
"level": 1
},
{
"name": "It's OK To Make Mistakes",
"group": 6,
"level": 1
},
{
"name": "Spark Conversations About What's Possible",
"group": 6,
"level": 1
},
{
"name": "Look Everywhere For Innovation",
"group": 6,
"level": 1
},
{
"name": "Be Aware Of Trends",
"group": 6,
"level": 1
},
{
"name": "Do What's Right",
"group": 6,
"level": 1
},
{
"name": "Start with 'Why?'",
"group": 6,
"level": 1
}
],
"links": [
{
"source": 0,
"target": 1,
"value": 1
},
{
"source": 0,
"target": 2,
"value": 1
},
{
"source": 0,
"target": 3,
"value": 1
},
{
"source": 0,
"target": 4,
"value": 1
},
{
"source": 0,
"target": 5,
"value": 1
},
{
"source": 1,
"target": 6,
"value": 2
},
{
"source": 1,
"target": 7,
"value": 2
},
{
"source": 1,
"target": 8,
"value": 2
},
{
"source": 2,
"target": 9,
"value": 2
},
{
"source": 2,
"target": 10,
"value": 2
},
{
"source": 2,
"target": 11,
"value": 2
},
{
"source": 3,
"target": 12,
"value": 2
},
{
"source": 3,
"target": 13,
"value": 2
},
{
"source": 3,
"target": 14,
"value": 2
},
{
"source": 4,
"target": 15,
"value": 2
},
{
"source": 4,
"target": 16,
"value": 2
},
{
"source": 4,
"target": 17,
"value": 2
},
{
"source": 5,
"target": 18,
"value": 2
},
{
"source": 5,
"target": 19,
"value": 2
},
{
"source": 5,
"target": 20,
"value": 2
},
{
"source": 6,
"target": 21,
"value": 3
},
{
"source": 6,
"target": 22,
"value": 3
},
{
"source": 6,
"target": 23,
"value": 3
},
{
"source": 7,
"target": 24,
"value": 3
},
{
"source": 7,
"target": 25,
"value": 3
},
{
"source": 7,
"target": 26,
"value": 3
},
{
"source": 7,
"target": 27,
"value": 3
},
{
"source": 8,
"target": 28,
"value": 3
},
{
"source": 8,
"target": 29,
"value": 3
},
{
"source": 8,
"target": 30,
"value": 3
},
{
"source": 9,
"target": 31,
"value": 3
},
{
"source": 9,
"target": 32,
"value": 3
},
{
"source": 9,
"target": 33,
"value": 3
},
{
"source": 10,
"target": 34,
"value": 3
},
{
"source": 10,
"target": 35,
"value": 3
},
{
"source": 10,
"target": 36,
"value": 3
},
{
"source": 11,
"target": 37,
"value": 3
},
{
"source": 11,
"target": 38,
"value": 3
},
{
"source": 11,
"target": 39,
"value": 3
},
{
"source": 12,
"target": 40,
"value": 3
},
{
"source": 12,
"target": 41,
"value": 3
},
{
"source": 13,
"target": 42,
"value": 3
},
{
"source": 13,
"target": 43,
"value": 3
},
{
"source": 14,
"target": 44,
"value": 3
},
{
"source": 14,
"target": 45,
"value": 3
},
{
"source": 14,
"target": 46,
"value": 3
},
{
"source": 15,
"target": 47,
"value": 3
},
{
"source": 15,
"target": 48,
"value": 3
},
{
"source": 15,
"target": 49,
"value": 3
},
{
"source": 16,
"target": 50,
"value": 3
},
{
"source": 16,
"target": 51,
"value": 3
},
{
"source": 16,
"target": 52,
"value": 3
},
{
"source": 17,
"target": 53,
"value": 3
},
{
"source": 17,
"target": 54,
"value": 3
},
{
"source": 17,
"target": 55,
"value": 3
},
{
"source": 18,
"target": 56,
"value": 3
},
{
"source": 18,
"target": 57,
"value": 3
},
{
"source": 18,
"target": 58,
"value": 3
},
{
"source": 18,
"target": 59,
"value": 3
},
{
"source": 19,
"target": 60,
"value": 3
},
{
"source": 19,
"target": 61,
"value": 3
},
{
"source": 19,
"target": 62,
"value": 3
},
{
"source": 20,
"target": 63,
"value": 3
},
{
"source": 20,
"target": 64,
"value": 3
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment