Public
Edited
Nov 17, 2023
1 fork
chart = {
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 40;
const stack = d3.stack().keys(categories);
const chartData = stack(dataset);
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 rc = rough.svg(svg.node());
const groups = svg
.append("g")
.selectAll("g")
.data(chartData)
.join("g")
.style("fill", (d, i) => colors(d.key));
console.log(groups)
groups
.selectAll("rect")
.data((d) => d)
.join("rect")
// .attr("y", (d) => yScale(d.data.population_name))
// .attr("x", (d) => xScale(d[0]))
// .attr("height", yScale.bandwidth())
// .attr("width", (d) => xScale(d[1]) - xScale(d[0]) - gapSize)
// .attr("x", (d) => xScale(d.data.population_name))
// .attr("y", (d) => yScale(d[1]) + gapSize / 2) // Add half of gapSize
// .attr("height", (d) => yScale(d[0]) - yScale(d[1]) - gapSize) // Subtract gapSize
// .attr("width", yScale.bandwidth())
.each(function (d) {
// Retrieve the parent's data, which will be the current category layer.
const parentData = d3.select(this.parentNode).datum();
console.log(parentData)
// const x = xScale(d.data.population_name);
// const y = yScale(d[1]) + gapSize / 2; // Add half of gapSize
// const heightValue = yScale(d[0]) - yScale(d[1]);
// const adjustedGapSize = Math.min(gapSize, heightValue / 2);
// const height = heightValue - adjustedGapSize;
// const width = xScale.bandwidth();
const y = yScale(d.data.population_name);
const x = xScale(d[0]) + gapSize / 2;
const height = yScale.bandwidth();
const widthValue = xScale(d[1]) - xScale(d[0]);
const adjustedGapSize = Math.min(gapSize, widthValue / 2);
const width = widthValue - adjustedGapSize;
// Retrieve the color using the parentData's key
const fillColor = colors(parentData.key);
const node = rc.rectangle(x, y, width, height, {
roughness: roughness,
fill: fillColor,
stroke: fillColor == nonHighlightedColor ? "black" : fillColor,
strokeWidth: strokeWidth,
hachureGap: hachureGap,
hachureAngle: hachureAngle,
fillWeight: fillWeight,
fillStyle: fillStyle,
bowing: bowing,
disableMultiStroke,
disableMultiStrokeFill: true
});
// Insert the rough.js node before the current rect
this.parentNode.insertBefore(node, this);
// Remove the original rect
d3.select(this).remove();
});
return svg.node();
}
{
const stack = d3.stack().keys(categories);
const chartData = stack(dataset);
return chartData;
}
categories = ["prop_comfortable", "prop_okay", "prop_just", "prop_difficult"]
yScale = d3
.scaleBand()
.domain(dataset.map((d) => d.population_name))
.range([0, height])
.padding(0.15)
xScale = d3.scaleLinear().domain([0, 1]).range([0,width])
nonHighlightedColor = "#F2F5F5"
// dataset = FileAttachment("Fake data - Simulated_Data_V1 2023_10_10.csv").csv()
data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.