2b:T947,// I only claim the changes made to this original template are mine. Please see history to validate. // Template code; see below for mine sixdegrees = { //const links = data.links.map(d => Object.create(d)); //const nodes = data.nodes.map(d => Object.create(d)); var nodes = [ {name: "A"}, {name: "B"}, {name: "C"}, {name: "D"}, {name: "E"}, {name: "F"}, {name: "G"} ]; // The `links` array contains objects with a `source` and a `target` // property. The values of those properties are the indices in // the `nodes` array of the two endpoints of the link. var links = [ { source: "A", target: "B" }, { source: "B", target: "C" }, { source: "C", target: "D" }, { source: "D", target: "E" }, { source: "E", target: "F" }, { source: "F", target: "G" } ]; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "darkgrey") .attr("stroke-opacity", 1) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const palette = d3.interpolateRdYlBu const color = d3.scaleLinear().range([0,1]).domain([-1,nodes.length-1]) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", (d,i) => palette(color(i))) //Change the color here .call(drag(simulation)); node.append("title") .text(d => d.name); const text = svg.append("g") .selectAll("text") .data(nodes) .join("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); 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", d => d.x) .attr("cy", d => d.y); text .attr("x", d => d.x) .attr("y", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }2c:T588,randomArangemnet = { var svg = d3.select(DOM.svg(width, height)) .attr("width", width+"px") .attr("height", height+"px"); const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(bees,d=>d[0])) const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flowers,d=>d[0])) const flower_palette = d3.interpolateGreens; const flower_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(flowers,d=>d[1])]) const bees_palette = d3.interpolateOranges; const bees_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(bees,d=>d[1])]) svg.selectAll("line.connections").data(relationships).enter().append("line") .attr("class","connections") .attr("x1",d=>x(d[0])) .attr("y1",height/3) .attr("x2",d=>y(d[1])) .attr("y2",height*2/3) .style("stroke","black") .style("stroke-width","1px") svg.selectAll("circle.bees").data(bees).enter().append("circle") .attr("class","bees") .attr("cx",d=>x(d[0])) .attr("cy",height/3) .attr("r", 10) .style("fill", d=>bees_palette(bees_color(d[1]))) svg.selectAll("circle.flowers").data(flowers).enter().append("circle") .attr("class","flowers") .attr("cx",d=>y(d[0])) .attr("cy",height*2/3) .attr("r", 10) .style("fill", d=>flower_palette(flower_color(d[1]))) yield svg.node(); }2d:T872,// I only claim the changes made to this original template are mine. Please see history to validate. randomNetworkBees = { var links = [] var sets = [] flowers.forEach(d=>sets.push([])) relationships.forEach(function(d,i) { sets[d[1]].push(d[0]) }) sets.forEach(function(d) { for (var i = 0; i < d.length; i++) for (var j = i+1; j < d.length; j++) links.push({"source":"bees_"+d[i],"target":"bees_"+d[j]}) }) console.log(links) const nodes = bees.map((d,i) => ({"name":"bees_"+i,"type":d[1]})); console.log(nodes) // The `links` array contains objects with a `source` and a `target` // property. The values of those properties are the indices in // the `nodes` array of the two endpoints of the link. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, 300 / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 300]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const palette = d3.interpolateOranges const color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(bees,d=>d[1])]) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", (d,i) => palette(color(d.type))) //Change the color here .call(drag(simulation)); node.append("title") .text(d => d.name); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); 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", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }2e:T87e,// I only claim the changes made to this original template are mine. Please see history to validate. randomNetworkFlowers = { var links = [] var sets = [] bees.forEach(d=>sets.push([])) relationships.forEach(function(d,i) { sets[d[0]].push(d[1]) }) sets.forEach(function(d) { for (var i = 0; i < d.length; i++) for (var j = i+1; j < d.length; j++) links.push({"source":"flower_"+d[i],"target":"flower_"+d[j]}) }) console.log(links) const nodes = flowers.map((d,i) => ({"name":"flower_"+i,"type":d[1]})); console.log(nodes) // The `links` array contains objects with a `source` and a `target` // property. The values of those properties are the indices in // the `nodes` array of the two endpoints of the link. const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, 300 / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, 300]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const palette = d3.interpolateGreens const color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(flowers,d=>d[1])]) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", (d,i) => palette(color(d.type))) //Change the color here .call(drag(simulation)); node.append("title") .text(d => d.name); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); 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", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }2f:T412,manbee = { var svg = d3.select(DOM.svg(width, height)) .attr("width", width+"px") .attr("height", height+"px"); const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(bee)) const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flower)) svg.selectAll("line.banana").data(relations).enter().append("line") .attr("class","banana") .attr("x1",d=>x(d[0])) .attr("y1",height/3) .attr("x2",d=>y(d[1])) .attr("y2",height*2/3) .style("stroke","black") .style("stroke-width","1px") svg.selectAll("circle.bee").data(bee).enter().append("circle") .attr("class","bee") .attr("cx",d=>x(d)) .attr("cy",height/3) .attr("r", 10) .style("fill", "Orange") svg.selectAll("circle.flower").data(flower).enter().append("circle") .attr("class","flower") .attr("cx",d=>y(d)) .attr("cy",height*2/3) .attr("r", 10) .style("fill", "green") yield svg.node(); }30:T90a,// I only claim the changes made to this original template are mine. Please see history to validate. chart1 = { //const links = data.links.map(d => Object.create(d)); //const nodes = data.nodes.map(d => Object.create(d)); var nodes = [ {name: "Bee1", type : "A"}, {name: "Bee2", type : "A"}, {name: "Bee3", type : "B"}, {name: "Bee4", type : "B"} ]; // The `links` array contains objects with a `source` and a `target` // property. The values of those properties are the indices in // the `nodes` array of the two endpoints of the link. var links = [ { source: "Bee1", target: "Bee2" }, { source: "Bee1", target: "Bee3" }, { source: "Bee2", target: "Bee1" }, { source: "Bee2", target: "Bee3" }, { source: "Bee2", target: "Bee4" }, { source: "Bee3", target: "Bee1" }, { source: "Bee3", target: "Bee2" }, { source: "Bee4", target: "Bee2" } ]; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const palette = d3.interpolateOranges const color = d3.scaleLinear().range([0,1]).domain([-1,nodes.length-1]) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", (d,i) => palette(color(i))) //Change the color here .call(drag(simulation)); node.append("title") .text(d => d.name); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); 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", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }31:Tac4,// I only claim the changes made to this original template are mine. Please see history to validate. // Template code; see below for mine chart2 = { //const links = data.links.map(d => Object.create(d)); //const nodes = data.nodes.map(d => Object.create(d)); var nodes = [ {name: "Flower1", type : "B"}, {name: "Flower2", type : "A"}, {name: "Flower3", type : "A"}, {name: "Flower4", type : "A"}, {name: "Flower5", type : "B"}, {name: "Flower6", type : "B"} ]; // The `links` array contains objects with a `source` and a `target` // property. The values of those properties are the indices in // the `nodes` array of the two endpoints of the link. var links = [ { source: "Flower1", target: "Flower2" }, { source: "Flower1", target: "Flower3" }, { source: "Flower2", target: "Flower1" }, { source: "Flower2", target: "Flower3" }, { source: "Flower2", target: "Flower4" }, { source: "Flower3", target: "Flower1" }, { source: "Flower3", target: "Flower2" }, { source: "Flower3", target: "Flower4" }, { source: "Flower3", target: "Flower5" }, { source: "Flower4", target: "Flower2" }, { source: "Flower4", target: "Flower3" }, { source: "Flower4", target: "Flower6" }, { source: "Flower5", target: "Flower3" }, { source: "Flower6", target: "Flower4" }, ]; const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.name)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const palette = d3.interpolateGreens const color = d3.scaleLinear().range([0,1]).domain([-1,nodes.length-1]) const node = svg.append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 8) .attr("fill", (d,i) => palette(color(i))) //Change the color here .call(drag(simulation)); node.append("title") .text(d => d.name); node.append("text") .attr("dx", 12) .attr("dy", ".35em") .text(function(d) { return d.name }); 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", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:T1a2a,chartt = { var c1w = 130, c2w = 80, c3w = 40, r1h = 150, w = 600, h = w, pad = 20, left_pad = 50, movePoints = -200; var svg = d3.select(DOM.svg(c1w + c2w + c3w + w + pad + 30, r1h + h)) var tab_data = d3.csvParse(raw_data2); var traits = tab_data.columns.filter(x => !(x in {"Z":0, "Key Skill": 0, "Z-Score":0, "Candidate":0})); var candidates = tab_data.map(r => r.Candidate); var row_data = [], row, prop; for (row of tab_data) { for (prop of traits) { row_data.push({ name: row["Candidate"], prop: prop, value: row[prop] }); } } var x_step = (w-pad-left_pad) / (traits.length + 1), y_step = ((h-pad*2) - pad) / (candidates.length + 1), x_range = traits.map((v,i) => c1w + c2w + c3w + left_pad + ((1+x_step) * i)+movePoints), y_range = candidates.map((v,i) => r1h + pad + ((1+y_step) * i)), x = d3.scaleOrdinal().domain(traits).range(x_range), y = d3.scaleOrdinal().domain(candidates).range(y_range); var max_r = 5, r = d3.scaleLinear() .domain([0, max_r]) .range([0, 16]); var classinate = t => t.replace(/\s+/gi, "_"); var opacity = m => (m in {"Managed Money":0,"Location":0})?"0.5":(m in {"Municipal":0})?"0.3":"1.0"; var onMouseOver = function(d) { var name = classinate(d["name"]); var prop = classinate(d["prop"]); svg.selectAll(`text.label.${prop}`) .attr("display", "block"); svg.selectAll(`text.label.${name}`) .attr("display", "block"); }; var onMouseOut = function(d) { var name = classinate(d["name"]); var prop = classinate(d["prop"]); svg.selectAll(`text.label.${prop}`) .attr("display", "none"); svg.selectAll(`text.label.${name}`) .attr("display", "none"); }; var circle_groups = svg.selectAll("g.cgroup") .data(row_data, (d,i) => `cgroup${i}`) .enter() .append("g") .attr("class", "cgroup") .attr("opacity", d => opacity(d["prop"])) .on("mouseleave", onMouseOut ) .on("mouseenter", onMouseOver); var circles = circle_groups.append("circle") .attr("class", d => "circle " + classinate(d["prop"]) + " " + classinate(d["name"])) .attr("cx", function (d) { return x(d["prop"]); }) .attr("cy", function (d) { return y(d["name"]); }); circle_groups.append("text") .attr("class", d => "label " + classinate(d["prop"]) + " " + classinate(d["name"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return x(d["prop"]); }) .attr("y", function (d) { return y(d["name"]); }) .text(function (d) { return d["value"]}); var z_circle_groups = svg.selectAll("g.zcgroup") .data(tab_data, (d,i) => `zcgroup${i}`) .enter() .append("g") .attr("class","zcgroup") .on("mouseleave", d => {d["name"] = d["Candidate"]; d["prop"] = "Z"; onMouseOut(d)}) .on("mouseenter", d => {d["name"] = d["Candidate"]; d["prop"] = "Z"; onMouseOver(d)}); var zx = c1w + (c2w/2); var z_circles = z_circle_groups.append("circle") .attr("class", d => "zcircle " + "Z" + " " + classinate(d["Candidate"])) .attr("cx", function (d) { return zx; }) .attr("cy", function (d) { return y(d["Candidate"]); }); z_circle_groups.append("text") .attr("class", d => "label " + "Z" + " " + classinate(d["Candidate"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return zx; }) .attr("y", function (d) { return y(d["Candidate"]); }) .text(function (d) { return d["Z"]}); var k_circle_groups = svg.selectAll("g.kcgroup") .data(tab_data, (d,i) => `kcgroup${i}`) .enter() .append("g") .attr("class","kcgroup") .on("mouseleave", d => {d["name"] = d["Candidate"]; d["prop"] = "Key Skill"; onMouseOut(d)}) .on("mouseenter", d => {d["name"] = d["Candidate"]; d["prop"] = "Key Skill"; onMouseOver(d)}); var kx = c1w + c2w + (c3w/2); var k_circles = k_circle_groups.append("circle") .attr("class", d => "kcircle " + classinate("Key Skill") + " " + classinate(d["Candidate"])) .attr("cx", function (d) { return kx; }) .attr("cy", function (d) { return y(d["Candidate"]); }); k_circle_groups.append("text") .attr("class", d => "label " + classinate("Key Skill") + " " + classinate(d["Candidate"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return kx; }) .attr("y", function (d) { return y(d["Candidate"]); }) .text(function (d) { return d["Key Skill"]}); var trait_labels = svg.selectAll("text.trait") .data(traits) .enter() .append("text") .attr("class", "trait") .attr("x", d => x(d)) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${x(d)},${r1h-10})`) .text(d => d) var candidate_labels = svg.selectAll("text.candidate") .data(candidates) .enter() .append("text") .attr("class", "candidate") .attr("x", 10) .attr("y", d => y(d)) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .text(d => d) circles.transition() .duration(800) .attr("r", function (d) { return r(d["value"]); }) .attr("fill", d => d3.interpolateRdYlGn(d["value"] / 7)); k_circles.transition() .duration(1600) .attr("r", function (d) { return r(d["Key Skill"]); }) .attr("fill", d => d3.interpolateRdYlGn(d["Key Skill"] / 7)); z_circles.transition() .duration(2400) .attr("r", function (d) { return r(d["Z"]) / 2; }) .attr("fill", d => d3.interpolateRdBu(d["Z"] / 12)); return svg.node() }33:T681,raw_data3 = `Candidate, Flower1, Flower2, Flower3, Flower4, Flower5, Flower6, Flower7, Flower8, Flower9, Flower10, Flower11, Flower12, Flower13, Flower14, Flower15, Flower16, Flower17, Flower18, Flower19, Flower20, Flower21, Flower22, Flower23, Flower24, Flower25 Bee1, 0,3,3,3,3,3,3,3,3,3,0,3,0,0,3,3,0,0,3,0,3,0,0,3,0 Bee2, 3,3,3,3,0,3,3,3,0,3,3,3,3,0,0,0,0,3,0,3,0,3,0,0,0 Bee3, 3,3,3,0,3,0,0,3,3,0,3,0,0,3,0,0,0,0,0,0,0,0,0,0,0 Bee4, 3,0,3,0,3,3,3,3,0,3,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee5, 0,3,3,3,3,0,3,0,3,0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0 Bee6, 3,3,0,3,3,3,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee7, 3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3 Bee8, 3,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee9, 3,0,3,0,0,0,3,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee10,3,3,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee11,3,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0 Bee12,3,3,0,0,3,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee13,0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee14,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee15,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee16,3,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee17,3,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee18,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee19,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee20,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee21,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee22,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee23,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee24,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee25,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 `34:T1d2b,charttt = { var c1w = 130, c2w = 80, c3w = 40, r1h = 150, w = 600, h = w, pad = 20, left_pad = 50, movePoints = -200; var svg = d3.select(DOM.svg(c1w + c2w + c3w + w + pad + 30, r1h + h)) var tab_data = d3.csvParse(raw_data3); var traits = tab_data.columns.filter(x => !(x in {"Z":0, "Key Skill": 0, "Z-Score":0, "Candidate":0})); var candidates = tab_data.map(r => r.Candidate); var row_data = [], row, prop; for (row of tab_data) { for (prop of traits) { row_data.push({ name: row["Candidate"], prop: prop, value: row[prop] }); } } var x_step = (w-pad-left_pad) / (traits.length + 1), y_step = ((h-pad*2) - pad) / (candidates.length + 1), x_range = traits.map((v,i) => c1w + c2w + c3w + left_pad + ((1+x_step) * i) + movePoints), y_range = candidates.map((v,i) => r1h + pad + ((1+y_step) * i)), x = d3.scaleOrdinal().domain(traits).range(x_range), y = d3.scaleOrdinal().domain(candidates).range(y_range); var max_r = 5, r = d3.scaleLinear() .domain([0, max_r]) .range([0, 16]); var classinate = t => t.replace(/\s+/gi, "_"); var opacity = m => (m in {"Managed Money":0,"Location":0})?"0.5":(m in {"Municipal":0})?"0.3":"1.0"; var onMouseOver = function(d) { var name = classinate(d["name"]); var prop = classinate(d["prop"]); svg.selectAll(`text.label.${prop}`) .attr("display", "block"); svg.selectAll(`text.label.${name}`) .attr("display", "block"); }; var onMouseOut = function(d) { var name = classinate(d["name"]); var prop = classinate(d["prop"]); svg.selectAll(`text.label.${prop}`) .attr("display", "none"); svg.selectAll(`text.label.${name}`) .attr("display", "none"); }; var circle_groups = svg.selectAll("g.cgroup") .data(row_data, (d,i) => `cgroup${i}`) .enter() .append("g") .attr("class", "cgroup") .attr("opacity", d => opacity(d["prop"])) .on("mouseleave", onMouseOut ) .on("mouseenter", onMouseOver); var circles = circle_groups.append("circle") .attr("class", d => "circle " + classinate(d["prop"]) + " " + classinate(d["name"])) .attr("cx", function (d) { return x(d["prop"]); }) .attr("cy", function (d) { return y(d["name"]); }); circle_groups.append("text") .attr("class", d => "label " + classinate(d["prop"]) + " " + classinate(d["name"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return x(d["prop"]); }) .attr("y", function (d) { return y(d["name"]); }) .text(function (d) { return d["value"]}); var z_circle_groups = svg.selectAll("g.zcgroup") .data(tab_data, (d,i) => `zcgroup${i}`) .enter() .append("g") .attr("class","zcgroup") .on("mouseleave", d => {d["name"] = d["Candidate"]; d["prop"] = "Z"; onMouseOut(d)}) .on("mouseenter", d => {d["name"] = d["Candidate"]; d["prop"] = "Z"; onMouseOver(d)}); var zx = c1w + (c2w/2); var z_circles = z_circle_groups.append("circle") .attr("class", d => "zcircle " + "Z" + " " + classinate(d["Candidate"])) .attr("cx", function (d) { return zx; }) .attr("cy", function (d) { return y(d["Candidate"]); }); z_circle_groups.append("text") .attr("class", d => "label " + "Z" + " " + classinate(d["Candidate"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return zx; }) .attr("y", function (d) { return y(d["Candidate"]); }) .text(function (d) { return d["Z"]}); var k_circle_groups = svg.selectAll("g.kcgroup") .data(tab_data, (d,i) => `kcgroup${i}`) .enter() .append("g") .attr("class","kcgroup") .on("mouseleave", d => {d["name"] = d["Candidate"]; d["prop"] = "Key Skill"; onMouseOut(d)}) .on("mouseenter", d => {d["name"] = d["Candidate"]; d["prop"] = "Key Skill"; onMouseOver(d)}); var kx = c1w + c2w + (c3w/2); var k_circles = k_circle_groups.append("circle") .attr("class", d => "kcircle " + classinate("Key Skill") + " " + classinate(d["Candidate"])) .attr("cx", function (d) { return kx; }) .attr("cy", function (d) { return y(d["Candidate"]); }); k_circle_groups.append("text") .attr("class", d => "label " + classinate("Key Skill") + " " + classinate(d["Candidate"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return kx; }) .attr("y", function (d) { return y(d["Candidate"]); }) .text(function (d) { return d["Key Skill"]}); /*svg.append("text") .attr("class", "trait") .attr("x", zx) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${zx},${r1h-10})`) .text("Z-Score") svg.append("text") .attr("class", "trait") .attr("x", kx) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${kx},${r1h-10})`) .text("Key SKill") */ var trait_labels = svg.selectAll("text.trait") .data(traits) .enter() .append("text") .attr("class", "trait") .attr("x", d => x(d)) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${x(d)},${r1h-10})`) .text(d => d) var candidate_labels = svg.selectAll("text.candidate") .data(candidates) .enter() .append("text") .attr("class", "candidate") .attr("x", 10) .attr("y", d => y(d)) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .text(d => d) circles.transition() .duration(800) .attr("r", function (d) { return r(d["value"]); }) .attr("fill", d => d3.interpolateRdYlGn(d["value"] / 7)); k_circles.transition() .duration(1600) .attr("r", function (d) { return r(d["Key Skill"]); }) .attr("fill", d => d3.interpolateRdYlGn(d["Key Skill"] / 7)); z_circles.transition() .duration(2400) .attr("r", function (d) { return r(d["Z"]) / 2; }) .attr("fill", d => d3.interpolateRdBu(d["Z"] / 12)); return svg.node() }35:T681,raw_data4 = `Candidate, Flower1, Flower2, Flower3, Flower4, Flower5, Flower6, Flower7, Flower8, Flower9, Flower10, Flower11, Flower12, Flower13, Flower14, Flower15, Flower16, Flower17, Flower18, Flower19, Flower20, Flower21, Flower22, Flower23, Flower24, Flower25 Bee1, 3,0,0,3,0,0,3,0,0,3,0,3,0,0,3,0,0,0,0,0,0,3,0,0,0 Bee2, 0,0,3,0,3,3,0,0,0,0,3,3,0,3,0,0,0,3,0,0,0,0,0,0,0 Bee3, 3,3,0,3,0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0 Bee4, 0,3,0,0,3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,3,0,0,0,0,3 Bee5, 0,0,3,0,3,0,0,0,3,0,0,0,3,0,0,0,0,0,3,0,0,0,0,0,0 Bee6, 0,0,0,3,0,3,0,0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0 Bee7, 3,0,3,3,0,0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0 Bee8, 3,3,3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee9, 0,0,0,3,0,3,0,0,0,0,0,3,0,0,0,3,0,0,0,0,0,0,0,0,0 Bee10,0,0,0,3,0,0,0,0,0,3,0,0,0,0,0,0,3,0,0,3,0,0,0,0,0 Bee11,3,3,0,0,0,0,0,3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0 Bee12,0,0,3,0,0,0,0,0,0,3,0,0,3,0,0,0,0,0,0,0,0,0,0,3,0 Bee13,0,0,0,0,3,0,0,3,0,0,0,0,0,0,0,0,0,0,3,0,3,0,0,0,0 Bee14,0,3,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,3,0,0,0,0,0,0,0 Bee15,3,0,0,0,0,0,3,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee16,3,3,0,0,0,0,0,3,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0 Bee17,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee18,0,0,3,0,0,3,0,0,3,0,0,0,0,3,0,0,0,0,0,0,0,3,0,0,0 Bee19,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee20,0,0,0,0,0,0,3,0,3,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0 Bee21,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee22,0,0,0,0,0,3,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee23,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0 Bee24,3,0,0,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee25,0,0,0,0,3,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 `36:T1d2c,chartttt = { var c1w = 130, c2w = 80, c3w = 40, r1h = 150, w = 600, h = w, pad = 20, left_pad = 50, movePoints = -200; var svg = d3.select(DOM.svg(c1w + c2w + c3w + w + pad + 30, r1h + h)) var tab_data = d3.csvParse(raw_data4); var traits = tab_data.columns.filter(x => !(x in {"Z":0, "Key Skill": 0, "Z-Score":0, "Candidate":0})); var candidates = tab_data.map(r => r.Candidate); var row_data = [], row, prop; for (row of tab_data) { for (prop of traits) { row_data.push({ name: row["Candidate"], prop: prop, value: row[prop] }); } } var x_step = (w-pad-left_pad) / (traits.length + 1), y_step = ((h-pad*2) - pad) / (candidates.length + 1), x_range = traits.map((v,i) => c1w + c2w + c3w + left_pad + ((1+x_step) * i) + movePoints), y_range = candidates.map((v,i) => r1h + pad + ((1+y_step) * i)), x = d3.scaleOrdinal().domain(traits).range(x_range), y = d3.scaleOrdinal().domain(candidates).range(y_range); var max_r = 5, r = d3.scaleLinear() .domain([0, max_r]) .range([0, 16]); var classinate = t => t.replace(/\s+/gi, "_"); var opacity = m => (m in {"Managed Money":0,"Location":0})?"0.5":(m in {"Municipal":0})?"0.3":"1.0"; var onMouseOver = function(d) { var name = classinate(d["name"]); var prop = classinate(d["prop"]); svg.selectAll(`text.label.${prop}`) .attr("display", "block"); svg.selectAll(`text.label.${name}`) .attr("display", "block"); }; var onMouseOut = function(d) { var name = classinate(d["name"]); var prop = classinate(d["prop"]); svg.selectAll(`text.label.${prop}`) .attr("display", "none"); svg.selectAll(`text.label.${name}`) .attr("display", "none"); }; var circle_groups = svg.selectAll("g.cgroup") .data(row_data, (d,i) => `cgroup${i}`) .enter() .append("g") .attr("class", "cgroup") .attr("opacity", d => opacity(d["prop"])) .on("mouseleave", onMouseOut ) .on("mouseenter", onMouseOver); var circles = circle_groups.append("circle") .attr("class", d => "circle " + classinate(d["prop"]) + " " + classinate(d["name"])) .attr("cx", function (d) { return x(d["prop"]); }) .attr("cy", function (d) { return y(d["name"]); }); circle_groups.append("text") .attr("class", d => "label " + classinate(d["prop"]) + " " + classinate(d["name"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return x(d["prop"]); }) .attr("y", function (d) { return y(d["name"]); }) .text(function (d) { return d["value"]}); var z_circle_groups = svg.selectAll("g.zcgroup") .data(tab_data, (d,i) => `zcgroup${i}`) .enter() .append("g") .attr("class","zcgroup") .on("mouseleave", d => {d["name"] = d["Candidate"]; d["prop"] = "Z"; onMouseOut(d)}) .on("mouseenter", d => {d["name"] = d["Candidate"]; d["prop"] = "Z"; onMouseOver(d)}); var zx = c1w + (c2w/2); var z_circles = z_circle_groups.append("circle") .attr("class", d => "zcircle " + "Z" + " " + classinate(d["Candidate"])) .attr("cx", function (d) { return zx; }) .attr("cy", function (d) { return y(d["Candidate"]); }); z_circle_groups.append("text") .attr("class", d => "label " + "Z" + " " + classinate(d["Candidate"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return zx; }) .attr("y", function (d) { return y(d["Candidate"]); }) .text(function (d) { return d["Z"]}); var k_circle_groups = svg.selectAll("g.kcgroup") .data(tab_data, (d,i) => `kcgroup${i}`) .enter() .append("g") .attr("class","kcgroup") .on("mouseleave", d => {d["name"] = d["Candidate"]; d["prop"] = "Key Skill"; onMouseOut(d)}) .on("mouseenter", d => {d["name"] = d["Candidate"]; d["prop"] = "Key Skill"; onMouseOver(d)}); var kx = c1w + c2w + (c3w/2); var k_circles = k_circle_groups.append("circle") .attr("class", d => "kcircle " + classinate("Key Skill") + " " + classinate(d["Candidate"])) .attr("cx", function (d) { return kx; }) .attr("cy", function (d) { return y(d["Candidate"]); }); k_circle_groups.append("text") .attr("class", d => "label " + classinate("Key Skill") + " " + classinate(d["Candidate"])) .attr("display", "none") .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("x", function (d) { return kx; }) .attr("y", function (d) { return y(d["Candidate"]); }) .text(function (d) { return d["Key Skill"]}); /*svg.append("text") .attr("class", "trait") .attr("x", zx) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${zx},${r1h-10})`) .text("Z-Score") svg.append("text") .attr("class", "trait") .attr("x", kx) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${kx},${r1h-10})`) .text("Key SKill") */ var trait_labels = svg.selectAll("text.trait") .data(traits) .enter() .append("text") .attr("class", "trait") .attr("x", d => x(d)) .attr("y", r1h - 10) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .attr("opacity", d => opacity(d)) .attr("transform", d => `rotate(-40 ${x(d)},${r1h-10})`) .text(d => d) var candidate_labels = svg.selectAll("text.candidate") .data(candidates) .enter() .append("text") .attr("class", "candidate") .attr("x", 10) .attr("y", d => y(d)) .attr("font-size", "14px") .attr("stroke", "black") .attr("fill", "black") .attr("stroke-width", "1px") .text(d => d) circles.transition() .duration(800) .attr("r", function (d) { return r(d["value"]); }) .attr("fill", d => d3.interpolateRdYlGn(d["value"] / 7)); k_circles.transition() .duration(1600) .attr("r", function (d) { return r(d["Key Skill"]); }) .attr("fill", d => d3.interpolateRdYlGn(d["Key Skill"] / 7)); z_circles.transition() .duration(2400) .attr("r", function (d) { return r(d["Z"]) / 2; }) .attr("fill", d => d3.interpolateRdBu(d["Z"] / 12)); return svg.node() }37:Tb4b,// I only claim the changes made to this original template are mine. Code comes from https://observablehq.com/@rossmills99/untitled. To modify or add more questions, check the very bottom of the notebook. currentAnswerContainer = { const container = document.createElement('div'); const question = document.createElement('div'); addQuestion(question); container.appendChild(question); const buttons = document.createElement('div'); buttons.style['margin-top'] = '16px'; const nextBtn = createNextButton(container); nextBtn.style['margin-bottom'] = '4px'; const restartBtn = createRestartButton(); buttons.appendChild(nextBtn); buttons.appendChild(html`
`); buttons.appendChild(restartBtn); container.appendChild(buttons); return container; // functions function createRestartButton() { const btn = html`` btn.addEventListener('click', () => { mutable currentQuestion = nextQuestion(true); }); return btn; } function createNextButton(container) { const btn = html`` btn.addEventListener('click', (f) => { const givenAnswerRadio = container.querySelector('input[type=radio]:checked'); Object.assign(currentQuestion, { givenAnswer: givenAnswerRadio && givenAnswerRadio.value }); mutable currentQuestion = nextQuestion(); }); return btn; } function addQuestion(container) { container.classList.add('quiz-container'); container.classList.add('box-with-shadow'); container.style['min-height'] = '200px'; if (!currentQuestion) { // Give score const score = quizModel.filter(q => q.givenAnswer == q.answer).length; container.appendChild(md`### End of Quiz! You scored: **${score} Points** `); // Render a message based on score percentage const pc = score / quizModel.length; if (pc == 1) { container.appendChild(md`You got all answers correct, amazing!`); } else if (pc > 0.6) { container.appendChild(md`Good Job!`); } else if(pc <= 0.6 && pc >= 0.4) { container.appendChild(md`Not bad!`); } else { container.appendChild(md`Ouch! Better luck next time.`); } // Render all answers container.appendChild(md` #### Answers ${quizModel.map(q => ` ##### ${q.question}
${q.givenAnswer} ${ q.answer != q.givenAnswer ? `Answer: _${q.answer}_`: ''} `).join('')} `); } else { const q = renderQuestion(currentQuestion); q.classList.add('question'); const o = renderOptions(currentQuestion); o.classList.add('options'); container.appendChild(q); container.appendChild(o); } return container; } }38:[{"id":"6474f675322342d658feef70cd4d4f3945c412def08dd87f1a93cc472be1f3a643751ba21be4cbbba17a53357115689e40ba873bf2d6a4c7be5ef8fe95497e8e","href":"https://static.observableusercontent.com/files/6474f675322342d658feef70cd4d4f3945c412def08dd87f1a93cc472be1f3a643751ba21be4cbbba17a53357115689e40ba873bf2d6a4c7be5ef8fe95497e8e","name":"generalist.png","type":"image/png","lastModified":1590705548552.65,"size":1273748},{"id":"22b432fddf6ec1256a0d250fac2b709b752416b9c1090fd0d18c23186ea46526c858550d0c941eea9d0d7a710f164ca23c5b58174e74d05c32e951e65886119c","href":"https://static.observableusercontent.com/files/22b432fddf6ec1256a0d250fac2b709b752416b9c1090fd0d18c23186ea46526c858550d0c941eea9d0d7a710f164ca23c5b58174e74d05c32e951e65886119c","name":"smaller cute bee.gif","type":"image/gif","lastModified":1590705548552.65,"size":7195}] 2a:{"title":"Traits of Pollinator Communities and their advantages & consequences - suggestions","cells":[{"id":0,"value":"md`# Traits of Pollinator Communities and their advantages & consequences - suggestions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"cutebee = FileAttachment (\"smaller cute bee.gif\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md` Pollinators are animals which move pollen from the male anther of a plant to the female stigma of another. There are various kinds of pollinators such as bees, butterflies, moths and many others. Many will know such roles of a pollinator but then be shocked to learn how essential the pollinators are in agriculture and the environment. How important are they?\n\nOne third of all agricultural output depends on pollinators! \n\nUnderstanding the importance of such pollinators, we take a look into some of the traits of pollinator communities. By taking a look at the small world structures and the nestedness of pollinator communities, one will be surprised at how pollinator species don't just follow some simple interactions between flowers but instead form a rather complex and effecient interaction between flowers. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"md`# Small World Structure`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md` First of all, we look into the **small world structure** of the pollinator community. For those of you who do not know about the structure, think of the 'six degrees of separation' : the idea that all people are six or fewer connections away from each other. \n\nIf you know person A, person A would be a first degree connection. If you know person B, a 'friend of person A', then person B is a second degree connection. If you know person C who is then a 'friend of a friend of a friend', person C would be a third degree connection. And so, the term 'friend of a friend (of a friend...)' can be made to the connection of any two people in a maximum of six steps. \n\nIn the case of our pollinator communities similarly, two given species are seperated by small number of links from any other species in the web. F is only six connections away from A!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"md`NOTE: this idea was an experment of Stanley Milgram (1960s). You may want to talk about this experiment, its actually quite interesting. Also, this idea was popularized by the Six Degrees of Kevin Bacon. He recently spoke about his new intitive \"IStayHomeFor\" related to COVID-19 (https://www.sixdegrees.org/istayhomefor).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":694,"value":"{\n const p = md`Six degrees of separation...!`;\n p.style.color = d3.interpolateRainbow(now / 2000);\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`## Generalist and Specialist `","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"bees = d3.range(15).map(d=> [d,Math.floor(Math.random() * 3)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"flowers = d3.range(10).map(d=> [d,Math.floor(Math.random() * 3)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"relationships = {\n var apple = []\n for (var i = 0; i < bees.length; i++) {\n for (var j = 0; j < flowers.length; j++) {\n if(Math.random()>randomProbability) apple.push([bees[i][0], flowers[j][0]])\n }\n }\n return apple\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"height =300","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md` **Play around with the slider below to adjust the connectivity in the pollinator community!**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof randomProbability = slider()","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md` Brown circles represent pollinator (bees) while the blue circles represent plants (flowers). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"flowers.map((d,i) => ({\"name\":\"flower_\"+i,\"type\":d[1]}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"relationships.map((d,i) => ({\"source\":d[0],\"target\":d[1]}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":736,"value":"md` ### Unipartite graph - Bee Edition (Random Edition) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"md` ### Unipartite graph - Flower Edition (Random Edition) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":730,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":789,"value":"md` As we move the slider of the probability of the connectivity to a higher note, we notice that the bipartite graph makes less interactions between the bee and flower. Hence the unipartite graph that follows the patterns of the bipartite graphs show more separation of mutual connections it has had with a different species of one of its kind. For example, it could be that flower 3 no longer shares any mutual bees that connect to flower 7. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":720,"value":"md ` The above force directed graphs adjust accordingly to the connectivity represented in the bipartite graph of the pollinator and plant. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md` At first, the network may seem complicated and may make no sense. But once you understand that yellow circles are pollinators and that green circles are plants, you understand that this is a pollinator network. \n\nThe pollinators that connect to only a few specific plants are called a **specialist pollinator**. The ones that connect to more, are called a **generalist pollinator**. The most common **generalist pollinator** is the well known honey bee. Similarly, a **specialist plant** is a plant which interacts with a few specific pollinator species while a **generalist plant** connects to many plants.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"genspec = FileAttachment(\"generalist.png\").image() //https://www.youtube.com/watch?time_continue=167&v=Y5uRVv7GGQM&feature=emb_title","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"md` In most pollinator communities, **generalist plants** like to match with **specialist pollinators** while **specialist plants** like to match with **generalist pollinators**. That is so because of *nestedness*. We will talk about *nestedness* later on too, but to simply put, if **specialist pollinators** only match with **specialist plants**, they depend on each other too much and are much more vulnerable to extinction if the other goes extinct or some other environmental effect affects them. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md` Once all these concepts have been understood, it is easier to percept this whole idea as just one game. You set yourself from the perspective of a generalist/specialist pollinator/plant and make choices of what you would do. For example, if you are a specialist plant wouldn't you only want to interact with a generalist pollinator?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"md` **Hold up... quiz time! **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`### Like a game? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md` And just like a game, every action/move will yield a result. Let's say as a **specialist plant**, you decided to *not* interact with a **generalist pollinator** but interact only with a **specialist pollinator**. One day the **specialist pollinator** you interacted with dies from an insecticide. \n\nWell... then at point your best as a specialist plant to not go extinct is to interact with other pollinators. And the best hope then is to be interacting with a very busy working generalist pollinator. \n\nAnd just like this, and not only specified to this made-up 'game', these pollinator networks are very smart and do backup each other's roles to keep the network alive. It is a **small world structure** in between all these living pollinators & plants where they help each other for a healthy network- just like humans! \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"md` Back to what we initially were talking about: the small-world structure, we can disassemble the bipartite graph of a pollinator network into two unipartite graphs of pollinators and plants. One can note how all plants/pollinators are within a few degrees of each other as well, like the example of '6 degrees separation'. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"bee = [1,2,3,4]","pinned":false,"hidden":false,"mode":"ojs"},{"id":766,"value":"flower = [6,7,8,9,10,11]","pinned":false,"hidden":false,"mode":"ojs"},{"id":768,"value":"relations = {\n var banana = [\n { source: \"1\", target: \"6\" },\n { source: \"1\", target: \"7\" },\n { source: \"1\", target: \"8\" },\n { source: \"2\", target: \"7\" },\n { source: \"2\", target: \"8\" },\n { source: \"2\", target: \"9\" },\n { source: \"3\", target: \"8\" },\n { source: \"3\", target: \"10\" },\n { source: \"4\", target: \"9\" },\n { source: \"4\", target: \"11\" }\n \n \n \n];\n return banana\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"md` ### Unipartite graph - Bee Edition (Manual Edition) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"md`Simply interpreting this unipartite graph, we can see how the plants which bee 2 had pollinated were also pollinated by the other bees. Similarly, with regards to the flowers which bee 4 had pollinated, only bee 2 had the same interaction and no other bees had interacted with those. Bee 2 was probably a generalist pollinator, while bee 4 is probably a specialist pollinator. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md` ### Unipartite graph - Flower Edition (Manual Edition) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`With this unipartite graph, we can see how flower 3 had interacted with all the bees which all the other flowers but flower 6 had interacted with. Similarly, flower 5 had only interacted with bees which flower 3 had interacted with too. We can say that flower 3 was probably a generalist flower while flower 5 was a specialist flower. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"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"},{"id":91,"value":"md` In such a small world where all pollinators are in connection within a few degrees as well as for plants, the small-world structure of the pollinator network briefly guides us through the advantages and the consequences of the network. \n\nThe smart network has developed itself to stay away from danger and extinction as much as possible by having specialist pollinators/plants interacting with pollinators/plants of opposite traits. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`# Nestedness`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"// md`Force directed graphs and splitting up bipartite graphs into unipartite graphs can help understand the connections between the species together and understand the organism individually. With force directed graphs, it can be difficult to picture a very complex pollinator network with a lot of vectors and connection lines between the pollinator and plants. There is another way to visualize such relationships relatively in a easy way as well as also visualize out a whole network of the pollinator network without overviewing things. With a *bubble matrix*, no matter how big the pollinator network is, to help understand how the network looks like will be easy. It can also help us compare the traits of a random nested structure compared to a nested network structure. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md` Nestedness is a measure of structure in a ecological system, usually applied to species-species interaction networks. So in our case, it applies to the bee - flower network. And more specifically, it can help us show that the interactions of specialists with flowers are only a subset of the interactions of what generalists have with flowers. \n\nWe will use matricies to show the bee to flower connection and to explain nestedness of the pollinator communities`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"md` In our bubble matrix, our rows would be the respective bees of our data set: so bee 1, bee 2, 3,4.Hence our column would be the respective flowers of our data set: from flower 1 to 6. So basically, if the matrix box of bee 2 and flower 5 is colored/ or set equal to 1, there is an interaction with that bee 2 and flower 5. If there is no color/ or 1 between the bee and flower, there is no interaction between the two. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"raw_data2 = `Candidate, Flower1, Flower2, Flower3, Flower4, Flower5, Flower6\nBee1, 3,3,3,0,0,0\nBee2, 0,3,3,3,0,0\nBee3, 0,0,3,0,3,0\nBee4, 0,0,0,3,0,3\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md` ## Nested network structure of the above manual example of the pollinator community`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"md` Normally, matrices that show the bee to flower connection are displayed to explain nestedness of the pollinator communities. Well then, what exactly is nestedness? \n\nNestedness is a measure of structure in a ecological system, usually applied to species-species interaction networks. So in our case, it applies to the bee - flower network. And more specifically, it can help us show that the interactions of specialists with flowers are only a subset of the interactions of what generalists have with flowers. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"md`A strong nestedness in a pollinator community is usually found more in less preditable environments. Why so? \n\nIt is under the rationale that under less predictable environments, species may enhance their tolerance to external disturbances thanks to the strong nestedness. Hence in the similiar lines, plant- pollinator networks in a nested structure can enhance species coexistence by minimizing competition and instead increasing intrinsic conditions which lead to positive species abundances. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md` ## Nested network structure.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"md ` It has been studied that a nested network may increase the persistence of ecological communities under less predictable environments. And hence, the advantage with a nested network is that it can survive better off in a very volatile seasonal environment. \n\nIn such a 'strong' nested network, even if let's say Flower 12 has no stigma to give to Bee 2 and Bee 5 who have been interacting for a period, Bee 2 and Bee 5 can still transfer stigmas of other flowers they have been interacting with because of such nested characteristic. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"md` ## Random network structure.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md`\n\nIn a more random network setting, it would consist of a characteristic opposite of the nested network setting. Hence, it may be a case where it is more prone to species extinctions. For example in such a random network setting, if bee 4 has an injured wing and can't fly for a while, Flower 25 is left vulnerable with no pollinator that can help and is in danger of extinction.\n\nWe take a look at metrics of nestedness that are used to define its strength and other traits in the paragraphs below. \n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"md ` \n### NODF: Nestedness measure based on Overlap and Decreasing Fills\n\nThere are many ways to measure the 'strength' of the nestedness of a matrix. One of the most used measurement is the NODF (nestedness measure based on overlap and decreasing fills). NODF is defined as the percentage of presence in inferior rows and in right columns that are in the same position (column or row) of the presence in, respectively, upper rows and left columns with higher marginal totals of all pairs of columns or rows.\n\nAs one can expect, higher NODF show strong correlation to higher amount of connections between the community. It also shows higher NODF values in communities with less species. \n\nWe can assume that the NODF for the above Nested Network Structure to be a greater number than the NODF of the below Random Network Structure. And in fact, that really was the case. The NODF for the above Nested structure was higher at *55.12*, compared to the NODF for the below Random structure which was at *18.654*. ` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":807,"value":"md`\n### T: Matrix Temperature\n\nThe matrix temperature,T, is a measure of how uniform the distribution of edges is across the matrix. It is the normalized sum of squared relative distances of absences above and presences below the hypothetical isociline which separates occupied from unoccupied areas in a perfectly nested matrix.For interpretation purposes, what we need to know for better understanding is that a perfectly nested matrix has a T value of zero while a maximally non-nested matrix has a temperature equal to 100. \n\nIt aims to quantify the deviation from nested pattern due to unexpected extinctions and colonizations, specifically more in sites of more and less 'hospitable' sites. \n\nThe 'T' measurement of the nested network structure was spotted at *11.944* while the T metric for the random network structure was measured at *33.856*. Not surprisingly, the 'nested' network structure had the better metric of the matrix temperature, T. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"md` \n### BR: Brualdi and Sanderson metric\n\nAnother popular and recommended metric is a count of the number of discrepancies (absences or presences) which must be 'corrected' or 'adjusted' to produce the perfectly nested matrix. It aims to quantify the deviation from a nested pattern by means of minimum number by means of minimum number of replacements of presences to produce a new nested matrix. \n\nAs the description defines to be, a lower BR metric value indicates a closer formation to a nested matrix. The BR metric value of the nested network matrix of ours yields to be *30* while the BR metric value of the random network matrix yields at *61*. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"md`\nFor more computations of other nestedness matrix that appears from pollinator networks, check \n\nhttps://ecosoft.alwaysdata.net/\n\nand evaluate your matrix!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"md` As one can see, the matrices are easier to observe which interactions there were between the bee and flower, as well as easier to highlight the nestedness of the network.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"quiz = `\n\n1. Which of the following matches only with limited species of plants?\n\nGeneralist Pollinator\nSpecialist Pollinator*\nGeneralist Plant\nSpecialist Plant\n\n---\n\n2. A nested network may increase the persistence of ecological communities under less predictable environments.\n\nTrue*\nFalse\n\n---\n\n3. Which is not one of the metrics mentioned to measure the strength of nestedness in a matrix?\n\nT\nNODF\nRTX*\nBR\n\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"function renderOptions(questionModel) {\n const options = questionModel.options.map(o =>\n `\n \n ${o}\n \n
`).join('')\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":660,"value":"function renderQuestion(questionModel) {\n return md`### ${questionModel.question}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"mutable currentQuestion = nextQuestion();","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"nextQuestion = setupQuiz(quizModel);","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"function setupQuiz(quiz) {\n let i = 0;\n return function (reset) {\n if (reset) {\n i = 0;\n }\n if (i <= quiz.length) {\n return quiz[i++];\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"function parser(qs) {\n const questions = qs.split('---')\n .map(q => q.trim())\n .map(q => q.split('\\n\\n'))\n .map(q => {\n const rawOptions = q[1].split('\\n');\n const qmodel = {\n question: q[0],\n options: rawOptions.map(o => o.replace('*', '')),\n answer: rawOptions.find(a => a[a.length - 1] === '*').replace('*', '')\n };\n return qmodel;\n });\n return questions;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"quizModel = parser(quiz);","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}