29:null 2a:["$","title",null,{"children":"Beyond Log Scales: Toward Cognitively Informed Bar Charts for Orders of Magnitude Values | Katerina Batziakoudi's Workspace | Observable"}] 2f:T6cc,In this work, we challenge the dominant use of logarithmic scales to communicate values spanning multiple orders of magnitudes—Orders of Magnitude Values (OMVs)—to the general public. Focusing on bar charts, we incorporate cognitive insights, into visualization design to better align with how humans perceive large value ranges. Studies in cognitive psychology suggest that, for large numerical ranges such as millions and billions, people do not think logarithmically. Instead, they perceive numbers in a piecewise linear manner, grouping values into scale words (e.g., millions) and applying linear reasoning within each group. We build upon a recently introduced piecewise linear scale, EplusM, and validate its use in bar charts, which we refer to as EplusM bar charts. We also introduce two novel variants of the EplusM bar chart informed by findings in numerical perception: Bricks, which builds on the concepts of round numbers and subitizing, and Multi-Magnitude, which leverages categorical perception by encoding scale words using faceting. In a crowdsourced experiment, we evaluate four bar chart designs: 1) Logarithmic, 2) EplusM, 3) Bricks, and 4) Multi-Magnitude, across value retrieval and quantitative comparison tasks. Our results show that EplusM bar charts are significantly preferred over logarithmic designs, increase user confidence, and reduce perceived mental demand, while maintaining task performance. These findings suggest that EplusM bar charts can serve as effective alternatives to logarithmicones when visualizing OMVs for general audiences. A free copy of this paper and all supplemental materials are available at [osf.io/hybvp/](https://osf.io/hybvp/?view_only=5cd17943e9ba46deb66a8f7f4eeeb4da).30:T1847,log_chart = { // Declare the chart dimensions and margins. const width = 700; const height = 700; const marginTop = 10; const marginRight = 70; const marginBottom = 70; const marginLeft = 70; const maxExponent = Math.floor(Math.log10(d3.max(data, d => parseFloat(d.Amount)))); const evenBackgroundColor = "#ffffff"; // Background color for even exponents const oddBackgroundColor = "#f0f0f0"; // Background color for odd exponents const barColor = "rgb(20, 22, 76)" // Custom tick values for the y-axis const logTicks = []; for (let exp = 0; exp <= maxExponent; exp++) { for (let m = 1; m < 10; m++){ logTicks.push(m * Math.pow(10, exp)); } } const scaleY = (value) => { let num, unit; if(value >= 1000 && value <1000000){ num = parseInt(value/1000) unit = "k" } else if (value >= 1000000 && value <1000000000){ num = parseInt(value/1000000) unit = "M" } else if (value >= 1000000000 && value <1000000000000){ num = parseInt(value/1000000000) unit = "B" } else if (value >= 1000000000000 && value <1000000000000000){ num = parseInt(value/1000000000000) unit = "T" } else { num = value; unit = ""; } return num + unit; } const displayTicks = []; for (let exp = 0; exp <= maxExponent; exp++) { displayTicks.push(1 * Math.pow(10, exp)); displayTicks.push(5 * Math.pow(10, exp)); } const strongTicks = []; for (let exp = 0; exp <= maxExponent + 1; exp++) { strongTicks.push(1 * Math.pow(10, exp)); } const lightTicks = []; for (let exp = 0; exp <= maxExponent; exp++) { lightTicks.push(5 * Math.pow(10, exp)); } const horizontalLines = []; for (let exp = 0; exp <= maxExponent; exp++) { horizontalLines.push(5 * Math.pow(10, exp)); } // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain(data.map(d => d.Letter)) .range([marginLeft, width - marginRight]) .padding(0.4); // Declare the y (vertical position) scale. const y = d3.scaleLog() .domain([1, 10**(maxExponent+1)]) .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Remove existing elements to avoid duplication svg.selectAll('*').remove(); // Add background rectangles for each exponent group for (let exp = 0; exp <= maxExponent; exp++) { svg.append("rect") .attr("x", marginLeft) .attr("y", y(10**(exp + 1))) // top of the exponent range .attr("width", width - marginLeft - marginRight) .attr("height", y(10**exp) - y(10**(exp + 1))) // height of the exponent range .attr("fill", exp % 2 === 0 ? evenBackgroundColor : oddBackgroundColor); } // Add horizontal grid lines - thick svg.append("g") .attr("class", "grid-strong") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(strongTicks) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add horizontal grid lines - thin svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(horizontalLines) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add the x-axis and label. const xAxis = svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll(".tick text") .classed("strongText", true) // Strong ticks left. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(strongTicks).tickFormat(d=> scaleY(d)).tickSize(4)) .selectAll(".tick text") .classed("strongText", true) .call(g => g.select(".domain").remove()) // Light ticks left. svg.append("g") .attr("transform",`translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(lightTicks).tickFormat(d=> scaleY(d)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // Strong ticks right. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(strongTicks).tickFormat(d=> scaleY(d)).tickSize(4)) .selectAll(".tick text") .classed("strongText", true) .call(g => g.select(".domain").remove()) // Light ticks right. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(lightTicks).tickFormat(d=> scaleY(d)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // Add a rect for each bar. svg.append("g") .attr("fill", barColor) .selectAll() .data(data) .join("rect") .attr("x", (d) => x(d.Letter)) .attr("y", (d) => y(d.Amount)) .attr("height", (d) => y(1) - y(d.Amount)) .attr("width", x.bandwidth()); svg.append("text") .attr("x", marginLeft) .attr("y", marginTop - 15) .attr("text-anchor", "end") .text("Value") .style("font-size", "14px"); // Ticks without text and left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(logTicks).tickFormat('').tickSize(4)) // Ticks without text and right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(logTicks).tickFormat('').tickSize(4)) // Return the SVG element. return svg.node(); }31:T1572,eplusm = { // Declare the chart dimensions and margins. const width = 700; const height = 700; const marginTop = 10; const marginRight = 70; const marginBottom = 70; const marginLeft = 70; const maxExponent = Math.floor(Math.log10(d3.max(data, d => parseFloat(d.Amount)))); const evenBackgroundColor = "#ffffff"; // Background color for even exponents const oddBackgroundColor = "#f0f0f0"; // Background color for odd exponents const barColor = "rgb(20, 22, 76)" const eplusmTickValues = []; const horizontalLines = []; for(let i=0; i<=maxExponent; i++){ horizontalLines.push(i + 0.45); eplusmTickValues.push(i + 0.45); } // Custom tick values for the y-axis const expTicks = []; for (let exp = 0; exp <= maxExponent + 1; exp++) { expTicks.push(exp); } // Custom tick values for the y-axis const allTicks = []; for (let exp = 0; exp <= maxExponent; exp++) { for (let m = 1; m < 10; m++){ allTicks.push(exp + (m - 1)/(10 - 1)); } } // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain(data.map(d => d.Letter).sort()) .range([marginLeft, width - marginRight]) .padding(0.4); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, maxExponent + 1]) .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Remove existing elements to avoid duplication svg.selectAll('*').remove(); // Add background rectangles for each exponent group for (let exp = 0; exp <= maxExponent; exp++) { svg.append("rect") .attr("x", marginLeft) .attr("y", y(exp + 1)) // top of the exponent range .attr("width", width - marginLeft - marginRight) .attr("height", y(exp) - y(exp + 1)) // height of the exponent range .attr("fill", exp % 2 === 0 ? evenBackgroundColor : oddBackgroundColor); } // Add horizontal grid lines - thin svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(horizontalLines) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add horizontal grid lines - thick svg.append("g") .attr("class", "grid-strong") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(expTicks ) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add a rect for each bar. svg.append("g") .attr("fill", barColor) .selectAll() .data(data) .join("rect") .attr("x", (d) => x(d.Letter)) .attr("y", (d) => y(getExponentPlusMantissa(d["Amount"]))) .attr("height", (d) => y(0) - y(getExponentPlusMantissa(d["Amount"]))) .attr("width", x.bandwidth()); // Add the x-axis and label. const xAxis = svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll(".tick text") .classed("strongText", true) // Strong text left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(expTicks) .tickFormat(d=>scaleExpPlusMant(d)) .tickSize(4)) .selectAll(".tick text") .classed("strongText", true) // Light text left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(eplusmTickValues).tickFormat(d=>scaleExpPlusMant(d)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // Strong text right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y) .tickValues(expTicks) .tickFormat(d=>scaleExpPlusMant(d)) .tickSize(4)) .selectAll(".tick text") .classed("strongText", true) // Light text right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(eplusmTickValues).tickFormat(d=>scaleExpPlusMant(d)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // All ticks left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(allTicks).tickFormat("").tickSize(4)) .call(g => g.select(".domain").remove()) // All ticks right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(allTicks).tickFormat("").tickSize(4)) .call(g => g.select(".domain").remove()) // Add y-axis label svg.append("text") .attr("x", marginLeft) .attr("y", marginTop - 15) .attr("text-anchor", "end") .text("Amount") .attr("font-size", "14px"); // Return the SVG element. return svg.node(); }32:T2006,Bricks = { // Declare the chart dimensions and margins. const width = 700; const height = 700; const marginTop = 10; const marginRight = 70; const marginBottom = 70; const marginLeft = 70; const maxExponent = Math.floor(Math.log10(d3.max(data, d => parseFloat(d.Amount)))); const minExponent = Math.floor(Math.log10(d3.min(data, d => parseFloat(d.Amount)))); const eplusmTickValues = []; const horizontalLines = []; const evenBackgroundColor = "#ffffff"; // Background color for even exponents const oddBackgroundColor = "#f0f0f0"; // Background color for odd exponents const barColor = "rgb(20, 22, 76)" const missingUnitColor = "rgb(200, 200, 211)" for(let i=0; i<=maxExponent; i++){ eplusmTickValues.push(i + 0.45); } const numberOfTicksInFacet = 9; const facetHeight = (height - marginTop - marginBottom)/(maxExponent + 1); const unitSpace = facetHeight / numberOfTicksInFacet; const spaceBetweenUnits = 3; // necessary to have visual space between the units let unitHeight; if(unitSpace <= 2){ unitHeight = 0; console.log("Not sufficient size display") } else { unitHeight = unitSpace - spaceBetweenUnits; } // Custom tick values for the y-axis const expTicks = []; for (let exp = 0; exp <= maxExponent + 1; exp++) { expTicks.push(exp); } // Custom tick values for the y-axis //const allTicks = getAllTicks(10); const allTicks = []; for (let exp = 0; exp <= maxExponent; exp++) { for (let m = 1; m < 10; m++){ allTicks.push(exp + (m - 1)/(10 - 1)); } } // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain(data.map(d => d.Letter).sort()) .range([marginLeft, width - marginRight]) .padding(0.4); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, maxExponent + 1]) .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add background rectangles for each exponent group for (let exp = 0; exp <= maxExponent; exp++) { svg.append("rect") .attr("x", marginLeft) .attr("y", y(exp + 1)) // top of the exponent range .attr("width", width - marginLeft - marginRight) .attr("height", y(exp) - y(exp + 1)) // height of the exponent range .attr("fill", exp % 2 === 0 ? evenBackgroundColor : oddBackgroundColor); } // Add horizontal grid lines - thin svg.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(eplusmTickValues) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add horizontal grid lines - thick svg.append("g") .attr("class", "grid-strong") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(expTicks) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add a rect for each bar. svg.append("g") .attr("fill", barColor) .selectAll() .data(data) .join("rect") .attr("x", (d) => x(d.Letter)) .attr("y", (d) => y(getExponent(d["Amount"], 10)) + unitHeight) .attr("height", (d) => y(0) - y(getExponent(d["Amount"], 10)) - unitHeight) .attr("width", x.bandwidth()); // Create background for units svg.selectAll(".unit-bar-background") .data(data) .enter() .append("g") .attr("class", "unit-bar-background") .attr("transform", (d, i) => `translate(${x(d.Letter)}, 0)`) .each(function (d, i) { const barGroup = d3.select(this); // Call the createWaffleChart function to create the waffle chart const totalUnits = 10; let expPos = getExponent(d["Amount"], 10); let mantissaUnits = round(getMantissa(d["Amount"], 10)); if(mantissaUnits > 9) { //if by rounding we reach the next exponent go to the next one //expPos = getExponent(d["Amount"], 10) + 1; } createUnits(totalUnits, x(d.Letter), y(expPos), missingUnitColor); }); // Create unit bar charts svg.selectAll(".unit-bar") .data(data) .enter() .append("g") .attr("class", "unit-bar") .attr("transform", (d, i) => `translate(${x(d.Letter)}, 0)`) .each(function (d, i) { const unitBarGroup = d3.select(this); // Call the createWaffleChart function to create the waffle chart let numUnits = round(getMantissa(d["Amount"], 10)); //num units equal to mantissa units let expPos = getExponent(d["Amount"], 10); if(numUnits > 9) { //if by rounding we reach the next exponent go to the next one expPos = getExponent(d["Amount"], 10) + 1; numUnits = 1; } createUnits(numUnits, x(d.Letter), y(expPos), barColor); }); // Define a function to create the waffle chart within each bar function createUnits(numberOfDataPoints, xPos, yPos, color) { console.log(numberOfDataPoints) // Define the waffle chart dimensions and parameters (as in your previous waffle chart) const data = new Array(numberOfDataPoints).fill(0); const columns = 1; //const rows = Math.ceil(numberOfDataPoints / columns); // Create the waffle chart within the same SVG const waffleChartGroup = svg.append("g") .attr("transform", `translate(${xPos}, 0)`); // Generate the waffle chart by creating individual squares waffleChartGroup.selectAll(".square") .data(data) .enter() .append("rect") .attr("class", "square") .attr("width", x.bandwidth()) .attr("height", unitHeight) .attr("x", (d, i) => (i % columns) * unitHeight) .attr("y", (d, i) => unitHeight + yPos - (i + 1) * (unitHeight + spaceBetweenUnits) + (spaceBetweenUnits/2)) // Calculate from bottom to top .style("fill", color); } // Add the x-axis and label. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll(".tick text") .classed("strongText", true); // Strong text left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(expTicks) .tickFormat(d=>scaleExpPlusMant(d, 10)) .tickSize(4)) .selectAll(".tick text") .classed("strongText", true) // Light text left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(eplusmTickValues).tickFormat(d=>scaleExpPlusMant(d, 10)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // All ticks left axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(allTicks).tickFormat("").tickSize(4)) .call(g => g.select(".domain").remove()) // Strong text right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y) .tickValues(expTicks) .tickFormat(d=>scaleExpPlusMant(d, 10)) .tickSize(4)) .selectAll(".tick text") .classed("strongText", true) // Light text right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(eplusmTickValues).tickFormat(d=>scaleExpPlusMant(d, 10)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // All ticks right axis. svg.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(allTicks).tickFormat("").tickSize(4)) .call(g => g.select(".domain").remove()) // Return the SVG element. return svg.node(); }33:T24de,magnitudeCategories = { // Declare the chart dimensions and margins. const interFontLink = document.createElement("link"); interFontLink.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"; interFontLink.rel = "stylesheet"; document.head.appendChild(interFontLink); const width = 700; const height = 700; const marginTop = 10; const marginRight = 70; const marginBottom = 70; const marginLeft = 100; const maxExponent = Math.floor(Math.log10(d3.max(data, d => parseFloat(d.Amount)))); const minExponent = Math.floor(Math.log10(d3.min(data, d => parseFloat(d.Amount)))); const horizontalLines = []; const evenBackgroundColor = "#ffffff"; // Background color for even exponents const oddBackgroundColor = "#f0f0f0"; // Background color for odd exponents const barColor = "rgb(20, 22, 76)" const lightTicks = [0.4444444444444, 1.4444444444444, 2.4444444444444]; const numberOfTicksInFacet = 9; // Custom tick values for the y-axis const expTicks = []; for (let exp = 0; exp <= maxExponent + 1; exp++) { expTicks.push(exp); } // Group data by magnitude category const dataByCategory = d3.group(data, d => getMagnitudeCategory(d["Amount"])); // Convert the grouped data to an array and sort by numerical magnitude const sortedDataByCategory = Array.from(dataByCategory.entries()) .sort((a, b) => d3.ascending(parseFloat(a[0]), parseFloat(b[0]))); // Assuming categories are numeric or parsable // Convert back to a Map if needed const sortedMap = new Map(sortedDataByCategory); // Calculate total category facets const categoriesCount = dataByCategory.size; const categoriesPadding = 4; // Define padding between facets // Calculate facet categories height based on the number of facets and padding const categoriesHeight = (height - marginTop - marginBottom - (categoriesCount - 1) * categoriesPadding) / categoriesCount; const facetHeight = categoriesHeight/3; // three exponents per category const unitSpace = facetHeight / numberOfTicksInFacet; const spaceBetweenUnits = 3; // necessary to have visual space between the units let unitHeight; if(unitSpace <= 2){ unitHeight = 0; console.log("Not sufficient size display") } else { unitHeight = unitSpace - spaceBetweenUnits; } // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain(data.map(d => d.Letter).sort()) .range([marginLeft, width - marginRight]) .padding(0.4); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // Add the x-axis and label. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .selectAll(".tick text") .classed("strongText", true); const allTicks = []; for (let exp = 0; exp <3; exp++) { for (let m = 1; m < 10; m++){ allTicks.push(exp + (m - 1)/(10 - 1)); } } for (let exp = 0; exp<3; exp++) { for (let m = 5; m < 10; m+=5){ horizontalLines.push(exp + (m - 1)/(10 - 1)); } } Array.from(sortedMap.entries()).reverse().forEach(([category, group], index) => { // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, 3]) // 3 exponents for each category .range([categoriesHeight, 0]); const g = svg.append("g") .attr("transform", `translate(0,${marginTop + index * (categoriesHeight + categoriesPadding)})`); // Add a background rectangle for each facet g.append("rect") .attr("transform", `translate(${marginLeft},0)`) .attr("width", width - marginLeft - marginRight) .attr("height", categoriesHeight) .attr("fill", '#fff') g.append("text") .attr("x", -categoriesHeight / 2) // Center vertically (adjust as needed) .attr("y", 40) // Position towards the left .attr("transform", "rotate(-90)") // Rotate counterclockwise .attr("text-anchor", "middle") // Center the text .style("font-family", "Inter, sans-serif") .style("font-size", "18px") .style("color", barColor) .text(getCategoryText(category)); // Add a vertical line next to the text g.append("line") .attr("x1", 40 + 9) // Adjust to be right after the text .attr("x2", 40 + 9) // Same x-coordinate (vertical line) .attr("y1", 0) // Start at the top .attr("y2", categoriesHeight) // Extend to the bottom .attr("stroke", barColor) // Line color .attr("stroke-width", 2); // Add different background rectangle for mid exponent g.append("rect") .attr("x", marginLeft) .attr("y", categoriesHeight - (facetHeight * 2)) .attr("width", width - marginLeft - marginRight) .attr("height", facetHeight) .attr("fill", oddBackgroundColor); // Add stroke g.append("rect") .attr("transform", `translate(${marginLeft},0)`) .attr("width", width - marginLeft - marginRight) .attr("height", categoriesHeight) .attr("fill", 'none') .attr("stroke", 'black') .attr("stroke-width", 1); // Add horizontal grid lines - thick g.append("g") .attr("class", "grid-strong") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues([1, 2]) .tickSize(-width + marginLeft + marginRight) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Add horizontal grid lines - thin g.append("g") .attr("class", "grid") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues(horizontalLines) .tickSize(-(width - marginLeft - marginRight)) .tickFormat('') ).call(g => g.select(".domain").remove()); // This line removes the vertical domain line of the grid // Strong text left axis. g.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y) .tickValues([1, 2, 3]) .tickFormat(d=> categoricalMagnitudeFacetScale(d, category)) .tickSize(4)) .selectAll(".tick text") .classed("strongText", true) // Light text left axis. g.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(lightTicks).tickFormat(d=> categoricalMagnitudeFacetScale(d, category)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) // Strong text right axis. g.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y) .tickValues([1, 2, 3]) .tickFormat(d=> categoricalMagnitudeFacetScale(d, category)) .tickSize(4)) .selectAll(".tick text") .classed("strongText", true) // Light text right axis. g.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(lightTicks).tickFormat(d=> categoricalMagnitudeFacetScale(d, category)).tickSize(4)) .selectAll(".tick text") .classed("lightText", true) .call(g => g.select(".domain").remove()) g.selectAll(".bar") .data(group) .enter() .append("rect") .attr("x", (d) => x(d.Letter)) .attr("y", (d) => y(getExponentPlusMantissa(d["Amount"], 10) - category)) .attr("height", (d) => (y(0) + 4) - y(getExponentPlusMantissa(d["Amount"], 10) - category)) // we add + 2 to not have invisible bars .attr("width", x.bandwidth()) .attr("fill", "#14164C"); // All ticks left axis. g.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickValues(allTicks).tickFormat("").tickSize(4)) .call(g => g.select(".domain").remove()) g.append("g") .attr("transform", `translate(${width - marginRight},0)`) .call(d3.axisRight(y).tickValues(allTicks).tickFormat("").tickSize(4)) .call(g => g.select(".domain").remove()) }) // Add dashed vertical lines svg.append("g") .attr("class", "dashed-lines") .selectAll("line") .data(data) .enter().append("line") .attr("class", "dashed-line") .attr("x1", d => x(d.Letter) + x.bandwidth() / 2) .attr("y1", height - marginBottom) .attr("x2", d => x(d.Letter) + x.bandwidth() / 2) .attr("y2", d => (facetRow(d.Amount)*(categoriesHeight + categoriesPadding)) + marginTop - categoriesPadding); // Return the SVG element. return svg.node(); }34:[{"id":"5d687920a391622d8712a0ae7934ef5735606e070554980db0ed39a50328773c6a434271243f723c4070200bc7dc82b4931af9c08416694484a4339dfb9bbbd3","href":"https://static.observableusercontent.com/files/5d687920a391622d8712a0ae7934ef5735606e070554980db0ed39a50328773c6a434271243f723c4070200bc7dc82b4931af9c08416694484a4339dfb9bbbd3","name":"omvs-sample.csv","type":"text/csv","lastModified":1743942691089.86,"size":93}] 2d:{"id":"7009713cb399741c","slug":null,"title":"Beyond Log Scales: Toward Cognitively Informed Bar Charts for Orders of Magnitude Values","thumbnail":"71576647afd5c2cadda114bde2dbb0db28d72ff0f342f62da3f69da49e4d8d3a","access_level":"public","create_time":"$D2025-04-04T15:10:32.366Z","update_time":"$D2025-09-04T09:02:58.560Z","view_time":null,"first_public_time":"$D2025-04-06T13:31:52.956Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"6b91409cdb9bc815","login":"katerina-batziakoudi-ws","name":"Katerina Batziakoudi's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dd86d330366b99bd1164a74b27acf65f3bc030311937a754416a2458ffad43b0","tier":"starter_2024"},"version":132,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"73a185e2dd5d4521","login":"katerina-batziakoudi","name":"Katerina Batziakoudi","avatar_url":"https://avatars-next.observableusercontent.com/759c553ce646146899855114e729e08f00a82a94c180f7c0c02b4de2152dab1e","tier":null},{"type":"individual","id":"c81bbdf5725210b8","login":"jdfekete","name":"Jean-Daniel Fekete","avatar_url":"https://avatars-next.observableusercontent.com/33253e5686ae4e81d36717d106cb6e2473c8c19ed92ba27c53533ddb6d58d99e","tier":null}],"members":[{"type":"individual","id":"73a185e2dd5d4521","login":"katerina-batziakoudi","name":"Katerina Batziakoudi","avatar_url":"https://avatars-next.observableusercontent.com/759c553ce646146899855114e729e08f00a82a94c180f7c0c02b4de2152dab1e","tier":null,"role":"editor"},{"type":"team","id":"6b91409cdb9bc815","login":"katerina-batziakoudi-ws","name":"Katerina Batziakoudi's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/dd86d330366b99bd1164a74b27acf65f3bc030311937a754416a2458ffad43b0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Beyond Log Scales: Toward Cognitively Informed Bar Charts for Orders of Magnitude Values","cells":[{"id":0,"value":"# Beyond Log Scales: Toward Cognitively Informed Bar Charts for Orders of Magnitude Values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"### Abstract","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":14,"value":"## Implementation of Visualization Designs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":22,"value":"data = FileAttachment(\"omvs-sample.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"omvsSample = await FileAttachment(\"omvs-sample.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"### Logarithmic Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"### EplusM Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":59,"value":"The EplusM bar chart employs the EplusM scale [(Batziakoudi et al., 2025)](https://inria.hal.science/hal-04981028v1/file/CHI2025_OMVs.pdf) for positional encoding along the y-axis. The major ticks represent the exponent values, while the minor ticks correspond to the mantissa values. To reinforce the piece-wise linear structure of the scale, we use thick black horizontal lines to separate the axis by exponent. In addition, we mark the midpoint value—computed as 5 multiplied by the corresponding exponent—with a tick and a thin gray horizontal line. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"### Bricks Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"Bricks is a unit-based variation of the EplusM bar chart. In this design, the mantissa is divided into discrete, rounded units that are evenly spaced within the exponent segment, redundantly encoding the linear part of the scale. The design is inspired by two key numerical cognition concepts: **round numbers** [(Nguyen et al., 2022)](https://dl.acm.org/doi/10.1145/3491102.3501852) and **subitizing** [(Leibovich et al., 2016)](https://www.cambridge.org/core/journals/behavioral-and-brain-sciences/article/from-sense-of-number-to-sense-of-magnitude-the-role-of-continuous-magnitudes-in-numerical-cognition/460747F80685E25CC7256D83AD149718).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":51,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"### Multi-Magnitude Bar Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":73,"value":"Multi-Magnitude is a variation of the EplusM Bar Chart. In this design, scale words (e.g., millions, billions) are categorically encoded using faceting (row), and inside each facet, the EplusM scale is used for the positional encoding of the y-axis. The design is inspired by find-ings in numerical cognition ([Resnick et al., 2016](https://onlinelibrary.wiley.com/doi/10.1111/cogs.12388), [Landy et al., 2016](https://onlinelibrary.wiley.com/doi/10.1111/cogs.12342)) highlighting the importance of magnitude-based categories to support the estimation of large numbers, rooted to the **category adjustment model** [(Huttenlocher et al., 1991)](https://psycnet.apa.org/doiLanding?doi=10.1037%2F0033-295X.98.3.352).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":75,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"getCategory = (category) => {\n if(category == 3){\n return \"k\"\n } else if (category == 6){\n return \"M\"\n } else if (category == 9){\n return \"B\"\n } else if (category == 12){\n return \"T\"\n } else {\n return \"\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"categoricalMagnitudeFacetScale = (d, category) => {\n let num; \n const base = 10;\n const exp = Math.trunc(d);\n \n if(d - exp == 0){\n if(exp % 3 == 0) {\n return base**(exp - 3) + getCategory(category + 3);\n } else {\n return base**exp + getCategory(category);\n }\n } else {\n const mant = (base - 1) * (d - exp) + 1;\n const value = Math.round(mant*base**(exp) * 100) / 100; // correcting for rounding errors\n return value + getCategory(category);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"categoricalMagnitudeScale = (d, category) => {\n let num; \n const base = 10;\n const exp = Math.trunc(d);\n \n if(d - exp == 0){\n return base**exp + getCategory(category);\n } else {\n const mant = (base - 1) * (d - exp) + 1;\n const value = Math.round(mant*base**(exp) * 100) / 100; // correcting for rounding errors\n return value + getCategory(category);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":82,"value":"getCategoryText = (category) => {\n if(category == 3){\n return \"THOUSANDS\"\n } else if (category == 6){\n return \"MILLIONS\"\n } else if (category == 9){\n return \"BILLIONS\"\n } else if (category == 12){\n return \"TRILLIONS\"\n } else {\n return \"\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"getMagnitudeCategory = (number) => {\n var unit;\n if(number < 1000){\n unit = 1\n } else if(number >= 1000 && number <1000000){\n unit = 3\n } else if (number >= 1000000 && number <1000000000){\n unit = 6\n } else if (number >= 1000000000 && number <1000000000000){\n unit = 9\n } else if (number >= 1000000000000 && number <10000000000000000){\n unit = 12\n } else {\n unit = 15; // just a very big category, adjust if you have values larger than 999 Trillions\n }\n return unit;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"facetRow = (number) => {\n if(number < 1000){\n return 0;\n } else if(number >= 1000 && number <1000000){\n return 3;\n } else if (number >= 1000000 && number <1000000000){\n return 2;\n } else if (number >= 1000000000 && number <1000000000000){\n return 1;\n } else {\n return 0;\n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"round = (number) => {\n const fractionalPart = number % 1; // Get the fractional part of the number\n \n if (fractionalPart > 0.5) {\n return Math.ceil(number); // Round up\n } else {\n return Math.floor(number); // Round down\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"getMantissa = (value) => {\n // To calculate the base-1000 logarithm using Math.log(value), \n // you would need to adjust the formula to convert from the natural logarithm to the base-1000 logarithm.\n const base = 10;\n const baseLog = Math.log(value) / Math.log(base);\n return value / (base ** Math.floor(baseLog));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"getExponent = (value) => {\n // To calculate the base-1000 logarithm using Math.log(value), \n // you would need to adjust the formula to convert from the natural logarithm to the base-1000 logarithm.\n const base = 10;\n const baseLog = Math.log(value) / Math.log(base);\n return Math.trunc(baseLog);\n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"scaleExpPlusMant = (v) => {\n const base = 10;\n const exp = Math.trunc(v);\n const mant = (base/(base - 1) * (v - exp));\n const scale = (mant != 0) ? mant * base ** (exp + 1) : base ** exp;\n const value = Math.round(scale * 100) / 100; // correcting for rounding errors\n let num, unit;\n if(value >= 1000 && value <1000000){\n num = parseInt(value/1000)\n unit = \"k\"\n } else if (value >= 1000000 && value <1000000000){\n num = parseInt(value/1000000)\n unit = \"M\"\n } else if (value >= 1000000000 && value <1000000000000){\n num = parseInt(value/1000000000)\n unit = \"B\"\n } else if (value >= 1000000000000 && value <10000000000000000){\n num = parseInt(value/1000000000000)\n unit = \"T\"\n } else {\n num = value;\n unit = \"\";\n }\n return num + unit;\n } ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"getExponentPlusMantissa = (value) => {\n const base = 10;\n const exp = getExponent(value);\n const mant = getMantissa(value);\n return exp + (mant - 1)/(base - 1);\n }\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"html`\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"