ojassvi · July 9, 2018 21:49
diff --git a/.block b/.block
 license: mit
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>
 <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
    <style>
    .node {
      fill: #4F442B;
    }

    .link {
      stroke: #93C464;
    }
    </style>
  </head>
  <body>
    <div id="viz">
      <svg style="width:600px;height:600px;" ></svg>
    </div>
    <script>
      var roleScale = d3.scaleOrdinal()
        .domain(["contractor", "employee", "manager"])
        .range(["#75739F", "#41A368", "#FE9922"]);
      
      var PromiseWrapper = d => new Promise(resolve => d3.csv(d, p => resolve(p)));
      
      Promise
        .all([
          PromiseWrapper("../data/nodelist.csv"),
          PromiseWrapper("../data/edgelist.csv")
        ])
        .then(resolve => {
          createForceLayout(resolve[0], resolve[1]);
        });
      
      function createForceLayout(nodes,edges) {
        var nodeHash = {};
        nodes.forEach(node => {
          nodeHash[node.id] = node;
        });
        
        edges.forEach(edge => {
          edge.weight = parseInt(edge.weight);
          edge.source = nodeHash[edge.source];
          edge.target = nodeHash[edge.target];
        });
        
        var linkForce = d3.forceLink();
        
        var simulation = d3.forceSimulation()
          .force("charge", d3.forceManyBody().strength(-40))
          .force("center", d3.forceCenter().x(300).y(300))
          .force("link", linkForce)
          .nodes(nodes)
          .on("tick", forceTick);
        
        simulation.force("link").links(edges);
        
        d3.select("svg").selectAll("line.link")
          .data(edges, d => `${d.source.id}-${d.target.id}`)
          .enter()
          .append("line")
            .attr("class", "link")
            .style("opacity", .5)
            .style("stroke-width", d => d.weight);
                
        var nodeEnter = d3.select("svg").selectAll("g.node")
          .data(nodes, d => d.id)
          .enter()
          .append("g")
            .attr("class", "node");
        nodeEnter.append("circle")
          .attr("r", 5)
          .style("fill", d => roleScale(d.role));
        nodeEnter.append("text")
          .style("text-anchor", "middle")
          .attr("y", 15)
          .text(d => d.id);
        
        function forceTick() {
          d3.selectAll("line.link")
            .attr("x1", d => d.source.x)
            .attr("x2", d => d.target.x)
            .attr("y1", d => d.source.y)
            .attr("y2", d => d.target.y);
          d3.selectAll("g.node")
            .attr("transform", d => `translate(${d.x},${d.y})`);
        }
      }
    </script>
  </body>
 </html>
diff --git a/nodelist.csv b/nodelist.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
	<!doctype html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
	<style>
	.node {
	fill: #4F442B;
	}

	.link {
	stroke: #93C464;
	}
	</style>
	</head>
	<body>
	<div id="viz">
	<svg style="width:600px;height:600px;" ></svg>
	</div>
	<script>
	var roleScale = d3.scaleOrdinal()
	.domain(["contractor", "employee", "manager"])
	.range(["#75739F", "#41A368", "#FE9922"]);

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

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

	function createForceLayout(nodes,edges) {
	var nodeHash = {};
	nodes.forEach(node => {
	nodeHash[node.id] = node;
	});

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

	var linkForce = d3.forceLink();

	var simulation = d3.forceSimulation()
	.force("charge", d3.forceManyBody().strength(-40))
	.force("center", d3.forceCenter().x(300).y(300))
	.force("link", linkForce)
	.nodes(nodes)
	.on("tick", forceTick);

	simulation.force("link").links(edges);

	d3.select("svg").selectAll("line.link")
	.data(edges, d => `${d.source.id}-${d.target.id}`)
	.enter()
	.append("line")
	.attr("class", "link")
	.style("opacity", .5)
	.style("stroke-width", d => d.weight);

	var nodeEnter = d3.select("svg").selectAll("g.node")
	.data(nodes, d => d.id)
	.enter()
	.append("g")
	.attr("class", "node");
	nodeEnter.append("circle")
	.attr("r", 5)
	.style("fill", d => roleScale(d.role));
	nodeEnter.append("text")
	.style("text-anchor", "middle")
	.attr("y", 15)
	.text(d => d.id);

	function forceTick() {
	d3.selectAll("line.link")
	.attr("x1", d => d.source.x)
	.attr("x2", d => d.target.x)
	.attr("y1", d => d.source.y)
	.attr("y2", d => d.target.y);
	d3.selectAll("g.node")
	.attr("transform", d => `translate(${d.x},${d.y})`);
	}
	}
	</script>
	</body>
	</html>
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