Published
Edited
Jun 7, 2020
1 star
flowers.map((d,i) => ({"name":"flower_"+i,"type":d[1]}))
relationships.map((d,i) => ({"source":d[0],"target":d[1]}))
manbee = {
var svg = d3.select(DOM.svg(width, height))
.attr("width", width+"px")
.attr("height", height+"px");
const x = d3.scaleLinear().range([20,width-20]).domain(d3.extent(bee))
const y = d3.scaleLinear().range([20,width-20]).domain(d3.extent(flower))
svg.selectAll("line.banana").data(relations).enter().append("line")
.attr("class","banana")
.attr("x1",d=>x(d[0]))
.attr("y1",height/3)
.attr("x2",d=>y(d[1]))
.attr("y2",height*2/3)
.style("stroke","black")
.style("stroke-width","1px")
svg.selectAll("circle.bee").data(bee).enter().append("circle")
.attr("class","bee")
.attr("cx",d=>x(d))
.attr("cy",height/3)
.attr("r", 10)
.style("fill", "Orange")
svg.selectAll("circle.flower").data(flower).enter().append("circle")
.attr("class","flower")
.attr("cx",d=>y(d))
.attr("cy",height*2/3)
.attr("r", 10)
.style("fill", "green")
yield svg.node();
}
// md`Force directed graphs and splitting up bipartite graphs into unipartite graphs can help understand the connections between the species together and understand the organism individually. With force directed graphs, it can be difficult to picture a very complex pollinator network with a lot of vectors and connection lines between the pollinator and plants. There is another way to visualize such relationships relatively in a easy way as well as also visualize out a whole network of the pollinator network without overviewing things. With a *bubble matrix*, no matter how big the pollinator network is, to help understand how the network looks like will be easy. It can also help us compare the traits of a random nested structure compared to a nested network structure. `
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.
