bumbeishvili · March 1, 2018 12:33
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/edgelist.csv b/edgelist.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="UTF-8">
 <svg width="960" height="500"></svg>
 <style>
 .node {    
 	fill: #EBD8C1;
 	stroke: #9A8B7A; 
 	stroke-width: 1px;
 }
 circle.active {
 	fill: #FE9922;
 }
 path.arc {
 	stroke: black;
 	fill: none;
 }
 path.active {
 	stroke: #FE9922;
 }
 </style>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
 <script>
 function arc(){
  var promiseWrapper = (d) => new Promise(resolve => d3.csv(d, (p) => resolve(p)))
 	
 	var promiseWrapper = function(d){
 		return new Promise(function(resolve,reject){
 			d3.csv(d, function(b){
 				return resolve(b)
 			})
 		})
 	}
 	Promise.all([promiseWrapper("nodelist.csv"),promiseWrapper("edgelist.csv")]).then(function(resolve){ 
 		createArcDiagram(resolve[0],resolve[1])})	
 	
 	function createArcDiagram(nodes,edges){
 	
  var nodeHash = {};
 		nodes.forEach((node,i) => {
 			nodeHash[node.id] = node;
 			node.x = i * 30
 		})
 	
 		edges.forEach(edge => {
 			edge.weight = parseInt(edge.weight) // Normal weight
 			edge.source = nodeHash[edge.source] // Gets entire "node" data from nodehash of source.
 			edge.target = nodeHash[edge.target] // Gets entire "node" data from nodeHash of target.
 		})
 		
 		var arcG = d3.select("svg").append("g").attr("id","arcG")
 			.attr("transform","translate(50,250)")
 		
 		arcG.selectAll("path")
 			.data(edges)
 			.enter()
 			.append("path") // Create a path for each edge 
 			.attr("class","arc")
 			.style("stroke-width", d => d.weight * 2)
 			.style("opacity",.25)
 			.attr("d", arc)
 		
 		function arc(d,i) {
 			var draw = d3.line().curve(d3.curveBasis)
 			var midX = ((d.source.x + d.target.x) /2 ) // Midway point between two x positions
 			var midY = (d.source.x - d.target.x) // Distance from 0, ends up being the height of the arc
 			return draw([[d.source.x,0],[midX,midY],[d.target.x,0]])

 		}

 		arcG.selectAll("circle")
 			.data(nodes)
 			.enter()
 			.append("circle")
 			.attr("cx", (d,i) => d.x)
 			.attr("r", 10)
 			.attr("class","node")
 		
 		d3.selectAll("circle").on("mouseover", nodeOver)
 		d3.selectAll("path").on("mouseover", edgeOver)
 		
 		function nodeOver(d){
 			d3.selectAll("circle").classed("active", p => p === d) // This function is a useful way to add a class to style an object
 			d3.selectAll("path").classed("active", p => p.source === d || p.target === d)
 		}
 		
 		function edgeOver(){
 			
 		}
 		
 		
 	}
 }

 arc();
 </script>
diff --git a/nodelist.csv b/nodelist.csv
diff --git a/thumbnail.png b/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>
	<meta charset="UTF-8">
	<svg width="960" height="500"></svg>
	<style>
	.node {
	fill: #EBD8C1;
	stroke: #9A8B7A;
	stroke-width: 1px;
	}
	circle.active {
	fill: #FE9922;
	}
	path.arc {
	stroke: black;
	fill: none;
	}
	path.active {
	stroke: #FE9922;
	}
	</style>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
	<script>
	function arc(){
	var promiseWrapper = (d) => new Promise(resolve => d3.csv(d, (p) => resolve(p)))

	var promiseWrapper = function(d){
	return new Promise(function(resolve,reject){
	d3.csv(d, function(b){
	return resolve(b)
	})
	})
	}
	Promise.all([promiseWrapper("nodelist.csv"),promiseWrapper("edgelist.csv")]).then(function(resolve){
	createArcDiagram(resolve[0],resolve[1])})

	function createArcDiagram(nodes,edges){

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

	edges.forEach(edge => {
	edge.weight = parseInt(edge.weight) // Normal weight
	edge.source = nodeHash[edge.source] // Gets entire "node" data from nodehash of source.
	edge.target = nodeHash[edge.target] // Gets entire "node" data from nodeHash of target.
	})

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

	arcG.selectAll("path")
	.data(edges)
	.enter()
	.append("path") // Create a path for each edge
	.attr("class","arc")
	.style("stroke-width", d => d.weight * 2)
	.style("opacity",.25)
	.attr("d", arc)

	function arc(d,i) {
	var draw = d3.line().curve(d3.curveBasis)
	var midX = ((d.source.x + d.target.x) /2 ) // Midway point between two x positions
	var midY = (d.source.x - d.target.x) // Distance from 0, ends up being the height of the arc
	return draw([[d.source.x,0],[midX,midY],[d.target.x,0]])

	}

	arcG.selectAll("circle")
	.data(nodes)
	.enter()
	.append("circle")
	.attr("cx", (d,i) => d.x)
	.attr("r", 10)
	.attr("class","node")

	d3.selectAll("circle").on("mouseover", nodeOver)
	d3.selectAll("path").on("mouseover", edgeOver)

	function nodeOver(d){
	d3.selectAll("circle").classed("active", p => p === d) // This function is a useful way to add a class to style an object
	d3.selectAll("path").classed("active", p => p.source === d \|\| p.target === d)
	}

	function edgeOver(){

	}


	}
	}

	arc();
	</script>
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