Published
Edited
Aug 18, 2020
3 stars
Food Prices of India, 1994–2021Large Food Retailer Investments By Industry 2010-2021Under The InfluenceFood AccessNigeria Household: Amount spent on foodEstimating the environmental impacts of 57,000 food products, part 2Food Snobs eat at Oleana, Cambridge MAVisualizing Worldwide IPC Food Security DataZoomable Sunburst for food imports in the US from 2010 to 2017.Food supply chainRegional crop yields in GermanyThe 10 Most Important CropsInteractive Exploration of Wine Quality and ValuationExploring Livestock Data around the world 🐓🐑🐄Influence of soil quality and soil moisture index on crop yieldsForest Area By Selected Countries Since 1990Magic Balls FactoryIn store displays make a significant impact on the sale of Honey Nut CheeriosTransparency in Programmatic Advertising MarketplacesAnalysis of two cereals owned by the same brand display unique characteristics and periods of success.F1 Drivers 1997 - 2023Bar Chart Race, ExplainedF1 Constructor Standings 2010-2019Asia’s Regenerative Energy Future2022 Q2 PROFIT: 🛢 vs. 👨💻🛢 Oil SpillsHow flights between Europe and Eastern Asia got disruptedData Visualization - Impact of Covid on US Aviation (year 2020)Final Project: What makes an airline succesful?What's the deal with airline fares?2020/W16: Food: Greenhouse Gas Emission across supply chainInventory Manager -> Product alertEU Fishing FlowWarehouse Visualization with DataVisualVisualizing wind turbines in 3D using threebox
Let's talk about seeds!
Also listed in…
Kew Seed Information Database
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();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.