2b:null 2c:["$","title",null,{"children":"Force Layout for Candidat | anndawn | Observable"}] 31:T1824,chart = { d3.select(".demo").selectAll("svg").remove(); const svg = d3.select(".demo").append("svg") .attr("width",char_width).attr("height", height) // var svg = d3.create('svg') // .attr("width",width) // .attr("height", 600); let toolTip = d3.select(".demo").append("div").attr("class", "toolTip") var board= svg.append("g").attr("transform","translate(30,0)") let options=Array.from(new Set(filtered_company_data.map(d=>d["gender"]))) var colorScale = d3.scaleOrdinal().domain(options).range(["#ff0000","#626681","#FFC100","#9FB40F","#76523B","#DAD5B5","#0E8E89","#E19348","#F383A2","#247FEA"]) // let colorScale= d3.scaleOrdinal().domain(["Female","Male"]).range(["#ff0000","#434343"]) var yScale=d3.scalePoint().domain(options).range([80, height-120]).padding(0.5) function ticked() { bubbles.selectAll("circle").attr("cx", function(d) {return d.x;}).attr("cy", function(d) { return d.y;}) } var legendOrdinal = d3legend.legendColor() .title(`${group_choice} of Candidates`) .titleWidth(300) .shape("path", d3.symbol().type(d3.symbolCircle).size(150)()) .shapePadding(10) .scale(colorScale); board.append("g") .attr("class", "legendSymbol") .attr("transform", "translate(20, 20)"); d3.select(".legendTitle").select("tspan").attr("dy","0.7em") d3.select(".legendSymbol").call(legendOrdinal) var simulation = d3.forceSimulation() .nodes(filtered_company_data) .force('charge', d3.forceManyBody().strength(-12)) .force("x", d3.forceX(char_width/2).strength(0.015)) .force("y", d3.forceY().y(d=>yScale(d["gender"])).strength(0.5)) .force('collision', d3.forceCollide().radius(18)) .on("tick", ticked) var bubbles = board.selectAll("g.node").data(filtered_company_data).join("g").attr("class", "node"); const defs = bubbles.append("defs"); defs .append('pattern') .attr("id", d=>d["Public LinkedIn URL"].replace(/[^0-9a-z]/gi, '')) .attr("width", 1) .attr("height", 1) .append("svg:image") .attr("xlink:href", (d,i) => profiles[i]=="error"?"https://i.postimg.cc/0NKhB9qw/person.jpg":d.Image) .attr("width", 30) .attr("height", 30) .attr("preserveAspectRatio", "xMidYMid slice"); bubbles.append("a") .attr("xlink:href", d=>d["Public LinkedIn URL"]) .attr("target","_blank") .append("circle") .attr("class", "profile-circle") .attr("fill", (d,i) => `url(#${d["Public LinkedIn URL"].replace(/[^0-9a-z]/gi, '')})`) .attr("stroke", d=>colorScale(d["gender"])) .attr("stroke-width", 3) .attr("r", 15) .on('mousemove', nodeMouseOver).on('mouseout', nodeMouseOut ); // .append("title") // .text(d => d["Full Name"]) function nodeMouseOver(event, d){ const x = d.x + 30; const y = d.y + 30; // ${d["Full

// const i= filtered_company_data.map(u=>u["Public LinkedIn URL"]).indexof(d["id"]) // const url_use= (profiles[i]=="error")?"https://i.postimg.cc/0NKhB9qw/person.jpg":d.Image toolTip .style("left", `calc(10px + ${x}px)`) .style("top", `calc(10px + ${y}px)`) .style("display", "block") .html(`

Name: ${d["First Name"]} ${d["Last Name"]}

Gender: ${d["gender"]}

Star: ${d["Star (higher the better)"]}

Seniority: ${d["Seniority"]}

`); toolTip.selectChildren().style("display","block") // Optional cursor change on target d3.select(event.target).style("cursor", "pointer"); // Optional highlight effects on target d3.select(this) // .transition() .attr('stroke', '#A8234E') .attr('stroke-width', 3); } function nodeMouseOut(event, d){ // Hide tooltip on mouse out toolTip.style("display", "none"); // Hide toolTip // Optional cursor change removed d3.select(event.target).style("cursor", "default"); // Optional highlight removed d3.select(event.target) .attr('stroke', d=>colorScale(d.gender)) .attr('stroke-width', 3); } invalidation.then(() => simulation.stop()); return Object.assign(svg.node(), { update(selection) { let data_use=clean(selection,filtered_company_data) let options_new=Array.from(new Set(data_use.map(d=>d[selection]))) if (selection=="gender"){options_new=["Female","Male"]} let colorScale_new = d3.scaleOrdinal().domain(options_new).range(["#ff0000","#626681","#FFC100","#9FB40F","#76523B","#DAD5B5","#0E8E89","#E19348","#F383A2","#247FEA"]) let yScale_new=d3.scalePoint().domain(options_new).range([80, height-120]).padding(0.5) legendOrdinal.scale(colorScale_new) d3.select(".legendSymbol").call(legendOrdinal) function new_nodeMouseOut(event, d){ // Hide tooltip on mouse out toolTip.style("display", "none"); // Hide toolTip // Optional cursor change removed d3.select(event.target).style("cursor", "default"); // Optional highlight removed d3.select(event.target) .attr('stroke', d=>colorScale_new(d[selection])) .attr('stroke-width', 3) } simulation.force("y", d3.forceY(d=>yScale_new(d[selection])).strength(0.2)) const t = d3.transition() .duration(750) .ease(d3.easeLinear); bubbles.selectAll("circle").transition(t).attr("stroke", function(d) {return colorScale_new(d[selection]);}) bubbles.selectAll("circle").on("mousemove", nodeMouseOver).on("mouseout", new_nodeMouseOut) simulation.alpha(0.5).alphaTarget(0.3).alphaDecay(0.02).restart(); } }) } 32:[{"id":"8b885454a1acc33e5d742d7cdb55c54781c73d22373d1c296938a6b734b1e725b93dcfc128034ccce29af3bb1b7d1b621bb0434c81a96d705b0aa0d962a84b17","href":"https://static.observableusercontent.com/files/8b885454a1acc33e5d742d7cdb55c54781c73d22373d1c296938a6b734b1e725b93dcfc128034ccce29af3bb1b7d1b621bb0434c81a96d705b0aa0d962a84b17","name":"data (1).csv","type":"text/csv","lastModified":1626646594551.282,"size":480953},{"id":"5d135d60277660548c08778e064df172582d05f11f2212287b8e1c0591eae90c15234094b8b617ffaa7b0bebec513253b271ece6fc032a7b5b8894afb212dba7","href":"https://static.observableusercontent.com/files/5d135d60277660548c08778e064df172582d05f11f2212287b8e1c0591eae90c15234094b8b617ffaa7b0bebec513253b271ece6fc032a7b5b8894afb212dba7","name":"data_test.csv","type":"text/csv","lastModified":1626943789048.281,"size":115160},{"id":"00b2b50ddb855fbef064449790ef506f464ba92a33645560c50d57ccf6df3203134b797895060085f3fd02f034f52d9884b9797d6d0af582fb9db8c50a8f7af7","href":"https://static.observableusercontent.com/files/00b2b50ddb855fbef064449790ef506f464ba92a33645560c50d57ccf6df3203134b797895060085f3fd02f034f52d9884b9797d6d0af582fb9db8c50a8f7af7","name":"PartnerRe_final.csv","type":"text/csv","lastModified":1627364792519.104,"size":46746},{"id":"9bd22f30b5f037728e3cc9fce073f1d0cf413eae1a6bbe51f735471f30430734fdbb527d52d42ea24f276796a1bd2614bdad063352f735354c8f98afd0699ee1","href":"https://static.observableusercontent.com/files/9bd22f30b5f037728e3cc9fce073f1d0cf413eae1a6bbe51f735471f30430734fdbb527d52d42ea24f276796a1bd2614bdad063352f735354c8f98afd0699ee1","name":"PartnerRe.csv","type":"text/csv","lastModified":1626910221953.35,"size":978959},{"id":"0687ef8a51cc3775e13227fcbf333535de0139314a1a0b338edf3d6e7b0c532ebd981bf577a1bdf043c35e9ed09e2ec2d2c12ceb29be2d201cccafb1ee0429c2","href":"https://static.observableusercontent.com/files/0687ef8a51cc3775e13227fcbf333535de0139314a1a0b338edf3d6e7b0c532ebd981bf577a1bdf043c35e9ed09e2ec2d2c12ceb29be2d201cccafb1ee0429c2","name":"Garrett_08_27.csv","type":"text/csv","lastModified":1630126590976.927,"size":867966}] 2f:{"id":"ff294af6de909aae","slug":null,"title":"Force Layout for Candidat","thumbnail":"c7c66b56949a705ab5038f6e164dccd773787ef1a818a62b815b31671ae0466c","access_level":"public","create_time":"$D2021-07-18T22:16:34.551Z","update_time":"$D2022-01-29T08:26:08.471Z","view_time":null,"first_public_time":"$D2023-01-09T20:36:04.427Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"08b25cc9d2cc09a6","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":"starter_2024"},"version":775,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null}],"members":[{"type":"individual","id":"b0fc265f2fad2840","login":"anndawn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a9bef462081f7a77e161e2b21c48a5ea6a7153836b0db2eb8a565396dcfc57c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Force Layout for Candidat","cells":[{"id":0,"value":"md`# Force Layout for Candidat`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"viewof company = Inputs.select([null].concat(data_candidate.map(d => d[\"Current Company\"])), {sort: true, unique: true, label: \"Company\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"html`${viewof group_choice}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"T = require('@tidyjs/tidy@2.4.2/dist/umd/tidy.min.js')\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"clean(\"Star (higher the better)\", filtered_company_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"clean= (selection, data) =>{\n let clean_data=[]\n if (selection==\"Seniority\"){\n clean_data=tidy(data, arrange([T.fixedOrder('Seniority', [\"Leadership\",\"Manager\",\"Lead\",\"Individual Contributor\"])]));}\n else if (selection==\"Star (higher the better)\"){\n clean_data=tidy(data, arrange([T.fixedOrder('Star (higher the better)', [5,4,3,2,1,0,\"N/A\"])]));}\n else if (selection==\"gender\"){\n clean_data=tidy(data, arrange([T.fixedOrder('gender', [\"Female\",\"Male\"])]));}\n else if (selection==\"Ethnically Diverse\"){\n clean_data=tidy(data, arrange([T.fixedOrder('Ethnically Diverse', [\"Yes\",\"No\"])]));}\nreturn clean_data\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"html`${force}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof group_choice = Inputs.select(group_options, {value: \"gender\", label: \"Group by\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"force={\n return html`

\n \n

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"previews(profiles)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"group_options=[\"gender\",\"Star (higher the better)\",\"Seniority\",\"Ethnically Diverse\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"company_list=Array.from(new Set(data_candidate.map(d=>d[\"Current Company\"])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"data_candidate = FileAttachment(\"Garrett_08_27.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"filtered_company_data=\ntidy(\n data_candidate,\n filter((d) => company? d[\"Current Company\"] == company:d),\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = [\n {year1:2,year2:1,year3:3,label:\"a\"},\n {year1:3,year2:4,year3:5,label:\"b\"},\n {year1:5,year2:9,year3:7,label:\"c\"},\n {year1:8,year2:16,year3:11,label:\"d\"},\n {year1:13,year2:25,year3:13,label:\"e\"},\n {year1:21,year2:36,year3:17,label:\"f\"},\n {year1:34,year2:1,year3:19,label:\"g\"},\n {year1:2,year2:4,year3:23,label:\"h\"},\n {year1:3,year2:9,year3:29,label:\"i\"},\n {year1:5,year2:16,year3:31,label:\"j\"},\n {year1:8,year2:25,year3:37,label:\"k\"},\n {year1:13,year2:36,year3:3,label:\"l\"},\n {year1:21,year2:1,year3:5,label:\"m\"}\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"function loadImage2(bird) {\n var img = new Image();\n img.src = bird.Image;\n img\n\n return Promises.delay(\n 200,\n new Promise((resolve, reject) => {\n img.decode().then(() => resolve([img, bird]));\n img.onerror = resolve([img, bird]);\n //img.onerror = reject;\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"height=300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"char_width=width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"// toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"chart.update(group_choice)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"d3=require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import {\n tidy,\n n,\n pivotWider,\n cumsum,\n mutateWithSummary,\n rename,\n groupBy,\n summarize,\n sum,\n filter,\n count,\n complete,\n distinct,\n arrange,\n fixedOrder\n} from '@pbeshai/tidyjs' ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"filtered_company_data[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":673,"value":"loadImage(filtered_company_data[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"function loadImage(bird) {\n var img = new Image();\n img.src = bird.Image;\n return Promises.delay(\n 200,\n new Promise((resolve, reject) => {\n img.decode().then(() => resolve([img, bird])).catch(e => resolve(\"error\"));\n // img.onerror = resolve([img, bird]);\n // img.onerror = resolve(\"error\");\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"function loadImage3(bird) {\n var img = new Image();\n img.src = bird['image'];\n\n return Promises.delay(\n 200,\n new Promise((resolve, reject) => {\n img.decode().then(() => resolve([img, bird]));\n // img.onerror = resolve([img, bird]);\n img.onerror = resolve(\"error\");\n })\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"function preview([image, bird]) {\n let linkin=bird[\"Public LinkedIn URL\"]\n let name= bird[\"Full Name\"]\n return html`\n \n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${event =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

\n\n${\n name\n }\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"profiles3=Promise.all(data_test.map(bird => loadImage3(bird)))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"profiles= Promise.all(filtered_company_data.map(bird => loadImage(bird)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"function previews(birds) {\n return html`

${birds.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"data_test=FileAttachment(\"data_test.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"d3legend=require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"loadImage3({img:\"https://i.postimg.cc/0NKhB9qw/person.jpg\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"