<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.links line {<!-- [et_pb_line_break_holder] --> stroke: #999;<!-- [et_pb_line_break_holder] --> stroke-opacity: 0.6;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.nodes circle {<!-- [et_pb_line_break_holder] --> stroke: #fff;<!-- [et_pb_line_break_holder] --> stroke-width: 1.5px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></style><!-- [et_pb_line_break_holder] --><svg viewBox="0 0 100 100"<!-- [et_pb_line_break_holder] --> xmlns="http://www.w3.org/2000/svg" <!-- [et_pb_line_break_holder] --> xmlns:xlink="http://www.w3.org/1999/xlink"><!-- [et_pb_line_break_holder] --> <clipPath id="clipCircle"><!-- [et_pb_line_break_holder] --> <circle r="50" cx="50" cy="50"/><!-- [et_pb_line_break_holder] --> </clipPath> <!-- [et_pb_line_break_holder] --></svg><!-- [et_pb_line_break_holder] --><div id="cja-org-graph"></div><!-- [et_pb_line_break_holder] --><script src="https://d3js.org/d3.v4.min.js"></script><!-- [et_pb_line_break_holder] --><script><!-- [et_pb_line_break_holder] -->jQuery(document).ready(function($){<!-- [et_pb_line_break_holder] -->var width = 960,<!-- [et_pb_line_break_holder] --> height = 500<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->var svg = d3.select("#cja-org-graph").append("svg")<!-- [et_pb_line_break_holder] --> .attr("width", width)<!-- [et_pb_line_break_holder] --> .attr("height", height);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// d3.json(graph, function(error, graph) {<!-- [et_pb_line_break_holder] -->// if (error) throw error;<!-- [et_pb_line_break_holder] -->/*<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->Original structure of json<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> "nodes":[<!-- [et_pb_line_break_holder] --> {"id":"name", "group":1}<!-- [et_pb_line_break_holder] --> ],<!-- [et_pb_line_break_holder] --> "links":[<!-- [et_pb_line_break_holder] --> {"source":"org_name", "target":"association", "value": 1}<!-- [et_pb_line_break_holder] --> ]<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->modified json<!-- [et_pb_line_break_holder] -->{<!-- [et_pb_line_break_holder] --> "nodes":[<!-- [et_pb_line_break_holder] --> {"id":"name", "group":1, "image_url": 'http://alsdfjk.com'}<!-- [et_pb_line_break_holder] --> ],<!-- [et_pb_line_break_holder] --> "links":[<!-- [et_pb_line_break_holder] --> {"source":"org_name", "target":"association", "value": 1}<!-- [et_pb_line_break_holder] --> ]<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->*/<!-- [et_pb_line_break_holder] -->var graph = {};<!-- [et_pb_line_break_holder] -->graph.nodes =[];<!-- [et_pb_line_break_holder] -->graph["links"] = [];<!-- [et_pb_line_break_holder] -->$('div[data-node="graph-node"]').each(function(){<!-- [et_pb_line_break_holder] --> var pushInfo ={}<!-- [et_pb_line_break_holder] --> var node_name = $(this).attr('data-node-id');<!-- [et_pb_line_break_holder] --> var node_group = $(this).attr('data-group');<!-- [et_pb_line_break_holder] --> var group_type = $(this).attr('data-group-type');<!-- [et_pb_line_break_holder] --> pushInfo = {<!-- [et_pb_line_break_holder] --> 'id':node_name,<!-- [et_pb_line_break_holder] --> 'group': node_group<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if(group_type == 'Organization'){<!-- [et_pb_line_break_holder] --> pushInfo.image_url = $(this).attr('data-logo-image');<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> pushInfo.image_url = 'https://climatejusticealliance.org/wp-content/uploads/2018/01/cja-logo.png';<!-- [et_pb_line_break_holder] --> // pushInfo.fx = 'fixed';<!-- [et_pb_line_break_holder] --> // pushInfo.fy = 'fixed';<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> graph.nodes.push(pushInfo);<!-- [et_pb_line_break_holder] -->})<!-- [et_pb_line_break_holder] -->$('div[data-link="graph-link"]').each(function(){<!-- [et_pb_line_break_holder] --> var link_target = $(this).attr('data-link-target');<!-- [et_pb_line_break_holder] --> var link_source = $(this).attr('data-link-source');<!-- [et_pb_line_break_holder] --> graph["links"].push({<!-- [et_pb_line_break_holder] --> 'source':link_target,<!-- [et_pb_line_break_holder] --> 'target': link_source,<!-- [et_pb_line_break_holder] --> 'value': 4<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] -->})<!-- [et_pb_line_break_holder] -->//<!-- [et_pb_line_break_holder] -->var simulation = d3.forceSimulation()<!-- [et_pb_line_break_holder] --> .force("link", d3.forceLink().id(function(d) { return d.id; }))<!-- [et_pb_line_break_holder] --> .force("charge", function(d){<!-- [et_pb_line_break_holder] --> var charge = -1;<!-- [et_pb_line_break_holder] --> // if (d.index === 0) charge = 10 * charge;<!-- [et_pb_line_break_holder] --> return charge;<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> .force("center", d3.forceCenter(width / 2, height / 2));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var link = svg.append("g")<!-- [et_pb_line_break_holder] --> .attr("class", "links")<!-- [et_pb_line_break_holder] --> .selectAll("line")<!-- [et_pb_line_break_holder] --> .data(graph.links)<!-- [et_pb_line_break_holder] --> .enter().append("line")<!-- [et_pb_line_break_holder] --> .attr("stroke-width", function(d) { return Math.sqrt(d.value); });<!-- [et_pb_line_break_holder] --> var wincrement = width/6;<!-- [et_pb_line_break_holder] --> var hincrement = height/6;<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var node = svg.append("g")<!-- [et_pb_line_break_holder] --> .attr("class", "nodes")<!-- [et_pb_line_break_holder] --> .selectAll("image")<!-- [et_pb_line_break_holder] --> .data(graph.nodes)<!-- [et_pb_line_break_holder] --> .enter().append('image')<!-- [et_pb_line_break_holder] --> .attr("height", 40)<!-- [et_pb_line_break_holder] --> .attr('width', 40)<!-- [et_pb_line_break_holder] --> .attr("href", function(d) { return d.image_url; })<!-- [et_pb_line_break_holder] --> .attr('fx', function(d){return d.image_url == 'https://climatejusticealliance.org/wp-content/uploads/2018/01/cja-logo.png' ? wincrement : 1})<!-- [et_pb_line_break_holder] --> .attr('fy', function(d){return d.image_url == 'https://climatejusticealliance.org/wp-content/uploads/2018/01/cja-logo.png' ? hincrement : 2})<!-- [et_pb_line_break_holder] --> .call(d3.drag()<!-- [et_pb_line_break_holder] --> .on("start", dragstarted)<!-- [et_pb_line_break_holder] --> .on("drag", dragged)<!-- [et_pb_line_break_holder] --> .on("end", dragended));<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // node.forEach(d => { const t = d; t.fixed = true });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> var text = svg.append('g').attr('class','texts')<!-- [et_pb_line_break_holder] --> .selectAll('text')<!-- [et_pb_line_break_holder] --> .data(graph.nodes)<!-- [et_pb_line_break_holder] --> .enter().append("text")<!-- [et_pb_line_break_holder] --> .attr('dx', 15)<!-- [et_pb_line_break_holder] --> .attr('dy', 4)<!-- [et_pb_line_break_holder] --> .text(function(d) { return d.id; });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> simulation<!-- [et_pb_line_break_holder] --> .nodes(graph.nodes)<!-- [et_pb_line_break_holder] --> .on("tick", ticked);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> simulation.force("link")<!-- [et_pb_line_break_holder] --> .links(graph.links);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function ticked() {<!-- [et_pb_line_break_holder] --> link<!-- [et_pb_line_break_holder] --> .attr("x1", function(d) { return d.source.x; })<!-- [et_pb_line_break_holder] --> .attr("y1", function(d) { return d.source.y; })<!-- [et_pb_line_break_holder] --> .attr("x2", function(d) { return d.target.x; })<!-- [et_pb_line_break_holder] --> .attr("y2", function(d) { return d.target.y; });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> node<!-- [et_pb_line_break_holder] --> .attr("x", function(d) { return d.x-20; })<!-- [et_pb_line_break_holder] --> .attr("y", function(d) { return d.y-20; });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /*node<!-- [et_pb_line_break_holder] --> .attr("x", function(d) { if(d.fx=='fixed') {return d.x-20;} else{ return 0;} })<!-- [et_pb_line_break_holder] --> .attr("y", function(d) { if(d.fy=='fixed') {return d.y-20;} else{ return 0;} });<!-- [et_pb_line_break_holder] --> */<!-- [et_pb_line_break_holder] --> text<!-- [et_pb_line_break_holder] --> .attr("x", function(d) { return d.x; })<!-- [et_pb_line_break_holder] --> .attr("y", function(d) { return d.y; });<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->// });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function dragstarted(d) {<!-- [et_pb_line_break_holder] --> if (!d3.event.active) simulation.alphaTarget(0.3).restart();<!-- [et_pb_line_break_holder] --> d.fx = d.x;<!-- [et_pb_line_break_holder] --> d.fy = d.y;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function dragged(d) {<!-- [et_pb_line_break_holder] --> d.fx = d3.event.x;<!-- [et_pb_line_break_holder] --> d.fy = d3.event.y;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->function dragended(d) {<!-- [et_pb_line_break_holder] --> if (!d3.event.active) simulation.alphaTarget(0);<!-- [et_pb_line_break_holder] --> d.fx = null;<!-- [et_pb_line_break_holder] --> d.fy = null;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->})<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></script>