chart = { //bring in data and create svg const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const [width, height] = [1150, 650]; const svg = d3.select(DOM.svg(width, height)); svg.style("background-color", "#112e51") // create link reference let linkedByIndex = {}; data.links.forEach(d => { linkedByIndex[`${d.source},${d.target}`] = true; }); // nodes map let nodesById = {}; data.nodes.forEach(d => { nodesById[d.id] = {...d}; }) console.log(nodesById); //create the link variables // check if linked by source to target const isConnectedAsSource = (a, b) => linkedByIndex[`${a},${b}`]; // check if linked by target to source it's connected const isConnectedAsTarget = (a, b) => linkedByIndex[`${b},${a}`]; // if linked by target or source its connected const isConnected = (a, b) => isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a === b; const isEqual = (a, b) => a === b; //circle size const nodeRadius = d => .00005 * d.votes; //zoom functionality const baseGroup = svg.append("g"); function zoomed() { baseGroup.attr("transform", d3.event.transform); } const zoom = d3.zoom() .scaleExtent([0.4, 8]) //.translateExtent([[-100, -100], [width + 1000, height + 1000]]) .on("zoom", zoomed); svg.call(zoom); let ifClicked = false; //set up force directed network const simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; }).strength(0.08)) .force("charge", d3.forceManyBody()) .force("y", d3.forceY(height/2).strength(.1)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(d => { // if(d.network === "FX"){return width/7}else if(d.network ==="Nickelodeon" etc if (d.network_id === 1) { return width/9 - 50; // width/5 - 50 - 400; } return width/9 * d.network_id; // width/5 * d.group - 400; }).strength(0.95)) //.force("collide", d3.forceCollide().radius(d => nodeRadius(d) + 3).iterations(2)); .force("collide", d3.forceCollide().radius(d => nodeRadius(d) + 3).iterations(2)); const link = baseGroup.append("g") .selectAll("line") .data(links) .join("line") .classed('link', true) .style('stroke', d => { //console.log(d.target) // link colors change so set to race //make people this color const pplRace = nodesById[d.target].race; if(pplRace === "White" ){ return'#22c5dd'; } else if(pplRace === "Black" || pplRace === "POC"){ return "#C5DD22"; } else{ // // make tv shows this color return"#999"; } }) .style("stroke-opacity", 0.5) .style("stroke-width", 0.5); const node = baseGroup.append("g") .selectAll("circle") .data(nodes) .join("circle") .classed('node', true) .attr("r", d => nodeRadius(d)) .attr("fill",d =>{ // //make POC this color if(d.race === "White"){ return'#22c5dd'; } else{ // make white ppl this color if(d.race == "Black" || d.race == "POC"){ return"#C5DD22"; //make shows this color } else{ return "#999" } } }); // edit context menu const rightClickItems = ['Expand sub-network of the pattern', 'Mark the pattern', 'Mark compound population']; const menuItems = baseGroup.selectAll(".menuitems") .data(rightClickItems) .join('g') .classed('menuitems', true) .attr('visibility', "hidden") .attr('transform', `translate(${0}, ${0})`) //.on('click', rightClickActions); menuItems.append('rect') .attr('x', 0) .attr('y', (d,i) => i * 20) .attr('width', 180) .attr('height', 20); menuItems.append('text') .text(d => d) .attr('x', 3) .attr('y', (d,i) => 13 + i * 20) .style('fill', 'black') .style('font-size', '11px'); function ticked() { 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; }); node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } simulation .nodes(nodes) .on("tick", ticked); simulation.force("link") .links(links); const mouseOverFunction = d => { tooltip.style("visibility", "visible") tooltip.style("color", "white") tooltip.style("background-color", "rgba(69,77,93,.9)") tooltip.style("display","block") tooltip.style("font-size","14px") tooltip.style("max-width","320px") tooltip.style("text-overflow","ellipsis") tooltip.style("padding",".2rem .4rem") tooltip.style("position","absolute") tooltip.style("z-index","300") tooltip.style("border-radius",".1rem") tooltip.style("whitespace","pre") tooltip.style("font-family","Helvetica") .html(() => { const content = `Name: ${d.name}`+'
' +`Occupation: ${d.role}`+'
' +`Race: ${d.race}`+'
' + `Show: ${d.title}`+'
' + `Total Votes: ${d.votes}`+'
' + `Network: ${d.network}`+'
'; return content; }); if (ifClicked) return; node .transition(500) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 1.0; } return 0.1; }); link .transition(500) .style('stroke-opacity', o => { console.log(o.source === d) return (o.source === d || o.target === d ? 1 : 0.1)}) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); }; const mouseOutFunction = d => { tooltip.style("visibility", "hidden"); if (ifClicked) return; node .transition(500) .style('opacity', 1); link .transition(500) .style("stroke-opacity", o => { console.log(o.value) }); }; const mouseClickFunction = d => { // we don't want the click event bubble up to svg d3.event.stopPropagation(); menuItems.attr('visibility', "hidden"); ifClicked = true; node .transition(500) .style('opacity', 1) link .transition(500); node .transition(500) .style('opacity', o => { const isConnectedValue = isConnected(o.id, d.id); if (isConnectedValue) { return 1.0; } return 0.1 }) link .transition(500) .style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : 0.1)) .transition(500) .attr('marker-end', o => (o.source === d || o.target === d ? 'url(#arrowhead)' : 'url()')); }; node.on('mouseover', mouseOverFunction) .on('mouseout', mouseOutFunction) .on('click', mouseClickFunction) //.on('contextmenu', rightClickFunction) .on('mousemove', () => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px")); svg.on('click', () => { ifClicked = false; node .transition(500) .style('opacity', 1); link .transition(500) .style("stroke-opacity", 0.5) menuItems.attr('visibility', "hidden"); }); //invalidation.then(() => layout.stop()); return svg.node(); }