sweemeng · May 12, 2016 07:27
diff --git a/popitvisualizer.html b/popitvisualizer.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>

        .link {
          stroke: #aaa;
        }

        .node text {
        stroke:#333;
        cursos:pointer;
        }

        .node circle{
        stroke:#fff;
        stroke-width:3px;
        fill:#555;
        }
    </style>
 </head>
 <body>
    <script>
        var data = {
            "nodes":[],
            "links":[]
        };

        var api_endpoint = "http://api.popit.sinarproject.org/en";
        var instance;

        var width = 960,
            height = 500;

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        var force = d3.layout.force()
                .nodes(data.nodes)
                .links(data.links)
                .charge(-400)
                .linkDistance(100)
                .size([width, height])
                .on("tick", tick);

        var node = svg.selectAll(".node"),
            link = svg.selectAll(".link");

        promise = requestNode("persons", "55b4c72c98f2c81a501e11f4");
        promise.then(addNode,
            function(error){
                console.log(error);
            });

        console.log(data);
        console.log(instance);

        function requestNode(entity, entity_id){
            url = api_endpoint + "/" + entity + "/" + entity_id;
            var promise = new Promise(function(resolve, reject){
                d3.json(url, function(error, resp){
                    if(error) reject(error);
                    instance = resp.result;
                    instance.memberships.forEach(function (element, index, array) {
                        if(element["post_id"]) {
                            post_url = api_endpoint + "/" + "posts" + element["post_id"];
                            post_promise = new Promise(function(resolve, reject){
                                d3.json(post_url, function (error, resp) {
                                    if(error) reject(error);
                                   resolve(resp.result);
                                });
                            });
                            post_promise.then(
                                    function(result){
                                        instance.post = result;
                                    }
                            )
                        }
                        person_url = api_endpoint + "/" + "persons" + element["person_id"];
                        person_promise = new Promise(function(resolve, reject){
                            d3.json(person_url, function (error, resp) {
                               if(error) reject(error);
                               resolve(resp.result);
                            });
                        });
                        person_promise.then(
                             function(result){
                                 instance.person = result;
                             }
                        );

                        organization_url = api_endpoint + "/" + "organizations" + element["organization_id"];
                        organization_promise = new Promise(function(resolve, reject) {
                            d3.json(person_url, function (error, resp) {
                               if(error) reject(error);
                               resolve(resp.result);
                            });
                        });

                        organization_promise.then(
                                function(result){
                                    instance.organization = result;
                                }
                        );

                    });
                    output = { instance:instance, entity: entity}
                    resolve(output);
                });
            });
            return promise
        }

        function addNode(api_result){
            result = api_result.instance;
            entity = api_result.entity;
            console.log(result);
            console.log(entity);
            if(entity=="posts"){
                name = result.label;
            }
            else{
                name = result.name;
            }

            parent = {name:name, id: result.id, entity: entity };
            data.nodes.push(parent);
            result.memberships.forEach(function(element, index, array){

                person = {name:element["person_id"], id: element["person_id"], entity: "persons" };
                // person = {name:element["person"]["name"], id: element["person_id"], entity: "persons" };
                data.nodes.push(person);
                organization = {name:element["organization_id"], id: element["organization_id"], entity: "organizations" };
                // organization = {name:element["organization"]["name"], id: element["organization_id"], entity: "organizations" };
                data.nodes.push(organization);
                if(element["post_id"]){
                    post = {name:element["post_id"], id: element["post_id"], entity: "posts" };
                    // post = {name:element["post"]["name"], id: element["post_id"], entity: "posts" };
                    data.nodes.push(post);
                }
                if(entity == "persons"){
                    if(element["post_id"]){
                        data.links.push({source: post, target:parent});
                        data.links.push({source: post, target:organization});
                    }
                    else{
                        data.links.push({source:organization, target:parent})
                    }
                }
                else if(entity == "organizations"){
                    if(element["post_id"]){
                        data.links.push({source: post, target:parent});
                        data.links.push({source: post, target:person});
                    }
                    else{
                        data.links.push({source:person, target:parent})
                    }
                }
                else if(entity == "posts"){
                    data.links.push({source: person, target:parent});
                    data.links.push({source: organization, target:parent});
                }

            });
            render();
        }

        function render(){
          console.log(data.links);
          link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
          link.enter().insert("line", ".node").attr("class", "link");
          link.exit().remove();

          node = node.data(force.nodes(), function(d) { return d.id;});
          node.enter().append("circle").attr("class", function(d) { return "node " + d.id; }).attr("r", 8);
          node.exit().remove();

          force.start();
        }
        function tick() {
          node.attr("cx", function(d) { return d.x; })
              .attr("cy", function(d) { return d.y; })

          link.attr("x1", function(d) { return d.source.x; })
              .attr("y1", function(d) { return d.source.y; })
              .attr("x2", function(d) { return d.target.x; })
              .attr("y2", function(d) { return d.target.y; });
        }


    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>

	.link {
	stroke: #aaa;
	}

	.node text {
	stroke:#333;
	cursos:pointer;
	}

	.node circle{
	stroke:#fff;
	stroke-width:3px;
	fill:#555;
	}
	</style>
	</head>
	<body>
	<script>
	var data = {
	"nodes":[],
	"links":[]
	};

	var api_endpoint = "http://api.popit.sinarproject.org/en";
	var instance;

	var width = 960,
	height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var force = d3.layout.force()
	.nodes(data.nodes)
	.links(data.links)
	.charge(-400)
	.linkDistance(100)
	.size([width, height])
	.on("tick", tick);

	var node = svg.selectAll(".node"),
	link = svg.selectAll(".link");

	promise = requestNode("persons", "55b4c72c98f2c81a501e11f4");
	promise.then(addNode,
	function(error){
	console.log(error);
	});

	console.log(data);
	console.log(instance);

	function requestNode(entity, entity_id){
	url = api_endpoint + "/" + entity + "/" + entity_id;
	var promise = new Promise(function(resolve, reject){
	d3.json(url, function(error, resp){
	if(error) reject(error);
	instance = resp.result;
	instance.memberships.forEach(function (element, index, array) {
	if(element["post_id"]) {
	post_url = api_endpoint + "/" + "posts" + element["post_id"];
	post_promise = new Promise(function(resolve, reject){
	d3.json(post_url, function (error, resp) {
	if(error) reject(error);
	resolve(resp.result);
	});
	});
	post_promise.then(
	function(result){
	instance.post = result;
	}
	)
	}
	person_url = api_endpoint + "/" + "persons" + element["person_id"];
	person_promise = new Promise(function(resolve, reject){
	d3.json(person_url, function (error, resp) {
	if(error) reject(error);
	resolve(resp.result);
	});
	});
	person_promise.then(
	function(result){
	instance.person = result;
	}
	);

	organization_url = api_endpoint + "/" + "organizations" + element["organization_id"];
	organization_promise = new Promise(function(resolve, reject) {
	d3.json(person_url, function (error, resp) {
	if(error) reject(error);
	resolve(resp.result);
	});
	});

	organization_promise.then(
	function(result){
	instance.organization = result;
	}
	);

	});
	output = { instance:instance, entity: entity}
	resolve(output);
	});
	});
	return promise
	}

	function addNode(api_result){
	result = api_result.instance;
	entity = api_result.entity;
	console.log(result);
	console.log(entity);
	if(entity=="posts"){
	name = result.label;
	}
	else{
	name = result.name;
	}

	parent = {name:name, id: result.id, entity: entity };
	data.nodes.push(parent);
	result.memberships.forEach(function(element, index, array){

	person = {name:element["person_id"], id: element["person_id"], entity: "persons" };
	// person = {name:element["person"]["name"], id: element["person_id"], entity: "persons" };
	data.nodes.push(person);
	organization = {name:element["organization_id"], id: element["organization_id"], entity: "organizations" };
	// organization = {name:element["organization"]["name"], id: element["organization_id"], entity: "organizations" };
	data.nodes.push(organization);
	if(element["post_id"]){
	post = {name:element["post_id"], id: element["post_id"], entity: "posts" };
	// post = {name:element["post"]["name"], id: element["post_id"], entity: "posts" };
	data.nodes.push(post);
	}
	if(entity == "persons"){
	if(element["post_id"]){
	data.links.push({source: post, target:parent});
	data.links.push({source: post, target:organization});
	}
	else{
	data.links.push({source:organization, target:parent})
	}
	}
	else if(entity == "organizations"){
	if(element["post_id"]){
	data.links.push({source: post, target:parent});
	data.links.push({source: post, target:person});
	}
	else{
	data.links.push({source:person, target:parent})
	}
	}
	else if(entity == "posts"){
	data.links.push({source: person, target:parent});
	data.links.push({source: organization, target:parent});
	}

	});
	render();
	}

	function render(){
	console.log(data.links);
	link = link.data(force.links(), function(d) { return d.source.id + "-" + d.target.id; });
	link.enter().insert("line", ".node").attr("class", "link");
	link.exit().remove();

	node = node.data(force.nodes(), function(d) { return d.id;});
	node.enter().append("circle").attr("class", function(d) { return "node " + d.id; }).attr("r", 8);
	node.exit().remove();

	force.start();
	}
	function tick() {
	node.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })

	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });
	}


	</script>
	</body>
	</html>