jwilber/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## edgelist.csv

          
            source
            target
            weight

            
              Jim
              Irene
              5

            
              Susie
              Irene
              5

            
              Jim
              Susie
              5

            
              Susie
              Kai
              5

            
              Shirley
              Kai
              5

            
              Shelby
              Kai
              5

            
              Kai
              Susie
              5

            
              Kai
              Shirley
              5

            
              Kai
              Shelby
              5

            
              Erik
              Zan
              5

            
              Tony
              Zan
              5

            
              Tony
              Fil
              5

            
              Tony
              Ian
              5

            
              Tony
              Adam
              5

            
              Fil
              Tony
              4

            
              Ian
              Miles
              1

            
              Adam
              Tony
              3

            
              Miles
              Ian
              2

            
              Miles
              Ian
              3

            
              Erik
              Kai
              2

            
              Erik
              Nadieh
              2

            
              Jim
              Nadieh
              2

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .arc {
      stroke: #543f51;
      fill: none;
    }
    .node {
      fill: olive;
      stroke: #9A8B7A;
      stroke-width: 1px;
    }
    circle.active {
      fill: #FE9922;
    }
    path.active {
      stroke: #FE9922;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 1200)
      .attr("height", 500)

    var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));

      Promise
        .all([
          PromiseWrapper("nodelist.csv"),
          PromiseWrapper("edgelist.csv")
        ])
        .then(resolve => {
          createArcDiagram(resolve[0], resolve[1]);
        });

    function createArcDiagram(nodes, edges) {

      var nodeHash = {};
      nodes.forEach((node, x) => {
        nodeHash[node.id] = node;
        node.x = parseInt(x) * 50;
      })

      edges.forEach( edge => {
        edge.weight = parseInt(edge.weight);
        edge.source = nodeHash[edge.source];
        edge.target = nodeHash[edge.target];
      })

      var arcG = d3.select('svg').append('g')
      	.attr('id', 'arcG')
      	.attr('transform', 'translate(50, 250)');

      arcG.selectAll('path')
      	.data(edges)
      	.enter()
      	.append('path')
      	.attr('class', 'arc')
      	.style('stroke-width', d => d.weight * 2)
      	.style('opacity', .25)
      	.attr('d', arc)
      arcG.selectAll('circle')
      	.data(nodes)
      	.enter()
      	.append('circle')
      	.attr('class', 'node')
      	.attr('r', 15)
      	.attr('cx', d => d.x)

      function arc(d,i) {
        var draw = d3.line().curve(d3.curveBasis)
        var midX = (d.source.x + d.target.x) / 2;
        console.log(midX)
        var midY = (d.source.x - d.target.x) / 2;
        console.log("midY", midY)
        return draw([[d.source.x, 0], [midX, midY], [d.target.x, 0]])
      }

      d3.selectAll('.node').on('mouseover', nodeOver);
      function nodeOver(d) {
        console.log(d)
        d3.selectAll('.node').classed('active', p => p == d)
        d3.selectAll('.arc').classed('active', p =>
                                     d.id == p.source.id || d.id == p.target.id)
      }
      d3.selectAll('.node').on('mouseout', nodeOut);
      function nodeOut() {
        d3.selectAll('.node').classed('active', false)
        d3.selectAll('.arc').classed('active', false)
      }

    }


  </script>
</body>

## nodelist.csv

          
            id
            role
            salary

            
              Irene
              manager
              300000

            
              Zan
              manager
              380000

            
              Jim
              employee
              150000

            
              Susie
              employee
              90000

            
              Kai
              employee
              135000

            
              Shirley
              employee
              60000

            
              Erik
              employee
              90000

            
              Shelby
              employee
              150000

            
              Tony
              employee
              72000

            
              Fil
              employee
              35000

            
              Adam
              employee
              85000

            
              Ian
              employee
              83000

            
              Miles
              employee
              99000

            
              Sarah
              employee
              160000

            
              Nadieh
              contractor
              240000

            
              Hajra
              contractor
              280000

## thumbnail.png

      
    Raw
  

              thumbnail.png
source	target	weight
Jim	Irene	5
Susie	Irene	5
Jim	Susie	5
Susie	Kai	5
Shirley	Kai	5
Shelby	Kai	5
Kai	Susie	5
Kai	Shirley	5
Kai	Shelby	5
Erik	Zan	5
Tony	Zan	5
Tony	Fil	5
Tony	Ian	5
Tony	Adam	5
Fil	Tony	4
Ian	Miles	1
Adam	Tony	3
Miles	Ian	2
Miles	Ian	3
Erik	Kai	2
Erik	Nadieh	2
Jim	Nadieh	2
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	.arc {
	stroke: #543f51;
	fill: none;
	}
	.node {
	fill: olive;
	stroke: #9A8B7A;
	stroke-width: 1px;
	}
	circle.active {
	fill: #FE9922;
	}
	path.active {
	stroke: #FE9922;
	}
	</style>
	</head>

	<body>
	<script>
	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", 1200)
	.attr("height", 500)

	var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));

	Promise
	.all([
	PromiseWrapper("nodelist.csv"),
	PromiseWrapper("edgelist.csv")
	])
	.then(resolve => {
	createArcDiagram(resolve[0], resolve[1]);
	});

	function createArcDiagram(nodes, edges) {

	var nodeHash = {};
	nodes.forEach((node, x) => {
	nodeHash[node.id] = node;
	node.x = parseInt(x) * 50;
	})

	edges.forEach( edge => {
	edge.weight = parseInt(edge.weight);
	edge.source = nodeHash[edge.source];
	edge.target = nodeHash[edge.target];
	})

	var arcG = d3.select('svg').append('g')
	.attr('id', 'arcG')
	.attr('transform', 'translate(50, 250)');

	arcG.selectAll('path')
	.data(edges)
	.enter()
	.append('path')
	.attr('class', 'arc')
	.style('stroke-width', d => d.weight * 2)
	.style('opacity', .25)
	.attr('d', arc)
	arcG.selectAll('circle')
	.data(nodes)
	.enter()
	.append('circle')
	.attr('class', 'node')
	.attr('r', 15)
	.attr('cx', d => d.x)

	function arc(d,i) {
	var draw = d3.line().curve(d3.curveBasis)
	var midX = (d.source.x + d.target.x) / 2;
	console.log(midX)
	var midY = (d.source.x - d.target.x) / 2;
	console.log("midY", midY)
	return draw([[d.source.x, 0], [midX, midY], [d.target.x, 0]])
	}

	d3.selectAll('.node').on('mouseover', nodeOver);
	function nodeOver(d) {
	console.log(d)
	d3.selectAll('.node').classed('active', p => p == d)
	d3.selectAll('.arc').classed('active', p =>
	d.id == p.source.id \|\| d.id == p.target.id)
	}
	d3.selectAll('.node').on('mouseout', nodeOut);
	function nodeOut() {
	d3.selectAll('.node').classed('active', false)
	d3.selectAll('.arc').classed('active', false)
	}

	}



	</script>
	</body>
id	role	salary
Irene	manager	300000
Zan	manager	380000
Jim	employee	150000
Susie	employee	90000
Kai	employee	135000
Shirley	employee	60000
Erik	employee	90000
Shelby	employee	150000
Tony	employee	72000
Fil	employee	35000
Adam	employee	85000
Ian	employee	83000
Miles	employee	99000
Sarah	employee	160000
Nadieh	contractor	240000
Hajra	contractor	280000