Racquel is pursuing a career in Data Science & Information Visualization. She is a PhD student at Northeastern University.
Public
Edited
Nov 2, 2022
1 fork
v1_ci_obv.filter(d => d.question == "stack_wzy_pr_1" && d.chart=="a" && d.obviousness == "Very obvious")
chart_bar(v2_ci_input.filter(d => d.question == "stack_wzy_pr_2"), questions_stack["stack_wzy_pr_2"], images_stack, v2_ci_obv.filter(d => d.question == "stack_wzy_pr_2"))
chart_bar(v1_ci_input.filter(d => d.question == "stack_yew_pr_1"), questions_stack["stack_yew_pr_1"], images_stack, v1_ci_obv.filter(d => d.question == "stack_yew_pr_1"))
chart_bar(v2_ci_input.filter(d => d.question == "stack_yew_pr_2"), questions_stack["stack_yew_pr_2"], images_stack, v2_ci_obv.filter(d => d.question == "stack_yew_pr_2"))
chart_bar(v1_ci_input.filter(d => d.question == "stack_yew_mo_1"), questions_stack["stack_yew_mo_1"], images_stack, v1_ci_obv.filter(d => d.question == "stack_yew_mo_1"))
chart_bar(v2_ci_input.filter(d => d.question == "stack_yew_mo_2"), questions_stack["stack_yew_mo_2"], images_stack, v2_ci_obv.filter(d => d.question == "stack_yew_mo_2"))
chart_bar(v1_ci_input.filter(d => d.question == "stack_z_mo_1"), questions_stack["stack_z_mo_1"], images_stack, v1_ci_obv.filter(d => d.question == "stack_z_mo_1"))
v1_ci_obv.filter(d => d.question == "stack_z_mo_1")
function help_sort(chart, obvi, ci_obv){
return ci_obv.filter(d => d.chart == chart && d.obviousness == obvi)[0]
}
help_sort("a", "Not obvious", v1_ci_obv.filter(d => d.question == "stack_z_mo_1"))
function chart_bar(ci_input, title, imgs, ci_obv){
const svg = d3.create("svg").attr("width", width).attr("height", height).attr("stroke-width", 3);
var x2shift = 2*width/5
var xScaler = xScale
var yScaler = yScale
var obv_arr = ["Not obvious", "Slightly obvious", "Moderately obvious", "Obvious", "Very obvious"]
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 xAxis2 = svg
.append("g")
.attr("transform", `translate(${x2shift}, ${yScaler(0)})`)
.attr("stroke-width", 2)
.call(d3.axisBottom(xScaler));
var y_thick = 1.5
var start_stack = height - margin.bottom - 50
var space = 105
var rect_thick = 3
var height_grey=85
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", height_grey)
.attr("width", width - margin.left-margin.right)
.attr("fill", "#F9F9F9")
svg.append("rect")
.attr("x", margin.left+150)
.attr("y", start_stack - 35 - space*i)
.attr("height", height_grey)
.attr("width", width/3 +3)
.attr("fill", "#F4F4F4")
svg.append("rect")
.attr("x", width/2+75)
.attr("y", start_stack - 35 - space*i)
.attr("height", height_grey)
.attr("width", width/3 +3)
.attr("fill", "#F4F4F4")
svg.append("image")
.attr("y", start_stack - rect_thick/2 - space*i-30)
.attr("x", margin.left*1.3)
.attr("height",75)
.attr("xlink:href", imgs["img_"+ci_input[i].chart])
// ---------
svg.append("circle")
.attr("cx", xScaler(ci_input[i].mean))
.attr("cy", start_stack - space*i +10)
.attr("r", 7)
.attr("fill", color[ci_input[i].chart])
svg.append("rect")
.attr("x", xScaler(ci_input[i].low68))
.attr("y", start_stack - space*i +10 - rect_thick/2)
.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 - space*i +10 - rect_thick/2)
.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("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")
var obv_shift = 14
for(var i = 0; i < ci_input.length; i++){
for(var j = 0; j < obv_arr.length; j++){
var p = ci_obv.filter(d => d.chart == ci_input[i].chart && d.obviousness == obv_arr[j])[0].p
var high95 = ci_obv.filter(d => d.chart == ci_input[i].chart && d.obviousness == obv_arr[j])[0].high95
var low95 = ci_obv.filter(d => d.chart == ci_input[i].chart && d.obviousness == obv_arr[j])[0].low95
var high68 = ci_obv.filter(d => d.chart == ci_input[i].chart && d.obviousness == obv_arr[j])[0].high68
var low68 = ci_obv.filter(d => d.chart == ci_input[i].chart && d.obviousness == obv_arr[j])[0].low68
if(low68 < 0){
low68 = 0
}
if(low95 < 0){
low95 = 0
}
svg.append("text")
.attr("x", xScaler(30)+x2shift+10)
.attr("y", start_stack + height_grey/2 - space*i - obv_shift*j)
.attr("fill", color_obv[obv_arr[j]])
.text(obv_arr[j])
.attr("font-family", "sans-serif")
.attr("font-size", "0.65em")
.attr("font-style", "italic")
svg.append("circle")
.attr("cx", xScaler(p)+x2shift)
.attr("cy", start_stack + height_grey/2 -2 - space*i - obv_shift*j)
.attr("r", 4)
.attr("fill", color_obv[obv_arr[j]])
svg.append("rect")
.attr("x", xScaler(low68)+x2shift)
.attr("y", start_stack + height_grey/2 - rect_thick*1.3 - space*i - obv_shift*j)
.attr("height", rect_thick*1.3)
.attr("width", xScaler(high68) - xScaler(low68))
.attr("fill", color_obv[obv_arr[j]])
svg.append("rect")
.attr("x", xScaler(low95)+x2shift)
.attr("y", start_stack + height_grey/2 - rect_thick - space*i - obv_shift*j)
.attr("height", rect_thick*0.7)
.attr("width", xScaler(high95) - xScaler(low95))
.attr("fill", color_obv[obv_arr[j]])
}
// ---------
//
// 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])
// ---------
}
return svg.node();
}
width/2
xScale(0.7)
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.