The avatar for @x80110
Xavier B.
Published
Edited
Nov 25, 2020
Fork of Graph Visualization
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
nodelinkData = {
// Create `nodes` array as copy of all data
let nodes = JSON.parse(JSON.stringify(dataMatrix));

// Loop into `nodes` and remove .connections
for (let i in nodes) {
delete nodes[i].connections;
}

// create `links` empty array
let links = [];

// -- Get data into `links` array

// Loop each item(j) in data and get `id`
for (let j in dataMatrix) {
let source = dataMatrix[j].id;

// Loop into each item(k) into connections of item(j) and get the index (for the target) and the score
for (let k in dataMatrix[j].connections) {
let target = k;
let score = dataMatrix[j].connections[k];

// Remove items where score is 0, therefore not to be analyzed
if (score !== 0) {
// Append values to `links` array and adds new items at the end of it
links.push({ source, target, score });
}
}
}
// Create an object with both arrays to be returned
let nldata = { nodes: nodes, links: links };
return nldata;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
matrixChart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

var chart = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var graph = dataMatrix.sort(function (a, b) {
if(a.bloodType !== b.bloodType){
if(a.bloodType > b.bloodType) return 1;
else return -1;
}else{
if(a.donor_bloodType >= b.donor_bloodType) return 1;
else return -1;
}
});

opacity;

var row = svg.selectAll('g.row')
.data(graph)
.join('g')
.attr('class', 'row')
.attr('transform', function (d, i) { return 'translate(0,' + x(i) + ')'; })
.each(makeRow)
function makeRow(d, i) {
const rowData = d;
var cell = d3.select(this).selectAll('rect')
.data(graph)
.join('rect')
.attr('x', (d, i) => x(i))
.attr('width', x.bandwidth())
.attr('height', x.bandwidth())
.style('fill-opacity', (d,i) => opacity(rowData.connections[graph[i].id]))
.style('fill', (d,i) => {
if (rowData.connections[graph[i].id] > 0 && rowData.bloodType === d.bloodType) {
return colorScale(rowData.bloodType);
} else if (rowData.connections[graph[i].id] > 0) {
return '#555';
} else {
return '#ccc';
}
})
}

row.append('text')
.attr('class', 'label')
.attr('x', margin.left - 4)
.attr('y', x.bandwidth() / 2)
.attr('dy', '0.32em')
.attr('font-size', '10px')
.attr('text-anchor', 'end')
.text((d,i) => d.id + "," + graph[i].outdegree+ "," + graph[i].bloodType+ "," + graph[i].donor_bloodType);
var column = svg.selectAll('g.column')
.data(graph)
.join('g')
.attr('class', 'column')
.attr('transform', function(d, i) { return 'rotate(-90, '+margin.top+', '+margin.left+')'; })
.append('text')
.attr('class', 'label')
.attr('x', margin.top + 4)
.attr('y', (d,i) => x(i) + x.bandwidth() / 2)
.attr('dy', '0.32em')
.attr('font-size', '10px')
.text((d,i) => d.id + "," + graph[i].indegree+ "," + graph[i].bloodType+ "," + graph[i].donor_bloodType)
return svg.node();
}

Insert cell
colorScale = d3.scaleOrdinal(d3.schemeCategory10);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));

const simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).distance(d=>linkScale(data.links[d.index].score)))
.force("charge", d3.forceManyBody().strength(-250))
.force("center", d3.forceCenter(width / 2, height / 2).strength(0.4));

const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

const link = svg.append("g")
.attr("stroke-opacity", 0.3)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke", (d,i)=> linkcolor(data.links[i].score))
.attr("stroke-width", d => Math.sqrt(d.score)*0.15);

const node = svg.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 5)
.attr("fill", color)
.attr("fill", (d,i)=> colorScale(data.nodes[i].bloodType))
.call(drag(simulation));

var texts = svg.selectAll(".texts")
.data(nodes)
.join("text")
.attr("dy", -4)
.attr("font-family", "sans-serif")
.attr('font-size', '10px')
.attr('text-anchor', 'middle')
.text( d => d.index );

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);
texts
.attr("x", d => d.x)
.attr("y", d => d.y);
});

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

return svg.node();
}
Insert cell
drag = simulation => {
function dragstarted(event) {
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
event.subject.fx = event.x;
event.subject.fy = event.y;
}
function dragended(event) {
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
Insert cell
Insert cell
linkcolor = d3.scaleSequential(d3.interpolateViridis)
.domain(d3.extent(data.links.map(d=>d.score)));
Insert cell
linkScale = d3.scaleLinear()
.domain(d3.extent(data.links.map(d=>d.score)))
.range([150,100]);
Insert cell
Insert cell
chrt = {
const links = data.links.map(d => Object.create(d));
const nodes = data.nodes.map(d => Object.create(d));

const simulation = d3
.forceSimulation(nodes)
.force(
"link",
d3.forceLink(links).distance(d => linkScale(data.links[d.index].score))
)
.force("charge", d3.forceManyBody().strength(-250))
.force("center", d3.forceCenter(width / 2, height / 2).strength(0.4));

const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

const tooltip = d3
.select('body')
.append('div')
.attr('id', 'barchart-tooltip')
.style("font-family", "'Work Sans', sans-serif")
.style('position', 'absolute')
.style('z-index', '1')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('font-size', '16px')
.style('width', '300px')
.style('border-radius', '4px')
.style('color', '#fff');

const link = svg
.append("g")
.attr("stroke-opacity", 0.3)
.selectAll("line")
.data(links)
.join("line")
.attr("stroke", (d, i) => linkcolor(data.links[i].score))
.attr("stroke-width", d => Math.sqrt(d.score) * 0.15);

const node = svg
.append("g")
.attr("stroke", "#fff")
.attr("stroke-width", 1.5)
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("r", 5)
.attr("fill", color)
.attr("fill", (d, i) => colorScale(data.nodes[i].bloodType))
.call(drag(simulation))

// Tooltip interaction
.on("mouseover", function(e, d, i) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth / 2 + 'px')
.style("top", e.pageY - tooltipHeight - 10 + 'px')
.style('visibility', 'visible').html(`<table>
<tbody>
<tr>
<td></td>
<td><b> Patient </b></td>
<td><b>Donor </b></td>
</tr>
<tr>
<td><b>🚻 Gender</b></td>
<td>${d.gender === 'M' ? 'Male' : 'Female'}</td>
<td>${d.donor_gender === 'M' ? 'Male' : 'Female'}</td>
</tr>
<tr>
<td><b>🩸 Blood type </b></td>
<td>${d.bloodType}</td>
<td>${d.donor_bloodType}</td>
</tr>
</tbody>
</table>`);
d3.select(this).attr("fill", "steelblue");
})

.on('mousemove', function(e) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth / 2 + 'px')
.style("top", e.pageY - tooltipHeight - 10 + 'px');
})

.on("mouseout", function(e, d) {
tooltip.style('visibility', 'hidden');
d3.select(this).attr("fill", "purple");
});

var texts = svg
.selectAll(".texts")
.data(nodes)
.join("text")
.attr("dy", -4)
.attr("font-family", "sans-serif")
.attr('font-size', '10px')
.attr('text-anchor', 'middle')
.text(d => d.index);

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);

texts.attr("x", d => d.x).attr("y", d => d.y);
});

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

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more