Public
Edited
Feb 6, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_ewclip_mo2"), questions_stack["stack_ewclip_mo2"], images_stack)
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_prc_eclip2"), questions_stack["stack_prc_eclip2"], images_stack)
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_prc_eclip1"), questions_stack["stack_prc_eclip1"], images_stack)
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_pens_less"), questions_stack["stack_pens_less"], images_stack)
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_ew_less"), questions_stack["stack_ew_less"], images_stack)
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_w_clip_mo"), questions_stack["stack_w_clip_mo"], images_stack)
Insert cell
stack_ci.filter(d => d.question == "stack_w_clip_mo")
Insert cell
chart_bar(stack_ci.filter(d => d.question == "stack_prc_w_pen"), questions_stack["stack_prc_w_pen"], images_stack)
// p=90% of all pens are sold in the west
Insert cell
stack_ci.filter(d => d.question == "stack_prc_w_pen")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function help_sort(chart, obvi, ci_obv){
return ci_obv.filter(d => d.chart == chart && d.obviousness == obvi)[0]
}
Insert cell
function chart_bar(ci_input, title, imgs){
const svg = d3.create("svg").attr("width", width).attr("height", height).attr("stroke-width", 3);


var xScaler = xScale
var yScaler = yScale
svg.append("rect")
.attr('x', 0)
.attr('y', 0)
.attr('height', height)
.attr('width', width)
.attr("fill", "white")

const xAxis = svg
.append("g")
.attr("transform", `translate(0, ${yScaler(0)})`)
.attr("stroke-width", 2)
.call(d3.axisBottom(xScaler));

// const yAxis = svg
// .append("g")
// .attr("transform", `translate(${xScale(0)}, 0)`)
// .attr("stroke-width", 2)
// .call(d3.axisLeft(yScale));

var y_thick = 1.5
var start_stack = height - margin.bottom - 30
var space = 70

var rect_thick = 3


for(var i = 0; i < ci_input.length; i++){

svg.append("rect")
.attr("x", margin.left)
.attr("y", start_stack - 35 - space*i)
.attr("height", 65)
.attr("width", width - margin.left-margin.right)
.attr("fill", "#F5F5F5")



svg.append("circle")
.attr("cx", xScaler(ci_input[i].mean))
.attr("cy", start_stack - rect_thick - space*i)
.attr("r", 7)
.attr("fill", color[ci_input[i].chart])

svg.append("rect")
.attr("x", xScaler(ci_input[i].low68))
.attr("y", start_stack - rect_thick*2 - space*i)
.attr("height", rect_thick*2)
.attr("width", xScaler(ci_input[i].high68) - xScaler(ci_input[i].low68))
.attr("fill", color[ci_input[i].chart])

svg.append("rect")
.attr("x", xScaler(ci_input[i].low95))
.attr("y", start_stack - rect_thick*1.5 - space*i)
.attr("height", rect_thick)
.attr("width", xScaler(ci_input[i].high95) - xScaler(ci_input[i].low95))
.attr("fill", color[ci_input[i].chart])

svg.append("text")
.attr("x", xScaler(ci_input[i].mean))
.attr("y", start_stack - rect_thick*1.5 - space*i - 8)
.text(ci_input[i].chart)
.attr("text-anchor", "middle")
.attr("fill", "dark-gray")
.attr("font-family", "sans-serif")
.attr("font-size", "0.75em")
.attr("font-style", "italic")

svg.append("img")
.attr("y", start_stack - rect_thick/2 - space*i-30)
.attr("x", margin.left*2)
.attr("height",55)
// .attr("width", 10)
.attr("xlink:href", imgs["img_"+ci_input[i].chart])

}

svg.append("text")
.attr("x", width/2)
.attr("y", height - margin.bottom/3)
.text(title)
.attr("text-anchor", "middle")
.attr("fill", "dark-gray")
.attr("font-family", "sans-serif")
.attr("font-size", "1em")

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
width/2
Insert cell
xScale(0.7)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
stacking_r3_nohigherror = FileAttachment("no_high_error-data.csv").csv()
Insert cell
Insert cell
images_stack["img_a"]
Insert cell

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.
Learn more