Public
Edited
Mar 5, 2023
chart= {
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const g= svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate( ${margin.left}, ${margin.top})`);
g.append("g")
.selectAll(".bar")
.data(stackedData)
.enter().append("g")
.attr("class", "bar")
.attr("fill", function(d) { return color(d.key); });
g.append("g")
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.name); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
return svg.node();
}
color= d3.scaleOrdinal( d3.schemePastel1)
// .domain(data_1.map( d=> d[colorAttr]))
x.domain(data.map(function(d) { return d.name; }));
y.domain([0, d3.max(stackedData, function(d) { return d3.max(d, function(d) { return d[1]; }); })]).nice();
keys = Object.keys(data[0]).slice(1);
stackedData = d3.stack()
.keys(keys)(data);
yAxis = d3.axisLeft(y)
.ticks(10, "%");
xAxis = d3.axisBottom(x);
y = d3.scaleLinear()
.range([height, 0])
x = d3.scaleBand()
.range([0, width])
.padding(0.1);
margin = ({top: 20,
right: 20,
bottom: 30,
left: 40
})
height = 500 - margin.top - margin.bottom;
width = 960 - margin.left - margin.right
data = [
{name: 'A', segment1: 10, segment2: 20, segment3: 30},
{name: 'B', segment1: 20, segment2: 30, segment3: 10},
{name: 'C', segment1: 30, segment2: 10, segment3: 20},
]
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.
