chart = {
const svg = d3
.create("svg")
.attr("width", chart_width)
.attr("height", chart_height)
.attr("viewBox", [0, 0, chart_width, chart_height+20]);
// Adding our axes
svg
.append("g")
.attr(
"transform",
`translate(2,${chart_height+2})`
)
.call(d3.axisBottom(x));
svg
.append("g")
.attr("transform", `translate(${margin.left},0)`)
.attr("class", "y-axis")
.call(d3.axisLeft(y));
// Legend as a group
const legend = svg.append("g")
// Apply a translation to the entire group
.attr("transform", `translate(${chart_width/2}, -2)`)
const size = 16;
const border_padding = 0;
const item_padding = 5;
const text_offset = 2;
svg
.selectAll(".rect")
.data(data)
.enter()
.append("rect")
.attr("x", margin.left)
.attr("y", (d) => y(d.survey_question) + y_group(d.category))
.attr("width", (d) => x(+d.value) - margin.left)
.attr("height", y.bandwidth() / 2)
.attr("fill", (d) => fill_scale(d.category))
.style("opacity", function(d){
console.log(d);
if(+d.value > .87 ){
return 0.85;
}
else{
return 0.85;
}
})
;
// Boxes
legend
.selectAll("boxes")
.data(domains)
.enter()
.append("rect")
.attr("x", border_padding)
.attr("y", (d, i) => border_padding + (i * (size + item_padding)))
.attr("width", size)
.attr("height", size)
.style("fill", (d) => colorScale(d));
// Labels
legend
.selectAll("labels")
.data(domains)
.enter()
.append("text")
.attr("x", border_padding + size + item_padding)
.attr("y", (d, i) => border_padding + i * (size + item_padding) + (size / 2) + text_offset)
// .style("fill", (d) => colorScale(d))
.text((d) => d)
.attr("text-anchor", "left")
.style("alignment-baseline", "middle")
.style("font-family", "sans-serif");
return svg.node();
}
wrap = d3_textwrap.textwrap().bounds({height:45, width:translate_box_width})
function textWrap(){
d3.selectAll(".y-axis text").call(wrap)
d3.selectAll(".y-axis foreignObject").style("transform", "translate(-"+translate_box_width+"px, -15.5px)") //removing the x will make it x and y.
//make y bound a variable
}
"translate(-"+translate_box_width+"px, -35.5px)" //testing
textWrap()
x(+"0")
translate_box_width = 130
chart_width = 750
chart_height = 625
margin = ({ left: 200, top: 30, right: 10, bottom: 10})
fill_scale = d3
.scaleOrdinal()
.domain(new Set(data.map((d) => d.category)))
.range(["#E74F2A", "#259299", "#48336A"])
domains = ["Less than $75,000", "$75,000 or more"];
palette = ["#E74F2A", "#259299"];
colorScale = d3
.scaleOrdinal(palette)
.domain(domains)
//.range();
y = d3
.scaleBand()
.domain(new Set(data.map((d) => d.survey_question)))
.range([margin.top, chart_height - margin.bottom])
.paddingOuter(0.2)
.paddingInner(0.2)
y_group = d3
.scaleBand()
.domain(new Set(data.map((d) => d.category)))
.range([0, y.bandwidth()])
x = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => +d.value)])
.range([margin.left, chart_width - margin.right])
xAxis = (g) =>
g
.attr(
"transform",
`translate(0,${chart_height - (margin.bottom) - margin.height})`
)
.call(d3.axisBottom(x))
yAxis = (g) => g.call(d3.axisLeft(y))
data_raw = FileAttachment("test_internet_confidence_data_for_grouped_bar.csv").csv()
data = data_raw.sort((a, b) => d3.descending(+a.value, +b.value))
d3_textwrap = require("d3-textwrap")
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.
