Skip to content

Instantly share code, notes, and snippets.

@ojassvi

ojassvi/.block

Last active June 28, 2018 21:49
Show Gist options
  • Save ojassvi/32734a766b21eda3d742a705f9bd5736 to your computer and use it in GitHub Desktop.
Save ojassvi/32734a766b21eda3d742a705f9bd5736 to your computer and use it in GitHub Desktop.
Download ZIP
Cluster draft 2
Raw
.block
license: mit
Raw
README.md
Raw
flare.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 9 should actually have 2 columns, instead of 3 in line 8.
id,value
a,23
b,12
c,11
d,14
e,10
f,10
g,16
h,11,
i, 2
j, 22
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {border: 1px solid}
circle {
/* fill: none;
stroke: black; */
}
</style>
<svg width="500" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height");
var x = d3.scaleLinear().rangeRound([0, width]);
var g = svg.append("g");
const smallRadius = 5;
const innerPadding = 1;
d3.csv("flare.csv", type, function(error, data) {
if (error) throw error;
var simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) { return width / 2 }))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(smallRadius + innerPadding))
.stop();
for (var i = 0; i < 100; ++i) simulation.tick();
var cell = g.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", smallRadius)
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
g.append("circle")
.attr("r", getOuterRadius(data.length))
.attr("cx", function(d) { return width/2 })
.attr("cy", function(d) { return height/2 })
.attr("fill", "none")
.attr("stroke", "blue");
});
function type(d) {
if (!d.value) return;
d.value = +d.value;
return d;
}
function getOuterRadius(nodes) {
return 6 * smallRadius;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment