Racquel is pursuing a career in Data Science & Information Visualization. She is a PhD student at Northeastern University.
chart_bar(stack_ci.filter(d => d.question == "stack_ewclip_mo2"), questions_stack["stack_ewclip_mo2"], images_stack)
chart_bar(stack_ci.filter(d => d.question == "stack_prc_eclip2"), questions_stack["stack_prc_eclip2"], images_stack)
chart_bar(stack_ci.filter(d => d.question == "stack_prc_eclip1"), questions_stack["stack_prc_eclip1"], images_stack)
chart_bar(stack_ci.filter(d => d.question == "stack_pens_less"), questions_stack["stack_pens_less"], images_stack)
chart_bar(stack_ci.filter(d => d.question == "stack_ew_less"), questions_stack["stack_ew_less"], images_stack)
chart_bar(stack_ci.filter(d => d.question == "stack_w_clip_mo"), questions_stack["stack_w_clip_mo"], images_stack)
stack_ci.filter(d => d.question == "stack_w_clip_mo")
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
stack_ci.filter(d => d.question == "stack_prc_w_pen")
function help_sort(chart, obvi, ci_obv){
return ci_obv.filter(d => d.chart == chart && d.obviousness == obvi)[0]
}
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();
}
width/2
xScale(0.7)
stacking_r3_nohigherror = FileAttachment("no_high_error-data.csv").csv()
images_stack["img_a"]
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.