Published
Edited
Aug 18, 2020
3 stars
plot_1 = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("font-family", "sans-serif")
.attr("font-size", 10);
const group2 = svg.append('g');
group2
.selectAll("rect")
.data(series)
.join("g")
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", d => xScale2(d[0]))
.attr("y", (d, i) => yScale2(d.data.Family))
.attr("width", d => xScale2(d[1]) - xScale2(d[0]))
.attr("height", yScale2.bandwidth())
// tooltip
.on('mouseover', function(d, i) {
tooltip
.html(
`<div style="font-family: sans-serif">Family: ${d.data.Family}</div>
<div style="font-family: sans-serif">Category: ${
d.key
} - ${Math.round(d[1] * 100 - d[0] * 100)}%</div>
<div style="font-family: sans-serif">#Species measured: ${
d.data.N
}</div>`
)
.style('visibility', 'visible');
d3.select(this)
.transition()
.attr('fill', hoverColor);
})
.on('mousemove', function() {
tooltip
.style('top', d3.event.pageY + 10 + 'px')
.style('left', d3.event.pageX + 10 + 'px');
})
.on('mouseout', function() {
tooltip.html(``).style('visibility', 'hidden');
d3.select(this)
.transition()
.attr('fill', d => color(d.key));
});
// add a group for the y-axis
group2
.append("g")
.call(yAxis)
.selectAll('text')
.style("font-size", 12)
.style("cursor", "pointer")
.on(
"click",
d => window.open(`https://en.wikipedia.org/wiki/${d}`)
// this link takes you to the Kew SID
//window.open(`https://data.kew.org/sid/SidServlet?Clade=&Order=&Family=${d.toUpperCase()}&APG=off&Genus=&Species=&StorBehav=0&DsFlag=on`)
);
// add a group for the x-axis
group2
.append("g")
// we have to move this group down to the bottom of the vis
.attr("transform", `translate(0, ${height})`)
.call(xAxis)
//add a label for the x-axis
.append("text")
.attr("fill", "black")
.attr("font-family", "sans-serif")
.attr("x", width / 2)
.attr("y", 40)
.style("font-size", 15)
.text("Seed dispersal mode proportion");
// LEGEND
// Legend as a group
const legend = svg
.append("g")
// Apply a translation to the entire group
.attr("transform", `translate(${250}, ${0})`);
const size = 30;
const border_padding = 15;
const item_padding = 60;
const text_offset = 20;
// Boxes
legend
.selectAll("boxes")
.data(legend_)
.enter()
.append("rect")
.attr("y", border_padding)
.attr("x", (d, i) => border_padding + i * (size + item_padding))
.attr("width", size)
.attr("height", size)
.style("fill", d => colours(d));
// Labels
legend
.selectAll("labels")
.data(legend_)
.enter()
.append("text")
.attr("y", border_padding + 16)
.attr(
"x",
(d, i) =>
border_padding + i * (size + item_padding) + size / 2 + text_offset
)
.text(d => d)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.style("font-family", "sans-serif")
.style("font-size", 15);
// ORDER LINES
const orders = svg.append("g");
orders
.selectAll("orderLines")
.data(lineOrders)
.join("line")
.attr("x1", d => d.Dist)
.attr("y1", d => yScale2(d.O1))
.attr("x2", d => d.Dist)
.attr("y2", d => yScale2(d.O2) + yScale2.bandwidth())
.attr("stroke-width", 3)
.attr("stroke", "black");
orders
.selectAll("orderText")
.data(lineOrders)
.join("text")
.attr("x", d => d.Dist + 6)
.attr(
"y",
d =>
yScale2.bandwidth() +
yScale2(d.O1) +
(yScale2(d.O2) - yScale2(d.O1)) / 2
)
.text(d => d.Order)
.style("font-family", "sans-serif")
.style("font-size", 12);
return svg.node();
}
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.
