Untitled / Kiangle AI

Kiangle AI

Workspace

Public

Edited

Apr 5, 2023

viewof charge = Inputs.range([1000, 10000], {

value: 3000,

step: 1000,

label: "charge"

})

chart = {

const links = data.links.map((d) => Object.create(d));

const nodes = data.nodes.map((d) => Object.create(d));

// await new Promise((eLink(nodes.links).strength(0.05).distance(100));

const simulation = d3

.forceSimulation(nodes)

.force(

"link",

d3.forceLink(links).id((d) => d.id)

)

.force("charge", d3.forceManyBody().strength(-charge))

.force("x", d3.forceX())

.force("y", d3.forceY());

const svg = d3

.create("svg")

.attr("viewBox", [-width / 2, -height / 2, width, height])

.style("font", "12px sans-serif");

// Per-type markers, as they don't inherit styles.

svg

.append("defs")

.selectAll("marker")

.data(nodes.map((n) => n.id))

.join("marker")

.attr("id", (d) => `arrow-${d}`)

.attr("viewBox", "0 -5 10 10")

.attr("refX", 15)

.attr("refY", -2)

.attr("markerWidth", 10)

.attr("markerHeight", 10)

.attr("orient", "auto")

.append("path")

.attr("fill", "grey")

.attr("d", "M0,-5L10,0L0,5");

const link = svg

.append("g")

.attr("fill", "none")

.attr("stroke-width", 1.5)

.selectAll("path")

.data(links)

.join("path")

.attr("stroke", (d) => skillColor(d.Label));

link

.attr("stroke-width", 2)

.attr(

"marker-end",

(d) => `url(${new URL(`#arrow-${d.source.id}`, location)})`

);

// const nodeDefs = svg.append("defs").attr("id", "imgdefs");

// const imgpattern = nodeDefs

// .append("pattern")

// .attr("id", "imgpattern")

// .attr("height", 1)

// .attr("width", 1)

// .attr("x", "0")

// .attr("y", "0");

// imgpattern

// .append("image")

// .attr("x", 0)

// .attr("y", 0)

// .attr("height", 40)

// .attr("width", 40)

// .attr(

// "xlink:href",

// "https://cdn.lorem.space/images/face/.cache/150x150/daniil-lobachev-u3pi6HhSYew-unsplash.jpg"

// );

const node = svg

.append("g")

.attr("fill", "currentColor")

.attr("stroke-linecap", "round")

.attr("stroke-linejoin", "round")

.selectAll("g")

.data(nodes)

.attr("id", (d) => `g${d.index}`)

.join("g")

.call(drag(simulation));

node

.append("circle")

.attr("stroke", "white")

.attr("stroke-width", 1)

.attr("r", 20)

// .attr("fill", (d) => "url(#imgpattern)")

.attr("stroke-width", (d) => (d.nodeWeight + 2) / 2);

// .attr("fill", (d) => nodeColor(d.id));

// .attr("stroke-width", (d) => (d.nodeWeight + 2) / 2)

// .attr("fill", )

node

.append("text")

.attr("x", 20)

.attr("y", "0.31em")

.text((d) => d.id)

.clone(true)

.lower()

.attr("fill", "none")

.attr("stroke", "white")

.attr("stroke-width", 3);

node

.append("image")

.attr('xlink:href', d=>d.img)

.attr("height", 25)

.attr("width", 25)

.attr("transform", "translate(-13,-13)")

.style("border-radius", 5);

// svg.selectAll("g.node").style({"border-radius": "50%"});

simulation.on("tick", () => {

link.attr("d", linkArc);

node.attr("transform", (d) => `translate(${d.x},${d.y})`);

});

invalidation.then(() => simulation.stop());

return svg.node();

}

nodeColor = ƒ(i)

nodeColor = d3.scaleOrdinal(

data.nodes.map((n) => n.id),

d3.schemeTableau10

)

skillColor = ƒ(i)

skillColor = d3.scaleOrdinal(skills, d3.schemeCategory10)

skills = Array(6) [

0: "R"

1: "presentation"

2: "story telling"

3: "R, SQL"

4: "data cleaning"

5: "statistics"

]

skills = Array.from(new Set(links.map((l) => l.Label)))

linkArc = ƒ(d)

function linkArc(d) {

const r = Math.hypot(d.target.x - d.source.x, d.target.y - d.source.y);

return `

M${d.source.x},${d.source.y}

A${r},${r} 0 0,1 ${d.target.x},${d.target.y}

}

drag = ƒ(simulation)

drag = (simulation) => {

function dragstarted(event, d) {

if (!event.active) simulation.alphaTarget(0.3).restart();

d.fx = d.x;

d.fy = d.y;

}

function dragged(event, d) {

d.fx = event.x;

d.fy = event.y;

}

function dragended(event, d) {

if (!event.active) simulation.alphaTarget(0);

d.fx = null;

d.fy = null;

}

return d3

.drag()

.on("start", dragstarted)

.on("drag", dragged)

.on("end", dragended);

}

data = Object {

nodes: Array(8) [

0: Object {

id: "Nurul"