[dots] 04 - Dynamic groups of dots (d3 v4)

Dots colored by a property named group.

Dots can be dragged like in my Draggable dots block.

forked from mbostock's block: Collision Detection

with code from mbostock's block: Multi-Foci Force Layout

forked from ocarneiro's block: Grouped dots

forked from ocarneiro's block: simple group d3 v4

forked from shimizu's block: D3 v4 - force layout

forked from ocarneiro's block: Grouped dots d3 v4

forked from ocarneiro's block: Labeled grouped dots d3 v4

forked from ocarneiro's block: [dots] 04 - Dynamic groups of dots (d3 v4)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>D3 v4 - force layout</title>
<style>
html, body, #graph {
    width: 900px;
    height: 500px;
}
</style>
</head>

<body>
<div id="start">
    <input name="clearButton" 
                 type="button" 
                value="Limpar" 
                onclick="killAll()" />
    <input name="2004Button" 
                 type="button" 
                value="2004" 
                onclick="main(2004)" />
    <input name="2005Button" 
                 type="button" 
                value="2005" 
                onclick="main(2005)" />
    <input name="2006Button" 
                 type="button" 
                value="2006" 
                onclick="main(2006)" />
    <input name="2007Button" 
                 type="button" 
                value="2007" 
                onclick="main(2007)" />
    <input name="2008Button" 
                 type="button" 
                value="2008" 
                onclick="main(2008)" />  
    <input name="2009Button" 
                 type="button" 
                value="2009" 
                onclick="main(2009)" />
    <input name="2010Button" 
                 type="button" 
                value="2010" 
                onclick="main(2010)" />
    <input name="2011Button" 
                 type="button" 
                value="2011" 
                onclick="main(2011)" />
    <input name="2012Button" 
                 type="button" 
                value="2012" 
                onclick="main(2012)" />  
    <input name="2013Button" 
                 type="button" 
                value="2013" 
                onclick="main(2013)" />  
    <input name="2014Button" 
                 type="button" 
                value="2014" 
                onclick="main(2014)" />    
</div>
<div id="graph"></div>
    
<script src="https://d3js.org/d3.v4.min.js"></script>    
<script>
  function killAll() {
    		d3.selectAll("circle").data(new Array()).exit().remove();
    		d3.selectAll("rect").data(new Array()).exit().remove();
    		d3.selectAll("text").data(new Array()).exit().remove();
  }

var width,height
    var chartWidth, chartHeight
    var margin
    var svg = d3.select("#graph").append("svg")
    var chartLayer = svg.append("g").classed("chartLayer", true)
    // escala com 10 cores (category10)
    var color = d3.scaleOrdinal(d3.schemeCategory10);
  	var circle_radius = 8;

main(2004);
    
    // cria grupos de bolinhas e atribui o atributo group
    var node_gen = function(data, labels) {
     
      // initial dot for each group
      var nodes = new Array();
      for (var i=0; i < labels.length; i++){
        nodes.push({id:i, group:i})
      }
      
      // additional dots
      for (var i=0; i < labels.length; i++){
        if (data[i] > 0) {
          var n = d3.range(data[i]-1)
          .map(function(d) {return {id: nodes.length + d, 
                                    group: i};})
          nodes = nodes.concat(n)
        }
      }
      return nodes;
    }    
    
    function main(year) {
      
      	killAll();
      
        if (!year > 0) {
          year = 2004
        }
      
        console.log(year);
        d3.json("data.json", function(err, json) {
      
          var json_data = json.data;
          var labels = json.labels;
    	
      
      	var groups = labels.length;
        var current_data = json_data[year];

var rect = svg.append("g")
            .attr("class", "rects")
          	.selectAll("rect")
            .data(data.nodes)
          	.enter().append("rect")
      			.attr("fill", "white")
      			.attr("fill-opacity", 0.4)
            .attr("width", 75)
            .attr("height", 25)
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));

};

simulation.nodes(data.nodes).on("tick", ticked);
      
        //ties the circles together
        simulation.force("link").links(data.links);    
        
        function dragstarted(d) {
            if (!d3.event.active) simulation.alphaTarget(0.5).restart();
            d.fx = d.x;
            d.fy = d.y;
        }
        
        function dragged(d) {
            d.fx = d3.event.x;
            d.fy = d3.event.y;
        }
        
        function dragended(d) {
            if (!d3.event.active) simulation.alphaTarget(0);
            d.fx = null;
            d.fy = null;
        } 
    }

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js