To fix your zoom function issue, remove .scaleExtent([1 / 2, 64]) -- this limits how far out the viewer can zoom. You can also change 64 to something really high like 20000, but it would still do the jump down the page thing when the zoom limit is reached.
To manually set the size of your nodes, change
.attr("r", d => 10)
to
.attr("r", size)
and add a new cell with this function:
size = function(d) {
if (d.type == "Insolvent Debtor") {
return 30;
} else {
return 5;
}
}
Where you find the type you want to set the size for, and set the number to the pixel radius for all the other types.
If you want to manually define your color scales, you can manually match the values in your column (eg, all the unique entries in the column type) to the same number of html hex colors
color = {
const scale = d3.scaleOrdinal()
.domain(["Insolvent Debtor", "Debtor", "Creditor", "Both"])
.range(["#ff0000", "#ffc0cb", "#0000FF", "#800080"]);
return d => scale(d.type);
}