Skip to content

Instantly share code, notes, and snippets.

@quizzicol

quizzicol/Readme.md

Created August 9, 2013 06:32
Show Gist options
  • Save quizzicol/6191557 to your computer and use it in GitHub Desktop.
Save quizzicol/6191557 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta source="http://codepen.io/planetoftheweb/pen/CdqcD">
<link rel="stylesheet" href="../styles/style.css">
<!-- jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Syntax highlighter references -->
<script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="../syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<!-- d3 script for this example -->
<script type="text/javascript" src="JS/new_chart.js"></script>
<script tppe="text/javascript">SyntaxHighlighter.all();</script>
<title>Document</title>
<style>
body, .stage {
background: white;
}
</style>
<script src="../d3.v3.js" charset="utf-8"></script>
<script>
function show_code() {
$('.code pre').load('JS/new_chart.js');
};
function format_text() {
SyntaxHighlighter.all();
};
</script>
</head>
<body onload = "new_chart()">
<div class = "title">
<h1>D3 example</h1>
<h2>Force layout</h2>
<span id = 'quizzicol'><h3><a href = "blog.quizzicol.com">quizzicol</a></h3></span>
</div>
<div class = "chart" id ='chart'></div>
<div class = "code">
<button id="show_code" onclick="show_code();">show code</button>
<button onclick="format_text();">format</button>
<pre class="brush: js;">
function new_chart() {
var w = 900,
h = 400;
var circleWidth = 5;
var fontFamily = 'Bree Serif',
fontSizeHighlight = '1.5em',
fontSizeNormal = '1em';
var palette = {
"lightgray": "#819090",
"gray": "#708284",
"mediumgray": "#536870",
"darkgray": "#475B62",
"darkblue": "#0A2933",
"darkerblue": "#042029",
"paleryellow": "#FCF4DC",
"paleyellow": "#EAE3CB",
"yellow": "#A57706",
"orange": "#BD3613",
"red": "#D11C24",
"pink": "#C61C6F",
"purple": "#595AB7",
"blue": "#2176C7",
"green": "#259286",
"yellowgreen": "#738A05"
}
var nodes = [
{"name": "DragThese" },
{"name": "timeStamp"},
{"name": "type"},
{"name": "target"},
{"name": "currentTarget" }
]
var links = [
{source: nodes[1], target: nodes[0]},
{source: nodes[2], target: nodes[0]},
{source: nodes[3], target: nodes[0]},
{source: nodes[4], target: nodes[0]}
]
var vis = d3.select("#chart")
.append("svg:svg")
.attr("class", "stage")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.nodes(nodes)
.links([])
.gravity(0.1)
.charge(-1000)
.size([w, h]);
var link = vis.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.attr("stroke", "#CCC")
.attr("fill", "none");
var node = vis.selectAll("circle.node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
//MOUSEOVER
.on("mouseover", function(d,i) {
if (i>0) {
//CIRCLE
d3.select(this).selectAll("circle")
.transition()
.duration(250)
.style("cursor", "none")
.attr("r", circleWidth+3)
.attr("fill",palette.orange);
//TEXT
d3.select(this).select("text")
.transition()
.style("cursor", "none")
.duration(250)
.style("cursor", "none")
.attr("font-size","1.5em")
.attr("x", 15 )
.attr("y", 5 )
} else {
//CIRCLE
d3.select(this).selectAll("circle")
.style("cursor", "none")
//TEXT
d3.select(this).select("text")
.style("cursor", "none")
}
})
//MOUSEOUT
.on("mouseout", function(d,i) {
if (i>0) {
//CIRCLE
d3.select(this).selectAll("circle")
.transition()
.duration(250)
.attr("r", circleWidth)
.attr("fill",palette.pink);
//TEXT
d3.select(this).select("text")
.transition()
.duration(250)
.attr("font-size","1em")
.attr("x", 8 )
.attr("y", 4 )
}
})
.call(force.drag);
//CIRCLE
node.append("svg:circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", circleWidth)
.attr("fill", function(d, i) { if (i>0) { return palette.pink; } else { return palette.paleryellow } } )
//TEXT
node.append("text")
.text(function(d, i) { return d.name; })
.attr("x", function(d, i) { if (i>0) { return circleWidth + 5; } else { return -10 } })
.attr("y", function(d, i) { if (i>0) { return circleWidth + 0 } else { return 8 } })
.attr("font-family", "Bree Serif")
.attr("fill", function(d, i) { if (i>0) { return palette.darkerblue; } else { return palette.yellowgreen } })
.attr("font-size", function(d, i) { if (i>0) { return "1em"; } else { return "1.8em" } })
.attr("text-anchor", function(d, i) { if (i>0) { return "beginning"; } else { return "end" } })
force.on("tick", function(e) {
node.attr("transform", function(d, i) {
return "translate(" + d.x + "," + d.y + ")";
});
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; })
});
force.start();
};
</pre>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment