2b:null 2c:["$","title",null,{"children":"Team stability in open-source projects | Ezequiel Scott | Observable"}] 31:Td09,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const label = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 1) .attr("text-anchor", "end") .selectAll("g") // add the nodes of the graph, only first 80 sprints .data(graph.nodes) .join("g") .attr( "transform", d => `translate(${(d.x = x(d.id, d.group))}, ${margin.bottom})` ) // next, add the text labels //.call(g => // g // .append("text") // .attr("y", 1) // .attr("x", -2) // .attr("dy", "0.3em") // .attr("fill", d => d3.lab(color(d.group)).darker(2)) // .attr("transform", "rotate(-45)") // .text(d => d.nodeName) //) // draw the cricles // .call(g => // g // .append("circle") // .attr("r", .6) // .attr("fill", d => color(d.group)) // ); .call(g => g .append("rect") .attr("x", -2) .attr("y", 2) .attr("width", 2) .attr("height", 6) .attr("fill", d => color(d.group)) ); // if I want an x-axis //svg.append("g") // .call(xAxis); const path = svg .insert("g", "*") .attr("fill", "none") .attr("stroke-opacity", 0.6) .attr("stroke-width", .6) .selectAll("path") .data(graph.links) .join("path") .attr("stroke", d => d.source.group === d.target.group ? color(d.source.group) : "#aaa" ) .attr("d", arc_x); const overlay = svg .append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("rect") .data(graph.nodes) .join("rect") .attr("height", margin.bottom) .attr("width", step) .attr("x", d => x(d.id, d.group)) .on("mouseover", d => { svg.classed("hover", true); label.classed("primary", n => n === d.id); label.classed( "secondary", n => n.sourceLinks.some(l => l.target.nodeName === d.nodeName) || n.targetLinks.some(l => l.source.nodeName === d.nodeName) ); path .classed( "primary", l => l.source.nodeName === d.nodeName || l.target.nodeName === d.nodeName ) .filter(".primary") .raise(); svg .append("text") .attr("transform", `translate( ${margin.left}, 0 )`) .attr('id', 'datalabel') .style('text-anchor', 'start') .attr( "font-family", '"Source Serif Pro",Iowan Old Style,Apple Garamond,Palatino Linotype' ) .attr("font-size", "40px") .attr('dy', '140px') .classed("primary", true) .text( d.nodeName + "\n(" + numbers.get(d.nodeName) + "/" + total_groups + ")" ); }) .on("mouseout", d => { svg.classed("hover", false); label.classed("primary", false); label.classed("secondary", false); path.classed("primary", false).order(); d3.select("#datalabel").remove(); }); // ZOOM svg.call( d3 .zoom() .extent([[0, 0], [width, height]]) .scaleExtent([1 / 10, 8]) .on("zoom", zoomed) ); function zoomed() { svg.attr("transform", d3.event.transform); } return svg.node(); }32:[{"id":"45b647c1bdd9c8271bcc6b63b38d45af1a891c0f7daa81758d230088119552a6466eb07a3c681891a93d7f8c39fcf2853a1ed023d7bf34947fc7cad0ca6eeab2","href":"https://static.observableusercontent.com/files/45b647c1bdd9c8271bcc6b63b38d45af1a891c0f7daa81758d230088119552a6466eb07a3c681891a93d7f8c39fcf2853a1ed023d7bf34947fc7cad0ca6eeab2","name":"sample-5@1.json","type":"application/json","lastModified":1598033429257.803,"size":339767},{"id":"6f1c28697933915749a70b5849f966626507b41987417bf20694ef3b6321a02517ad2712cbb3b2f727c292a365dbe2aadd0a52189c84370bca42d54c8c33cb89","href":"https://static.observableusercontent.com/files/6f1c28697933915749a70b5849f966626507b41987417bf20694ef3b6321a02517ad2712cbb3b2f727c292a365dbe2aadd0a52189c84370bca42d54c8c33cb89","name":"sample-3.json","type":"application/json","lastModified":1596544333160.26,"size":379120}] 2f:{"id":"6f10ee830f4deb17","slug":"team-dynamics","title":"Team stability in open-source projects","thumbnail":"806a622d4085f6685c5428659b7055f139251a8b55f664f0c07c5e17602eeae2","access_level":"public","create_time":"$D2020-08-04T12:12:50.576Z","update_time":"$D2020-08-24T12:43:30.181Z","view_time":null,"first_public_time":"$D2020-08-05T20:34:43.057Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"05ae108259d2d438","login":"ezequielscott","name":"Ezequiel Scott","avatar_url":"https://avatars-next.observableusercontent.com/3927b60594fda6acf3b0d8d9a7ff361481081023a8a45363a63ceb78eb9bf9d6","tier":"starter_2024"},"version":533,"publish_version":533,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd1597734337a586","login":"ezequielscott","name":"Ezequiel Scott","avatar_url":"https://avatars-next.observableusercontent.com/3927b60594fda6acf3b0d8d9a7ff361481081023a8a45363a63ceb78eb9bf9d6","tier":null}],"members":[{"type":"individual","id":"fd1597734337a586","login":"ezequielscott","name":"Ezequiel Scott","avatar_url":"https://avatars-next.observableusercontent.com/3927b60594fda6acf3b0d8d9a7ff361481081023a8a45363a63ceb78eb9bf9d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Team stability in open-source projects","cells":[{"id":0,"value":"md`# Team stability in open-source projects\n\nDevelopers contribute to open-source projects differently; some contribute regularly whereas others occasionally. Here is a representation of these dynamics.\n\nEach developer is depicted by a dot, and each iteration is represented by a different color. \nThe nickname of the developer is displayed in a big label when the mouse pointer is over the corresponding dot. The number of iterations in which the developer contributed is shown between brackets.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"viewof project = select({\n title: \"Project\",\n description: \"Please pick the project you want to inspect.\",\n options: ['xd', 'apstud', 'mesos', 'mule', 'nexus', 'timob', 'tistud'],\n value: \"xd\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"md`## Variables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"max_groups=2000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"width = 900 - margin.left","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"margin = ({top: 1, right: 1, bottom: height - 20, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"step=14","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"x = d3.scalePoint()\n .domain(graph.nodes.sort((a, b) => d3.ascending(a.group, b.group)).map(d => d.id))\n .range([margin.left, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${margin.bottom + 100})`)\n .call(d3.axisTop(x)//.ticks(width / 10)\n // .tickFormat(x => /[AEIOUY]/.test(x) ? x : \"\")\n )\n .call(g => g.append(\"g\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 2)\n .selectAll(\"line\")\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y2\", height))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"function arc(d) {\n const y1 = d.source.y;\n const y2 = d.target.y;\n const r = Math.abs(y2 - y1) / 2;\n return `M${margin.left},${y1}A${r},${r} 0,0,${y1 < y2 ? 1 : 0} ${margin.left},${y2}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"function arc_x(d) {\n const x1 = d.source.x;\n const x2 = d.target.x;\n const r = Math.abs(x2 - x1) / 2;\n // the comparison x1 < x2 determmines if showing the upper or bottom part of the arc\n return `M${x1},${margin.bottom}A${r},${r} 0,0,${x1 < x2 ? 1 : 0} ${x2},${margin.bottom}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"y = d3.scalePoint(graph.nodes.map(d => d.id).sort(d3.ascending), [margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"color = d3.scaleOrdinal(graph.nodes.map(d => d.group).sort(d3.ascending), d3.schemeCategory10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"// number of devs in sprints\ntotal_groups = Array.from(d3a.rollup(graph.nodes, v => v.length, d => d.group).values()).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"graph.nodes.sort((a, b) => d3.ascending(a.group, b.group)).map(d => d.group)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"graph.nodes.sort((a, b) => d3.ascending(a.group, b.group)).map(d => d.id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"graph.nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"// number of devs in sprints\nnumbers = d3a.rollup(graph.nodes, v => v.length, d => d.nodeName)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"// build the graph\ngraph = {\n const nodes = data.nodes.map(({id, nodeName, group}) => ({\n id,\n nodeName,\n sourceLinks: [],\n targetLinks: [],\n group: +group \n }));\n \n const nodeById = new Map(nodes.map(d => [d.id, d]));\n\n const links = data.links.map(({source, target, value}) => ({\n source: nodeById.get(source),\n target: nodeById.get(target),\n value\n }));\n\n for (const link of links) {\n const {source, target, value} = link;\n source.sourceLinks.push(link);\n target.targetLinks.push(link);\n }\n\n return {nodes, links};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"// filter the data according to the selected project\ndata = {\n const nodes = original_data.nodes.filter(x => x.project === project);\n const links = original_data.links.filter(\n x => x.project === project\n // function(el){\n // return nodes.map(x => x.id).includes( el.source ) && nodes.map(x => x.id).includes( el.target )\n //}\n );\n return { nodes, links };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"original_data = FileAttachment(\"sample-5@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"d3a = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"