pierreelliott/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .rect { stroke-width: 1; stroke: grey; }
    .x_axis .tick text { transform : translate(5px ,10px) rotate(40deg); }
    .guide { stroke-width: 3; stroke: black; fill: transparent }
    .hidden { display: none; }
  </style>
</head>

<body>
  <script>
    var SEPARATOR = "\t";
    var width = 960, height = 600, cellSize = 30;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

    var matrixElement = svg.append("g")
      .attr("transform", "translate(50,50)")
      .attr("id", "adjacencyMatrix");

    var color = d3.scaleQuantize()					.range(["#ffffff","#e3eef9","#cfe1f2","#b5d4e9","#93c3df","#6daed5","#4b97c9","#2f7ebc","#1864aa","#0a4a90","#08306b"]);

    var matrixData, x, y, scaleSize;

    d3.csv("noeuds.csv").then(nodes => {
      d3.csv("liens.csv").then(edges => {
        matrixData = createAdjacencyMatrix(nodes, edges);
        color = color.domain([0, d3.max(matrixData, (d) => { return +d.sharedfollowers; })]);
        scaleSize = nodes.length * cellSize;

        x = d3.scaleBand()
            .domain(nodes.map(function (el) {return el.id}))
            .range([0, scaleSize])
        y = d3.scaleBand()
            .domain(nodes.map(function (el) {return el.id}))
        		// reverse() inverse l'ordre des éléments pour que l'affichage se fasse dans le bon ordre en x : testez sans pour voir ce qui se passe.
            .range([scaleSize, 0])

        drawMatrix(matrixElement, matrixData);
      })
    });

    function drawMatrix(matrixElement, matrixData) {
//       console.warn("Drawing matrix")
      var matrix = matrixElement.selectAll(".rect")
      	.data(matrixData);

      var horizGuide = d3.select('#adjacencyMatrix').append('rect')
			      .attr('class', 'hidden guide')
      			.attr('pointer-events', 'none')
      			.attr("height", cellSize)
            .attr("width", scaleSize);
      var verticGuide = d3.select('#adjacencyMatrix').append('rect')
			      .attr('class', 'hidden guide')
      			.attr('pointer-events', 'none')
      			.attr("height", scaleSize)
            .attr("width", cellSize);

    	matrix.enter()
    		.append("rect")
        .attr("x", (d) => { return cellSize*d.x; })
        .attr("y", (d) => { return scaleSize - cellSize*(d.y+1); }) // Vu qu'on part de la fin, il faut rajouter 1
        .attr("height", cellSize)
				.attr("width", cellSize )
      	.style("fill", (d) => color(d.sharedfollowers))
      	.attr("class", "rect")
      	.on("click", (d) => console.warn(d))
      	.on("mouseover", (d) => {
					horizGuide.classed('hidden', false)
          	.raise()
          	.transition()
          	.attr("x", 0)
          	.attr("y", scaleSize - cellSize*(d.y+1));

        	verticGuide.classed('hidden', false)
          	.raise()
          	.transition()
          	.attr("x", cellSize*d.x)
          	.attr("y", 0);
        });
        matrixElement.on('mouseout', function() {
          horizGuide.classed('hidden', true);
        	verticGuide.classed('hidden', true);
        });

//       matrixElement.selectAll("rect")

      d3.select("#adjacencyMatrix")
        .append("g")
      	.attr("class", "x_axis")
        .attr("transform", `translate(0,${scaleSize})`)
        .call(d3.axisBottom(x))


      d3.select("#adjacencyMatrix")
        .append("g")
        .call(d3.axisLeft(y))
    }

    function createAdjacencyMatrix(nodes,edges) {
      var edgeHash = {};
      for (x in edges) {
        var id = edges[x].source + SEPARATOR + edges[x].target;
        edgeHash[id] = edges[x];
      }
      matrix = [];
      //create all possible edges
      for (const [a, node_a] of nodes.entries()) {
        for (const [b, node_b] of nodes.entries()) {
          var grid = {id: node_a.id + SEPARATOR + node_b.id, x: a, y: b, sharedfollowers: 0};
          if (edgeHash[grid.id]) {
            grid.sharedfollowers = parseInt(edgeHash[grid.id].sharedfollowers);
          }
          matrix.push(grid);
        }
      }
      return matrix;
	}

  </script>
</body>

## liens.csv

          
            source
            target
            sharedfollowers

            
              valerie
              francois
              1

            
              charles
              francois
              9

            
              charles
              valerie
              2

            
              marie
              francois
              5

            
              marie
              gaston
              12

            
              marie
              nicolas
              15

            
              marie
              danielle
              1

            
              gaston
              nicolas
              21

            
              gaston
              danielle
              1

            
              danielle
              marie
              3

            
              danielle
              nicolas
              4

            
              danielle
              francois
              4

            
              nicolas
              marie
              1

            
              nicolas
              gaston
              2

            
              nicolas
              danielle
              5

            
              victorine
              gigi
              3

## noeuds.csv

          
            id
            followers
            following

            
              valerie
              17
              500

            
              charles
              83
              80

            
              francois
              904
              15

            
              marie
              7
              5

            
              gaston
              11
              50

            
              danielle
              80
              85

            
              nicolas
              150
              300

            
              victorine
              38
              7

            
              gigi
              12
              12
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.rect { stroke-width: 1; stroke: grey; }
	.x_axis .tick text { transform : translate(5px ,10px) rotate(40deg); }
	.guide { stroke-width: 3; stroke: black; fill: transparent }
	.hidden { display: none; }
	</style>
	</head>

	<body>
	<script>
	var SEPARATOR = "\t";
	var width = 960, height = 600, cellSize = 30;
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var matrixElement = svg.append("g")
	.attr("transform", "translate(50,50)")
	.attr("id", "adjacencyMatrix");

	var color = d3.scaleQuantize() .range(["#ffffff","#e3eef9","#cfe1f2","#b5d4e9","#93c3df","#6daed5","#4b97c9","#2f7ebc","#1864aa","#0a4a90","#08306b"]);

	var matrixData, x, y, scaleSize;

	d3.csv("noeuds.csv").then(nodes => {
	d3.csv("liens.csv").then(edges => {
	matrixData = createAdjacencyMatrix(nodes, edges);
	color = color.domain([0, d3.max(matrixData, (d) => { return +d.sharedfollowers; })]);
	scaleSize = nodes.length * cellSize;

	x = d3.scaleBand()
	.domain(nodes.map(function (el) {return el.id}))
	.range([0, scaleSize])
	y = d3.scaleBand()
	.domain(nodes.map(function (el) {return el.id}))
	// reverse() inverse l'ordre des éléments pour que l'affichage se fasse dans le bon ordre en x : testez sans pour voir ce qui se passe.
	.range([scaleSize, 0])

	drawMatrix(matrixElement, matrixData);
	})
	});

	function drawMatrix(matrixElement, matrixData) {
	// console.warn("Drawing matrix")
	var matrix = matrixElement.selectAll(".rect")
	.data(matrixData);

	var horizGuide = d3.select('#adjacencyMatrix').append('rect')
	.attr('class', 'hidden guide')
	.attr('pointer-events', 'none')
	.attr("height", cellSize)
	.attr("width", scaleSize);
	var verticGuide = d3.select('#adjacencyMatrix').append('rect')
	.attr('class', 'hidden guide')
	.attr('pointer-events', 'none')
	.attr("height", scaleSize)
	.attr("width", cellSize);

	matrix.enter()
	.append("rect")
	.attr("x", (d) => { return cellSize*d.x; })
	.attr("y", (d) => { return scaleSize - cellSize*(d.y+1); }) // Vu qu'on part de la fin, il faut rajouter 1
	.attr("height", cellSize)
	.attr("width", cellSize )
	.style("fill", (d) => color(d.sharedfollowers))
	.attr("class", "rect")
	.on("click", (d) => console.warn(d))
	.on("mouseover", (d) => {
	horizGuide.classed('hidden', false)
	.raise()
	.transition()
	.attr("x", 0)
	.attr("y", scaleSize - cellSize*(d.y+1));

	verticGuide.classed('hidden', false)
	.raise()
	.transition()
	.attr("x", cellSize*d.x)
	.attr("y", 0);
	});
	matrixElement.on('mouseout', function() {
	horizGuide.classed('hidden', true);
	verticGuide.classed('hidden', true);
	});

	// matrixElement.selectAll("rect")

	d3.select("#adjacencyMatrix")
	.append("g")
	.attr("class", "x_axis")
	.attr("transform", `translate(0,${scaleSize})`)
	.call(d3.axisBottom(x))


	d3.select("#adjacencyMatrix")
	.append("g")
	.call(d3.axisLeft(y))
	}

	function createAdjacencyMatrix(nodes,edges) {
	var edgeHash = {};
	for (x in edges) {
	var id = edges[x].source + SEPARATOR + edges[x].target;
	edgeHash[id] = edges[x];
	}
	matrix = [];
	//create all possible edges
	for (const [a, node_a] of nodes.entries()) {
	for (const [b, node_b] of nodes.entries()) {
	var grid = {id: node_a.id + SEPARATOR + node_b.id, x: a, y: b, sharedfollowers: 0};
	if (edgeHash[grid.id]) {
	grid.sharedfollowers = parseInt(edgeHash[grid.id].sharedfollowers);
	}
	matrix.push(grid);
	}
	}
	return matrix;
	}

	</script>
	</body>
source	target	sharedfollowers
valerie	francois	1
charles	francois	9
charles	valerie	2
marie	francois	5
marie	gaston	12
marie	nicolas	15
marie	danielle	1
gaston	nicolas	21
gaston	danielle	1
danielle	marie	3
danielle	nicolas	4
danielle	francois	4
nicolas	marie	1
nicolas	gaston	2
nicolas	danielle	5
victorine	gigi	3
id	followers	following
valerie	17	500
charles	83	80
francois	904	15
marie	7	5
gaston	11	50
danielle	80	85
nicolas	150	300
victorine	38	7
gigi	12	12