chart(dataset);
chart = (dataset) => {
// Specify the chart’s dimensions.
const width = 1080;
const height = 720;
const marginTop = 20;
const marginRight = 30;
const marginBottom = 40;
const marginLeft = 50;
const svg = d3.create("svg").attr("width", width).attr("height", height);
const y = d3.scaleLinear()
.domain([0, d3.max(dataset, d => d.five_star + d.four_star + d.three_star)])
.range([height - marginBottom, marginTop]);
const x = d3.scaleBand()
.domain(dataset.map(d => d.banner_type))
.range([marginLeft, width - marginRight])
.padding(0.05);
const cScale = d3.scaleOrdinal(["five_star", "four_star", "three_star"], ["orange", "purple", "skyblue"]);
const stack = d3.stack().keys(["five_star", "four_star", "three_star"]);
//debugger;
const groups = svg.selectAll('g')
.data(stack(dataset))
.join('g')
.style("fill", (d, i) => cScale(i));
groups.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", d => x(d.data.banner_type))
.attr("y", d => y(d[1]))
.attr("width", x.bandwidth())
.attr("height", d => y(d[0]) - y(d[1]));
const xAxis = d3.axisBottom(x).ticks(dataset.length + 1);
svg
.append("g")
.attr("class", "stacked-x-axis")
.attr("transform", `translate(0, ${height - marginBottom})`)
.call(xAxis);
const yAxis = d3.axisLeft(y);
svg.append('g')
.attr("class", "stacked-y-axis")
.attr("transform", `translate(${marginLeft}, 0)`)
.call(yAxis);
svg
.append("text")
.classed("axis-label", true)
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", 15)
.attr("text-anchor", "middle")
.text("Total Pulls");
svg
.append("text")
.classed("axis-label", true)
.attr("x", width / 2)
.attr("y", height - 5)
.attr("text-anchor", "middle")
.text("Banners");
svg
.append("text")
.classed("axis-label", true)
.attr("x", width / 2)
.attr("y", 20)
.attr("text-anchor", "middle")
.text("Total Pulls Per Banner on Genshin Impact");
const legendScale = d3
.scaleOrdinal()
.domain(["Five Stars", "Four Stars", "Three Stars"])
.range(["orange", "purple", "skyblue"]);
svg
.append("g")
.attr("class", "legendOrdinal")
.attr("transform", `translate(${width-400},100)`);
const legendOrdinal = d3Legend
.legendColor()
.shape("path", d3.symbol().type(d3.symbolSquare).size(80)())
.shapePadding(20)
.scale(legendScale);
svg.select(".legendOrdinal").call(legendOrdinal);
return svg.node();
}
dataset = await FileAttachment("my-dataBar.csv").csv({typed: true});
my-dataBar.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
d3 = require("d3@7")
d3Legend = require('d3-svg-legend')
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.
