31:Tc60,function drawChart() { const height = 800 const links = links2.map(d => Object.create(d)) const nodes = nodes2.map(d => Object.create(d)) const radius = 30 const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.pid)) .force("charge", d3.forceManyBody().strength(-35)) .force("center", d3.forceCenter(width/2, height/2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, width]) const myTooltip = function (data) { var obj = {}; obj.header = "NAME"; obj.rows = []; obj.rows.push ({ "label" : "type", "value" : data.type }); d3.tooltip.table() .width(200) .call(this, obj); }; const link = svg.append("g") .attr("stroke", "#ccc") .attr("stroke-opacity", 0.3) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value) / 2); const node = svg.append("g") .attr("stroke", "#FFF") .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => Math.sqrt(d.total_hours)*2) .attr("fill", color) .call(drag(simulation)) .on('mouseover.fade', fade(0.1)) .on('mouseout.fade', fade(1)); const textElems = svg.append('g') .selectAll('text') .data(nodes) // .data(participantsByEvent) .join('text') // .each(function(d,i){ // d3.select(this).selectAll("text") // .data(d.values) // .enter().append("table") .text(d => d.pid) .attr('font-size',10) // .attr('background-color', "#EEE") // .attr('background-opacity', 1) .style("opacity", 1) .call(drag(simulation)) .on('mouseover.fade', fade(0.1)) .on('mouseout.fade', fade(1)) // }) ; simulation.on("tick", () => { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", function(d) { return d.x = Math.max((radius+1), Math.min(width - (radius+1), d.x)); }) .attr("cy", function(d) { return d.y = Math.max((radius+1), Math.min(height - (radius+1), d.y)); }); textElems .attr("x", d => d.x + 10) .attr("y", d => d.y) .attr("visibility", "hidden") .on("click", myTooltip(participantsByEvent)); }); function fade(opacity) { return d => { node.style('opacity', o => isConnected(d, o) ? 1 : opacity ); textElems.style('visibility', o => isConnected(d, o) ? "visible" : "hidden" ); link.style('stroke-opacity', o => (o.source === d || o.target === d ? 1 : opacity)); if(opacity === 1){ node.style('opacity', 1) textElems.style('visibility', 'hidden') link.style('stroke-opacity', 0.3) } }; } const linkedByIndex = {}; links.forEach(d => { linkedByIndex[`${d.source.index},${d.target.index}`] = 1; }); function isConnected(a, b) { return linkedByIndex[`${a.index},${b.index}`] || linkedByIndex[`${b.index},${a.index}`] || a.index === b.index; } invalidation.then(() => simulation.stop()); return svg.node() }32:[{"id":"19eecc86033eb2ac96b9cf450fb800946b60c22199ae5dc4d18b29b1e4e4768f1c60a3afd34424ec56bcfd32e6404ac1479991046b5d5af3b9c6242385adf2dc","href":"https://static.observableusercontent.com/files/19eecc86033eb2ac96b9cf450fb800946b60c22199ae5dc4d18b29b1e4e4768f1c60a3afd34424ec56bcfd32e6404ac1479991046b5d5af3b9c6242385adf2dc","name":"Participants Together Cut1 nodes.csv","type":"text/csv","lastModified":1582611247089.641,"size":2797},{"id":"167267015672c6ed69b100774da55cef09afc7c5f688297eb2fb1bfb26864db712237b95c196fd114071dfc7787609769096816b0ffdecd790ff330ef8e55453","href":"https://static.observableusercontent.com/files/167267015672c6ed69b100774da55cef09afc7c5f688297eb2fb1bfb26864db712237b95c196fd114071dfc7787609769096816b0ffdecd790ff330ef8e55453","name":"Participants Together Cut1.csv","type":"text/csv","lastModified":1582610082238.884,"size":39676},{"id":"34aa16aede2adb5263bb84aecbca121979434f828ee2d1f73153b45412a3cc3d3f4b785c6f8596f3f3336c913da6ce19476e388fc2b406a442394c95374f2b3c","href":"https://static.observableusercontent.com/files/34aa16aede2adb5263bb84aecbca121979434f828ee2d1f73153b45412a3cc3d3f4b785c6f8596f3f3336c913da6ce19476e388fc2b406a442394c95374f2b3c","name":"Becca Events_to_date_20200301.csv","type":"text/csv","lastModified":1583130620804.296,"size":159193}] 2f:{"title":"Network of Event Participants","cells":[{"id":0,"value":"md`# Network of Event Participants\n\nIncludes participants with more than 1 combined hour together\n\\nAdd list of classes attended when mouseover\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"md`## Title\n\nParagraph Description\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md `## Visualization: \n\ngroup by something else. Maybe all who attended a working group?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"html ` \n

Participant Network

Color and size are total hours per individual

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"drawChart()","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"html `\n

\n Edited from: Philipp Ulm-Erbach\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"md `## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.1).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"},{"id":399,"value":"color = {\n const scale = d3.scaleSequential([0, 65], d3.interpolatePlasma); // maxhours\n return d => scale(d.total_hours)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"md `#### Data Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"links2 = d3.csvParse(await FileAttachment(\"Participants Together Cut1.csv\").text(), ({partiticipant_1: source, partiticipant_2: target, weightTogether: value}) => ({source, target, value: +value}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"nodes2 = d3.csvParse(await FileAttachment(\"Participants Together Cut1 nodes.csv\").text(), ({pid: pid, hours: total_hours}) => ({pid, total_hours: +total_hours}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"base = d3.csvParse(await FileAttachment(\"Becca Events_to_date_20200301.csv\").text(), ({eventtype: type, cat_title: name, first_start_date: start_date, ParticipantID: pid, Weight_to_date: hours, event_index: e_i, participant_event_index: p_i}) => ({type, name, start_date: d3.timeParse(\"%m/%d/%y\")(start_date), pid, hours: +hours, e_i: +e_i, p_i: +p_i}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":741,"value":"participantsByEvent = {\n const match = (base, d => nodes2.indexOf(d));\n const pbe = d3.nest()\n .key(d => d.pid)\n .rollup(v => d3.max(v, d => d.hours))\n .entries(base)\n return pbe;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":804,"value":"dd = {const match = (base, d => nodes2.indexOf(d));}","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"eventsByParticipant2 = {\n const ebp = d3a.groups(base, d => d.pid);\n return ebp\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":755,"value":"// function tt(data) {\n// const obj = {};\n// obj.header = \"Header\";\n// // obj.header = (d => d.pid);\n// obj.rows = [];\n// // .data(data);\n// d3.selectAll(\"text\")\n// .each(function(d,i){\n// d3.select(this).selectAll(\"text\")\n// .data(data.values)\n// obj.rows.push({\n// \"label\" : d => d.type,\n// \"value\" : d => d.name\n// })\n// .tooltip.table()\n// .width(180)\n// .call (this, obj);\n// })}\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"// tt(participantsByEvent)","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"md `#### D3 Import`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"d3a = require(\"d3-array@^2.2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"md `## Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md `This visualization is based on the ideas and code of the following works of the following academics:\n\nM. Bostock: [Force Directed Graph](https://observablehq.com/@d3/force-directed-graph)\n\nA. Suarez: [Layout Highlights](https://bl.ocks.org/almsuarez/4333a12d2531d6c1f6f22b74f2c57102)\n\nT. Roth: [Bounding Box](https://tomroth.com.au/fdg-bounding-box/)\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}