2f:T3367,function likertscales() { const numCols = dimensions.numCols //enable tooltips as seen in https://observablehq.com/@clhenrick/tooltip-component const container = html``; const rowScale = d3.scaleBand() .domain(d3.range(sub_data.length)) .range([0, dimensions.visHeight]) .padding(0.05) // create scales for each likert chart const y = d3.scaleLinear() .domain([0,1]) .range([(rowScale.bandwidth()+dimensions.margins.top)/2, rowScale.bandwidth()-dimensions.margins.top]); const y2 = d3.scaleLinear() .domain([0,1]) .range([(rowScale.bandwidth()+dimensions.margins.top)/2, dimensions.margins.top*2]); const x = d3.scaleLinear() .domain([0, maximum_X_axis]) .range([dimensions.margins.left, colScale.bandwidth()-dimensions.margins.right]); // create axes for the likerts const xAxis1 = d3.axisTop(x).ticks(maximum_X_axis/dimensions.thickTicksforEvery_x_Entries); //this gets us our bold ticks const xAxis2 = d3.axisTop(x).ticks(maximum_X_axis/dimensions.thinTicksforEvery_x_Entries).tickFormat("").tickSize(0); //this gets us our thin ticks const yAxis = d3.axisLeft(y); // create the svg const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${dimensions.visWidth} ${dimensions.visHeight + dimensions.margins.top + dimensions.margins.bottom}`); //enable tooltips as seen in https://observablehq.com/@clhenrick/tooltip-component const div = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(div); function tooltipContents(datum) { const unit = (datum[1] == 1 ? design.xAxisUnit.slice(0,design.xAxisUnit.length-1) : design.xAxisUnit) return `${datum[0]}: ${datum[1] + " " + unit} `; } const defs = html`