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:Ta5f,//https://observablehq.com/@dovinmu/d3-simple-map chart = { const width = 960; const height = 600; const path = d3.geoPath(); const radius = d3.scaleSqrt().domain([0, 1e6]).range([0, 15]); var nodes = [ {name: "A", fx : 100 , fy: 70}, {name: "B" , fx: 130, fy:150}, {name: "C", fx: 330, fy:400}, {name: "D", fx: 430, fy:250}, {name: "E", fx: 550, fy:290}, {name: "F", fx: 660, fy:430}, {name: "G", fx: 770, fy: 500} ]; 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 / 4)); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "auto"); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ccc") .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); const link = svg.append("g") .attr("stroke", "darkgrey") .attr("stroke-opacity", 1) .attr("length", 5) .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", 17) .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", 17) .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(); }2d:T849,// I only claim the changes made to this original template are mine. Please see history to validate. // Template code; see below for mine twodegrees = { //const links = data.links.map(d => Object.create(d)); //const nodes = data.nodes.map(d => Object.create(d)); var nodes = [ {name: "A"}, {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: "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([-0.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(); }2e:Tb77,// 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. currentAnswerContainer2 = { 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 currentQuestion2 = nextQuestion2(true); }); return btn; } function createNextButton(container) { const btn = html`` btn.addEventListener('click', (f) => { const givenAnswerRadio = container.querySelector('input[type=radio]:checked'); Object.assign(currentQuestion2, { givenAnswer: givenAnswerRadio && givenAnswerRadio.value }); mutable currentQuestion2 = nextQuestion2(); }); return btn; } function addQuestion(container) { container.classList.add('quiz2-container'); container.classList.add('box-with-shadow'); container.style['min-height'] = '200px'; if (!currentQuestion2) { // Give score const score = quizModel2.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 / quizModel2.length; if (pc == 1) { container.appendChild(md`Unbeeeeeeeeeeeeeeeeeelievable! 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 ${quizModel2.map(q => ` ##### ${q.question}
${q.givenAnswer} ${ q.answer != q.givenAnswer ? `Answer: _${q.answer}_`: ''} `).join('')} `); } else { const q = renderQuestion(currentQuestion2); q.classList.add('question'); const o = renderOptions(currentQuestion2); o.classList.add('options'); container.appendChild(q); container.appendChild(o); } return container; } }2f:T5c9,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") .join("circle") .attr("rx", 11) .attr("ry", 5) .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(); }30:Tceb,// I only claim the changes made to this original template are mine. Please see history to validate. randomNetworkBees = { var links = [] var sets = [] const svg = d3.select(DOM.svg(widthh, heightt)); var hexbin = d3.hexbin(); const beeg = svg.selectAll("g.bees").data(beees).enter().append("g") .attr("class","bees") .attr("id",(d,i)=>"bee_"+i) .attr("transform", d=>"translate("+((d[0])-(boxsize/2))+" "+((d[1])-(boxsize/2))+")") beeg .selectAll("path.hexagon").data(beeData).enter().append("path") .attr("class", "hexagon") .attr("transform", d=> "rotate(90," + beehexLocation(d.data,hexRadius,boxsize) + ") translate(" + beehexLocation(d.data,hexRadius,boxsize) + ")" ) .attr("d", function(d) { return hexbin.hexagon([hexRadius]); }) .style("stroke",(d,i)=>d.stroke) .style("stroke-width", (d,i)=>d.widthh) .style("fill", (d,i)=>d.colors) beeg.append("rect") .attr("x",0) .attr("y",0) .attr("widthh",boxsize) .attr("heightt",boxsize) .style("stroke","darkgrey") .style("stroke-width","1px") .style("fill", "lightgrey") .style("fill-opacity",0) .on("mouseover", function(){ d3.select(this).style("stroke-width","5px") }) .on("mouseout", function(){ d3.select(this).style("stroke-width","1px") }) 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 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(); }31:Tce8,// 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.select(DOM.svg(widthh, heightt)); var hexbin = d3.hexbin(); const flowerg = svg.selectAll("g.flowers").data(flowerss).enter().append("g") .attr("class","flowers") .attr("id",(d,i)=>"flower_"+i) .attr("transform", d=>"translate("+((d[0])-(boxsize/2))+" "+((d[1])-(boxsize/2))+")") flowerg .selectAll("path.hexagon").data(flowerData).enter().append("path") .attr("class", "hexagon") .attr("transform", d=> "rotate(90," + beehexLocation(d.data,hexRadius,boxsize) + ") translate(" + beehexLocation(d.data,hexRadius,boxsize) + ")" ) .attr("d", function(d) { return hexbin.hexagon([hexRadius]); }) .style("stroke",(d,i)=>d.stroke) .style("stroke-width", (d,i)=>d.width) .style("fill", (d,i)=>d.colors) flowerg.append("rect") .attr("x",0) .attr("y",0) .attr("widthh",boxsize) .attr("heightt",boxsize) .style("stroke","darkgrey") .style("stroke-width","1px") .style("fill", "lightgrey") .style("fill-opacity",0) .on("mouseover", function(){ d3.select(this).style("stroke-width","5px") }) .on("mouseout", function(){ d3.select(this).style("stroke-width","1px") }) 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(); }32:T56d,html`

`33:T515,html`

`34:T90f,// 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(); }35: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(); }36:Tb85,// 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. currentAnswerContainer3 = { 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 currentQuestion3 = nextQuestion3(true); }); return btn; } function createNextButton(container) { const btn = html`` btn.addEventListener('click', (f) => { const givenAnswerRadio = container.querySelector('input[type=radio]:checked'); Object.assign(currentQuestion3, { givenAnswer: givenAnswerRadio && givenAnswerRadio.value }); mutable currentQuestion3 = nextQuestion3(); }); return btn; } function addQuestion(container) { container.classList.add('quiz3-container'); container.classList.add('box-with-shadow'); container.style['min-height'] = '200px'; if (!currentQuestion3) { // Give score const score = quizModel3.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 / quizModel3.length; if (pc == 1) { container.appendChild(md`Unbeeeeeeeeeeeeeeeeeelievable! 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`Tough luck. Try again!`); } else { container.appendChild(md`Ouch! Better luck next time.`); } // Render all answers container.appendChild(md` #### Answers ${quizModel3.map(q => ` ##### ${q.question}
${q.givenAnswer} ${ q.answer != q.givenAnswer ? `Answer: _${q.answer}_`: ''} `).join('')} `); } else { const q = renderQuestion(currentQuestion3); q.classList.add('question'); const o = renderOptions(currentQuestion3); o.classList.add('options'); container.appendChild(q); container.appendChild(o); } return container; } }37:T1a40,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); console.log(tab_data) 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() }38:T1a16,randomChart = { 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); console.log(tab_data) var traits = flowers.map((d,i)=> "Flower"+(i+1)) var candidates = randomMatrix.map(r => r.Candidate); var row_data = [], row, prop; for (row of randomMatrix) { 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() }39:Tb85,// 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. currentAnswerContainer4 = { 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 currentQuestion4 = nextQuestion4(true); }); return btn; } function createNextButton(container) { const btn = html`` btn.addEventListener('click', (f) => { const givenAnswerRadio = container.querySelector('input[type=radio]:checked'); Object.assign(currentQuestion4, { givenAnswer: givenAnswerRadio && givenAnswerRadio.value }); mutable currentQuestion4 = nextQuestion4(); }); return btn; } function addQuestion(container) { container.classList.add('quiz4-container'); container.classList.add('box-with-shadow'); container.style['min-height'] = '200px'; if (!currentQuestion4) { // Give score const score = quizModel4.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 / quizModel2.length; if (pc == 1) { container.appendChild(md`Unbeeeeeeeeeeeeeeeeeelievable! 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`Tough luck. Try again!`); } else { container.appendChild(md`Ouch! Better luck next time.`); } // Render all answers container.appendChild(md` #### Answers ${quizModel4.map(q => ` ##### ${q.question}
${q.givenAnswer} ${ q.answer != q.givenAnswer ? `Answer: _${q.answer}_`: ''} `).join('')} `); } else { const q = renderQuestion(currentQuestion4); q.classList.add('question'); const o = renderOptions(currentQuestion4); o.classList.add('options'); container.appendChild(q); container.appendChild(o); } return container; } }3a: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,2,2,2,2,2,2,2,2,2,0,2,0,0,2,2,0,0,2,0,2,0,0,2,0 Bee2, 2,2,2,2,0,2,2,2,0,2,2,2,2,0,0,0,0,2,0,2,0,2,0,0,0 Bee3, 2,2,2,0,2,0,0,2,2,0,2,0,0,2,0,0,0,0,0,0,0,0,0,0,0 Bee4, 2,0,2,0,2,2,2,2,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee5, 0,2,2,2,2,0,2,0,2,0,0,0,2,0,0,0,2,0,0,0,0,0,0,0,0 Bee6, 2,2,0,2,2,2,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee7, 2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2 Bee8, 2,2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee9, 2,0,2,0,0,0,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee10,2,2,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee11,2,2,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0 Bee12,2,2,0,0,2,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee13,0,0,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee14,2,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,2,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee16,2,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee17,2,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee18,2,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,2,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,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee21,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee22,2,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,2,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,2,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,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 `3b: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() }3c:T739,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.5,0,0,3.5,0,0,3.5,0,0,3.5,0,3.5,0,0,3.5,0,0,0,0,0,0,3.5,0,0,0 Bee2, 0,0,3.5,0,3.5,3.5,0,0,0,0,3.5,3.5,0,3.5,0,0,0,3.5,0,0,0,0,0,0,0 Bee3, 3.5,3.5,0,3.5,0,0,3.5,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3.5,0,0 Bee4, 0,3.5,0,0,3.5,0,0,0,0,0,0,0,0,3.5,0,0,0,0,0,3.5,0,0,0,0,3.5 Bee5, 0,0,3.5,0,3.5,0,0,0,3.5,0,0,0,3.5,0,0,0,0,0,3.5,0,0,0,0,0,0 Bee6, 0,0,0,3.5,0,3.5,0,0,0,0,3.5,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0 Bee7, 3.5,0,3.5,3.5,0,0,0,0,3.5,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0 Bee8, 3.5,3.5,3.5,0,0,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee9, 0,0,0,3.5,0,3.5,0,0,0,0,0,3.5,0,0,0,3.5,0,0,0,0,0,0,0,0,0 Bee10,0,0,0,3.5,0,0,0,0,0,3.5,0,0,0,0,0,0,3.5,0,0,3.5,0,0,0,0,0 Bee11,3.5,3.5,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0 Bee12,0,0,3.5,0,0,0,0,0,0,3.5,0,0,3.5,0,0,0,0,0,0,0,0,0,0,3.5,0 Bee13,0,0,0,0,3.5,0,0,3.5,0,0,0,0,0,0,0,0,0,0,3.5,0,3.5,0,0,0,0 Bee14,0,3.5,0,0,0,0,0,0,0,0,3.5,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0 Bee15,3.5,0,0,0,0,0,3.5,0,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee16,3.5,3.5,0,0,0,0,0,3.5,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0 Bee17,0,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee18,0,0,3.5,0,0,3.5,0,0,3.5,0,0,0,0,3.5,0,0,0,0,0,0,0,3.5,0,0,0 Bee19,0,0,0,0,3.5,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.5,0,3.5,0,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0 Bee21,0,0,0,0,0,0,0,0,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee22,0,0,0,0,0,3.5,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 Bee23,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3.5,0,0,0,0 Bee24,3.5,0,0,0,0,3.5,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.5,0,0,3.5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 `3d: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() }3e: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; } }3f:T434,data = d3.csvParse(`year party location Lat Lng 2020 Rep Charlotte, NC 35.19534 -80.81711 2016 Rep Cleveland, OH 41.496551 -81.65133 2012 Rep Tampa, FL 27.935231 -82.495716 2008 Rep Saint Paul, MN 44.95304 -93.09013 2004 Rep New York, NY 40.68295 -73.9708 2000 Rep Philadelphia, PA 39.990821 -75.168428 1996 Rep San Diego, CA 32.72793 -117.15529 1992 Rep Houston, TX 29.784753 -95.361416 1988 Rep New Orleans, LA 30.056708 -89.889852 1984 Rep Dallas, TX 32.736212 -96.784359 1980 Rep Detroit, MI 42.398649 -83.164515 1976 Rep Kansas City, MI 39.051003 -94.541461 2020 Dem Milwaukee, WI 43.063146 -87.948334 2016 Dem Philadelphia, PA 39.990821 -75.168428 2012 Dem Charlotte, NC 35.19534 -80.81711 2008 Dem Denver, CO 39.740959 -104.985798 2004 Dem Boston, MA 42.355492 -71.048611 2000 Dem Los Angeles, CA 34.05513 -118.25703 1996 Dem Chicago, IL 41.87897 -87.66063 1992 Dem New York, NY 40.68295 -73.9708 1988 Dem Atlanta, GA 33.769805 -84.414581 1984 Dem San Francisco, CA 37.778008 -122.431272 1980 Dem New York, NY 40.68295 -73.9708 1976 Dem New York, NY 40.68295 -73.9708`)40:T74e,function GeneralistPollinator(svg) { const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(beess,d=>d[0])) const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flowersss,d=>d[0])) const flower_palette = d3.interpolateGreens; const flower_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(flowersss,d=>d[1])]) const bees_palette = d3.interpolateOranges; const bees_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(beess,d=>d[1])]) svg.select("g#slide_0").selectAll("line.connections").data(genprelationships).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.select("g#slide_0").selectAll("circle.bees").data(beess).enter().append("circle") .join("circle") .attr("rx", 11) .attr("ry", 5) .attr("class","beess") .attr("cx",d=>x(d[0])) .attr("cy",height/3) .attr("r", 10) .style("fill", d=>bees_palette(bees_color(d[1]))) svg.select("g#slide_0").selectAll("circle.flowers").data(flowersss).enter().append("circle") .attr("class","flowersss") .attr("cx",d=>y(d[0])) .attr("cy",height*2/3) .attr("r", 10) .style("fill", d=>flower_palette(flower_color(d[1]))) svg.select("g#slide_0").append("rect") .attr("x", 0) .attr("y", 2*height/2.8) .attr("width", width) .attr("height", height/3) .style("fill", "#222222") .style("font-family", "Arial") svg.select("g#slide_0").append("text") .text("Generalist Pollinator") .attr("x", 250) .attr("y", height*5/6+7) .style("fill", "white") .style("font-size", 30) }41:T739,function SpecialistPollinator(svg) { const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(beess,d=>d[0])) const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flowersss,d=>d[0])) const flower_palette = d3.interpolateGreens; const flower_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(flowersss,d=>d[1])]) const bees_palette = d3.interpolateOranges; const bees_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(beess,d=>d[1])]) svg.select("g#slide_1").selectAll("line.connections").data(speprelationships).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.select("g#slide_1").selectAll("circle.bees").data(beess).enter().append("circle") .join("circle") .attr("rx", 11) .attr("ry", 5) .attr("class","beess") .attr("cx",d=>x(d[0])) .attr("cy",height/3) .attr("r", 10) .style("fill", d=>bees_palette(bees_color(d[1]))) svg.select("g#slide_1").selectAll("circle.flowers").data(flowersss).enter().append("circle") .attr("class","flowersss") .attr("cx",d=>y(d[0])) .attr("cy",height*2/3) .attr("r", 10) .style("fill", d=>flower_palette(flower_color(d[1]))) svg.select("g#slide_1").append("rect") .attr("x", 0) .attr("y", 2*height/2.8) .attr("width", width) .attr("height", height/3) .style("fill", "#222222") .style("font-family", "Arial") svg.select("g#slide_1").append("text") .text("Specialist Pollinator") .attr("x", 250) .attr("y", height*5/6+7) .style("fill", "white") .style("font-size", 30) }42:T708,function GeneralistPlant(svg) { const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(beess,d=>d[0])) const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flowersss,d=>d[0])) const flower_palette = d3.interpolateGreens; const flower_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(flowersss,d=>d[1])]) const bees_palette = d3.interpolateOranges; const bees_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(beess,d=>d[1])]) svg.select("g#slide_2").selectAll("line.connections").data(genplrelationships).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.select("g#slide_2").selectAll("circle.bees").data(beess).enter().append("circle") .join("circle") .attr("rx", 11) .attr("ry", 5) .attr("class","beess") .attr("cx",d=>x(d[0])) .attr("cy",height/3) .attr("r", 10) .style("fill", d=>bees_palette(bees_color(d[1]))) svg.select("g#slide_2").selectAll("circle.flowers").data(flowersss).enter().append("circle") .attr("class","flowersss") .attr("cx",d=>y(d[0])) .attr("cy",height*2/3) .attr("r", 10) .style("fill", d=>flower_palette(flower_color(d[1]))) svg.select("g#slide_2").append("rect") .attr("x", 0) .attr("y", 2*height/2.8) .attr("width", width) .attr("height", height/3) .style("fill", "#222222") svg.select("g#slide_2").append("text") .text("Generalist Plant") .attr("x", 300) .attr("y", height*5/6+7) .style("fill", "white") .style("font-size", 30) }43:T703,function SpecialistPlant(svg) { const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(beess,d=>d[0])) const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flowersss,d=>d[0])) const flower_palette = d3.interpolateGreens; const flower_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(flowersss,d=>d[1])]) const bees_palette = d3.interpolateOranges; const bees_color = d3.scaleLinear().range([0,1]).domain([-1,d3.max(beess,d=>d[1])]) svg.select("g#slide_3").selectAll("line.connections").data(speplrelationships).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.select("g#slide_3").selectAll("circle.bees").data(beess).enter().append("circle") .join("circle") .attr("rx", 11) .attr("ry", 5) .attr("class","beess") .attr("cx",d=>x(d[0])) .attr("cy",height/3) .attr("r", 10) .style("fill", d=>bees_palette(bees_color(d[1]))) svg.select("g#slide_3").selectAll("circle.flowers").data(flowersss).enter().append("circle") .attr("class","flowersss") .attr("cx",d=>y(d[0])) .attr("cy",height*2/3) .attr("r", 10) .style("fill", d=>flower_palette(flower_color(d[1]))) svg.select("g#slide_3").append("rect") .attr("x", 0) .attr("y", 2*height/2.8) .attr("width", width) .attr("height", height/3) .style("fill", "#222222") svg.select("g#slide_3").append("text") .text("Specialist Plant") .attr("x", 300) .attr("y", height*5/6+7) .style("fill", "white") .style("font-size", 30) }44:[{"id":"22b432fddf6ec1256a0d250fac2b709b752416b9c1090fd0d18c23186ea46526c858550d0c941eea9d0d7a710f164ca23c5b58174e74d05c32e951e65886119c","href":"https://static.observableusercontent.com/files/22b432fddf6ec1256a0d250fac2b709b752416b9c1090fd0d18c23186ea46526c858550d0c941eea9d0d7a710f164ca23c5b58174e74d05c32e951e65886119c","name":"smaller cute bee.gif","type":"image/gif","lastModified":1592368658646.009,"size":7195},{"id":"6474f675322342d658feef70cd4d4f3945c412def08dd87f1a93cc472be1f3a643751ba21be4cbbba17a53357115689e40ba873bf2d6a4c7be5ef8fe95497e8e","href":"https://static.observableusercontent.com/files/6474f675322342d658feef70cd4d4f3945c412def08dd87f1a93cc472be1f3a643751ba21be4cbbba17a53357115689e40ba873bf2d6a4c7be5ef8fe95497e8e","name":"generalist.png","type":"image/png","lastModified":1592368658646.009,"size":1273748},{"id":"ab875a8d3563ad81890be3866c688ec5216b8531c416dbcdf51b0aa5522870dd058399223c331de565ca5d936856aec89b36ee25a736853328f787502edfc6ed","href":"https://static.observableusercontent.com/files/ab875a8d3563ad81890be3866c688ec5216b8531c416dbcdf51b0aa5522870dd058399223c331de565ca5d936856aec89b36ee25a736853328f787502edfc6ed","name":"beeportss@1.csv","type":"text/csv","lastModified":1592540680958.714,"size":434}] 2a:{"title":"Traits of Pollinator Communities and their advantages & consequences","cells":[{"id":0,"value":"md`# Traits of Pollinator Communities and their advantages & consequences `","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":994,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1420,"value":"md`Have a play around with the force directed graph on the US map! It can end up that A who might lives in Washington eventually has a mutual friend of a friend named G that lives in Florida! \n\nYou can play around with the circles to see if you can map your friends that live around the US as well too. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"md`### Quiz 1!` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1051,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"md`## Generalist and Specialist `","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 green circles represent plants (flowers). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1296,"value":"md` **Random version^ of a pollinator community**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1722,"value":"md` You can also check the bubble matrix of this random version^ of a pollinator community later in the notebook. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"viewof r = radio({\n title: 'Generalist/Specialists Pollinators and Plants',\n description: 'Please select an object to obtain a better understanding of Generalists and Specialists.',\n options: [\n { label: 'Generalist Pollinator', value: 0 },\n { label: 'Specialist Pollinator', value: 1 },\n { label: 'Generalist Plant', value: 2 },\n { label: 'Specialist Plant', value: 3 },\n ],\n value: 0\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1495,"value":"light = {\n const svg = d3.select(DOM.svg(windowwidth, windowheight)).attr(\"id\",\"moveme\");\n const pt1 = d3.randomUniform (0, 1000)()\n const pt2 = d3.randomUniform (0, 1000)()\n \n const container = svg.selectAll(\"g\").data(numberOfWindows).enter().append(\"g\")\n .attr(\"transform\",d=>\"translate(\"+(d*width-(width*(0)))+\",\"+0+\")\")\n .attr(\"id\",d=>\"slide_\"+d)\n \n GeneralistPollinator(svg)\n SpecialistPollinator(svg)\n GeneralistPlant(svg)\n SpecialistPlant(svg)\n \n new Promise((resolve, reject) => {\n setInterval(() => { \n GeneralistPollinator(svg)\n SpecialistPlant(svg)\n SpecialistPollinator(svg)\n GeneralistPlant(svg)\n }, 1400);\n\n })\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1727,"value":"md` The Generalist Pollinators pollinate with more than one plant.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1730,"value":"md` The Specialist Pollinators pollinate one specific plant.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1732,"value":"md` The Generalist Plants interact with more than one pollinator.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1738,"value":"md` The Specialist Pollinators like to interact with more than one pollinator.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":736,"value":"md` ### Unipartite graph - Bee Edition (Random Edition) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":585,"value":"$30","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":"$31","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 orange 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":1474,"value":"md` ### Generalist Pollinators & Plants - Western Honey Bee & Sunflower `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1464,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"md` ### Specialist Pollinators & Plants- Monarch Butterfly & Milkweed `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1480,"value":"$33","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":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":215,"value":"md` ### Unipartite graph - Bee Edition (Manual Edition) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$34","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":"$35","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":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":616,"value":"md` ### Hold up... quiz time! `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`# Nestedness`","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, 4,4,4,0,0,0\nBee2, 0,4,4,4,0,0\nBee3, 0,0,4,0,4,0\nBee4, 0,0,0,4,0,4\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":793,"value":"md` ## *Nested network structure of the above non-random (manual) example of the pollinator community*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":904,"value":"md` ## *Random network structure of the above random example^ of the pollinator community.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"$38","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":1159,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":907,"value":"md`## Explaining a difference of nested and random network structure. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"md` ## *Nested network structure.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"$3b","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":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"$3d","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":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"md`## CODES`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"md ` ### US MAP `","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"topojson = require('topojson-client@3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":970,"value":"us = d3.json('https://d3js.org/us-10m.v2.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":971,"value":"projection = d3.geoAlbers().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs"},{"id":1424,"value":"md`### Generalist and Specialist`","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":1697,"value":"md`### Generalist and Specialist Window`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1511,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"genprelationships = {\n var banana = []\n for (var i = 0; i < beess.length; i++) {\n for (var j = 0; j < 3; j++) {\n banana.push([beess[i][0],flowersss[Math.floor(Math.random() * flowersss.length)][0]])\n }\n }\n return banana\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1592,"value":"speprelationships = {\n var banana = []\n for (var i = 0; i < beess.length; i++) {\n for (var j = 0; j < 1; j++) {\n banana.push([beess[i][0],flowersss[Math.floor(Math.random() * flowersss.length)][0]]) \n }\n }\n return banana\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"genplrelationships = {\n var banana = []\n for (var i = 0; i < 3; i++) {\n for (var j = 0; j < flowersss.length; j++) {\n banana.push([beess[Math.floor(Math.random() * beess.length)][0],flowersss[j][0]])\n }\n }\n return banana\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1604,"value":"speplrelationships = {\n var banana = []\n for (var i = 0; i <1; i++) {\n for (var j = 0; j < flowersss.length; j++) {\n banana.push([beess[Math.floor(Math.random() * beess.length)][0],flowersss[j][0]])\n }\n }\n return banana\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1657,"value":"beess = d3.range(7).map(d=> [d,Math.floor(Math.random() * 3)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1653,"value":"flowersss = d3.range(5).map(d=> [d,Math.floor(Math.random() * 3)])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1513,"value":"windowwidth = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1516,"value":"windowheight = 300","pinned":false,"hidden":false,"mode":"ojs"},{"id":1492,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":1497,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":1498,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":1500,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":1502,"value":"numberOfWindows = d3.range(4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1504,"value":"function moveWindow(x) {\n d3.select(\"svg#moveme\").selectAll(\"g\")\n .transition()\n .duration(1000)\n .attr(\"transform\",d=>\"translate(\"+(d*width-(width*(+r)))+\",\"+0+\")\")\n console.log(\"asdf\")\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"moveWindow(r)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1439,"value":"md`### Unipartite Graphs ` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"widthh = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"heightt = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1250,"value":"beees = [0];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"cubes = [\n [0, -1], [+1, 0], [+1, -1], \n [-1, 0], [-1, +1], [0, +1], [0,0]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"boxsize = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":1256,"value":"hexRadius = { yield (boxsize/3)/Math.sqrt(3); }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1263,"value":"function beehexLocation(x,hexRadius,boxsize) {\n const heightt = 350\n const widthh = 900\n return (((hexRadius*(Math.sqrt(3)/(2/3))))-((hexRadius*1.5)*x[0])) + \",\" + (((hexRadius*(Math.sqrt(3)/(2/3)))-((boxsize/3)*x[1]))+(x[0]*(-(hexRadius/2)* Math.sqrt(3))))\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1258,"value":"beeData = {\n var beecubes = [\n [0, -1], [+1, 0], [+1, -1], \n [-1, 0], [-1, +1], [0, +1], [0,0]\n ];\n var beeColors = [\"white\",\"lightgrey\",\"lightgrey\",\"lightgrey\",\"lightgrey\",\"black\",\"#ebff01\"]\n var beeStrokes = [\"black\",\"white\",\"white\",\"white\",\"white\",\"black\",\"#ebff01\"]\n var beeStrokesWidth = [\"2px\",\"3px\",\"3px\",\"3px\",\"3px\",\"0px\",\"12px\"]\n var temp = [];\n cubes.forEach(function(d,i){\n temp.push({\n \"data\":cubes[i],\n \"colors\": beeColors[i],\n \"stroke\": beeStrokes[i],\n \"widthh\": beeStrokesWidth[i]\n })\n \n })\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"randomMatrix = {\n var temp = []\n var tempObject = {}\n bees.forEach(function (beedata,i) { \n tempObject[\"Bee\"+(beedata[0]+1)] = [] \n flowers.forEach((flower,j) => tempObject[\"Bee\"+(beedata[0]+1)] .push(0))\n })\n //console.log(relationships)\n relationships.forEach((relationData,i) => tempObject[\"Bee\"+(relationData[0]+1)][relationData[1]] = 3)\n \n for (var i in tempObject) {\n var tempObject2 = {}\n tempObject2[\"Candidate\"] = i\n tempObject[i].forEach((e,j) => tempObject2[\"Flower\"+(j+1)] = e)\n temp.push(tempObject2)\n }\n return temp\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"flowerss = [0];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"flowerData = {\n var flowercubes = [\n [0, -1], [+1, 0], [+1, -1], \n [-1, 0], [-1, +1], [0, +1], [0,0]\n ];\n var flowerColors = [\"purple\",\"purple\",\"purple\",\"purple\",\"purple\",\"purple\",\"green\"]\n var flowerStrokes = [\"white\",\"white\",\"white\",\"white\",\"white\",\"white\",\"white\"]\n var flowerStrokesWidth = [\"3px\",\"3px\",\"3px\",\"3px\",\"3px\",\"3px\",\"8px\"]\n var temp = [];\n cubes.forEach(function(d,i){\n temp.push({\n \"data\":cubes[i],\n \"colors\": flowerColors[i],\n \"stroke\": flowerStrokes[i],\n \"width\": flowerStrokesWidth[i]\n })\n \n })\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1456,"value":"md`### Like a game`","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":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 = d.x;\n d.fy = d.y;\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":1414,"value":"md`### Very last quiz`","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"},{"id":538,"value":"flowers.map((d,i) => ({\"name\":\"flower_\"+i,\"type\":d[1]}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"relationships.map((d,i) => ({\"source\":d[0],\"target\":d[1]}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"md ` ### Last quiz `","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":1078,"value":"md `### Quiz 2 ( after Small world structure) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1054,"value":"quiz2 = `\n\n1. What percentage of agricultural output depends on pollinators?\n\n1/4\n1/3*\n1/2\n2/3\n\n---\n\n2. According to the six degrees of separation example above, does A 'know' G? \n\nTrue*\nFalse\n\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1059,"value":"quizModel2 = parser(quiz2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"mutable currentQuestion2 = nextQuestion2();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"nextQuestion2 = setupQuiz(quizModel2);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"md `### Quiz 3 ( after generalist/specialist) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1089,"value":"quiz3 = `\n\n1. Flower4 is a specialist plant. It only interacts with one generalist pollinator, Bee1, and one specialist pollinator: Bee3. While Bee1 interacts with many other flowers other than Flower4, Bee3 only interacts with Flower4. One day, a bear steps on flower4 and it dies. Of the following, which is in the most vulnerable position to perish once Flower4 perishes?\n\nFlower3 (neighboring generalist plant)\nBee3 (specialist pollinator)*\nFlower1( similar type of a specialist plant to flower4)\nBee1 (generalist pollinator) \n\n---\n\n2. Have you tried playing around with the connectivity slider to adjust the random unipartite graph? If not, try now!!! \n\nTrue*\nFalse\n\n`;\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"quizModel3 = parser(quiz3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"mutable currentQuestion3 = nextQuestion3();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"nextQuestion3 = setupQuiz(quizModel3);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"md `### Quiz 4 ( after nestedness) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1136,"value":"quiz4 = `\n\n1. In the above non-random (manual) example of the pollinator community, which bee does flower 3 not interact with? \n\nBee1\nBee2\nBee3\nBee4*\n\n---\n\n2. Less circles in the matrix means a more nested community \n\nTrue\nFalse*\n\n`;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"quizModel4 = parser(quiz4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1145,"value":"mutable currentQuestion4 = nextQuestion4();","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"nextQuestion4 = setupQuiz(quizModel4);","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\", \"d3-geo-voronoi@1\", \"d3-hexbin\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W44","stdlib":"1","titling":"auto"}