Stacked-to-grouped bars / dnpr

myanmar_trade_chart = {

const fontHTML = `

<style>

body {

font-family: Montserrat;

}

p {

font-family: Montserrat;

}

</style>

`;

// Append the font HTML to the document

d3.select("head").append("div").html(fontHTML);

const width = 1100;

const height = 700;

const marginTop = 100;

const marginRight = 10;

const marginBottom = 60;

const marginLeft = 50;

const key = ['Myanmar', 'ASEAN', 'Châu Á - Thái Bình Dương', 'Trung bình toàn cầu']

const y01z = d3.stack()

.keys(d3.range(key.length)) // Use the range of the number of keys

(d3.transpose(yz)) // stacked yz

.map((data, i) => data.map(([y0, y1]) => [y0, y1, i]));

const yMax = d3.max(yz, y => d3.max(y));

const y1Max = d3.max(y01z, y => d3.max(y, d => d[1]));

const x = d3.scaleBand()

.domain(xz)

.rangeRound([marginLeft, width - marginRight])

.padding(0.2);

const y = d3.scaleLinear()

.domain([0, y1Max])

.range([height - marginBottom, marginTop]);

const colorPalette = ["#753422", "#B05B3B", "#D79771", "#FFEBC9"]

const color = d3.scaleOrdinal()

.domain(xz)

.range(colorPalette);

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("width", width)

.attr("height", height)

.attr("style", "max-width: 100%; height: auto;");

const rect = svg.selectAll("g")

.data(y01z)

.join("g")

.attr("fill", (d, i) => color(i))

.selectAll("rect")

.data(d => d)

.join("rect")

.attr("x", (d, i) => x(i))

.attr("y", height - marginBottom)

.attr("width", x.bandwidth())

.attr("height", 0);

const x1 = d3.scaleBand()

.domain(key)

.range([marginLeft, width - marginRight])

.padding(0.21);

// Add the horizontal axis.

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x1))

.attr("style", "font-size: 15px;")

.call(g => g.append("text")

.attr("x", width / 2)

.attr("y", -marginBottom + 110)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.attr("style", "font-size: 16px; font-weight: bold;")

.text("Khu vực"));

// Add the vertical axis.

svg.append("g")

.attr("transform", `translate(${marginLeft},0)`)

.call(d3.axisLeft(y))

.attr("style", "font-size: 15px;")

.call(g => g.select(".domain").remove())

.call(g => g.append("text")

.attr("x", -marginLeft)

.attr("y", marginTop)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.attr("style", "font-size: 16px; font-weight: bold;")

.text("↑ Chỉ số"));

// Add title

svg.append('text')

.attr('class', 'title')

.attr('x', width / 2)

.attr('y', marginTop/2-25)

.attr('text-anchor', 'middle')

.attr("style", "font-weight: bold; font-size: 22px;")

.text('Chỉ số về Môi trường phòng chống buôn lậu của Myanmar và trung bình khu vực (2018)');

// Add legends

var legend_keys = features

var lineLegend = svg.selectAll(".lineLegend")

.data(legend_keys)

.enter()

.append("g")

.attr("class", "lineLegend")

.attr("transform", function (d, i) {

return "translate(" + (width/2 + -380) + "," + (i * 30 + 90) + ")";

});

lineLegend.append("rect")

.attr("width", 150)

.attr("height", 20)

.attr("fill", "white");

lineLegend.append("text").text(function (d) {return d;})

.attr("transform", "translate(15,9)");

lineLegend.append("rect")

.attr("fill", function (d, i) {return color(d); })

.attr("width", 10).attr("height", 10);

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(() => ""));

function transitionGrouped() {

y.domain([0, yMax]);

rect.transition()

.duration(500)

.delay((d, i) => i * 100)

.attr("x", (d, i) => x(i) + x.bandwidth() / key.length * d[2])

.attr("width", x.bandwidth() / key.length)

.transition()

.attr("y", d => y(d[1] - d[0]))

.attr("height", d => y(0) - y(d[1] - d[0]));

}

function transitionStacked() {

y.domain([0, y1Max]);

rect.transition()

.duration(500)

.delay((d, i) => i * 100)

.attr("y", d => y(d[1]))

.attr("height", d => y(d[0]) - y(d[1]))

.transition()

.attr("x", (d, i) => x(i))

.attr("width", x.bandwidth());

}

function update(layout) {

if (layout === "stacked") transitionStacked();

else transitionGrouped();

}

return Object.assign(svg.node(), {update});

}

update = myanmar_trade_chart.update(layout)

myanmar_trade = FileAttachment("myanmar-trade@2.csv").csv({typed: true})

features = ["Chính sách", "Cung & cầu", "Tính minh bạch", "Dịch vụ hải quan"]

yz = features.map(feature => myanmar_trade.map(d => d[feature]))

xz = [0, 1, 2, 3]

fatality_ne = FileAttachment("fatality_ne@1.csv").csv({typed: true})

features_1 = ["Incidents of Killing", "Civilians", "Security Forces","Terrorists/Insurgents/Extremists", "Not Specified"]

yz_1 = features_1.map(feature => fatality_ne.map(d => d[feature]))

xz_1 = [0, 1, 2, 3, 4, 5, 6, 7]

fatality_ne_chart = {

const width = 1000;

const height = 700;

const marginTop = 100;

const marginRight = 10;

const marginBottom = 50;

const marginLeft = 50;

const y01z = d3.stack()

.keys(d3.range(features_1.length)) // Use the range of the number of keys

(d3.transpose(yz_1)) // stacked yz

.map((data, i) => data.map(([y0, y1]) => [y0, y1, i]));

const yMax = d3.max(yz_1, y => d3.max(y));

const y1Max = d3.max(y01z, y => d3.max(y, d => d[1]));

const x = d3.scaleBand()

.domain(xz_1)

.rangeRound([marginLeft, width - marginRight])

.padding(0.2);

const y = d3.scaleLinear()

.domain([0, y1Max])

.range([height - marginBottom, marginTop]);

const colorPalette = ["#173A2B", "#5A7969", "#FBE8D8", "#CB6B4D", "#BB885E"]

const color = d3.scaleOrdinal()

.domain(xz_1)

.range(colorPalette);

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.attr("width", width)

.attr("height", height)

.attr("style", "max-width: 100%; height: auto;");

const rect = svg.selectAll("g")

.data(y01z)

.join("g")

.attr("fill", (d, i) => color(i))

.selectAll("rect")

.data(d => d)

.join("rect")

.attr("x", (d, i) => x(i))

.attr("y", height - marginBottom)

.attr("width", x.bandwidth())

.attr("height", 0);

// Add the horizontal axis.

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x))

.call(g => g.append("text")

.attr("x", width / 2)

.attr("y", -marginBottom + 80)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.attr("style", "font: 16px roboto")

.text("Khu vực"));

// Add the vertical axis.

svg.append("g")

.attr("transform", `translate(${marginLeft},0)`)

.call(d3.axisLeft(y))

.call(g => g.select(".domain").remove())

.call(g => g.append("text")

.attr("x", -marginLeft-40)

.attr("y", -10)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.attr("style", "font: 16px montserrat")

.text("↑ Số lượng người tử vong (người)"));

// Add title

svg.append('text')

.attr('class', 'title')

.attr('x', width / 2)

.attr('y', marginTop/2-25)

.attr('text-anchor', 'middle')

.attr("style", "font-weight: bold; font-size: 22px; font-family: 'montserrat';")

.text('Thống kê số lượng người tử vong ở Đông Bắc Ấn Độ (2017 - 2024)');

// Add legends

var legend_keys = ["Vụ giết người", "Dân thường",

"Lực lượng an ninh", "Khủng bố",

"Không xác định"]

var lineLegend = svg.selectAll(".lineLegend")

.data(legend_keys)

.enter()

.append("g")

.attr("class", "lineLegend")

.attr("transform", function (d, i) {

return "translate(" + (width/2 + -420) + "," + (i * 30 + 70) + ")";

});

lineLegend.append("rect")

.attr("width", 150)

.attr("height", 20)

.attr("fill", "white");

lineLegend.append("text").text(function (d) {return d;})

.attr("transform", "translate(15,9)");

lineLegend.append("rect")

.attr("fill", function (d, i) {return color(d); })

.attr("width", 10).attr("height", 10);

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(() => ""));

function transitionGrouped() {

y.domain([0, yMax]);

rect.transition()

.duration(500)

.delay((d, i) => i * 100)

.attr("x", (d, i) => x(i) + x.bandwidth() / features_1.length * d[2])

.attr("width", x.bandwidth() / features_1.length)

.transition()

.attr("y", d => y(d[1] - d[0]))

.attr("height", d => y(0) - y(d[1] - d[0]));

}

function transitionStacked() {

y.domain([0, y1Max]);

rect.transition()

.duration(500)

.delay((d, i) => i * 100)

.attr("y", d => y(d[1]))

.attr("height", d => y(d[0]) - y(d[1]))

.transition()

.attr("x", (d, i) => x(i))

.attr("width", x.bandwidth());

}

function update(layout) {

if (layout === "stacked") transitionStacked();

else transitionGrouped();

}

return Object.assign(svg.node(), {update});

}

update_1 = fatality_ne_chart.update(layout)

Purpose-built for displays of data