25:["$","title",null,{"children":"OF Network Analysis | Alek Tarkowski | Observable"}] 49:Td18,{ const width = 4800; const height = 4800; const max = d3.max(friends.users.map((u) => u.count)); const simulation = d3 .forceSimulation(nodes) .force( "link", d3.forceLink(links).id((d) => d.id) ) .force("charge", d3.forceManyBody().strength(-1550 /* -300 */)) .force("x", d3.forceX()) .force("y", d3.forceY()) .force( "collide", d3.forceCollide((d) => (100 * d.count) / max /*65*/) //d3.forceCollide((d) => max / (d.count + 1) /*65*/) ); const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); // Links const link = svg .append("g") .attr("fill", "none") .attr("stroke-width", 1,5) .selectAll("path") .data(links) .join("path") .attr("stroke", `rgba(0,0,0,${opacity})`); // Nodes const node = svg .append("g") //.attr("fill", "currentColor") //.attr("stroke-linecap", "round") //.attr("stroke-linejoin", "round") //.attr("stroke-width", 10,5) .selectAll("g") .data(nodes) .join("g") .call(drag(simulation)); /* // Avatar node .append("image") .attr("width", (d) => scale(d.count)) .attr("height", (d) => scale(d.count)) .attr("xlink:href", (d) => d.profile_image_url) .attr( "transform", (d) => `translate(-${scale(d.count) / 2},-${scale(d.count) / 2})` ) .style("clip-path", (d) => `circle(${scale(d.count) / 2}px at center)`); */ /* // Fields of Open border node .selectAll("path") .data((d) => d.field.map((f) => { return { name: f, r: scale(d.count) / 2, stroke: scale(d.count) / 10 }; }) ) .enter() .append("path") .attr("stroke", (d) => color(d.name)) .attr("stroke-width", (d) => d.stroke) .attr("d", (d, i, a) => describeArc( 0, 0, d.r + d.stroke / 2 + 1, i * (360 / a.length), ((i + 1) * 360) / a.length, 360 / a.length ) ) .attr("fill", "none"); */ // Count border node .selectAll("path") .enter() .append("path") .attr("stroke", (d) => color(d.name)) .attr("stroke-width", (d) => d.stroke) .attr("d", (d, i, a) => describeArc( 0, 0, d.r + d.stroke / 2 + 1, i * (360 / a.length), ((i + 1) * 360) / a.length, 360 / a.length ) ) .attr("fill", "none"); // Circles node .append("circle") .data(nodes) .attr("r", (d) => d.count / 2) .attr("fill", colorx(friends.users.map((u) => u.count))); /* // Name of profile node .append("text") .attr("x", (d) => scale(d.count) / 2 + 4) .attr("y", "0.31em") .style("font-family", "sans-serif") .style("font-size", "36px") .attr("fill", (d) => (d.initial ? "#333" : "#00f")) .text((d) => { return `${d.name.substring(0, 20)} ${d.name.length > 20 ? "..." : ""}`; }) .clone(true) .lower() .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", 3); */ node.on("click", (e, d) => (mutable profile = nodes[d.index])); simulation.on("tick", () => { link.attr("d", describeLink); node.attr("transform", (d) => `translate(${d.x},${d.y})`); }); invalidation.then(() => simulation.stop()); return svg.node(); }4a:[{"id":"dff76ab1d2e8207d978d57c6b40b93f9e661ba9ccd3dc9c18468424bd261c438a85305be80e8b6186aeb387bf75c13b2459d7cbed7ef82f10f23a1ed466c5475","href":"https://static.observableusercontent.com/files/dff76ab1d2e8207d978d57c6b40b93f9e661ba9ccd3dc9c18468424bd261c438a85305be80e8b6186aeb387bf75c13b2459d7cbed7ef82f10f23a1ed466c5475","name":"friends@10.json","type":"application/json","lastModified":1671745122382.952,"size":1509303}] 29:{"id":"362e0f0571524a64","slug":null,"title":"OF Network Analysis","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2022-12-22T21:38:42.382Z","update_time":"$D2022-12-27T19:53:05.106Z","view_time":null,"first_public_time":"$D2022-12-22T21:38:42.382Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"51be6cc182775686","login":"tarkowski","name":"Alek Tarkowski","avatar_url":"https://avatars-next.observableusercontent.com/dbc608686ebabb7763994087cb095fd9564d0a9761758a27786f1bdbcc95679b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":780,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1a12f0f9e82d8986","login":"tarkowski","name":"Alek Tarkowski","avatar_url":"https://avatars-next.observableusercontent.com/dbc608686ebabb7763994087cb095fd9564d0a9761758a27786f1bdbcc95679b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1a12f0f9e82d8986","login":"tarkowski","name":"Alek Tarkowski","avatar_url":"https://avatars-next.observableusercontent.com/dbc608686ebabb7763994087cb095fd9564d0a9761758a27786f1bdbcc95679b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"OF Network Analysis","cells":[{"id":0,"value":"{\n return md`# OF Network Analysis\n ## Friendship threshold: ${limit}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"d3.max(friends.users.map((u) => u.count))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"{\n const padding = [12, 6];\n const font = 10;\n return html`

Legend

\n    ${fields\n      .map(\n        (c) =>\n          ` 50 ? \"#000\" : \"#fff\"\n          }; display:inline-flex; border-radius:5px; margin: 0 5px 5px 0\">${c}`\n      )\n      .join(\"\")}\n
\n  \n    gray username - profile from original list
\n    blue username - discovered profile\n  `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`[${profile.name}](http://twitter.com/${profile.username})  \nFields of Open: ${profile.field.map((f) => \"**\" + f + \"**\").join(\", \")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"nodes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":577,"value":"import {Histogram} from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"colorx = d3.scaleSequential()\n.domain([0, d3.max(friends.users.map((u) => u.count))])\n.range([0,1])\n.interpolator(d3.interpolateBlues);\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"colorx(200)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":777,"value":"Legend(colorx, {title: \"Number of fruit\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"{\nlet colored = d3.interpolateViridis()\n\nHistogram(nodes, {\n  value: d => d.count,\n  color: d3.interpolateViridis(d => d.count)\n})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"limit = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"opacity = 0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"nodes = friends.users.filter((u) => u.count > limit && u.count < 200)//.map((d) => Object.create(d));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"links = friends.links\n  .filter((l) => {\n    const u1 = nodes.filter((n) => n.id == l.target);\n    const u2 = nodes.filter((n) => n.id == l.source);\n    return u1.length > 0 && u2.length > 0;\n  })\n  .map((d) => Object.create(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"links_renata = friends.links.filter((l) => l.source === '25014406');\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"links_r = links_renata\n.filter((l) => {\n    const u1 = nodes.filter((n) => n.id == l.target);\n    const u2 = nodes.filter((n) => n.id == l.source);\n    return u1.length > 0 && u2.length > 0;\n  })\n  .map((d) => Object.create(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"friends = FileAttachment(\"friends@10.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {\n  var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;\n\n  return {\n    x: centerX + radius * Math.cos(angleInRadians),\n    y: centerY + radius * Math.sin(angleInRadians)\n  };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"describeArc = (x, y, radius, startAngle, endAngle) => {\n  var start = polarToCartesian(x, y, radius, endAngle);\n  var end = polarToCartesian(x, y, radius, startAngle);\n\n  var largeArcFlag = endAngle - startAngle <= 180 ? \"0\" : \"1\";\n\n  var d = [\n    \"M\",\n    start.x,\n    start.y,\n    \"A\",\n    radius,\n    radius,\n    0,\n    largeArcFlag,\n    0,\n    end.x,\n    end.y\n  ].join(\" \");\n\n  return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"color = {\n  const interpolate = d3.interpolateRainbow;\n  const colors = [];\n  const n = fields.length + 1;\n  for (let i = 0; i < n; ++i) {\n    colors.push(d3.rgb(interpolate(i / (n - 1))).hex());\n  }\n  return d3.scaleOrdinal(colors);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"import {Legend, Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"Legend(d3.scaleSequential([0, d3.max(friends.users.map((u) => u.count))], d3.interpolateViridis), {\n  title: \"Count limit\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"mutable profile = {}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"fields = [\n  ...new Set(\n    friends.users.reduce((acc, user) => {\n      acc.push(...user.field);\n      return acc;\n    }, [])\n  )\n]\n//fields = [...new Set()]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"scale = d3\n  .scaleLinear()\n  .domain(d3.extent(friends.users.map((u) => u.count)))\n  .rangeRound([20, 200])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"function describeLink(d) {\n  const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);\n  return `\n    M${d.source.x},${d.source.y}\n    A${r},${r} 0 0,1 ${d.target.x},${d.target.y}\n  `;\n}\n// describeLink = (d) =>\n//   `M${d.source.x},${d.source.y}A0,0 0 0,1 ${d.target.x},${d.target.y}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"drag = (simulation) => {\n  function dragstarted(event, d) {\n    if (!event.active) simulation.alphaTarget(0.3).restart();\n    d.fx = d.x;\n    d.fy = d.y;\n  }\n\n  function dragged(event, d) {\n    d.fx = event.x;\n    d.fy = event.y;\n  }\n\n  function dragended(event, d) {\n    if (!event.active) simulation.alphaTarget(0);\n    d.fx = null;\n    d.fy = null;\n  }\n\n  return d3\n    .drag()\n    .on(\"start\", dragstarted)\n    .on(\"drag\", dragged)\n    .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}}
24:null