Public
Edited
Jun 11, 2024
chart1 = htl.html`
${titleCard1}
${legend1}
${chart}
<center>${legend_circle}</center>
`
titleCard1 = titleCard({
title: "Average distance between slaughterhouses and producer",
subtitle:
"Average distance by road in kilometres between the municipalities of production and destination slaughterhouses. The values were calculated based on GTA (Animal Transit Guide) data, considering millions of GTAs available in Brazil between 2012 and 2018. For cattle movement tracking, we considered up to four-step movements from breeding to the point of slaughter.",
footnote:
"For this analysis we considered only slaughterhouses that could be properly liked to the place of production according to GTA data. Adapted from: ZU ERMGASSEN, E. K. H. J. et al. The origin, supply chain, and deforestation risk of Brazil’s beef exports. Proceedings of the National Academy of Sciences, v. 117, n. 50, p. 31770–31779, 15 dez. 2020.",
width: 1
})
legend_circle = circleLegend({
scale: r,
ticks: 3,
tickSize: 14,
tickFormat: (d, i, g) =>
i === g.length - 1 ? `${format(d)} NUMBER OF GTAs` : format(d),
tickWrap: false,
marginRight: 20,
marginBottom: 20
})
height = 800 // initial height
margin = ({ top: 50, right: 100, bottom: 50, left: 200 })
biomes = [...new Set(data2.map((d) => d.biome))].sort()
groups = [...new Set(data2.map((d) => d.group))]
extent = d3.extent(data2, (d) => d.distance_km_matrix)
x = d3
.scaleLinear()
.domain(d3.extent(data2, (d) => d.distance_km_matrix))
.range([margin.left, width - margin.right])
xAxis = (g) => {
const text = g
.attr("transform", `translate(${width / 2}, ${margin.top})`)
.append("text")
.attr("text-anchor", "middle")
.style("font", "bold 14px var(--trase-sans-serif)")
.style("fill", traseColours.get("moss"));
text.append("tspan").text("LESS ⟵");
text.append("tspan").text("DISTANCE TO FACILITY (KM)").attr("dx", "5em");
text.append("tspan").text("⟶ MORE").attr("dx", "5em");
}
y = d3
.scaleBand()
.domain(biomes)
.range([height / 2, height / 2])
yAxis = (g, scale = y, ticks = y.domain()) =>
g
.attr("transform", `translate(${30}, 0)`)
.style("font", "bold 12px var(--trase-sans-serif)")
.call(d3.axisLeft(scale).tickValues(ticks))
.call(g => g.style("text-anchor", "start"))
.call(g => g.select(".domain").remove())
r = d3
.scaleSqrt()
.domain(d3.extent(data2, (d) => d.total_gtas))
.range([2.5, 25])
colour = d3.scaleSequential(
d3.extent(data2, d => d.distance_km_matrix),
d3.interpolateRgbBasis(colourScheme[9])
)
format = d3.format("0.2s")
formatTooltip = (d) => svg`<text>
<tspan font-size="10px" opacity="0.6" letter-spacing="-0.5px" x="0" dy="0em">MUNICIPALITY OF DESTINATION:</tspan>
<tspan font-size="16px" letter-spacing="-0.9px" x="0" dy="1.4em">${
d.destination_municipality
}</tspan>
<tspan font-size="10px" opacity="0.6" letter-spacing="-0.5px" x="0" dy="2.3em">DISTANCE COST (KM):</tspan>
<tspan font-size="16px" letter-spacing="-0.9px" x="0" dy="1.4em">${format(
d.distance_km_matrix
)}</tspan>
</text>`
formatTooltipValue = d3.format("0.2s")
htl = require("htl@0.2")
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.
