Skip to content

Instantly share code, notes, and snippets.

@fogonwater

fogonwater/.block

Last active December 2, 2017 02:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fogonwater/30ded67dcd859e7b0a7c623931ebe8ff to your computer and use it in GitHub Desktop.
Save fogonwater/30ded67dcd859e7b0a7c623931ebe8ff to your computer and use it in GitHub Desktop.
Download ZIP
forceRadial tests II
Raw
.block
license: mit
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<svg width="960" height="600" viewBox="-480 -300 960 600">
</svg>
<style>
body {background-color:#222; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var nodes = [].concat(
d3.range(1086).map(function() { return {type: "a", offset:(Math.random() * 20) - 10}; }),
d3.range(1645).map(function() { return {type: "b", offset:(Math.random() * 20) - 10}; })
)
var colorScale1 = d3.scaleSequential(d3.interpolateRainbow)
.domain([300, 660]),
colorScale2 = d3.scaleSequential(d3.interpolateRainbow)
.domain([660, 300])
var node = d3.select("svg")
.append("g")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 2.5)
//.attr("fill", function(d) { return d.type === "b" ? '#F24236' : '#5BC0EB'; })
.style("fill", function(d) { return d.col; })
var simulation = d3.forceSimulation(nodes)
.force("charge", d3.forceCollide().radius(function(d) { return d.type === "a" ? 3.4 : 6; }))
.force("r", d3.forceRadial(function(d) { return d.type === "a" ? 60 : 200; }))
.on("tick", ticked);
function ticked() {
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.style("fill", function(d){ return d.type === "b" ? colorScale1(d.x + d.offset) : colorScale2(d.y + d.offset); })
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment