nivas8292/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    All the Nodes are assigned with Negative charges.
All but the bigger Node have same negative charge. The Bigger node has a bigger negative charge and so it repels more.
Try to drag the bigger node nearer to other nodes

  
## index.html
<html>
    <head>
        <title>D3 Force Layout Charge Example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    </head>
    <body>
        <script>
            var w = 800;
            var h = 450;
            var margin = {
                top: 20,
                bottom: 20,
                left: 20,
                right: 20
            };
            var width = w - margin.left - margin.right;
            var height = h - margin.top - margin.bottom;

            var svg = d3.select("body")
                    .append("svg")
                    .attr("id", "chart")
                    .attr("height", h)
                    .attr("width", w);

            var colorScale = d3.scale.category20();

            var nodes = [15, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10].map(function (d) {
                return {"radius": d};
            });

            var force = d3.layout.force()
                    .nodes(nodes)
                    .size([w, h])
                    .charge(function (d, i) {
                        return (i == 0) ? -1000 : -100;
                    })
                    .on("tick", tick)
                    .start();

            var circles = svg.selectAll("circle")
                    .data(nodes)
                    .enter()
                    .append("circle")
                    .attr("r", function (d) {
                        return d.radius;
                    })
                    .style("fill", function (d, i) {
                        return colorScale(i);
                    })
                    .call(force.drag);


            function tick() {
                circles
                        .attr("cx", function (d) {
                            return d.x;
                        })
                        .attr("cy", function (d) {
                            return d.y;
                        });
            }
        </script>
    </body>
</html>

## main.css
body, html {
    margin:0;
    padding:0;
    font-family:"Arial", sans-serif;
    font-size:0.95em;
    text-align:center;
}

#chart {
    background-color:#F5F2EB;
    border: 1px solid #CCC;
}

.bar {
    fill:purple;
    shape-rendering:crispEdges;
}

.bar-label {
    text-anchor:end;
    fill:white;
}

.axis path,
.axis line {
    fill:none;
    stroke:#000;
    shape-rendering:crispEdges;
}

.gridline path,
.gridline line {
    fill: none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}

.trendline {
    fill: none;
    stroke: #ccc;
    stroke-width: 2;
    /*stroke-dasharray:10;*/
}

.area {
    fill: #ccc;
    stroke: #ccc;
    opacity: 0.25;
}

.donut {
    opacity:0.1;
}
.axis-label {
    text-anchor: middle;
}
.chart-header {
    text-transform: capitalize;
    font-size: 110%;
}
.temperature {
    stroke:#95cddf;
    stroke-width:2px;
}

.rain {
    fill:none;
    stroke:#cc627a;
    stroke-width:0.5;
}

#cursor {
    stroke: black;
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<html>
	<head>
	<title>D3 Force Layout Charge Example</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="main.css">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	</head>
	<body>
	<script>
	var w = 800;
	var h = 450;
	var margin = {
	top: 20,
	bottom: 20,
	left: 20,
	right: 20
	};
	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;

	var svg = d3.select("body")
	.append("svg")
	.attr("id", "chart")
	.attr("height", h)
	.attr("width", w);

	var colorScale = d3.scale.category20();

	var nodes = [15, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10].map(function (d) {
	return {"radius": d};
	});

	var force = d3.layout.force()
	.nodes(nodes)
	.size([w, h])
	.charge(function (d, i) {
	return (i == 0) ? -1000 : -100;
	})
	.on("tick", tick)
	.start();

	var circles = svg.selectAll("circle")
	.data(nodes)
	.enter()
	.append("circle")
	.attr("r", function (d) {
	return d.radius;
	})
	.style("fill", function (d, i) {
	return colorScale(i);
	})
	.call(force.drag);



	function tick() {
	circles
	.attr("cx", function (d) {
	return d.x;
	})
	.attr("cy", function (d) {
	return d.y;
	});
	}
	</script>
	</body>
	</html>
	body, html {
	margin:0;
	padding:0;
	font-family:"Arial", sans-serif;
	font-size:0.95em;
	text-align:center;
	}

	#chart {
	background-color:#F5F2EB;
	border: 1px solid #CCC;
	}

	.bar {
	fill:purple;
	shape-rendering:crispEdges;
	}

	.bar-label {
	text-anchor:end;
	fill:white;
	}

	.axis path,
	.axis line {
	fill:none;
	stroke:#000;
	shape-rendering:crispEdges;
	}

	.gridline path,
	.gridline line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.trendline {
	fill: none;
	stroke: #ccc;
	stroke-width: 2;
	/stroke-dasharray:10;/
	}

	.area {
	fill: #ccc;
	stroke: #ccc;
	opacity: 0.25;
	}

	.donut {
	opacity:0.1;
	}
	.axis-label {
	text-anchor: middle;
	}
	.chart-header {
	text-transform: capitalize;
	font-size: 110%;
	}
	.temperature {
	stroke:#95cddf;
	stroke-width:2px;
	}

	.rain {
	fill:none;
	stroke:#cc627a;
	stroke-width:0.5;
	}

	#cursor {
	stroke: black;
	}