36:["$","title",null,{"children":"test 12/1 2:22pm | kianac23 | Observable"}] 3e:T2722,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const [width, height] = [1000, 800]; const svg = d3.select(DOM.svg(width, height)); //const aiScoreMinDiff = 0.2; // 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); const isConnectedAsSource = (a, b) => linkedByIndex[`${a},${b}`]; const isConnectedAsTarget = (a, b) => linkedByIndex[`${b},${a}`]; const isConnected = (a, b) => isConnectedAsTarget(a, b) || isConnectedAsSource(a, b) || a === b; const isEqual = (a, b) => a === b; const nodeRadius = d => .00005 * d.votes; // function nodeRadius(d){ // nodesById[d.target].rating - nodesById[d.source].aiScore;} // if (Math.abs(aiScoreDiff) < aiScoreMinDiff) { // return '#999'; // } else { // if (aiScoreDiff > 0) { // return "#84c942"; // inactive -> active // } else { // return "#e85335"; // active -> inactive // } // } // }) // const nodeRadius = d=> nodesById[d.target].rating - nodesById[d.source].rating; // function nodeRadius(d){ // if(Math.abs(d.votes) > 2000){ // d.votes * .0005; // } else{ // Math.abs( d.votes) * 2; // } // } 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; const simulation = d3.forceSimulation() .force("link", d3.forceLink().id(function(d) { return d.id; }).strength(0.3)) .force("charge", d3.forceManyBody()) .force("y", d3.forceY(height/2).strength(0.1)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(d => { // if(d.network === "FX"){return width/7}else if(d.netwrok ==="Nickelodeon" etc if (d.group === 1) { return width/13 - 50; // width/5 - 50 - 400; } return width/13 * d.group; // 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 //const aiScoreDiff = nodesById[d.target].aiScore - nodesById[d.source].aiScore; const aiScoreDiff = nodesById[d.target].race; // - nodesById[d.source].aiScore; if(aiScoreDiff === "White" ){ return'#e85335'; } else if(aiScoreDiff === "Black" || "POC"){ return "#84c942"; } else{ // // make networks this color // if(aiScoreDiff >50 && aiScoreDiff < 65){ return"#999"; //make people this color //} } }) .style("stroke-opacity", 0.5) //const pplRace = nodesById[d.target].race; // if (pplRace === "Black") { // return '#999'; // } else { // if (pplRace ==="Black") { // return "#84c942"; // inactive -> active // } else { // return "#e85335"; // active -> inactive // } // } // }) 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'#84c942'; } else{ // make white ppl this color if(d.race == "Black"){ return"#e85335"; //make shows this color } else{ return "#999" } } // if(Math.abs(d.id) < 50){ // return'#999'; // } else{ // // make networks this color // if(d.id >50 && d.id < 65){ // return"#e85335"; // //make people this color // } else{ // return "#84c942" // } // } }); // 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") .html(() => { const content = `Title: ${d.name}`+'
' +`Race: ${d.race}`+'
' + `Network: ${d.network}`+'
' + `id: ${d.id}`+'
' + `Total Votes: ${d.votes}`+'
' +`Average Rating: ${d3.format('.2f')(d.rating)} `; 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()')); }; const rightClickActions = (d, menuItem, i) => { // d is the clicked node, i is the menuItem index console.log(d.id, menuItem, i) // Expand sub-network of the patter if (i === 0) { // sending d.id (pattern) to backend to get sub-network }; menuItems.attr('visibility', "hidden"); }; const rightClickFunction = d => { d3.event.preventDefault(); // add clicked effect: highlight right-clicked item 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()')); tooltip.style("visibility", "hidden"); const position = {x: d.x, y: d.y}; menuItems.attr('visibility', "visible") .attr('transform', `translate(${position.x}, ${position.y})`) .on('click', (menuItem, i) => rightClickActions(d, menuItem, i)); }; 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(); }3f:T5da,html ``40:[{"id":"de49127d069ac4ce832654fa8f98046f508206b28896cbef7b88646e358270304b6eecc0b5ca669c5d7c07532dfad740cd2fc63d6839ccda120c6707c45c1d64","href":"https://static.observableusercontent.com/files/de49127d069ac4ce832654fa8f98046f508206b28896cbef7b88646e358270304b6eecc0b5ca669c5d7c07532dfad740cd2fc63d6839ccda120c6707c45c1d64","name":"test645.json","type":"application/json","lastModified":1606866429306.737,"size":127351}] 3a:{"id":"5c1ef70af826ee30","slug":"test-12-1-2-22pm/2","title":"test 12/1 2:22pm","thumbnail":"054bdf2493f0cd7cf8f54e95aea75ad062fe56011ce5bed8956d2f1ec748d892","access_level":"public","create_time":"$D2020-12-01T19:22:42.095Z","update_time":"$D2020-12-01T23:53:55.325Z","view_time":null,"first_public_time":"$D2020-12-18T04:50:31.695Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"5f1ca5ad0b64575f","login":"kianac23","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ebc524651b64f842701d4a2205eee0960ba62e09cc3bc60ef428b04464ce2025","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":883,"publish_version":883,"role":null,"authored":false,"authors":[{"type":"individual","id":"19c95aeacab64561","login":"kianac23","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ebc524651b64f842701d4a2205eee0960ba62e09cc3bc60ef428b04464ce2025","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"19c95aeacab64561","login":"kianac23","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ebc524651b64f842701d4a2205eee0960ba62e09cc3bc60ef428b04464ce2025","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"810effa5ec2dfc9f","slug":"advanced-data-studio","title":"Kiana Prototypes","owner":{"id":"5f1ca5ad0b64575f","login":"kianac23","name":""}},"type":"notebook","body":{"titling":"auto","title":"test 12/1 2:22pm","cells":[{"id":1,"value":"md`# test 12/1 2:22pm\n\nworking netwrok by show title `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"cola = require(\"webcola@3/WebCola/cola.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"//calculate node color with aiScore, in a range of (0.3, 0.6)\nnodeColor = {\n \n const scale = d3.scaleLinear().domain([.3,.6]).range([0, 1]);\n return d => d3.interpolateRdYlGn(scale(d.id || 0));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n // .text(\"I'm a circle!\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"// filter by: support > 0.4\n//data = FileAttachment(\"nametest.json\").json()\n//FileAttachment(\"showtoppl.json\").json()\n //data = FileAttachment(\"showtoppl@4.json\").json() \n //data= FileAttachment(\"showtoppl121602.json\").json()\n //data=FileAttachment(\"showtoppl121602@1.json\").json()\n data=FileAttachment(\"test645.json\").json()\n // data = FileAttachment(\"showtoppl121@1.json\").json()\n//data = FileAttachment(\"dec1.json\").json() \n//d3.json(\"https://gist.githubusercontent.com/ravengao/a548cc4a7dd38f1afe0fe4b31ba8901b/raw/fd86a4e94e31ca2497ee78e1006dbed798f62e67/sample_data_supp%253E0.4_new.json\")\n// data = d3.json(\"https://gist.githubusercontent.com/ravengao/5b65551b7a0199e01380ddc1b13248a0/raw/d31bd24ef9286cb5a6eb4520f99f6a3c6b68c330/sample_v2.json\")\n\n// filter by: support > 0.3\n//data = d3.json(\"https://gist.githubusercontent.com/ravengao/3a6deb4f4add94eb485b570d04128c81/raw/02b60190a410f2143ccdc13c24b614073bb592a7/sample_v2%253E0.3.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 35:null