From b415ac03b09f80d8d8dd1197334f90f8a5b22eb7 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Mon, 2 Oct 2017 21:54:54 -0400 Subject: [PATCH] adding nodes with data and spacing --- app.css | 4 ++++ app.js | 24 ++++++++++++++++++++++++ index.html | 5 ++++- 3 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 app.css diff --git a/app.css b/app.css new file mode 100644 index 0000000..5c262ae --- /dev/null +++ b/app.css @@ -0,0 +1,4 @@ +circle { + fill:red; + r: 5; +} diff --git a/app.js b/app.js index 7e36a40..da43394 100644 --- a/app.js +++ b/app.js @@ -4,3 +4,27 @@ var HEIGHT = 200; d3.select("svg") .attr("width", WIDTH) .attr("height", HEIGHT); + +var nodesData = [ + {"name": "Travis", "sex": "M"}, + {"name": "Rake", "sex": "M"}, + {"name": "Diana", "sex": "F"}, + {"name": "Rachel", "sex": "F"}, + {"name": "Shawn", "sex": "M"}, + {"name": "Emerald", "sex": "F"} +]; + +var nodes = d3.select("g") + .selectAll("circle") + .data(nodesData) + .enter() + .append("circle"); + +d3.forceSimulation() + .nodes(nodesData) + .force("charge_force", d3.forceManyBody()) + .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) //position centering force at center x,y coords + .on("tick", function(){ + nodes.attr("cx", function(d) { return d.x; }) + .attr("cy", function(d) { return d.y; }); + }); diff --git a/index.html b/index.html index ec470d6..fa84eee 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,13 @@ + - + + +