ocarneiro/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    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)
forked from ocarneiro's block: GTI - Visualização de dados

  
## data.json
{"data":{"2004": [40, 3, 5, 10, 2, 1, 2, 0, 4, 1, 0, 1, 3, 0],
         "2005": [22, 2, 4, 5, 2, 2, 9, 4, 1, 4, 2, 3, 0, 0],
         "2006": [40, 7, 9, 4, 4, 3, 0, 0, 6, 1, 3, 0, 0, 0],
         "2007": [36, 4, 3, 1, 1, 2, 0, 0, 2, 1, 3, 0, 0, 1],
         "2008": [40, 8, 7, 2, 2, 0, 0, 3, 0, 0, 0, 1, 0, 0],
         "2009": [32, 6, 6, 3, 0, 3, 1, 3, 0, 1, 1, 0, 0, 0],
         "2010": [19, 7, 4, 2, 3, 2, 1, 1, 1, 2, 1, 0, 0, 1],
         "2011": [23, 2, 0, 6, 2, 1, 3, 2, 0, 2, 1, 3, 0, 0],
         "2012": [24, 5, 3, 0, 0, 1, 0, 0, 1, 1, 2, 0, 0, 0],
         "2013": [28, 11, 3, 2, 3, 6, 0, 5, 1, 1, 1, 2, 0, 0],
         "2014": [45, 1, 11, 6, 10, 3, 5, 1, 2, 2, 0, 2, 3, 0]
        },
 "labels": ["Survey","Field Research", "Case Study",
            "Lab Experiment", "Secondary Data",

            "Content Analysis"
], "discard": [  "Qualitative Research",
            "Design Science", "Frameworks and Model",
            "Math Model", "Literature An.",
            "Field Exp.", "Speculation", "Lit. Review"]
}

## index.html
<!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="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 nodes = node_gen(current_data, labels);
        var range = nodes.length;

        var data = {
            nodes:nodes,
            links:nodes.map(function(i) {
                                  return {
                                    source: i.group,
                                    target: i.id
                                  };
        })};

        setSize()
        drawChart(data, labels)
        })
    }

    function setSize() {
        width = document.querySelector("#graph").clientWidth
        height = document.querySelector("#graph").clientHeight

        margin = {top:0, left:0, bottom:0, right:0 }

        chartWidth = width - (margin.left+margin.right)
        chartHeight = height - (margin.top+margin.bottom)

        svg.attr("width", width).attr("height", height)

        chartLayer
            .attr("width", chartWidth)
            .attr("height", chartHeight)
            .attr("transform", "translate("+[margin.left, margin.top]+")")
    }

    function drawChart(data, labels) {

        var simulation = d3.forceSimulation()
            .force("link", d3.forceLink().id(function(d) { return d.index })
                  .distance(20))
            .force("collide",d3.forceCollide(circle_radius))
            .force("charge", d3.forceManyBody())
            .force("center", d3.forceCenter(chartWidth / 2, chartHeight / 2))
            .force("y", d3.forceY(0))
            .force("x", d3.forceX(0))

        // circles
        var node = svg.append("g")
            .attr("class", "nodes")
            .selectAll("circle")
            .data(data.nodes)
            .enter().append("circle")
            .attr("r", circle_radius)
						.style("fill", function(d, i) { return color(d.group); })
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));

      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));


      var text = svg.append("g")
            .attr("class", "labels")
          	.selectAll("text")
            .data(data.nodes)
          	.enter().append("text")
      			.style("font-size", 24)
            .attr("dx", 12)
            .attr("dy", ".35em")
            .text(function(d) { return labels[d.id] })
            .call(d3.drag()
                .on("start", dragstarted)
                .on("drag", dragged)
                .on("end", dragended));


        var ticked = function() {
            node
                .attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
            text
                .attr("x", function(d) { return d.x - 30; })
                .attr("y", function(d) { return d.y; });
            rect
                .attr("x", function(d) { return d.x - 30; })
                .attr("y", function(d) { return d.y - 12; })
                .attr("fill-opacity", function(d) {
                        var opacity = 0.0;
                        if (d.id < labels.length ) {
                            opacity = 0.4
                        }
                        return opacity;
                      });

        };

        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>
	{"data":{"2004": [40, 3, 5, 10, 2, 1, 2, 0, 4, 1, 0, 1, 3, 0],
	"2005": [22, 2, 4, 5, 2, 2, 9, 4, 1, 4, 2, 3, 0, 0],
	"2006": [40, 7, 9, 4, 4, 3, 0, 0, 6, 1, 3, 0, 0, 0],
	"2007": [36, 4, 3, 1, 1, 2, 0, 0, 2, 1, 3, 0, 0, 1],
	"2008": [40, 8, 7, 2, 2, 0, 0, 3, 0, 0, 0, 1, 0, 0],
	"2009": [32, 6, 6, 3, 0, 3, 1, 3, 0, 1, 1, 0, 0, 0],
	"2010": [19, 7, 4, 2, 3, 2, 1, 1, 1, 2, 1, 0, 0, 1],
	"2011": [23, 2, 0, 6, 2, 1, 3, 2, 0, 2, 1, 3, 0, 0],
	"2012": [24, 5, 3, 0, 0, 1, 0, 0, 1, 1, 2, 0, 0, 0],
	"2013": [28, 11, 3, 2, 3, 6, 0, 5, 1, 1, 1, 2, 0, 0],
	"2014": [45, 1, 11, 6, 10, 3, 5, 1, 2, 2, 0, 2, 3, 0]
	},
	"labels": ["Survey","Field Research", "Case Study",
	"Lab Experiment", "Secondary Data",

	"Content Analysis"
	], "discard": [ "Qualitative Research",
	"Design Science", "Frameworks and Model",
	"Math Model", "Literature An.",
	"Field Exp.", "Speculation", "Lit. Review"]
	}
	<!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="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 nodes = node_gen(current_data, labels);
	var range = nodes.length;

	var data = {
	nodes:nodes,
	links:nodes.map(function(i) {
	return {
	source: i.group,
	target: i.id
	};
	})};

	setSize()
	drawChart(data, labels)
	})
	}

	function setSize() {
	width = document.querySelector("#graph").clientWidth
	height = document.querySelector("#graph").clientHeight

	margin = {top:0, left:0, bottom:0, right:0 }

	chartWidth = width - (margin.left+margin.right)
	chartHeight = height - (margin.top+margin.bottom)

	svg.attr("width", width).attr("height", height)

	chartLayer
	.attr("width", chartWidth)
	.attr("height", chartHeight)
	.attr("transform", "translate("+[margin.left, margin.top]+")")
	}

	function drawChart(data, labels) {

	var simulation = d3.forceSimulation()
	.force("link", d3.forceLink().id(function(d) { return d.index })
	.distance(20))
	.force("collide",d3.forceCollide(circle_radius))
	.force("charge", d3.forceManyBody())
	.force("center", d3.forceCenter(chartWidth / 2, chartHeight / 2))
	.force("y", d3.forceY(0))
	.force("x", d3.forceX(0))

	// circles
	var node = svg.append("g")
	.attr("class", "nodes")
	.selectAll("circle")
	.data(data.nodes)
	.enter().append("circle")
	.attr("r", circle_radius)
	.style("fill", function(d, i) { return color(d.group); })
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended));

	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));


	var text = svg.append("g")
	.attr("class", "labels")
	.selectAll("text")
	.data(data.nodes)
	.enter().append("text")
	.style("font-size", 24)
	.attr("dx", 12)
	.attr("dy", ".35em")
	.text(function(d) { return labels[d.id] })
	.call(d3.drag()
	.on("start", dragstarted)
	.on("drag", dragged)
	.on("end", dragended));


	var ticked = function() {
	node
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	text
	.attr("x", function(d) { return d.x - 30; })
	.attr("y", function(d) { return d.y; });
	rect
	.attr("x", function(d) { return d.x - 30; })
	.attr("y", function(d) { return d.y - 12; })
	.attr("fill-opacity", function(d) {
	var opacity = 0.0;
	if (d.id < labels.length ) {
	opacity = 0.4
	}
	return opacity;
	});

	};

	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>